joshua/dash-docs
1
0
Fork 0
mirror of https://github.com/seigler/dash-docs synced 2025-07-27 01:36:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

WIP: Refactoring wallets styles

Browse source
This commit is contained in:
Igor Kuzmenko 2017-07-17 15:58:58 +02:00
parent e4f95c4554
commit acedfb821b
3 changed files with 158 additions and 157 deletions
Download patch file Download diff file Expand all files Collapse all files

157
_sass/_wallets-menu.scss Normal file
View file

@ -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');
}
}
}