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

Adds styles for a wallet layout.

Browse source
This commit is contained in:
Igor Kuzmenko 2017-07-17 22:21:36 +02:00
parent 65d67cd0c1
commit d3b7128f74
1 changed files with 168 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

185
_sass/_wallets.scss
View file

@ -228,6 +228,8 @@
border: 1px solid #BDBDBD; border: 1px solid #BDBDBD;
} }
// ----------------------------- new
$checks: $checks:
control, control,
validation, validation,
@ -239,8 +241,10 @@ $checks:
$green: #329239; $green: #329239;
$grey: #8b8b8b; $grey: #8b8b8b;
$red: #ee9209; $red: #ee9209;
$blue: #2c6faf;
$light-blue: #f0f8ff;
$checkmarks: $scores:
good $green bold, good $green bold,
pass $green normal, pass $green normal,
neutral $grey normal, neutral $grey normal,
@ -248,31 +252,178 @@ $checkmarks:
.wallet { .wallet {
// Generate backgrounds for checks and checkmarks .wallet-logo-container {
@each $check in $checks { text-align: center;
@each $checkmark, $color, $font-weight in $checkmarks {
.check#{$checkmark} {
color: $color;
font-weight: $font-weight;
p { .wallet-logo {
border-color: $color; width: 72px;
font-weight: normal; height: 72px;
}
h1 {
text-align: center;
}
}
.wallet-platforms {
.wallet-platforms-menu {
text-align: center;
margin-bottom: 20px;
button {
background-color: transparent;
font-weight: bold;
border: 1px solid #255f96;
margin-right: 10px;
text-decoration: none;
padding: 4px 8px;
border-radius: 4px;
text-align: center;
span {
vertical-align: text-top;
}
}
}
.wallet-os-container {
background-color: $light-blue;
padding: 20px;
border: 2px solid $blue;
border-radius: 4px;
margin-bottom: 20px;
display: flex;
.wallet-os-screenshot {
img {
border: 1px solid $grey;
}
}
.wallet-os-overview {
flex: 1;
display: flex;
flex-direction: column;
.wallet-os-name {
h3 {
margin: 0;
margin-right: 5px;
display: inline-block;
vertical-align: top;
}
margin-bottom: 20px;
} }
> div > span { .wallet-os-download-buttons {
@if $checkmark == good { margin-bottom: 20px;
background-image: url('/img/icons/checkbubble_pass.svg');
} @else { .wallet-os-source-link,
background-image: url('/img/icons/checkbubble_#{$checkmark}.svg'); .wallet-os-download-link {
font-weight: bold;
border: 1px solid #255f96;
margin-right: 10px;
text-decoration: none;
padding: 4px 8px;
border-radius: 4px;
text-align: center;
}
.wallet-os-download-link {
background-color: #2c6fad;
background-image: -o-linear-gradient(bottom, #255f96 14%, #2c6fad 70%);
background-image: -moz-linear-gradient(bottom, #255f96 14%, #2c6fad 70%);
background-image: -webkit-linear-gradient(bottom, #255f96 14%, #2c6fad 70%);
background-image: -ms-linear-gradient(bottom, #255f96 14%, #2c6fad 70%);
background-image: linear-gradient(bottom, #255f96 14%, #2c6fad 70%);
color: #fff;
&:hover {
background-image: none;
}
}
.wallet-os-source-link {
} }
} }
.wallet-os-checks {
padding-right: 40px;
.wallet-os-check-title {
display: inline-block;
margin: 0;
}
.wallet-os-check-help-icon {
display: inline-block;
background-image: url(/img/icons/wallet_help.png);
background-image: none, url(/img/icons/wallet_help.svg), url(/img/icons/wallet_help.png);
width: 16px;
height: 16px;
vertical-align: text-bottom;
cursor: pointer;
}
.hover {
.wallet-os-check-details {
display: block;
border: 2px solid;
border-radius: 4px;
margin: 10px 0;
padding: 10px;
}
}
.wallet-os-check-details {
display: none;
position: absolute;
background-color: #FFFFFF;
max-width: 350px;
p {
margin: 0;
text-align: left;
}
}
}
}
}
}
// Generate backgrounds for checks and scores
@each $score, $color, $font-weight in $scores {
.check#{$score} {
background-repeat: no-repeat;
background-position-y: center;
padding-left: 25px;
margin-bottom: 10px;
.wallet-os-check-title {
color: $color;
font-weight: $font-weight;
}
.wallet-os-check-details {
color: $color;
border-color: $color;
}
> div > span {
@if $score == good {
background-image: url('/img/icons/checkbubble_pass.svg');
} @else {
background-image: url('/img/icons/checkbubble_#{$score}.svg');
}
}
@each $check in $checks {
&.check#{$check} { &.check#{$check} {
@if $checkmark == good { @if $score == good {
background-image: url('/img/icons/check_#{$check}_pass.svg'); background-image: url('/img/icons/check_#{$check}_pass.svg');
} @else { } @else {
background-image: url('/img/icons/check_#{$check}_#{$checkmark}.svg'); background-image: url('/img/icons/check_#{$check}_#{$score}.svg');
} }
} }
} }