mirror of
https://github.com/seigler/dash-docs
synced 2025-07-27 01:36:13 +00:00
WIP: Refactoring wallets styles
This commit is contained in:
Igor Kuzmenko
parent
e4f95c4554
commit
acedfb821b
3 changed files with 158 additions and 157 deletions
157
_sass/_wallets-menu.scss
Normal file
157
_sass/_wallets-menu.scss
Normal 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');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -2471,3 +2471,4 @@ h2 .rssicon{
|
|||
}
|
||||
|
||||
@import 'wallets';
|
||||
@import 'wallets-menu';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue