diff --git a/_sass/_wallets-menu.scss b/_sass/_wallets-menu.scss new file mode 100644 index 00000000..ea825b9d --- /dev/null +++ b/_sass/_wallets-menu.scss @@ -0,0 +1,157 @@ +$platforms: + mobile, + desktop, + hardware, + web; + +$oses: + ios, + android, + windowsphone, + blackberry, + linux, + mac, + windows; + +// Wallet menu +.walletmenu { + text-align: center; + position: relative; + z-index: 90; + + > ul { + display: inline-block; + text-align: left; + padding: 0 0 25px 0; + border-bottom: 1px solid #E2E2E2; + background-color: #fff; + + // Disable border radius of menu buttons + // TODO: rework, so it doesn't rely on the order of submenus + &:hover > li:first-child, + &:hover > li:first-child + li { + -webkit-border-bottom-left-radius: 0; + -webkit-border-bottom-right-radius: 0; + -moz-border-radius-bottomleft: 0; + -moz-border-radius-bottomright: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + + > li.active, + > li:hover { + background-position: left -62px; + } + > li:hover > ul { + display: block; + } + > li > ul > li.active, + > li > ul > li:hover { + background-position: left -24px; + } + + li { + font-family: 'Ubuntu', sans-serif; + position: relative; + display: inline-block; + background-repeat: no-repeat; + background-position: left 6px; + padding: 0; + margin: 15px 10px; + font-size: 130%; + font-weight: bold; + -moz-transition: background-color 400ms ease-out; + -webkit-transition: background-color 400ms ease-out; + transition: background-color 400ms ease-out; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } + + a, + a:link, + a:active, + a:visited { + color: #383838; + } + a { + white-space: nowrap; + cursor: pointer; + display: block; + padding: 8px 10px 5px 42px; + } + + ul { + display: none; + position: absolute; + background-color: #fff; + border: 1px solid #0d579b; + padding: 4px 0; + min-width: 110%; + left: 0; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + li { + font-size: 80%; + display: block; + margin: 0; + background-position: left 10px; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; + + > a { + background-image: url(/img/icons/wallet_select.svg); + background-repeat: no-repeat; + background-position: -32px center; + padding: 8px 32px 5px 32px; + margin: 1px 0; + } + + &.active > a { + background-position: right center; + } + } + } + + &.active, + &:hover { + background-color: #0d579b; + } + + &:hover > a, + &:hover > a:link, + &:hover > a:active, + &:hover > a:visited, + &.active > a, + &.active > a:link, + &.active > a:active, + &.active > a:visited { + color: #fff; + } + } + } + + // Generating icon classes for platforms + @each $platform in $platforms { + .wallet-#{$platform} { + background-image: url('/img/icons/wallet_menu_#{$platform}.svg'); + } + } + + // Generating icon classes for OSes + @each $os in $oses { + .wallet-#{$os} { + background-image: url('/img/os/wallet_menu_#{$os}.svg'); + } + } +} diff --git a/_sass/_wallets.scss b/_sass/_wallets.scss index f3d7e7ba..17812eeb 100644 --- a/_sass/_wallets.scss +++ b/_sass/_wallets.scss @@ -1,160 +1,3 @@ -$platforms: - mobile, - desktop, - hardware, - web; - -$oses: - ios, - android, - windowsphone, - blackberry, - linux, - mac, - windows; - -// Wallet menu -.walletmenu { - text-align: center; - position: relative; - z-index: 90; - - > ul { - display: inline-block; - text-align: left; - padding: 0 0 25px 0; - border-bottom: 1px solid #E2E2E2; - background-color: #fff; - - // Disable border radius of menu buttons - // TODO: rework, so it doesn't rely on the order of submenus - &:hover > li:first-child, - &:hover > li:first-child + li { - -webkit-border-bottom-left-radius: 0; - -webkit-border-bottom-right-radius: 0; - -moz-border-radius-bottomleft: 0; - -moz-border-radius-bottomright: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } - - li { - font-family: 'Ubuntu', sans-serif; - position: relative; - display: inline-block; - background-repeat: no-repeat; - background-position: left 6px; - padding: 0; - margin: 15px 10px; - font-size: 130%; - font-weight: bold; - -moz-transition: background-color 400ms ease-out; - -webkit-transition: background-color 400ms ease-out; - transition: background-color 400ms ease-out; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - - &:first-child { - margin-left: 0; - } - - &:last-child { - margin-right: 0; - } - - a, - a:link, - a:active, - a:visited { - color: #383838; - } - a { - white-space: nowrap; - cursor: pointer; - display: block; - padding: 8px 10px 5px 42px; - } - - ul { - display: none; - position: absolute; - background-color: #fff; - border: 1px solid #0d579b; - padding: 4px 0; - min-width: 110%; - left: 0; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - li { - font-size: 80%; - display: block; - margin: 0; - background-position: left 10px; - -webkit-border-radius: 0px; - -moz-border-radius: 0px; - border-radius: 0px; - - > a { - background-image: url(/img/icons/wallet_select.svg); - background-repeat: no-repeat; - background-position: -32px center; - padding: 8px 32px 5px 32px; - margin: 1px 0; - } - - &.active > a { - background-position: right center; - } - } - } - - &.active, - &:hover { - background-color: #0d579b; - } - - &:hover > a, - &:hover > a:link, - &:hover > a:active, - &:hover > a:visited, - &.active > a, - &.active > a:link, - &.active > a:active, - &.active > a:visited { - color: #fff; - } - } - } - - // Generating icon classes for platforms - @each $platform in $platforms { - .wallet-#{$platform} { - background-image: url('/img/icons/wallet_menu_#{$platform}.svg'); - } - } - - // Generating icon classes for OSes - @each $os in $oses { - .wallet-#{$os} { - background-image: url('/img/os/wallet_menu_#{$os}.svg'); - } - } -} -.walletmenu > ul > li.active, -.walletmenu > ul > li:hover { - background-position: left -62px; -} -.walletmenu > ul > li:hover > ul { - display: block; -} -.walletmenu > ul > li > ul > li.active, -.walletmenu > ul > li > ul > li:hover { - background-position: left -24px; -} - .wallets { width: 705px; height: 250px; diff --git a/_sass/screen.scss b/_sass/screen.scss index 5619e7fb..aa92ebf7 100644 --- a/_sass/screen.scss +++ b/_sass/screen.scss @@ -2471,3 +2471,4 @@ h2 .rssicon{ } @import 'wallets'; +@import 'wallets-menu';