Ayrat Badykov
6 years ago
committed by
GitHub
commit
24b31e812f
@ -0,0 +1,23 @@ |
||||
.pr-0-md { |
||||
padding-right: 0 !important; |
||||
|
||||
@include media-breakpoint-down(md) { |
||||
padding-right: 15px !important; |
||||
} |
||||
} |
||||
|
||||
.pl-0-md { |
||||
padding-left: 0 !important; |
||||
|
||||
@include media-breakpoint-down(md) { |
||||
padding-left: 15px !important; |
||||
} |
||||
} |
||||
|
||||
.card-mr-50-md { |
||||
margin-right: $common-container-margin; |
||||
|
||||
@include media-breakpoint-down(md) { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
@ -0,0 +1,201 @@ |
||||
@mixin textfield-placeholder($color: #a3a9b5) { |
||||
&::-webkit-input-placeholder { |
||||
color: $color; |
||||
} |
||||
&::-moz-placeholder { |
||||
color: $color; |
||||
} |
||||
&:-ms-input-placeholder { |
||||
color: $color; |
||||
} |
||||
&:-moz-placeholder { |
||||
color: $color; |
||||
} |
||||
} |
||||
|
||||
@mixin gradient-container() { |
||||
background-color: $primary; |
||||
background-image: linear-gradient( |
||||
to right, |
||||
$dashboard-banner-gradient-start, |
||||
$dashboard-banner-gradient-end |
||||
); |
||||
box-shadow: 0 5px 40px -5px rgba(#000, 0.25); |
||||
margin-top: -3rem; |
||||
} |
||||
|
||||
@mixin stats-item($border-color: #fff, $text-color: #fff, $value-color: #fff) { |
||||
&-item { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
padding-left: calc(1rem + 4px); |
||||
padding-right: 1rem; |
||||
position: relative; |
||||
|
||||
&::before { |
||||
background-color: $border-color; |
||||
border-radius: 2px; |
||||
content: ""; |
||||
height: 100%; |
||||
left: 0; |
||||
position: absolute; |
||||
top: 0; |
||||
width: 4px; |
||||
} |
||||
} |
||||
|
||||
&-label { |
||||
color: $text-color; |
||||
display: block; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
&-label-item { |
||||
margin-right: 20px; |
||||
|
||||
&:last-child { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
|
||||
&-value { |
||||
color: $value-color; |
||||
display: block; |
||||
font-size: 1.5rem; |
||||
font-weight: 200; |
||||
white-space: nowrap; |
||||
|
||||
@media (max-width: $breakpoint-lg) { |
||||
font-size: 1.25rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@mixin btn-full($bg-color: $primary, $text-color: #fff) { |
||||
align-items: center; |
||||
background-color: $bg-color; |
||||
border-radius: 2px; |
||||
border: 1px solid $bg-color; |
||||
color: $text-color; |
||||
cursor: pointer; |
||||
display: flex; |
||||
font-size: 12px; |
||||
font-weight: 600; |
||||
height: 36px; |
||||
justify-content: center; |
||||
outline: none; |
||||
padding: 0 15px; |
||||
text-decoration: none; |
||||
transition: all 0.15s; |
||||
width: fit-content; |
||||
|
||||
&:hover { |
||||
background-color: darken($bg-color, 10%); |
||||
border-color: darken($bg-color, 10%); |
||||
text-decoration: none; |
||||
} |
||||
|
||||
svg { |
||||
margin-right: 12px; |
||||
} |
||||
|
||||
path { |
||||
fill: $text-color; |
||||
} |
||||
|
||||
&.full-width { |
||||
width: 100%; |
||||
} |
||||
|
||||
&[disabled] { |
||||
&, |
||||
&:hover { |
||||
background-color: $bg-color; |
||||
border-color: $bg-color; |
||||
cursor: default; |
||||
opacity: 0.5; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@mixin btn-line($bg-color: #fff, $text-color: $secondary) { |
||||
align-items: center; |
||||
background-color: $bg-color; |
||||
border-radius: 2px; |
||||
border: 1px solid $text-color; |
||||
color: $text-color; |
||||
cursor: pointer; |
||||
display: flex; |
||||
font-size: 12px; |
||||
font-weight: 600; |
||||
height: 36px; |
||||
justify-content: center; |
||||
outline: none; |
||||
padding: 0 15px; |
||||
text-decoration: none; |
||||
transition: all 0.15s; |
||||
width: fit-content; |
||||
|
||||
&:hover { |
||||
background-color: $text-color; |
||||
color: $bg-color; |
||||
text-decoration: none; |
||||
|
||||
path { |
||||
fill: $bg-color; |
||||
} |
||||
} |
||||
|
||||
svg { |
||||
margin-right: 12px; |
||||
} |
||||
|
||||
path { |
||||
fill: $text-color; |
||||
} |
||||
|
||||
&.full-width { |
||||
width: 100%; |
||||
} |
||||
|
||||
&[disabled] { |
||||
&, |
||||
&:hover { |
||||
background-color: $bg-color; |
||||
border-color: $text-color; |
||||
cursor: default; |
||||
opacity: 0.5; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@mixin square-icon-button($color, $dimensions) { |
||||
align-items: center; |
||||
border: 1px solid $color; |
||||
border-radius: 2px; |
||||
cursor: pointer; |
||||
display: flex; |
||||
height: $dimensions; |
||||
justify-content: center; |
||||
transition: all 0.15s; |
||||
width: $dimensions; |
||||
|
||||
svg { |
||||
display: block; |
||||
height: 100%; |
||||
width: 100%; |
||||
} |
||||
|
||||
path { |
||||
fill: $color; |
||||
} |
||||
|
||||
&:hover { |
||||
background-color: $color; |
||||
|
||||
path { |
||||
fill: #fff; |
||||
} |
||||
} |
||||
} |
||||
@ -1,3 +0,0 @@ |
||||
.tooltip { |
||||
min-width: 100px; |
||||
} |
||||
@ -0,0 +1,81 @@ |
||||
.address-detail-hash-title { |
||||
color: #333; |
||||
font-size: 12px; |
||||
font-weight: bold; |
||||
line-height: 1.2; |
||||
margin: 0 0 12px; |
||||
text-align: left; |
||||
} |
||||
|
||||
.overview-title-buttons { |
||||
display: flex; |
||||
} |
||||
|
||||
.overview-title-item { |
||||
display: block; |
||||
flex-grow: 0; |
||||
flex-shrink: 0; |
||||
height: fit-content; |
||||
margin-right: 8px; |
||||
|
||||
&:last-child { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
|
||||
.address-overview { |
||||
.card-section { |
||||
margin-bottom: $common-container-margin; |
||||
|
||||
&:first-child { |
||||
|
||||
.card { |
||||
margin-right: $common-container-margin; |
||||
|
||||
@include media-breakpoint-down(md) { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.card { |
||||
margin-bottom: 0; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
.balance-card-title { |
||||
margin-bottom: 0.5rem; |
||||
} |
||||
|
||||
.address-detail-item { |
||||
margin-right: 1em; |
||||
padding-bottom: 0.5em; |
||||
} |
||||
|
||||
.address-balance-text { |
||||
font-size: 12px; |
||||
font-weight: bold; |
||||
line-height: 1.2; |
||||
margin: 0 0 12px; |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
|
||||
.address-current-balance { |
||||
font-size: 12px; |
||||
font-weight: 200; |
||||
line-height: 1.2; |
||||
margin: 0 0 12px; |
||||
|
||||
small { |
||||
font-size: 11px; |
||||
} |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
@ -0,0 +1,9 @@ |
||||
$alert-danger-background-color: #fff3f7 !default; |
||||
$alert-danger-border-color: #fff3f7 !default; |
||||
$alert-danger-color: #ff7986 !default; |
||||
|
||||
.alert-danger { |
||||
background-color: $alert-danger-background-color; |
||||
border-color: $alert-danger-border-color; |
||||
color: $alert-danger-color; |
||||
} |
||||
@ -0,0 +1,248 @@ |
||||
$api-text-monospace-color: $primary !default; |
||||
$api-text-monospace-background: rgba($api-text-monospace-color, 0.1) !default; |
||||
$api-anchors-list-background-color: #f6f7f9 !default; |
||||
$api-doc-list-item-title-color: $primary !default; |
||||
$api-doc-list-item-view-more-color: $api-doc-list-item-title-color !default; |
||||
|
||||
.api-text-monospace { |
||||
color: $api-text-monospace-color; |
||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", |
||||
"Courier New", monospace; |
||||
} |
||||
|
||||
.api-text-monospace-background { |
||||
background-color: $api-text-monospace-background; |
||||
border-radius: 2px; |
||||
font-weight: 300; |
||||
padding: 5px 6px; |
||||
} |
||||
|
||||
.api-anchors-list { |
||||
background-color: $api-anchors-list-background-color; |
||||
column-gap: 40px; |
||||
display: grid; |
||||
grid-auto-flow: column; |
||||
grid-template-columns: 1fr 1fr 1fr; |
||||
grid-template-rows: 1fr 1fr 1fr; |
||||
padding: 30px; |
||||
row-gap: 25px; |
||||
|
||||
@include media-breakpoint-down(md) { |
||||
grid-template-columns: 1fr 1fr; |
||||
grid-template-rows: 1fr 1fr 1fr 1fr; |
||||
} |
||||
|
||||
@include media-breakpoint-down(sm) { |
||||
grid-auto-flow: row; |
||||
grid-template-columns: 1fr; |
||||
grid-template-rows: none; |
||||
} |
||||
} |
||||
|
||||
.api-anchors-list-item { |
||||
display: grid; |
||||
grid-template-columns: 0.75fr minmax(0, 1.25fr); |
||||
|
||||
&:hover { |
||||
text-decoration: none; |
||||
} |
||||
} |
||||
|
||||
.api-anchors-list-item-title { |
||||
align-self: center; |
||||
color: #333; |
||||
font-size: 14px; |
||||
font-weight: 300; |
||||
line-height: 1.2; |
||||
margin: 0; |
||||
} |
||||
|
||||
.api-anchors-list-item-value { |
||||
align-self: center; |
||||
font-size: 12px; |
||||
line-height: 1.2; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.api-text-title { |
||||
font-size: 12px; |
||||
line-height: 1.2; |
||||
margin-left: 20px; |
||||
} |
||||
.api-doc-list-item { |
||||
border-bottom: 1px solid $base-border-color; |
||||
padding: $card-vertical-padding $card-horizontal-padding; |
||||
|
||||
&:last-child { |
||||
border-bottom: none; |
||||
} |
||||
} |
||||
|
||||
.api-doc-list-item-contents { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
@include media-breakpoint-down(sm) { |
||||
flex-direction: column; |
||||
} |
||||
} |
||||
|
||||
.api-doc-list-item-title { |
||||
color: $api-doc-list-item-title-color; |
||||
font-size: 17px; |
||||
font-weight: 700; |
||||
line-height: 1.2; |
||||
margin: 0 0 15px; |
||||
} |
||||
|
||||
.api-doc-list-item-query { |
||||
display: inline-block; |
||||
font-size: 12px; |
||||
line-height: 1.2; |
||||
margin-bottom: 20px; |
||||
word-break: break-all; |
||||
word-wrap: break-word; |
||||
|
||||
> strong { |
||||
font-weight: 700; |
||||
} |
||||
} |
||||
|
||||
.api-doc-list-item-text { |
||||
color: #aaa; |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
line-height: 1.5; |
||||
margin: 0; |
||||
} |
||||
|
||||
.api-doc-list-item-controls { |
||||
display: flex; |
||||
flex-direction: column; |
||||
flex-grow: 1; |
||||
margin-left: 50px; |
||||
|
||||
@include media-breakpoint-down(sm) { |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
margin-left: 0; |
||||
padding-top: 25px; |
||||
} |
||||
} |
||||
|
||||
.api-doc-list-item-controls-badges { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
|
||||
.api-badge { |
||||
margin-right: 8px; |
||||
|
||||
&:last-child { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.api-doc-list-item-controls-view-more { |
||||
align-self: flex-end; |
||||
color: $api-doc-list-item-view-more-color; |
||||
cursor: pointer; |
||||
font-size: 14px; |
||||
margin-top: auto; |
||||
white-space: nowrap; |
||||
|
||||
.fa { |
||||
margin-left: 5px; |
||||
} |
||||
} |
||||
|
||||
[aria-expanded="false"] { |
||||
.api-doc-list-item-controls-view-more-open { |
||||
display: block; |
||||
} |
||||
.api-doc-list-item-controls-view-more-close { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
[aria-expanded="true"] { |
||||
.api-doc-list-item-controls-view-more-open { |
||||
display: none; |
||||
} |
||||
.api-doc-list-item-controls-view-more-close { |
||||
display: block; |
||||
} |
||||
} |
||||
|
||||
.api-doc-parameters-container { |
||||
border-top: 1px solid $base-border-color; |
||||
margin-top: 20px; |
||||
padding-top: $card-vertical-padding; |
||||
} |
||||
|
||||
.api-doc-parameters-list { |
||||
border-bottom: 1px solid $base-border-color; |
||||
margin-bottom: $card-vertical-padding; |
||||
padding-bottom: $card-vertical-padding / 2; |
||||
} |
||||
|
||||
.api-doc-parameters-list-title { |
||||
color: #333; |
||||
font-size: 16px; |
||||
font-weight: 500; |
||||
line-height: 1.2; |
||||
margin: 0 0 15px; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.api-doc-parameters-list-item { |
||||
margin-bottom: 15px; |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
@include media-breakpoint-down(sm) { |
||||
margin-bottom: 30px; |
||||
|
||||
[class*="col-"] { |
||||
margin-bottom: 8px; |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.api-doc-parameters-list-item-title { |
||||
color: #333; |
||||
font-size: 14px; |
||||
font-weight: 500; |
||||
line-height: 1.2; |
||||
margin: 0 0 8px; |
||||
} |
||||
|
||||
.api-doc-parameters-list-item-subtitle { |
||||
color: #aaa; |
||||
font-size: 13px; |
||||
font-weight: 400; |
||||
line-height: 1.2; |
||||
margin: 0; |
||||
} |
||||
|
||||
.api-doc-parameters-list-item-description { |
||||
color: #333; |
||||
font-size: 14px; |
||||
font-weight: 400; |
||||
line-height: 1.2; |
||||
margin: 0 0 8px; |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
strong { |
||||
font-weight: 700; |
||||
} |
||||
} |
||||
@ -1,3 +1,45 @@ |
||||
$badge-success-color: #15bba6 !default; |
||||
$badge-success-background-color: rgba($badge-success-color, 0.1) !default; |
||||
$badge-danger-color: #ed9966 !default; |
||||
$badge-danger-background-color: rgba($badge-danger-color, 0.1) !default; |
||||
$badge-neutral-color: #333 !default; |
||||
$badge-neutral-background-color: #e9e9e9 !default; |
||||
|
||||
.badge { |
||||
color: $white; |
||||
|
||||
&.tile-badge { |
||||
font-size: 10px; |
||||
font-weight: bold; |
||||
height: 20px; |
||||
line-height: 20px; |
||||
margin: 0; |
||||
padding: 0 11px; |
||||
width: auto; |
||||
} |
||||
|
||||
&.api-badge { |
||||
font-size: 12px; |
||||
font-weight: 700; |
||||
height: 24px; |
||||
line-height: 26px; |
||||
margin: 0; |
||||
padding: 0 8px; |
||||
width: auto; |
||||
} |
||||
|
||||
&.badge-success { |
||||
background-color: $badge-success-background-color; |
||||
color: $badge-success-color; |
||||
} |
||||
|
||||
&.badge-danger { |
||||
background-color: $badge-danger-background-color; |
||||
color: $badge-danger-color; |
||||
} |
||||
|
||||
&.badge-neutral { |
||||
background-color: $badge-neutral-background-color; |
||||
color: $badge-neutral-color; |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,11 @@ |
||||
$btn-address-card-icon-color: $primary !default; |
||||
$btn-address-card-icon-dimensions: 31px !default; |
||||
|
||||
.btn-address-card-icon { |
||||
@include square-icon-button($btn-address-card-icon-color, $btn-address-card-icon-dimensions); |
||||
|
||||
svg { |
||||
height: 10px; |
||||
width: 20px; |
||||
} |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
$btn-copy-color: $primary !default; |
||||
$btn-copy-dimensions: 31px !default; |
||||
|
||||
.btn-copy-icon { |
||||
@include square-icon-button($btn-copy-color, $btn-copy-dimensions); |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
$btn-dropdown-line-bg: #fff !default; |
||||
$btn-dropdown-line-color: $primary !default; |
||||
|
||||
.btn-dropdown-line { |
||||
@include btn-line($btn-dropdown-line-bg, $btn-dropdown-line-color); |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
$btn-full-primary-bg: $primary !default; |
||||
$btn-full-primary-color: #fff !default; |
||||
|
||||
.btn-full-primary { |
||||
@include btn-full($btn-full-primary-bg, $btn-full-primary-color); |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
$btn-line-bg: #fff !default; |
||||
$btn-line-color: $secondary !default; |
||||
|
||||
.btn-line { |
||||
@include btn-line($btn-line-bg, $btn-line-color); |
||||
} |
||||
@ -0,0 +1,6 @@ |
||||
$btn-qr-color: $primary !default; |
||||
$btn-qr-dimensions: 31px !default; |
||||
|
||||
.btn-qr-icon { |
||||
@include square-icon-button($btn-qr-color, $btn-qr-dimensions); |
||||
} |
||||
@ -0,0 +1,47 @@ |
||||
$check-color: $primary !default; |
||||
$check-dimensions: 14px !default; |
||||
|
||||
.check { |
||||
align-items: center; |
||||
display: flex; |
||||
position: relative; |
||||
|
||||
input[type="checkbox"] { |
||||
height: 100%; |
||||
opacity: 0; |
||||
position: absolute; |
||||
width: 100%; |
||||
z-index: 5; |
||||
|
||||
&:checked + .check-icon::before { |
||||
background-color: $check-color; |
||||
content: ""; |
||||
height: 6px; |
||||
left: 50%; |
||||
position: absolute; |
||||
top: 50%; |
||||
transform: translateX(-50%) translateY(-50%); |
||||
width: 6px; |
||||
} |
||||
} |
||||
|
||||
.check-icon { |
||||
border: 1px solid $base-border-color; |
||||
flex-grow: 0; |
||||
flex-shrink: 0; |
||||
height: $check-dimensions; |
||||
margin: 0 10px 0 0; |
||||
position: relative; |
||||
width: $check-dimensions; |
||||
z-index: 1; |
||||
} |
||||
|
||||
.check-text { |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
line-height: 1.2; |
||||
position: relative; |
||||
white-space: nowrap; |
||||
z-index: 1; |
||||
} |
||||
} |
||||
@ -0,0 +1,26 @@ |
||||
$check-tooltip-background: #f5f6fa !default; |
||||
$check-tooltip-background-active: $primary !default; |
||||
$check-tooltip-check: #a3a9b5 !default; |
||||
$check-tooltip-check-active: #fff !default; |
||||
|
||||
.check-tooltip { |
||||
display: block; |
||||
height: 16px; |
||||
width: 16px; |
||||
|
||||
.check-tooltip-circle { |
||||
fill: $check-tooltip-background; |
||||
} |
||||
.check-tooltip-check { |
||||
fill: $check-tooltip-check; |
||||
} |
||||
|
||||
&:hover { |
||||
.check-tooltip-circle { |
||||
fill: $check-tooltip-background-active; |
||||
} |
||||
.check-tooltip-check { |
||||
fill: $check-tooltip-check-active; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,17 @@ |
||||
$copy-icon-color: $primary !default; |
||||
|
||||
.copy-icon { |
||||
cursor: pointer; |
||||
height: 18px; |
||||
width: 18px; |
||||
|
||||
svg { |
||||
display: block; |
||||
height: 100%; |
||||
width: 100%; |
||||
} |
||||
|
||||
path { |
||||
fill: $copy-icon-color; |
||||
} |
||||
} |
||||
@ -1,133 +1,184 @@ |
||||
$dashboard-banner-gradient-start: $primary !default; |
||||
$dashboard-banner-gradient-end: lighten( |
||||
$dashboard-banner-gradient-start, |
||||
5% |
||||
) !default; |
||||
$dashboard-banner-network-plain-container-background-color: lighten($dashboard-banner-gradient-end, 5%)!default; |
||||
$dashboard-line-color-price: lighten($dashboard-banner-gradient-end, 5%) !default; |
||||
$dashboard-line-color-market: $secondary !default; |
||||
$dashboard-stats-item-label-color: #fff !default; |
||||
$dashboard-stats-item-value-color: rgba(#fff, 0.8) !default; |
||||
$dashboard-banner-chart-legend-label-color: #fff !default; |
||||
$dashboard-banner-chart-legend-value-color: $dashboard-stats-item-value-color !default; |
||||
$dashboard-stats-item-border-color: $primary !default; |
||||
$dashboard-banner-network-plain-container-height: 205px; |
||||
$dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !default; |
||||
|
||||
.dashboard-banner-container { |
||||
position: relative; |
||||
margin-top: -3rem; |
||||
background-color: $white; |
||||
box-shadow: 0 5px 40px -5px rgba($black, 0.25); |
||||
@include gradient-container(); |
||||
|
||||
&:before { |
||||
content: ""; |
||||
display: block; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 68px; |
||||
background-color: $white; |
||||
box-shadow: 0 0 40px -5px rgba($black, 0.25); |
||||
} |
||||
padding: 0; |
||||
position: relative; |
||||
|
||||
&:after { |
||||
&::after { |
||||
background-color: $dashboard-banner-network-plain-container-background-color; |
||||
bottom: 0; |
||||
content: ""; |
||||
display: block; |
||||
height: $dashboard-banner-network-plain-container-height; |
||||
left: 70%; |
||||
position: absolute; |
||||
top: 3rem; |
||||
right: 0; |
||||
bottom: 0; |
||||
left: 70%; |
||||
background-color: $primary; |
||||
box-shadow: 0 0 40px -5px rgba($black, 0.25); |
||||
|
||||
@media (max-width: 992px) { |
||||
top: 2rem; |
||||
left: 80%; |
||||
@include media-breakpoint-down(md) { |
||||
display: none; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.dashboard-banner { |
||||
position: relative; |
||||
display: grid; |
||||
grid-template-rows: 3rem 2fr 1fr; |
||||
grid-template-columns: 1fr 4fr; |
||||
grid-template-areas: |
||||
"chart ." |
||||
"chart stats" |
||||
"legend stats"; |
||||
margin-top: -1rem; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin-bottom: 3rem; |
||||
position: relative; |
||||
z-index: 9; |
||||
|
||||
@media (max-width: 992px) { |
||||
grid-template-rows: 2rem auto; |
||||
grid-template-columns: auto; |
||||
@include media-breakpoint-down(sm) { |
||||
flex-direction: column; |
||||
} |
||||
} |
||||
|
||||
.dashboard-banner-graphic { |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
z-index: 10; |
||||
.dashboard-banner-network-graph { |
||||
flex-grow: 1; |
||||
padding: 15px 0 0 0; |
||||
|
||||
@include media-breakpoint-down(md) { |
||||
display: flex; |
||||
flex-direction: column; |
||||
padding-top: 20px; |
||||
} |
||||
} |
||||
|
||||
.dashboard-banner-chart { |
||||
grid-area: chart; |
||||
padding: 1rem 1rem 1rem 0; |
||||
width: calc(350px + 1rem); |
||||
height: calc(152px + 1rem); |
||||
flex-grow: 1; |
||||
margin: 0 0 35px 0; |
||||
max-width: 350px; |
||||
position: relative; |
||||
|
||||
@include media-breakpoint-down(md) { |
||||
flex-grow: 0; |
||||
margin-bottom: 20px; |
||||
margin-top: auto; |
||||
max-width: 100%; |
||||
} |
||||
|
||||
> canvas { |
||||
max-height: 100%; |
||||
max-width: 100%; |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
.dashboard-banner-chart-legend { |
||||
grid-area: legend; |
||||
display: flex; |
||||
padding: 1rem 0.3rem; |
||||
display: grid; |
||||
grid-template-columns: 1fr 1fr; |
||||
padding-bottom: 12px; |
||||
|
||||
.dashboard-banner-chart-legend-item { |
||||
padding-bottom: 3px; |
||||
padding-left: 12px; |
||||
padding-top: 3px; |
||||
position: relative; |
||||
|
||||
@include media-breakpoint-down(md) { |
||||
display: flex; |
||||
flex-direction: row; |
||||
} |
||||
|
||||
&-item { |
||||
padding-left: 0.5rem; |
||||
flex-grow: 1; |
||||
&::before { |
||||
border-radius: 2px; |
||||
content: ""; |
||||
height: 100%; |
||||
left: 0; |
||||
position: absolute; |
||||
top: 0; |
||||
width: 4px; |
||||
} |
||||
|
||||
&:first-of-type { |
||||
border-left: 4px solid $primary; |
||||
&:nth-child(1)::before { |
||||
background-color: $dashboard-line-color-price; |
||||
} |
||||
|
||||
&:last-of-type { |
||||
border-left: 4px solid $secondary; |
||||
&:nth-child(2)::before { |
||||
background-color: $dashboard-line-color-market; |
||||
} |
||||
} |
||||
|
||||
&-label { |
||||
.dashboard-banner-chart-legend-label { |
||||
color: $dashboard-banner-chart-legend-label-color; |
||||
display: block; |
||||
color: $text-muted; |
||||
font-size: 12px; |
||||
font-weight: 600; |
||||
line-height: 1.2; |
||||
margin: 0 0 5px; |
||||
|
||||
@include media-breakpoint-down(md) { |
||||
margin: 0 5px 0 0; |
||||
} |
||||
} |
||||
|
||||
&-value { |
||||
.dashboard-banner-chart-legend-value { |
||||
color: $dashboard-banner-chart-legend-value-color; |
||||
display: block; |
||||
font-size: 12px; |
||||
font-weight: normal; |
||||
line-height: 1.2; |
||||
} |
||||
} |
||||
|
||||
.dashboard-banner-network-stats { |
||||
grid-area: stats; |
||||
display: flex; |
||||
.dashboard-banner-network-plain-container { |
||||
align-items: center; |
||||
justify-content: space-around; |
||||
padding-right: 1rem; |
||||
background-color: $primary; |
||||
box-shadow: -10px 0 15px 0 rgba($black, 0.14); |
||||
|
||||
@media (max-width: 992px) { |
||||
flex-direction: column; |
||||
align-items: flex-start; |
||||
padding: 0.5rem 2rem; |
||||
align-self: flex-end; |
||||
background-color: $dashboard-banner-network-plain-container-background-color; |
||||
border-top-left-radius: 10px; |
||||
display: flex; |
||||
height: $dashboard-banner-network-plain-container-height; |
||||
justify-content: center; |
||||
margin: 0 0 0 30px; |
||||
max-width: 100%; |
||||
padding: 30px 0 30px 60px; |
||||
width: 750px; |
||||
|
||||
@include media-breakpoint-down(md) { |
||||
border-top-right-radius: 10px; |
||||
height: auto; |
||||
justify-content: flex-start; |
||||
margin-left: 0; |
||||
margin-top: 15px; |
||||
max-width: 100%; |
||||
padding: 20px 0 20px 20px; |
||||
width: 250px; |
||||
} |
||||
|
||||
&-item { |
||||
padding-left: 1rem; |
||||
color: $white; |
||||
border-left: 4px solid rgba($white, 0.6); |
||||
@include media-breakpoint-down(sm) { |
||||
width: 100%; |
||||
} |
||||
} |
||||
|
||||
&-label { |
||||
display: block; |
||||
white-space: nowrap; |
||||
} |
||||
.dashboard-banner-network-stats { |
||||
column-gap: 25px; |
||||
display: grid; |
||||
grid-template-columns: 1fr 1fr 1fr 1fr; |
||||
|
||||
&-value { |
||||
display: block; |
||||
font-size: 1.5rem; |
||||
font-weight: 200; |
||||
@include media-breakpoint-down(md) { |
||||
grid-template-columns: 1fr; |
||||
row-gap: 20px; |
||||
} |
||||
|
||||
@media (max-width: 992px) { |
||||
font-size: 1.25rem; |
||||
} |
||||
@include media-breakpoint-down(sm) { |
||||
column-gap: 10px; |
||||
grid-template-columns: 1fr 1fr; |
||||
} |
||||
} |
||||
|
||||
@include stats-item($dashboard-stats-item-border-color, $dashboard-stats-item-label-color, $dashboard-stats-item-value-color); |
||||
} |
||||
@ -1,16 +1,23 @@ |
||||
.transaction { |
||||
|
||||
&__dot { |
||||
display: inline-block; |
||||
height: 10px; |
||||
width: 10px ; |
||||
width: 10px; |
||||
border-radius: 50%; |
||||
margin-left: 5px; |
||||
vertical-align: baseline; |
||||
|
||||
&--pending { background-color: $gray-500; } |
||||
&--success { background-color: $success; } |
||||
&--failed { background-color: $danger; } |
||||
&--out_of_gas { background-color: $warning; } |
||||
&--pending { |
||||
background-color: $gray-500; |
||||
} |
||||
&--success { |
||||
background-color: $success; |
||||
} |
||||
&--failed { |
||||
background-color: $danger; |
||||
} |
||||
&--out_of_gas { |
||||
background-color: $warning; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@ -1,17 +1,74 @@ |
||||
// These styles extend the default Bootstrap styles |
||||
|
||||
.dropdown-menu { |
||||
width: 100%; |
||||
border-radius: 8px !important; |
||||
border: none; |
||||
box-shadow: $box-shadow; |
||||
padding: 0; |
||||
width: 100%; |
||||
|
||||
&.right { |
||||
left: auto; |
||||
right: 0; |
||||
} |
||||
|
||||
.nav-item & { |
||||
border-top-left-radius: 0 !important; |
||||
border-top-right-radius: 0 !important; |
||||
top: 45px; |
||||
|
||||
.dropdown-item:first-child { |
||||
border-top-left-radius: 0; |
||||
border-top-right-radius: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.dropdown-item { |
||||
font-size: 12px; |
||||
padding: 10px 20px; |
||||
|
||||
&:hover { |
||||
color: #fff; |
||||
} |
||||
|
||||
&:first-child { |
||||
border-top-left-radius: 8px; |
||||
border-top-right-radius: 8px; |
||||
} |
||||
|
||||
&:last-child { |
||||
border-bottom-left-radius: 8px; |
||||
border-bottom-right-radius: 8px; |
||||
} |
||||
|
||||
&.header { |
||||
&, |
||||
&:hover, |
||||
&:active { |
||||
padding-left: 10px; |
||||
background-color: transparent; |
||||
cursor: default; |
||||
color: #333; |
||||
font-weight: 700; |
||||
} |
||||
} |
||||
|
||||
&.division { |
||||
border-top: 1px solid $base-border-color; |
||||
} |
||||
} |
||||
|
||||
.dropdown-search-icon { |
||||
top: 0.5rem; |
||||
color: $gray-300; |
||||
left: 0.625rem; |
||||
pointer-events: none; |
||||
color: $gray-300; |
||||
top: 0.5rem; |
||||
} |
||||
|
||||
.dropdown-search-field { |
||||
padding-left: 2rem; |
||||
} |
||||
|
||||
.dropdown-toggle::after { |
||||
margin-left: 0.71em; |
||||
} |
||||
|
||||
@ -0,0 +1,46 @@ |
||||
$form-control-border-color: #e2e5ec !default; |
||||
|
||||
.form-control { |
||||
border-color: $form-control-border-color; |
||||
border-radius: 0; |
||||
font-size: 14px; |
||||
|
||||
&.n-b-r { |
||||
border-right: none; |
||||
} |
||||
} |
||||
|
||||
.form-p { |
||||
color: #a3a9b5; |
||||
font-size: 12px; |
||||
font-weight: normal; |
||||
line-height: 1.8; |
||||
|
||||
.text-dark { |
||||
color: #333; |
||||
} |
||||
|
||||
&.m-b-0 { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
|
||||
.input-group-prepend.last { |
||||
.input-group-text { |
||||
background: none; |
||||
border-color: $form-control-border-color; |
||||
border-left: none; |
||||
color: #a3a9b5; |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
|
||||
.form-buttons { |
||||
[class*="btn-"] { |
||||
margin-bottom: 20px; |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
$i-tooltip-background: #a3a9b5 !default; |
||||
$i-tooltip-background-active: $primary !default; |
||||
|
||||
.i-tooltip { |
||||
display: block; |
||||
height: 16px; |
||||
width: 16px; |
||||
|
||||
path { |
||||
fill: $i-tooltip-background; |
||||
} |
||||
|
||||
&:hover { |
||||
path { |
||||
fill: $i-tooltip-background-active; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,44 @@ |
||||
$modal-overlay-color: rgba($secondary, 0.9) !default; |
||||
$modal-horizontal-padding: 30px !default; |
||||
$modal-vertical-padding: 25px !default; |
||||
$modal-border-radius: 10px !default; |
||||
$modal-gray-background: #f6f7f9 !default; |
||||
|
||||
.modal-backdrop { |
||||
background-color: $modal-overlay-color; |
||||
|
||||
&.show { |
||||
opacity: 1; |
||||
} |
||||
} |
||||
|
||||
.modal-header { |
||||
border-bottom: none; |
||||
padding: #{$modal-vertical-padding} #{$modal-horizontal-padding}; |
||||
} |
||||
|
||||
.close.close-modal { |
||||
left: auto; |
||||
opacity: 1; |
||||
position: absolute; |
||||
right: -35px; |
||||
top: -35px; |
||||
} |
||||
|
||||
.modal-body { |
||||
padding: 0 #{$modal-horizontal-padding} #{$modal-vertical-padding}; |
||||
} |
||||
|
||||
.modal-title { |
||||
color: #333; |
||||
font-size: 18px; |
||||
font-weight: normal; |
||||
text-align: left; |
||||
white-space: normal; |
||||
word-break: break-word; |
||||
} |
||||
|
||||
.modal-content { |
||||
border-radius: $modal-border-radius; |
||||
position: relative; |
||||
} |
||||
@ -0,0 +1,9 @@ |
||||
.modal-become-candidate { |
||||
max-width: 100%; |
||||
width: 280px; |
||||
|
||||
@include media-breakpoint-down(sm) { |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@ |
||||
.modal-bottom-disclaimer { |
||||
background-color: $modal-gray-background; |
||||
border-bottom-left-radius: $modal-border-radius; |
||||
border-bottom-right-radius: $modal-border-radius; |
||||
color: #a3a9b5; |
||||
display: flex; |
||||
font-size: 12px; |
||||
font-weight: normal; |
||||
line-height: 1.67; |
||||
padding: #{$modal-vertical-padding} #{$modal-horizontal-padding}; |
||||
text-align: left; |
||||
|
||||
&.b-b-r-0 { |
||||
border-bottom-right-radius: 0; |
||||
} |
||||
|
||||
.modal-bottom-disclaimer-graphic { |
||||
flex-shrink: 0; |
||||
padding-right: 15px; |
||||
} |
||||
|
||||
.modal-bottom-disclaimer-text { |
||||
flex-grow: 1; |
||||
} |
||||
} |
||||
@ -0,0 +1,13 @@ |
||||
.modal-stake { |
||||
max-width: 100%; |
||||
width: 460px; |
||||
|
||||
@include media-breakpoint-down(sm) { |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
} |
||||
} |
||||
|
||||
.modal-stake-two-cols { |
||||
display: flex; |
||||
} |
||||
@ -0,0 +1,64 @@ |
||||
$modal-status-graph-error: #ff0d51 !default; |
||||
$modal-status-graph-warning: #ff8502 !default; |
||||
$modal-status-graph-success: $primary !default; |
||||
|
||||
.modal-status { |
||||
max-width: 100%; |
||||
width: 300px; |
||||
|
||||
@include media-breakpoint-down(sm) { |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
} |
||||
} |
||||
|
||||
.modal-status-graph { |
||||
align-items: center; |
||||
border-top-left-radius: $modal-border-radius; |
||||
border-top-right-radius: $modal-border-radius; |
||||
display: flex; |
||||
height: 135px; |
||||
justify-content: center; |
||||
|
||||
&-error { |
||||
background-color: $modal-status-graph-error; |
||||
} |
||||
|
||||
&-warning { |
||||
background-color: $modal-status-graph-warning; |
||||
} |
||||
|
||||
&-success { |
||||
background-color: $modal-status-graph-success; |
||||
} |
||||
|
||||
svg { |
||||
margin-top: 15px; |
||||
} |
||||
} |
||||
|
||||
.modal-status-body { |
||||
align-items: center; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
padding: #{$modal-vertical-padding} #{$modal-horizontal-padding}; |
||||
} |
||||
|
||||
.modal-status-title { |
||||
color: #333; |
||||
font-size: 18px; |
||||
font-weight: normal; |
||||
line-height: 1.2; |
||||
margin: 0 0 15px; |
||||
text-align: center; |
||||
} |
||||
|
||||
.modal-status-text { |
||||
color: #a3a9b5; |
||||
font-size: 12px; |
||||
font-weight: normal; |
||||
line-height: 1.5; |
||||
margin: 0 0 25px; |
||||
text-align: center; |
||||
} |
||||
@ -0,0 +1,49 @@ |
||||
.modal-validator-info { |
||||
max-width: 100%; |
||||
width: 660px; |
||||
|
||||
@include media-breakpoint-down(sm) { |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
} |
||||
} |
||||
|
||||
.modal-validator-info-content { |
||||
background-color: $modal-gray-background; |
||||
border-bottom-left-radius: $modal-border-radius; |
||||
border-bottom-right-radius: $modal-border-radius; |
||||
color: #a3a9b5; |
||||
column-gap: 60px; |
||||
display: grid; |
||||
font-size: 12px; |
||||
font-weight: normal; |
||||
grid-template-columns: 1fr 1fr 1fr; |
||||
line-height: 1.67; |
||||
padding: #{$modal-vertical-padding} #{$modal-horizontal-padding}; |
||||
row-gap: 30px; |
||||
|
||||
@include media-breakpoint-down(sm) { |
||||
grid-template-columns: 1fr 1fr; |
||||
} |
||||
} |
||||
|
||||
.modal-validator-info-item { |
||||
&-title { |
||||
color: #a3a9b5; |
||||
font-size: 12px; |
||||
font-weight: normal; |
||||
line-height: 1.2; |
||||
margin-bottom: 15px; |
||||
padding: 0; |
||||
text-align: left; |
||||
} |
||||
|
||||
&-value { |
||||
color: #333; |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
line-height: 1.2; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
} |
||||
@ -1,35 +1,42 @@ |
||||
$pagination-page-link-background: #f5f6fa !default; |
||||
$pagination-page-link-color: #a3a9b5 !default; |
||||
$pagination-page-link-background-active: $primary !default; |
||||
$pagination-page-link-color-active: #fff !default; |
||||
|
||||
.pagination { |
||||
display: block; |
||||
margin: 0; |
||||
padding: 30px; |
||||
|
||||
&-list { |
||||
list-style: none; |
||||
margin: 0; |
||||
padding: 0; |
||||
white-space: nowrap; |
||||
} |
||||
.page-item { |
||||
margin: 0 10px 0 0; |
||||
|
||||
li { |
||||
font-size: 13px; |
||||
display: inline-block; |
||||
margin: 0; |
||||
margin-right: explorer-size(-3); |
||||
&:last-of-type { margin-right: 0; } |
||||
&:last-child { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
|
||||
&-link { |
||||
.page-link { |
||||
background-color: $pagination-page-link-background; |
||||
border: 1px solid $pagination-page-link-background; |
||||
color: $pagination-page-link-color; |
||||
display: block; |
||||
line-height: 1; |
||||
color: $gray-400; |
||||
text-decoration: none; |
||||
padding: 7px 9px; |
||||
border: 1px solid $border-color; |
||||
border-radius: $border-radius; |
||||
line-height: 1.25; |
||||
margin: 0; |
||||
padding: 0.5rem 0.75rem; |
||||
position: relative; |
||||
|
||||
&:hover { |
||||
background-color: darken($pagination-page-link-background, 5%); |
||||
border-color: darken($pagination-page-link-background, 5%); |
||||
} |
||||
|
||||
&:hover, |
||||
&.is-current { |
||||
border-color: $primary; |
||||
background: $primary; |
||||
color: $white; |
||||
.active & { |
||||
&, |
||||
&:hover { |
||||
background-color: $pagination-page-link-background-active; |
||||
border-color: $pagination-page-link-background-active; |
||||
color: $pagination-page-link-color-active; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,53 @@ |
||||
$progress-from-to-background: #f5f6fa !default; |
||||
$progress-from-to-progress-background: $primary !default; |
||||
|
||||
.progress-from-to { |
||||
min-width: 120px; |
||||
max-width: 100%; |
||||
|
||||
.stakes-table & { |
||||
width: 120px; |
||||
} |
||||
} |
||||
|
||||
.progress-from-to-values { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin-bottom: 10px; |
||||
} |
||||
|
||||
.progress-from-to-value { |
||||
color: #333; |
||||
font-size: 12px; |
||||
font-weight: normal; |
||||
line-height: 1.2; |
||||
|
||||
.stakes-tr-banned & { |
||||
color: $stakes-banned-color; |
||||
} |
||||
} |
||||
|
||||
.progress-from-to-background { |
||||
background-color: $progress-from-to-background; |
||||
border-radius: 2px; |
||||
height: 4px; |
||||
overflow: hidden; |
||||
position: relative; |
||||
|
||||
.stakes-tr-banned & { |
||||
background-color: darken($stakes-banned-background, 5%); |
||||
} |
||||
} |
||||
|
||||
.progress-from-to-progress { |
||||
background-color: $progress-from-to-progress-background; |
||||
height: 100%; |
||||
left: 0; |
||||
max-width: 100%; |
||||
position: absolute; |
||||
top: 0; |
||||
|
||||
.stakes-tr-banned & { |
||||
background-color: $stakes-banned-color; |
||||
} |
||||
} |
||||
@ -0,0 +1,142 @@ |
||||
$stakes-dashboard-copy-icon-color: $copy-icon-color !default; |
||||
$stakes-address-color: $primary !default; |
||||
$stakes-control-color: $primary !default; |
||||
$stakes-banned-color: #ff7986 !default; |
||||
$stakes-banned-background: #fff3f7 !default; |
||||
$stakes-stats-item-color: #fff !default; |
||||
$stakes-stats-item-border-color: #fff !default; |
||||
|
||||
.stakes-top { |
||||
@include gradient-container(); |
||||
|
||||
margin-bottom: 3rem; |
||||
padding: 50px 0; |
||||
} |
||||
|
||||
.stakes-top-stats { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
|
||||
@include stats-item($stakes-stats-item-border-color, $stakes-stats-item-color); |
||||
|
||||
@include media-breakpoint-down(md) { |
||||
column-gap: 30px; |
||||
display: grid; |
||||
grid-template-columns: 1fr 1fr; |
||||
row-gap: 30px; |
||||
} |
||||
|
||||
.stakes-top-stats-item { |
||||
@include media-breakpoint-down(md) { |
||||
&:nth-child(1), |
||||
&:nth-child(2), |
||||
&:nth-child(3) { |
||||
grid-column-start: 1; |
||||
} |
||||
&:nth-child(4) { |
||||
grid-column-start: 2; |
||||
grid-row-start: 1; |
||||
} |
||||
} |
||||
|
||||
@include media-breakpoint-down(sm) { |
||||
grid-column-start: auto !important; |
||||
grid-row-start: auto !important; |
||||
} |
||||
} |
||||
|
||||
@include media-breakpoint-down(sm) { |
||||
grid-template-columns: 1fr; |
||||
} |
||||
|
||||
.copy-icon { |
||||
margin-left: 20px; |
||||
path { |
||||
fill: $stakes-dashboard-copy-icon-color; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.stakes-top-stats-value { |
||||
align-items: center; |
||||
display: flex; |
||||
|
||||
.stakes-top-stats-item-address & { |
||||
white-space: normal; |
||||
word-break: break-all; |
||||
} |
||||
} |
||||
|
||||
.stakes-top-stats-login { |
||||
color: $primary; |
||||
cursor: pointer; |
||||
margin-right: 8px; |
||||
} |
||||
|
||||
.stakes-address-container { |
||||
display: flex; |
||||
cursor: pointer; |
||||
justify-content: flex-start; |
||||
|
||||
.stakes-address { |
||||
color: $stakes-address-color; |
||||
margin-right: 10px; |
||||
|
||||
.stakes-tr-banned & { |
||||
color: $stakes-banned-color; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.stakes-controls { |
||||
align-items: center; |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
padding-right: 30px; |
||||
} |
||||
|
||||
.stakes-control { |
||||
cursor: pointer; |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
color: $stakes-control-color; |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
line-height: 1.2; |
||||
margin-right: 25px; |
||||
text-align: left; |
||||
|
||||
&:last-child { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
|
||||
.stakes-control-icon { |
||||
margin-right: 10px; |
||||
path { |
||||
fill: $stakes-control-color; |
||||
} |
||||
} |
||||
|
||||
.stakes-top-buttons { |
||||
align-items: center; |
||||
display: flex; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
|
||||
.btn-add-full { |
||||
margin-bottom: 10px; |
||||
} |
||||
|
||||
@include media-breakpoint-down(md) { |
||||
grid-column-start: 2; |
||||
grid-row-start: 2; |
||||
justify-self: end; |
||||
} |
||||
|
||||
@include media-breakpoint-down(sm) { |
||||
grid-column-start: auto !important; |
||||
grid-row-start: auto !important; |
||||
justify-self: center; |
||||
} |
||||
} |
||||
@ -0,0 +1,21 @@ |
||||
$stakes-btn-remove-pool-color: $primary !default; |
||||
|
||||
.stakes-btn-remove-pool { |
||||
align-items: center; |
||||
color: $stakes-btn-remove-pool-color; |
||||
cursor: pointer; |
||||
display: flex; |
||||
font-size: 12px; |
||||
font-weight: 600; |
||||
height: 36px; |
||||
justify-content: center; |
||||
text-align: center; |
||||
|
||||
svg { |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
path { |
||||
fill: $stakes-btn-remove-pool-color; |
||||
} |
||||
} |
||||
@ -0,0 +1,35 @@ |
||||
.stakes-empty-content { |
||||
display: flex; |
||||
justify-content: center; |
||||
padding: 100px 15px; |
||||
} |
||||
|
||||
.stakes-empty-content-pic { |
||||
flex-shrink: 0; |
||||
margin: 0 50px 0 0; |
||||
} |
||||
|
||||
.stakes-empty-content-pic-svg-path { |
||||
fill: $primary; |
||||
} |
||||
|
||||
.stakes-empty-content-info { |
||||
max-width: 300px; |
||||
} |
||||
|
||||
.stakes-empty-content-title { |
||||
font-size: 18px; |
||||
font-weight: normal; |
||||
line-height: 1.2; |
||||
margin: 0 0 15px; |
||||
text-align: left; |
||||
} |
||||
|
||||
.stakes-empty-content-text { |
||||
color: #a3a9b5; |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
line-height: 1.71; |
||||
margin: 0 0 25px; |
||||
text-align: left; |
||||
} |
||||
@ -0,0 +1,74 @@ |
||||
.stakes-progress { |
||||
.modal-stake-right & { |
||||
border-left: 1px solid $base-border-color; |
||||
flex-shrink: 0; |
||||
height: 100%; |
||||
padding: $modal-vertical-padding $modal-horizontal-padding; |
||||
width: 190px; |
||||
} |
||||
} |
||||
|
||||
.stakes-progress-info { |
||||
margin-bottom: 25px; |
||||
|
||||
&:last-child { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
|
||||
.stakes-progress-info-title { |
||||
color: #a3a9b5; |
||||
font-size: 12px; |
||||
font-weight: normal; |
||||
line-height: 1.2; |
||||
margin: 0 0 12px; |
||||
text-align: left; |
||||
} |
||||
|
||||
.stakes-progress-info-value { |
||||
color: #333; |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
line-height: 1.2; |
||||
margin: 0; |
||||
text-align: left; |
||||
|
||||
&.link-color { |
||||
color: $primary; |
||||
} |
||||
} |
||||
|
||||
.stakes-progress-graph { |
||||
margin: 0 0 20px; |
||||
position: relative; |
||||
} |
||||
|
||||
.stakes-progress-graph-canvas { |
||||
position: relative; |
||||
z-index: 1; |
||||
} |
||||
|
||||
.stakes-progress-data { |
||||
left: 50%; |
||||
position: absolute; |
||||
top: 50%; |
||||
transform: translateX(-50%) translateY(-50%); |
||||
z-index: 12; |
||||
} |
||||
|
||||
.stakes-progress-data-total { |
||||
color: #a3a9b5; |
||||
font-size: 12px; |
||||
font-weight: normal; |
||||
line-height: 1.2; |
||||
text-align: center; |
||||
} |
||||
|
||||
.stakes-progress-data-progress { |
||||
color: #333; |
||||
font-size: 24px; |
||||
font-weight: bold; |
||||
line-height: 1.2; |
||||
margin: 0 0 8px; |
||||
text-align: center; |
||||
} |
||||
@ -0,0 +1,75 @@ |
||||
$stakes-table-th-background: #f5f6fa !default; |
||||
$stakes-table-cell-separation: 25px !default; |
||||
|
||||
.stakes-table-container { |
||||
max-width: 100%; |
||||
overflow-x: auto; |
||||
width: 100%; |
||||
} |
||||
|
||||
.stakes-table { |
||||
min-width: fit-content; |
||||
width: 100%; |
||||
} |
||||
|
||||
.stakes-table-th { |
||||
background-color: $stakes-table-th-background; |
||||
color: #a3a9b5; |
||||
font-size: 14px; |
||||
font-weight: bold; |
||||
line-height: 1.2; |
||||
text-align: left; |
||||
|
||||
&:first-child { |
||||
min-width: 15px; |
||||
} |
||||
} |
||||
|
||||
.stakes-table-th-content { |
||||
align-items: center; |
||||
display: flex; |
||||
justify-content: flex-start; |
||||
padding: 21px $stakes-table-cell-separation 21px 0; |
||||
position: relative; |
||||
z-index: 0; |
||||
} |
||||
|
||||
.stakes-th-text { |
||||
margin-right: 10px; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.stakes-td { |
||||
border-bottom: 1px solid #f5f6fa; |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
height: 60px; |
||||
line-height: 1.2; |
||||
padding-right: $stakes-table-cell-separation; |
||||
text-align: left; |
||||
vertical-align: middle; |
||||
white-space: nowrap; |
||||
|
||||
&:last-child { |
||||
padding-right: 0; |
||||
} |
||||
|
||||
.stakes-tr-banned & { |
||||
background-color: $stakes-banned-background; |
||||
color: $stakes-banned-color; |
||||
} |
||||
} |
||||
|
||||
.stakes-td-order { |
||||
min-width: 50px; |
||||
padding-left: 30px; |
||||
text-align: left; |
||||
} |
||||
|
||||
.stakes-td-link-style { |
||||
color: $primary; |
||||
|
||||
.stakes-tr-banned & { |
||||
color: $stakes-banned-color; |
||||
} |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
$tooltip-background-color: $primary !default; |
||||
$tooltip-color: #fff !default; |
||||
|
||||
.tooltip { |
||||
max-width: 250px; |
||||
min-width: 100px; |
||||
|
||||
.tooltip-inner { |
||||
background-color: $tooltip-background-color; |
||||
border-radius: 5px; |
||||
color: $tooltip-color; |
||||
padding: 15px; |
||||
} |
||||
|
||||
.arrow::before { |
||||
border-top-color: $tooltip-background-color; |
||||
} |
||||
} |
||||
@ -1,14 +1,14 @@ |
||||
.transaction-input-text{ |
||||
.transaction-input-text { |
||||
white-space: pre; |
||||
color: black; |
||||
|
||||
pre{ |
||||
code{ |
||||
pre { |
||||
code { |
||||
color: black; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.transaction-input-table{ |
||||
.transaction-input-table { |
||||
overflow-x: scroll; |
||||
} |
||||
|
||||
@ -0,0 +1,6 @@ |
||||
.transaction-details-address { |
||||
font-size: 12px; |
||||
font-weight: bold; |
||||
line-height: 1.2; |
||||
margin: 0 0 12px; |
||||
} |
||||
@ -1,20 +0,0 @@ |
||||
.address-overview { |
||||
.card-section { |
||||
margin-bottom: 3rem; |
||||
} |
||||
|
||||
.card { |
||||
margin-bottom: 0; |
||||
height: 100%; |
||||
} |
||||
} |
||||
|
||||
.balance-card-title { |
||||
margin-bottom: .5rem; |
||||
} |
||||
|
||||
.address-detail-item{ |
||||
display: inline-block; |
||||
padding-bottom: 0.5em; |
||||
margin-right: 1em; |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
@ -1,3 +1,3 @@ |
||||
$primary: #34C88A; |
||||
$secondary: #163F59; |
||||
$tertiary: #466D85; |
||||
$primary: #34c88a; |
||||
$secondary: #163f59; |
||||
$tertiary: #466d85; |
||||
|
||||
@ -1,3 +1,3 @@ |
||||
$primary: #4A4A4A; |
||||
$secondary: #01C85C; |
||||
$tertiary: #466D85; |
||||
$primary: #4a4a4a; |
||||
$secondary: #01c85c; |
||||
$tertiary: #466d85; |
||||
|
||||
@ -1,3 +1,8 @@ |
||||
$primary: #1b1b39; |
||||
$secondary: #4beba0; |
||||
$tertiary: #4beba0; |
||||
$primary: #1b1b39; |
||||
$secondary: #4beba0; |
||||
$tertiary: #4beba0; |
||||
|
||||
$footer-background-color: $primary; |
||||
$footer-title-color: #fff; |
||||
$footer-text-color: #fff; |
||||
$footer-item-disc-color: $secondary; |
||||
|
||||
@ -1,3 +1,3 @@ |
||||
$primary: #16465b; |
||||
$secondary: #5ab3ff; |
||||
$tertiary: #77a4c5; |
||||
$primary: #16465b; |
||||
$secondary: #5ab3ff; |
||||
$tertiary: #77a4c5; |
||||
|
||||
@ -1,3 +1,3 @@ |
||||
$primary: #1F4C55; |
||||
$secondary: #E08E64; |
||||
$tertiary: #333333; |
||||
$primary: #1f4c55; |
||||
$secondary: #e08e64; |
||||
$tertiary: #333333; |
||||
|
||||
@ -1,3 +1,3 @@ |
||||
$primary: #586A8F; |
||||
$secondary: #00BCD4; |
||||
$tertiary: #6F87B2; |
||||
$primary: #586a8f; |
||||
$secondary: #00bcd4; |
||||
$tertiary: #6f87b2; |
||||
|
||||
@ -1,3 +1,8 @@ |
||||
$primary: #20201A; |
||||
$secondary: #F0D96B; |
||||
$tertiary: #4A443A; |
||||
$primary: #20201a; |
||||
$secondary: #f0d96b; |
||||
$tertiary: #4a443a; |
||||
|
||||
$footer-background-color: $primary; |
||||
$footer-title-color: #fff; |
||||
$footer-text-color: #fff; |
||||
$footer-item-disc-color: $secondary; |
||||
|
||||
@ -1,3 +1,8 @@ |
||||
$primary: #28aca4; |
||||
$secondary: #89edda; |
||||
$tertiary: #997fdc; |
||||
|
||||
$footer-background-color: $primary; |
||||
$footer-title-color: #fff; |
||||
$footer-text-color: #fff; |
||||
$footer-item-disc-color: $secondary; |
||||
|
||||
@ -0,0 +1,130 @@ |
||||
$primary: #1d3154; |
||||
$secondary: #fdcec4; |
||||
$tertiary: #00ff00; |
||||
|
||||
$common-link-color: #2e4d84; |
||||
|
||||
$dashboard-banner-gradient-start: #fdb8aa; |
||||
$dashboard-banner-gradient-end: #fdcec4; |
||||
|
||||
$dashboard-stats-item-label-color: $primary; |
||||
$dashboard-stats-item-value-color: $primary; |
||||
$dashboard-stats-item-border-color: $primary; |
||||
|
||||
$header-links-color-active: #333; |
||||
|
||||
$tile-type-block-color: $secondary; |
||||
|
||||
$navbar-logo-height: 18px; |
||||
$navbar-logo-width: 100px; |
||||
|
||||
$footer-background-color: $primary; |
||||
$footer-item-disc-color: $secondary; |
||||
$footer-link-color: $secondary; |
||||
$footer-social-icon-color: $secondary; |
||||
$footer-text-color: #fff; |
||||
$footer-logo-height: 18px; |
||||
$footer-logo-width: 100px; |
||||
|
||||
$btn-line-color: $primary; |
||||
|
||||
$dashboard-stats-item-color: $primary; |
||||
$dashboard-stats-item-border-color: $primary; |
||||
$stakes-stats-item-color: $primary; |
||||
$stakes-stats-item-border-color: $primary; |
||||
|
||||
$card-background-1: $secondary; |
||||
$card-background-1-text-color: $primary; |
||||
|
||||
$dashboard-banner-network-stats-static-image: "/images/lukso_dashboard_image.png"; |
||||
|
||||
// Custom home |
||||
$dashboard-banner-network-plain-container-height: 150px; |
||||
|
||||
.layout-container { |
||||
.dashboard-banner-container::after { |
||||
display: none; |
||||
} |
||||
|
||||
.dashboard-banner-network-graph { |
||||
display: none; |
||||
} |
||||
|
||||
.dashboard-banner-network-plain-container { |
||||
background-color: transparent; |
||||
height: $dashboard-banner-network-plain-container-height; |
||||
margin: 0; |
||||
padding: 0; |
||||
width: 100%; |
||||
|
||||
@include media-breakpoint-down(lg) { |
||||
height: auto; |
||||
min-height: $dashboard-banner-network-plain-container-height; |
||||
padding-bottom: 0; |
||||
padding-top: 25px; |
||||
} |
||||
|
||||
.dashboard-banner-network-stats { |
||||
align-items: center; |
||||
display: flex; |
||||
height: 100%; |
||||
justify-content: flex-start; |
||||
width: 100%; |
||||
|
||||
@include media-breakpoint-down(lg) { |
||||
flex-wrap: wrap; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
&::after { |
||||
background-color: transparent; |
||||
background-image: url($dashboard-banner-network-stats-static-image); |
||||
background-position: 50% 50%; |
||||
background-repeat: no-repeat; |
||||
background-size: contain; |
||||
bottom: auto; |
||||
content: ""; |
||||
display: block; |
||||
flex-grow: 0; |
||||
flex-shrink: 0; |
||||
height: $dashboard-banner-network-plain-container-height; |
||||
margin: 0 0 0 auto; |
||||
order: 150; |
||||
width: 301px; |
||||
|
||||
@include media-breakpoint-down(lg) { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
.dashboard-banner-network-stats-item { |
||||
margin-right: 60px; |
||||
|
||||
@include media-breakpoint-down(lg) { |
||||
flex-grow: 1; |
||||
flex-shrink: 1; |
||||
margin-right: 0; |
||||
margin-bottom: 25px; |
||||
} |
||||
|
||||
@include media-breakpoint-down(sm) { |
||||
min-width: 50%; |
||||
} |
||||
|
||||
&.dashboard-banner-network-stats-item-1 { |
||||
order: 1; |
||||
} |
||||
&.dashboard-banner-network-stats-item-2 { |
||||
order: 2; |
||||
} |
||||
&.dashboard-banner-network-stats-item-3 { |
||||
order: 4; |
||||
margin-right: 0; |
||||
} |
||||
&.dashboard-banner-network-stats-item-4 { |
||||
order: 3; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,3 +1,3 @@ |
||||
$primary: #171717; |
||||
$secondary: #FF9000; |
||||
$tertiary: #727272; |
||||
$primary: #171717; |
||||
$secondary: #ff9000; |
||||
$tertiary: #727272; |
||||
|
||||
@ -1,25 +1,8 @@ |
||||
// ------------------------------- // |
||||
// Neutral Theme 1: Blue Shifted |
||||
// ------------------------------- // |
||||
$primary: #262d62; |
||||
$secondary: #687bf6; |
||||
$tertiary: #687bf6; |
||||
|
||||
// $primary: #254F8D; |
||||
// $secondary: #72B0FB; |
||||
// $tertiary: #72B0FB; |
||||
$dashboard-line-color-price: #8286a9 !default; |
||||
|
||||
|
||||
// ------------------------------- // |
||||
// Neutral Theme 2: Black and Blue |
||||
// ------------------------------- // |
||||
|
||||
// $primary: #34373E; |
||||
// $secondary: #72B0FB; |
||||
// $tertiary: #72B0FB; |
||||
|
||||
|
||||
// ------------------------------- // |
||||
// Neutral Theme 3: Purple Shifted |
||||
// ------------------------------- // |
||||
|
||||
$primary: #262D62; |
||||
$secondary: #687BF6; |
||||
$tertiary: #687BF6; |
||||
$base-border-color: #e2e5ec !default; |
||||
$common-container-margin: 50px !default; |
||||
@ -1,3 +1,8 @@ |
||||
$primary: #343434; |
||||
$secondary: #A2D729; |
||||
$tertiary: #7F7F7F; |
||||
$primary: #343434; |
||||
$secondary: #a2d729; |
||||
$tertiary: #7f7f7f; |
||||
|
||||
$footer-background-color: $primary; |
||||
$footer-title-color: #fff; |
||||
$footer-text-color: #fff; |
||||
$footer-item-disc-color: $secondary; |
||||
|
||||
@ -1,3 +1,11 @@ |
||||
$primary: #5b389f; |
||||
$secondary: #7dd79f; |
||||
$tertiary: #997fdc; |
||||
$primary: #5b389f; |
||||
$secondary: #7dd79f; |
||||
$tertiary: #997fdc; |
||||
|
||||
$header-links-color-active: #333; |
||||
$button-secondary-color: $primary; |
||||
|
||||
$footer-background-color: $primary; |
||||
$footer-title-color: #fff; |
||||
$footer-text-color: #fff; |
||||
$footer-item-disc-color: $secondary; |
||||
|
||||
@ -0,0 +1,29 @@ |
||||
$primary: #15bba6; |
||||
$secondary: #17314f; |
||||
$tertiary: #00ff00; |
||||
|
||||
$header-links-color-active: #333; |
||||
$dashboard-banner-gradient-start: $secondary; |
||||
$dashboard-banner-gradient-end: #1e4168; |
||||
|
||||
$dashboard-line-color-market: $primary; |
||||
|
||||
$tile-type-block-border-color: $secondary; |
||||
$tile-type-block-color: #333; |
||||
|
||||
$footer-background-color: #173250; |
||||
$footer-text-color: #909dac; |
||||
|
||||
$navbar-logo-height: auto; |
||||
$navbar-logo-width: 100px; |
||||
|
||||
$footer-logo-height: auto; |
||||
$footer-logo-width: 100px; |
||||
|
||||
$card-background-1: $secondary; |
||||
$card-background-1-text-color: #fff; |
||||
|
||||
$btn-copy-color: $secondary; |
||||
$btn-qr-color: $secondary; |
||||
|
||||
$btn-dropdown-line-color: $secondary; |
||||
@ -1,3 +1,8 @@ |
||||
$primary: #2fa8f8; |
||||
$primary: #2fa8f8; |
||||
$secondary: #a2daff; |
||||
$tertiary: #006aa7; |
||||
$tertiary: #006aa7; |
||||
|
||||
$footer-background-color: $primary; |
||||
$footer-title-color: #fff; |
||||
$footer-text-color: #fff; |
||||
$footer-item-disc-color: $secondary; |
||||
|
||||
@ -1,3 +1,8 @@ |
||||
$primary: #A375FF; |
||||
$secondary: #00F0BD; |
||||
$tertiary: #53A9FF; |
||||
$primary: #a375ff; |
||||
$secondary: #00f0bd; |
||||
$tertiary: #53a9ff; |
||||
|
||||
$footer-background-color: $primary; |
||||
$footer-title-color: #fff; |
||||
$footer-text-color: #fff; |
||||
$footer-item-disc-color: $secondary; |
||||
|
||||
@ -1,3 +1,8 @@ |
||||
$primary: #559387; |
||||
$secondary: #add7cf; |
||||
$tertiary: #38533d; |
||||
$primary: #559387; |
||||
$secondary: #add7cf; |
||||
$tertiary: #38533d; |
||||
|
||||
$footer-background-color: $primary; |
||||
$footer-title-color: #fff; |
||||
$footer-text-color: #fff; |
||||
$footer-item-disc-color: $secondary; |
||||
|
||||
@ -1,3 +1,8 @@ |
||||
$primary: #633D99; |
||||
$secondary: #6CC04A; |
||||
$tertiary: #A566FF; |
||||
$primary: #633d99; |
||||
$secondary: #6cc04a; |
||||
$tertiary: #a566ff; |
||||
|
||||
$footer-background-color: $primary; |
||||
$footer-title-color: #fff; |
||||
$footer-text-color: #fff; |
||||
$footer-item-disc-color: $secondary; |
||||
|
||||
@ -1,3 +1,3 @@ |
||||
$primary: #211841; |
||||
$secondary: #F16950; |
||||
$tertiary: #8B84BC; |
||||
$primary: #211841; |
||||
$secondary: #f16950; |
||||
$tertiary: #8b84bc; |
||||
|
||||
@ -1,2 +1,29 @@ |
||||
@import "neutral_variables"; |
||||
@import "theme/base_variables"; |
||||
@import "neutral_variables"; |
||||
// @import "dai_variables"; |
||||
// @import "ethereum_classic_variables"; |
||||
// @import "ethereum_variables"; |
||||
// @import "expanse_variables"; |
||||
// @import "gochain_variables"; |
||||
// @import "goerli_variables"; |
||||
// @import "kovan_variables"; |
||||
// @import "lukso_variables"; |
||||
// @import "musicoin_variables"; |
||||
// @import "pirl_variables"; |
||||
// @import "poa_variables"; |
||||
// @import "posdao_variables"; |
||||
// @import "rinkeby_variables"; |
||||
// @import "ropsten_variables"; |
||||
// @import "social_variables"; |
||||
// @import "sokol_variables"; |
||||
// @import "tobalaba_variables"; |
||||
// @import "tomochain_variables"; |
||||
|
||||
// responsive breakpoints |
||||
$breakpoint-xs: 320px; |
||||
$breakpoint-sm: 480px; |
||||
$breakpoint-md: 768px; |
||||
$breakpoint-lg: 992px; |
||||
$breakpoint-xl: 1024px; |
||||
$breakpoint-xxl: 1280px; |
||||
$breakpoint-xxxl: 1366px; |
||||
|
||||
@ -1,3 +1,3 @@ |
||||
$primary: #3680F8; |
||||
$secondary: #2CCFC5; |
||||
$tertiary: #7289AF; |
||||
$primary: #3680f8; |
||||
$secondary: #2ccfc5; |
||||
$tertiary: #7289af; |
||||
|
||||
@ -0,0 +1,21 @@ |
||||
import $ from 'jquery' |
||||
|
||||
$(function () { |
||||
const activeTabCard = $('.card-tab.active') |
||||
|
||||
if (!activeTabCard.siblings().length) { |
||||
activeTabCard.addClass('noCaret') |
||||
} |
||||
|
||||
activeTabCard.on('click', function (e) { |
||||
e.preventDefault() |
||||
|
||||
const siblings = $(this).siblings() |
||||
|
||||
if (siblings.is(':hidden')) { |
||||
siblings.show() |
||||
} else { |
||||
siblings.hide() |
||||
} |
||||
}) |
||||
}) |
||||
@ -0,0 +1,76 @@ |
||||
import $ from 'jquery' |
||||
import Chart from 'chart.js' |
||||
|
||||
$(function () { |
||||
$('.js-become-candidate').on('click', function () { |
||||
$('#becomeCandidateModal').modal() |
||||
}) |
||||
|
||||
$('.js-validator-info-modal').on('click', function () { |
||||
$('#validatorInfoModal').modal() |
||||
}) |
||||
|
||||
$('.js-move-stake').on('click', function () { |
||||
$('#errorStatusModal').modal() |
||||
}) |
||||
|
||||
$('.js-remove-pool').on('click', function () { |
||||
$('#warningStatusModal').modal() |
||||
}) |
||||
|
||||
$('.js-copy-address').on('click', function () { |
||||
$('#successStatusModal').modal() |
||||
}) |
||||
|
||||
$('.js-stake-stake').on('click', function () { |
||||
const modal = '#stakeModal' |
||||
const progress = parseInt($(`${modal} .js-stakes-progress-data-progress`).text()) |
||||
const total = parseInt($(`${modal} .js-stakes-progress-data-total`).text()) |
||||
|
||||
$(modal).modal() |
||||
|
||||
setupStakesProgress(progress, total, modal) |
||||
}) |
||||
|
||||
$('.js-withdraw-stake').on('click', function () { |
||||
const modal = '#withdrawModal' |
||||
const progress = parseInt($(`${modal} .js-stakes-progress-data-progress`).text()) |
||||
const total = parseInt($(`${modal} .js-stakes-progress-data-total`).text()) |
||||
|
||||
$(modal).modal() |
||||
|
||||
setupStakesProgress(progress, total, modal) |
||||
}) |
||||
|
||||
function setupStakesProgress (progress, total, modal) { |
||||
const stakeProgress = $(`${modal} .js-stakes-progress`) |
||||
const primaryColor = $('.btn-full-primary').css('background-color') |
||||
const backgroundColors = [ |
||||
primaryColor, |
||||
'rgba(202, 199, 226, 0.5)' |
||||
] |
||||
const progressBackground = total - progress |
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
let myChart = new Chart(stakeProgress, { |
||||
type: 'doughnut', |
||||
data: { |
||||
datasets: [{ |
||||
data: [progress, progressBackground], |
||||
backgroundColor: backgroundColors, |
||||
hoverBackgroundColor: backgroundColors, |
||||
borderWidth: 0 |
||||
}] |
||||
}, |
||||
options: { |
||||
cutoutPercentage: 80, |
||||
legend: { |
||||
display: false |
||||
}, |
||||
tooltips: { |
||||
enabled: false |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
}) |
||||
@ -0,0 +1,7 @@ |
||||
import $ from 'jquery' |
||||
import hljs from 'highlight.js' |
||||
|
||||
// only activate highlighting on pages with this selector
|
||||
if ($('[data-activate-highlight]').length > 0) { |
||||
hljs.initHighlightingOnLoad() |
||||
} |
||||
|
Before Width: | Height: | Size: 410 B |
|
Before Width: | Height: | Size: 593 B |
|
Before Width: | Height: | Size: 945 B |
|
After Width: | Height: | Size: 333 B |
|
After Width: | Height: | Size: 281 B |
|
After Width: | Height: | Size: 263 B |
|
After Width: | Height: | Size: 532 B |
|
Before Width: | Height: | Size: 643 B |
|
After Width: | Height: | Size: 952 B |
|
After Width: | Height: | Size: 186 B |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue