381 lines
10 KiB
SCSS
381 lines
10 KiB
SCSS
$platforms:
|
|
mobile,
|
|
desktop,
|
|
hardware,
|
|
web;
|
|
|
|
$oses:
|
|
ios,
|
|
android,
|
|
windowsphone,
|
|
linux,
|
|
mac,
|
|
windows;
|
|
|
|
// Wallet menu
|
|
.walletmenu {
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 90;
|
|
border-bottom: 1px solid #dfdfdf;
|
|
|
|
> ul {
|
|
display: inline-block;
|
|
text-align: left;
|
|
margin: 0;
|
|
padding: 0;
|
|
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.is-active > div {
|
|
display: block;
|
|
}
|
|
> li > div> ul > li.active,
|
|
> li > div> ul > li:hover {
|
|
border: none;
|
|
}
|
|
> li > a {
|
|
position: relative;
|
|
}
|
|
> li:hover > a,
|
|
> li.is-active > a {
|
|
border-bottom: 3px solid #ff7e00;
|
|
}
|
|
> li:hover > a::after,
|
|
> li.is-active > a::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translate(-50%, 100%);
|
|
border: 8px solid transparent;
|
|
border-top: 8px solid #FF7E00;
|
|
z-index: 15;
|
|
}
|
|
> li > a:hover,
|
|
> li.is-active > a {
|
|
padding: 18px 10px 18px 42px;
|
|
}
|
|
> .wallet-all.is-active > a {
|
|
padding: 18px 10px 18px;
|
|
}
|
|
li {
|
|
display: inline-block;
|
|
background-repeat: no-repeat;
|
|
background-position: left 16px;
|
|
padding: 0;
|
|
margin: 0 40px;
|
|
font-size: 93.75%;
|
|
-moz-transition: background-color 400ms ease-out;
|
|
-webkit-transition: background-color 400ms ease-out;
|
|
transition: background-color 400ms ease-out;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
a,
|
|
a:link,
|
|
a:active,
|
|
a:visited {
|
|
color: #383838;
|
|
}
|
|
a {
|
|
display: block;
|
|
padding: 18px 10px 21px 42px;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
div {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: 100%;
|
|
transform: translate(-50%, 100%);
|
|
|
|
ul {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0;
|
|
background-color: #f8f8f8;
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
border-top: 1px solid #dfdfdf;
|
|
|
|
li {
|
|
font-size: 80%;
|
|
display: block;
|
|
margin: 0;
|
|
background-position: left 18px;
|
|
|
|
> a {
|
|
font-size: 15px;
|
|
background-image: url(/img/icons/wallet_select.svg?1528322191);
|
|
background-repeat: no-repeat;
|
|
background-position: -32px center;
|
|
padding: 18px 32px 18px 32px;
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover > a,
|
|
&:hover > a:link,
|
|
&:hover > a:active,
|
|
&:hover > a:visited,
|
|
&.active > a,
|
|
&.active > a:link,
|
|
&.active > a:active,
|
|
&.active > a:visited {
|
|
color: #ff7e00;
|
|
}
|
|
}
|
|
.wallet-all a {
|
|
padding: 18px 10px 21px;
|
|
}
|
|
.wallet-all a:hover {
|
|
padding: 18px 10px 18px;
|
|
}
|
|
}
|
|
|
|
// Generating icon classes for platforms
|
|
@each $platform in $platforms {
|
|
.wallet-#{$platform} {
|
|
background-image: url('/img/icons/wallet_menu_#{$platform}.svg?1528322191');
|
|
}
|
|
}
|
|
|
|
// Generating icon classes for OSes
|
|
@each $os in $oses {
|
|
.wallet-#{$os} {
|
|
background-image: url('/img/os/wallet_menu_#{$os}.svg?1528322191');
|
|
}
|
|
}
|
|
.wallet-blackberry {
|
|
background-size: 20px;
|
|
}
|
|
}
|
|
|
|
.is-expanded + .accordion-content{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.accordion-content-wallets {
|
|
display: flex;
|
|
}
|
|
.accordion-tab-wallet {
|
|
display: none;
|
|
}
|
|
.accordion-os.is-visible {
|
|
display: block;
|
|
}
|
|
.accordion-label {
|
|
font-size: 18px;
|
|
color: #FF7E00;
|
|
line-height: 30px;
|
|
}
|
|
.is-selected .accordion-label {
|
|
font-size: 12px;
|
|
color: #56585f;
|
|
letter-spacing: 0.4px;
|
|
line-height: normal;
|
|
}
|
|
.selected-item {
|
|
font-size: 18px;
|
|
color: #FF7E00;
|
|
line-height: 20px;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.accordion-tab {
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
.accordion-tab::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 15px;
|
|
width: 10px;
|
|
height: 6px;
|
|
background: url(../img/icons/ico_angle.svg?1528322191) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.is-expanded.accordion-tab::after {
|
|
transform: rotate(180deg);
|
|
}
|
|
.accordion-content {
|
|
.wallet-desktop {
|
|
background: url(../img/icons/wallet_menu_desktop.svg?1528322191) center 15px no-repeat;
|
|
}
|
|
.wallet-hardware {
|
|
background: url(../img/icons/wallet_menu_hardware.svg?1528322191) center 15px no-repeat;
|
|
}
|
|
.wallet-mobile {
|
|
background: url(../img/icons/wallet_menu_mobile.svg?1528322191) center 15px no-repeat;
|
|
}
|
|
.wallet-web {
|
|
background: url(../img/icons/wallet_menu_web.svg?1528322191) center 15px no-repeat;
|
|
}
|
|
.wallet-linux {
|
|
background: url(../img/icons/wallet_menu_linux.svg?1528322191) center 15px no-repeat;
|
|
background-size: 22px;
|
|
}
|
|
.wallet-mac {
|
|
background: url(../img/icons/wallet_menu_mac.svg?1528322191) center 15px no-repeat;
|
|
background-size: 22px;
|
|
}
|
|
.wallet-windows {
|
|
background: url(../img/icons/wallet_menu_windows.svg?1528322191) center 15px no-repeat;
|
|
background-size: 22px;
|
|
}
|
|
.wallet-android {
|
|
background: url(../img/os/wallet_menu_android.svg?1528322191) center 15px no-repeat;
|
|
background-size: 22px;
|
|
}
|
|
.wallet-blackberry {
|
|
background: url(../img/os/wallet_menu_blackberry.svg?1528322191) center 15px no-repeat;
|
|
background-size: 22px;
|
|
}
|
|
.wallet-ios {
|
|
background: url(../img/os/wallet_menu_ios.svg?1528322191) center 15px no-repeat;
|
|
background-size: 22px;
|
|
}
|
|
.wallet-windowsphone {
|
|
background: url(../img/os/wallet_menu_windowsphone.svg?1528322191) center 15px no-repeat;
|
|
background-size: 22px;
|
|
}
|
|
}
|
|
@media handheld, only screen and ( max-width: 60em ), only screen and ( max-device-width: 60em ) {
|
|
.walletmenu>ul li {
|
|
margin: 0 25px;
|
|
}
|
|
}
|
|
@media handheld, only screen and ( max-width: 48em ), only screen and ( max-device-width: 48em ) {
|
|
.walletmenu {
|
|
display: none;
|
|
}
|
|
.walletmenu-mobile {
|
|
display: block;
|
|
}
|
|
.wallet-wrapper {
|
|
display: block;
|
|
}
|
|
.accordion {
|
|
margin-bottom: 2px;
|
|
}
|
|
.accordion-tab {
|
|
width: 100%;
|
|
height: 60px;
|
|
padding: 15px 35px 15px 55px;
|
|
box-sizing: border-box;
|
|
background: #f8f8f8;
|
|
}
|
|
.accordion-tab::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 15px;
|
|
width: 10px;
|
|
height: 6px;
|
|
background: url(../img/icons/ico_angle.svg?1528322191) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.is-selected.accordion-tab {
|
|
padding: 9px 35px 9px 55px;
|
|
}
|
|
.accordion-tab::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 15px;
|
|
transform: translateY(-50%);
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
.accordion-tab-1::before {
|
|
background: url(../img/getting-started/number-1.svg?1528322191) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.accordion-tab-2::before {
|
|
background: url(../img/getting-started/number-2.svg?1528322191) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.is-selected.accordion-tab::before {
|
|
background: url(../img/icons/checkmark.svg?1528322191) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
.accordion-content {
|
|
display: none;
|
|
}
|
|
.is-expanded + .accordion-content{
|
|
padding: 15px;
|
|
}
|
|
.accordion-item {
|
|
width: 48.1%;
|
|
height: 93px;
|
|
margin: 0 3% 10px 0;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
background-size: 30px;
|
|
}
|
|
.accordion-item:nth-child(even) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.accordion-link {
|
|
display: block;
|
|
padding: 55px 0 15px;
|
|
font-size: 15px;
|
|
color: #13161F;
|
|
text-align: center;
|
|
border: 1px solid #dadada;
|
|
}
|
|
.accordion-link:hover,
|
|
.accordion-link:active {
|
|
padding: 54px 0 14px;
|
|
border: 2px solid #ff7e00;
|
|
}
|
|
.accordion-wallets {
|
|
display: none;
|
|
}
|
|
.accordion-wallets.is-visible {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
.is-visible .accordion-tab-wallet {
|
|
display: block;
|
|
}
|
|
.accordion-tab-3 {
|
|
display: block;
|
|
}
|
|
.is-hidden-mobile {
|
|
display: none;
|
|
}
|
|
.accordion-tab-3::before {
|
|
background: url(../img/getting-started/number-3.svg?1528322191) center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
}
|