mirror of
https://github.com/seigler/dash-website
synced 2025-07-27 07:16:10 +00:00
Wallets:
-- adds accessibility tags wallet tabs & panels -- adds conditional modal treatment for "dash-core" vendor_id's -- activates modal buttons -- presentation / style cleanup on modals (incomplete) -- wallet modal action buttons are now the first "link"
This commit is contained in:
Chuck Williams
parent
249c1cf709
commit
f71fc75876
5 changed files with 376 additions and 320 deletions
|
|
@ -1,7 +1,13 @@
|
||||||
<!-- Modal -->
|
<!-- Modal -->
|
||||||
{% for wallet in vendor-group.items %}
|
{% for wallet in vendor-group.items %}
|
||||||
<div id="{{wallet.os}}-{{wallet.vendor_id}}-{{wallet.type_id}}-{{wallet.product_id}}-modal"
|
<div id="{{wallet.os}}-{{wallet.vendor_id}}-{{wallet.type_id}}-{{wallet.product_id}}-modal"
|
||||||
class="modal fade wallet-modal-container" role="dialog" tabindex="-1">
|
|
||||||
|
{% if wallet.vendor_id == 'dash_core' %}
|
||||||
|
class="modal fade wallet-modal-container dash-core"
|
||||||
|
{% else %}
|
||||||
|
class="modal fade wallet-modal-container"
|
||||||
|
{% endif %}
|
||||||
|
role="dialog" tabindex="-1">
|
||||||
<div class="modal-dialog modal-lg" role="document">
|
<div class="modal-dialog modal-lg" role="document">
|
||||||
<div class="modal-content b-modal__content">
|
<div class="modal-content b-modal__content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
|
|
@ -64,8 +70,8 @@
|
||||||
</h5>
|
</h5>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<button type="button" class="btn btn-default" data-dismiss="modal" aria-label="Download {{wallet.product_label}}"><span
|
<button type="button" class="btn btn-default" data-dismiss="modal" aria-label="{{wallet.links[0].label}}" data-url="{{wallet.links[0].url}}" ><span
|
||||||
aria-hidden="true">Download {{wallet.product_label}}</span></button>
|
aria-hidden="true">{{wallet.links[0].label}}: {{wallet.name}}</span></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
<div id="{{wallet-group.name}}" class="tab-pane fade in out {% if forloop.first == true %}active{% endif %}">
|
<div id="{{wallet-group.name}}"
|
||||||
|
role="tab-panel"
|
||||||
|
class="tab-pane fade in out {% if forloop.first == true %}active{% endif %}">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
{% for wallet in wallet-group.items %}
|
{% for wallet in wallet-group.items %}
|
||||||
{% include wallet-tile.html %}
|
{% include wallet-tile.html %}
|
||||||
|
|
|
||||||
|
|
@ -8,5 +8,9 @@
|
||||||
$('.wallet-tile a').click(function (event) {
|
$('.wallet-tile a').click(function (event) {
|
||||||
event.stopImmediatePropagation();
|
event.stopImmediatePropagation();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('.wallet-modal-container button[data-url]').click(function (event) {
|
||||||
|
window.open($(event.currentTarget).data('url'));
|
||||||
|
});
|
||||||
});
|
});
|
||||||
}(jQuery));
|
}(jQuery));
|
||||||
|
|
|
||||||
|
|
@ -5,26 +5,25 @@ you're in a hurry or lost or you just need to Make It Work©
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
.center-block {
|
.center-block {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-space {
|
.bottom-space {
|
||||||
margin-bottom: 3%;
|
margin-bottom: 3%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-right {
|
.text-right {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-center {
|
.text-center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-left {
|
.text-left {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
$wallet-tile-min-height: 20em;
|
$wallet-tile-min-height: 20em;
|
||||||
|
|
@ -34,354 +33,399 @@ $wallet-tile-logo-container-width: 5.5em;
|
||||||
$wallet-tile-spacing: .7em;
|
$wallet-tile-spacing: .7em;
|
||||||
$wallet-tile-caption-fine-print-font-size: 0.6em;
|
$wallet-tile-caption-fine-print-font-size: 0.6em;
|
||||||
$wallet-tile-caption-fine-print-height: $wallet-tile-caption-fine-print-font-size*8.5;
|
$wallet-tile-caption-fine-print-height: $wallet-tile-caption-fine-print-font-size*8.5;
|
||||||
$wallet-tile-hover-background-base-color: lighten($color-blue-light,9);
|
$wallet-tile-hover-background-base-color: lighten($color-blue-light, 9);
|
||||||
|
|
||||||
.wallet-tile {
|
.wallet-tile {
|
||||||
animation: fadein 0.4s;
|
animation: fadein 0.4s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: $wallet-tile-spacing auto;
|
margin: $wallet-tile-spacing auto;
|
||||||
border: 1px solid $color-gray;
|
border: 1px solid $color-gray;
|
||||||
min-height: $wallet-tile-min-height;
|
min-height: $wallet-tile-min-height;
|
||||||
max-width: $wallet-tile-max-width;
|
max-width: $wallet-tile-max-width;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
-o-transition:.25s;
|
-o-transition: .25s;
|
||||||
-ms-transition:.25s;
|
-ms-transition: .25s;
|
||||||
-moz-transition:.25s;
|
-moz-transition: .25s;
|
||||||
-webkit-transition:.25s;
|
-webkit-transition: .25s;
|
||||||
transition:.25s;
|
transition: .25s;
|
||||||
|
|
||||||
&:hover,&:focus {
|
&:hover, &:focus {
|
||||||
background-color: $wallet-tile-hover-background-base-color;
|
background-color: $wallet-tile-hover-background-base-color;
|
||||||
border-color: $color-blue;
|
border-color: $color-blue;
|
||||||
a {
|
a {
|
||||||
color: darken($color-blue, 15);
|
color: darken($color-blue, 15);
|
||||||
}
|
}
|
||||||
& .thumbnail .caption .fine-print {
|
& .thumbnail .caption .fine-print {
|
||||||
color: darken($color-gray-dark,15);
|
color: darken($color-gray-dark, 15);
|
||||||
}
|
}
|
||||||
|
|
||||||
& .thumbnail .wallet-links-container .link {
|
& .thumbnail .wallet-links-container .link {
|
||||||
border-top: solid 1px darken($color-gray,15);
|
border-top: solid 1px darken($color-gray, 15);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
& .thumbnail{
|
}
|
||||||
& .logo-container {
|
& .thumbnail {
|
||||||
margin: $wallet-tile-spacing auto;
|
& .logo-container {
|
||||||
padding: $wallet-tile-spacing*.3;
|
margin: $wallet-tile-spacing auto;
|
||||||
display: block;
|
padding: $wallet-tile-spacing*.3;
|
||||||
max-width: $wallet-tile-logo-container-width;
|
display: block;
|
||||||
max-height: $wallet-tile-logo-container-height;
|
max-width: $wallet-tile-logo-container-width;
|
||||||
overflow: hidden;
|
max-height: $wallet-tile-logo-container-height;
|
||||||
img {
|
overflow: hidden;
|
||||||
max-height: 80px;
|
img {
|
||||||
}
|
max-height: 80px;
|
||||||
}
|
}
|
||||||
& .caption {
|
|
||||||
line-height: 1 !important;
|
|
||||||
margin: $wallet-tile-spacing;
|
|
||||||
h4 {
|
|
||||||
padding: 0 0 $wallet-tile-spacing 0;
|
|
||||||
}
|
|
||||||
& .fine-print {
|
|
||||||
overflow-y: auto;
|
|
||||||
min-height: $wallet-tile-caption-fine-print-height;
|
|
||||||
max-height: $wallet-tile-caption-fine-print-height*2;
|
|
||||||
margin: 0 0 $wallet-tile-spacing 0;
|
|
||||||
font-size: $wallet-tile-caption-fine-print-font-size;
|
|
||||||
line-height: 1.5 !important;
|
|
||||||
color: $color-gray-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
& .wallet-links-container {
|
|
||||||
width: 100%;
|
|
||||||
& .link {
|
|
||||||
border-top: solid 1px $color-gray;
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 90%;
|
|
||||||
display: block;
|
|
||||||
-o-transition:1.25s;
|
|
||||||
-ms-transition:1.25s;
|
|
||||||
-moz-transition:1.25s;
|
|
||||||
-webkit-transition:1.25s;
|
|
||||||
transition:1.25s;
|
|
||||||
&:hover, &:focus {
|
|
||||||
background-color: lighten($wallet-tile-hover-background-base-color,3);
|
|
||||||
border-color: white;
|
|
||||||
}
|
|
||||||
& a {
|
|
||||||
display: block;
|
|
||||||
margin: 0;
|
|
||||||
padding: $wallet-tile-spacing*.3;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
-o-transition:.5s;
|
|
||||||
-ms-transition:.5s;
|
|
||||||
-moz-transition:.5s;
|
|
||||||
-webkit-transition:.5s;
|
|
||||||
transition:.5s;
|
|
||||||
&:hover, &:focus {
|
|
||||||
@include gradient-horizontal-three-colors($start-color: $wallet-tile-hover-background-base-color,$mid-color: lighten($wallet-tile-hover-background-base-color,9),$end-color:$wallet-tile-hover-background-base-color );
|
|
||||||
-o-transition:.5s;
|
|
||||||
-ms-transition:.5s;
|
|
||||||
-moz-transition:.5s;
|
|
||||||
-webkit-transition:.5s;
|
|
||||||
transition:.5s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
& .caption {
|
||||||
|
line-height: 1 !important;
|
||||||
|
margin: $wallet-tile-spacing;
|
||||||
|
h4 {
|
||||||
|
padding: 0 0 $wallet-tile-spacing 0;
|
||||||
|
}
|
||||||
|
& .fine-print {
|
||||||
|
overflow-y: auto;
|
||||||
|
min-height: $wallet-tile-caption-fine-print-height;
|
||||||
|
max-height: $wallet-tile-caption-fine-print-height*2;
|
||||||
|
margin: 0 0 $wallet-tile-spacing 0;
|
||||||
|
font-size: $wallet-tile-caption-fine-print-font-size;
|
||||||
|
line-height: 1.5 !important;
|
||||||
|
color: $color-gray-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& .wallet-links-container {
|
||||||
|
width: 100%;
|
||||||
|
& .link {
|
||||||
|
border-top: solid 1px $color-gray;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 90%;
|
||||||
|
display: block;
|
||||||
|
-o-transition: 1.25s;
|
||||||
|
-ms-transition: 1.25s;
|
||||||
|
-moz-transition: 1.25s;
|
||||||
|
-webkit-transition: 1.25s;
|
||||||
|
transition: 1.25s;
|
||||||
|
&:hover, &:focus {
|
||||||
|
background-color: lighten($wallet-tile-hover-background-base-color, 3);
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
& a {
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
padding: $wallet-tile-spacing*.3;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
-o-transition: .5s;
|
||||||
|
-ms-transition: .5s;
|
||||||
|
-moz-transition: .5s;
|
||||||
|
-webkit-transition: .5s;
|
||||||
|
transition: .5s;
|
||||||
|
&:hover, &:focus {
|
||||||
|
@include gradient-horizontal-three-colors($start-color: $wallet-tile-hover-background-base-color, $mid-color: lighten($wallet-tile-hover-background-base-color, 9), $end-color: $wallet-tile-hover-background-base-color);
|
||||||
|
-o-transition: .5s;
|
||||||
|
-ms-transition: .5s;
|
||||||
|
-moz-transition: .5s;
|
||||||
|
-webkit-transition: .5s;
|
||||||
|
transition: .5s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.wallet-modal-container {
|
.wallet-modal-container {
|
||||||
& .modal-header {
|
|
||||||
border-bottom: none;
|
|
||||||
|
& .modal-header {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
&.dash-core {
|
||||||
|
& .btn.btn-default {
|
||||||
|
border: 1px solid $color-blue-highlight;
|
||||||
|
&:hover, &:focus {
|
||||||
|
background-color: $wallet-tile-hover-background-base-color;
|
||||||
|
border-color: white;
|
||||||
|
color: $color-blue-dark;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img.staff {
|
img.staff {
|
||||||
max-width: 100px;
|
max-width: 100px;
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.blog_link {
|
a.blog_link {
|
||||||
text-align:right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-circle {
|
.img-circle {
|
||||||
margin: 1px;
|
margin: 1px;
|
||||||
border:1px solid #dddddd;
|
border: 1px solid #dddddd;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.background-title {
|
.background-title {
|
||||||
background-color: $color-gray;
|
background-color: $color-gray;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-modal{
|
.b-modal {
|
||||||
&__close {
|
&__close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 32px;
|
right: 32px;
|
||||||
top: 32px;
|
top: 32px;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
&:hover{
|
&:hover, .dash-core &:hover {
|
||||||
&:before, &:after {
|
&:before, &:after {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&:before, &:after {
|
&:before, &:after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 15px;
|
left: 15px;
|
||||||
content: ' ';
|
content: ' ';
|
||||||
height: 33px;
|
height: 33px;
|
||||||
width: 2px;
|
width: 2px;
|
||||||
background-color: #fff;
|
transition: .5s;
|
||||||
transition:.5s;
|
background-color: $color-blue-dark;
|
||||||
}
|
.dash-core & {
|
||||||
&:before {
|
background-color: #fff;
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
}
|
||||||
&:after {
|
}
|
||||||
transform: rotate(-45deg);
|
&:before {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__title {
|
||||||
|
font-size: 2.6em;
|
||||||
|
margin-right: 45px;
|
||||||
|
.dash-core & {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__content {
|
||||||
|
background-color: #fff;
|
||||||
|
.dash-core & {
|
||||||
|
background-color: #1c75bc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__header {
|
||||||
|
padding-left: 44px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
&__body {
|
||||||
|
border: 0;
|
||||||
|
padding-left: 44px;
|
||||||
|
}
|
||||||
|
&__descr {
|
||||||
|
.dash-core & {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
&__accent {
|
||||||
|
.dash-core & {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
&__sidebar {
|
||||||
|
padding: 3px 15px 0 42px;
|
||||||
|
@media (min-width: $screen-sm-min) {
|
||||||
|
border-left: none;
|
||||||
|
border-top: 1px solid $color-gray;
|
||||||
|
.dash-core & {
|
||||||
|
border-left: none;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, .22);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: $screen-md-min) {
|
||||||
|
border-left: 1px solid $color-gray;
|
||||||
|
border-top: none;
|
||||||
|
.dash-core & {
|
||||||
|
border-left: 1px solid rgba(255, 255, 255, .22);
|
||||||
|
border-top: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&__title {
|
|
||||||
color: #fff;
|
}
|
||||||
font-size: 2.6em;
|
&__select {
|
||||||
}
|
position: relative;
|
||||||
&__content{
|
padding: 14px 50px 12px 10px;
|
||||||
background-color: #1c75bc;
|
background: #1c75bc;
|
||||||
}
|
border-radius: 2px;
|
||||||
&__header{
|
border: 1px solid #6aaee6;
|
||||||
padding-left: 44px;
|
color: #fff;
|
||||||
border: none;
|
font-size: 1em;
|
||||||
}
|
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
|
||||||
&__body{
|
-webkit-appearance: none;
|
||||||
border: 0;
|
-moz-appearance: none;
|
||||||
padding-left: 44px;
|
appearance: none;
|
||||||
}
|
cursor: pointer;
|
||||||
&__descr{
|
&:after {
|
||||||
color: #fff;
|
content: '';
|
||||||
font-size: 1.5em;
|
position: absolute;
|
||||||
}
|
top: 50%;
|
||||||
&__accent{
|
right: 12px;
|
||||||
color: #fff;
|
margin-top: -2px;
|
||||||
font-size: 0.9em;
|
vertical-align: middle;
|
||||||
}
|
width: 0;
|
||||||
&__sidebar{
|
height: 0;
|
||||||
padding: 3px 0 0 42px;
|
margin-left: 2px;
|
||||||
border-left: 1px solid rgba(255,255,255, .22);
|
vertical-align: middle;
|
||||||
}
|
border-top: 4px solid #000;
|
||||||
&__select{
|
border-right: 4px solid transparent;
|
||||||
position: relative;
|
border-bottom: 0 dotted;
|
||||||
padding: 14px 50px 12px 10px;
|
border-left: 4px solid transparent;
|
||||||
background: #1c75bc;
|
|
||||||
border-radius: 2px;
|
|
||||||
border: 1px solid #6aaee6;
|
|
||||||
color:#fff;
|
|
||||||
font-size: 1em;
|
|
||||||
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
|
|
||||||
-webkit-appearance:none;
|
|
||||||
-moz-appearance:none;
|
|
||||||
appearance:none;
|
|
||||||
cursor:pointer;
|
|
||||||
&:after{
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
right: 12px;
|
|
||||||
margin-top: -2px;
|
|
||||||
vertical-align: middle;width: 0;
|
|
||||||
height: 0;
|
|
||||||
margin-left: 2px;
|
|
||||||
vertical-align: middle;
|
|
||||||
border-top: 4px solid #000;
|
|
||||||
border-right: 4px solid transparent;
|
|
||||||
border-bottom: 0 dotted;
|
|
||||||
border-left: 4px solid transparent;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-get-section {
|
.b-get-section {
|
||||||
background-image: url(../../assets/img/update/bg2.png);
|
background-image: url(../../assets/img/update/bg2.png);
|
||||||
|
color: white;
|
||||||
|
padding: 40px 0;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
h1, h2, h3 {
|
||||||
color: white;
|
color: white;
|
||||||
padding: 40px 0;
|
}
|
||||||
overflow: hidden;
|
h2 {
|
||||||
position: relative;
|
margin-top: 0px;
|
||||||
text-align: center;
|
}
|
||||||
h1, h2, h3 {
|
.page--home > section:not(.section) p {
|
||||||
color: white;
|
max-width: 50em;
|
||||||
}
|
margin: 20px auto;
|
||||||
h2 {
|
}
|
||||||
margin-top: 0px;
|
img {
|
||||||
}
|
margin-top: 30px;
|
||||||
.page--home>section:not(.section) p {
|
vertical-align: text-top;
|
||||||
max-width: 50em;
|
}
|
||||||
margin: 20px auto;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
margin-top: 30px;
|
|
||||||
vertical-align: text-top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-white-solid {
|
.btn-white-solid {
|
||||||
color: $color-blue;
|
color: $color-blue;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ctabox_small-font{
|
.ctabox_small-font {
|
||||||
p{
|
p {
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
word-wrap: normal;
|
word-wrap: normal;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.evo-prototype-section{
|
.evo-prototype-section {
|
||||||
background-image: url(../../assets/img/evolution/bg2.png);
|
background-image: url(../../assets/img/evolution/bg2.png);
|
||||||
}
|
}
|
||||||
|
|
||||||
.b-graphic-tile {
|
.b-graphic-tile {
|
||||||
animation: fadein 0.4s;
|
animation: fadein 0.4s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: $wallet-tile-spacing auto;
|
margin: $wallet-tile-spacing auto;
|
||||||
border: 1px solid $color-gray;
|
border: 1px solid $color-gray;
|
||||||
min-height: $wallet-tile-min-height;
|
min-height: $wallet-tile-min-height;
|
||||||
max-width: $wallet-tile-max-width;
|
max-width: $wallet-tile-max-width;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition:.25s;
|
transition: .25s;
|
||||||
|
|
||||||
& .thumbnail{
|
& .thumbnail {
|
||||||
& .logo-container {
|
& .logo-container {
|
||||||
margin: $wallet-tile-spacing auto;
|
margin: $wallet-tile-spacing auto;
|
||||||
padding: $wallet-tile-spacing*.3;
|
padding: $wallet-tile-spacing*.3;
|
||||||
display: block;
|
display: block;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
img {
|
img {
|
||||||
max-height: 80px;
|
max-height: 80px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
& .caption {
|
|
||||||
line-height: 1 !important;
|
|
||||||
margin: $wallet-tile-spacing;
|
|
||||||
h4 {
|
|
||||||
padding: 0 0 $wallet-tile-spacing 0;
|
|
||||||
}
|
|
||||||
& .fine-print {
|
|
||||||
overflow-y: auto;
|
|
||||||
min-height: $wallet-tile-caption-fine-print-height;
|
|
||||||
max-height: $wallet-tile-caption-fine-print-height*2;
|
|
||||||
margin: 0 0 $wallet-tile-spacing 0;
|
|
||||||
font-size: $wallet-tile-caption-fine-print-font-size;
|
|
||||||
line-height: 1.5 !important;
|
|
||||||
color: $color-gray-dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
& .wallet-links-container {
|
|
||||||
width: 100%;
|
|
||||||
& .link {
|
|
||||||
border-top: solid 1px $color-gray;
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 90%;
|
|
||||||
display: block;
|
|
||||||
transition:1.25s;
|
|
||||||
&:hover, &:focus {
|
|
||||||
background-color: lighten($wallet-tile-hover-background-base-color,3);
|
|
||||||
border-color: white;
|
|
||||||
}
|
|
||||||
& a {
|
|
||||||
display: block;
|
|
||||||
margin: 0;
|
|
||||||
padding: $wallet-tile-spacing*.3;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
transition:.5s;
|
|
||||||
&:hover, &:focus {
|
|
||||||
@include gradient-horizontal-three-colors($start-color: $wallet-tile-hover-background-base-color,$mid-color: lighten($wallet-tile-hover-background-base-color,9),$end-color:$wallet-tile-hover-background-base-color );
|
|
||||||
transition:.5s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
& .caption {
|
||||||
|
line-height: 1 !important;
|
||||||
|
margin: $wallet-tile-spacing;
|
||||||
|
h4 {
|
||||||
|
padding: 0 0 $wallet-tile-spacing 0;
|
||||||
|
}
|
||||||
|
& .fine-print {
|
||||||
|
overflow-y: auto;
|
||||||
|
min-height: $wallet-tile-caption-fine-print-height;
|
||||||
|
max-height: $wallet-tile-caption-fine-print-height*2;
|
||||||
|
margin: 0 0 $wallet-tile-spacing 0;
|
||||||
|
font-size: $wallet-tile-caption-fine-print-font-size;
|
||||||
|
line-height: 1.5 !important;
|
||||||
|
color: $color-gray-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& .wallet-links-container {
|
||||||
|
width: 100%;
|
||||||
|
& .link {
|
||||||
|
border-top: solid 1px $color-gray;
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 90%;
|
||||||
|
display: block;
|
||||||
|
transition: 1.25s;
|
||||||
|
&:hover, &:focus {
|
||||||
|
background-color: lighten($wallet-tile-hover-background-base-color, 3);
|
||||||
|
border-color: white;
|
||||||
|
}
|
||||||
|
& a {
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
padding: $wallet-tile-spacing*.3;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
transition: .5s;
|
||||||
|
&:hover, &:focus {
|
||||||
|
@include gradient-horizontal-three-colors($start-color: $wallet-tile-hover-background-base-color, $mid-color: lighten($wallet-tile-hover-background-base-color, 9), $end-color: $wallet-tile-hover-background-base-color);
|
||||||
|
transition: .5s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.color-box{
|
.color-box {
|
||||||
width: 44px;
|
width: 44px;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
float:left;
|
float: left;
|
||||||
&_blue{
|
&_blue {
|
||||||
background-color: #1d71b8;
|
background-color: #1d71b8;
|
||||||
}
|
}
|
||||||
&_gray{
|
&_gray {
|
||||||
background-color: #e3e3e3;
|
background-color: #e3e3e3;
|
||||||
}
|
}
|
||||||
&_black{
|
&_black {
|
||||||
background-color: #000000;
|
background-color: #000000;
|
||||||
}
|
}
|
||||||
&_white{
|
&_white {
|
||||||
border: 2px solid #ebebea;
|
border: 2px solid #ebebea;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.text-word-wrap{
|
|
||||||
word-wrap: break-word;
|
.text-word-wrap {
|
||||||
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
.color-article{
|
|
||||||
float: left;
|
.color-article {
|
||||||
margin-left: 15px;
|
float: left;
|
||||||
|
margin-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@ description: pages.wallets.description
|
||||||
{% for os-sequence in desktop-os-order-list %}
|
{% for os-sequence in desktop-os-order-list %}
|
||||||
{% for wallet-group in desktop-os-collection %}
|
{% for wallet-group in desktop-os-collection %}
|
||||||
{% if os-sequence == wallet-group.name %}
|
{% if os-sequence == wallet-group.name %}
|
||||||
<li role="presentation" {%if forloop.first == true %}class="active"{% endif %}><a data-toggle="pill" href="#{{wallet-group.name}}">
|
<li role="tab" {%if forloop.first == true %}class="active"{% endif %}><a data-toggle="pill" href="#{{wallet-group.name}}">
|
||||||
{% case wallet-group.name %}
|
{% case wallet-group.name %}
|
||||||
{% when 'win32' %}
|
{% when 'win32' %}
|
||||||
Windows (32bit)
|
Windows (32bit)
|
||||||
|
|
@ -64,9 +64,9 @@ description: pages.wallets.description
|
||||||
<div class="section__content">
|
<div class="section__content">
|
||||||
<h3>{% t pages.wallets.wallets-mobile-header %}</h3>
|
<h3>{% t pages.wallets.wallets-mobile-header %}</h3>
|
||||||
<p>{% t pages.wallets.wallets-mobile-subtitle %}</p>
|
<p>{% t pages.wallets.wallets-mobile-subtitle %}</p>
|
||||||
<ul id="wallet-mobile-os-tabs" class="nav2 nav-tabs ">
|
<ul id="wallet-mobile-os-tabs" class="nav2 nav-tabs " role="">
|
||||||
{% for wallet-group in mobile-os-collection %}
|
{% for wallet-group in mobile-os-collection %}
|
||||||
<li {%if forloop.first == true %}class="active"{% endif %}><a data-toggle="pill" href="#{{wallet-group.name}}">
|
<li {%if forloop.first == true %}class="active"{% endif %} role="tab"><a data-toggle="pill" href="#{{wallet-group.name}}">
|
||||||
{% case wallet-group.name %}
|
{% case wallet-group.name %}
|
||||||
{% when 'android' %}
|
{% when 'android' %}
|
||||||
Android
|
Android
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue