init
This commit is contained in:
Danil Kovtonyuk
commit
44f31f8b9f
402 changed files with 47865 additions and 0 deletions
221
assets/styles/components/_account.scss
Normal file
221
assets/styles/components/_account.scss
Normal file
|
|
@ -0,0 +1,221 @@
|
|||
.account {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
|
||||
.title {
|
||||
color: $white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 2.857rem;
|
||||
|
||||
> .icon {
|
||||
margin-right: 1.143rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-box {
|
||||
margin: 1.25rem 0;
|
||||
background-color: #171717;
|
||||
border-radius: 6px;
|
||||
transition: box-shadow 0.5s linear;
|
||||
|
||||
.address {
|
||||
border-radius: 6px;
|
||||
background: #1f1f1f;
|
||||
padding: 1rem 1.429rem;
|
||||
|
||||
&-item {
|
||||
.label {
|
||||
font-size: 0.929rem;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 1.286rem;
|
||||
color: $primary;
|
||||
word-break: break-all;
|
||||
|
||||
&.is-small {
|
||||
font-size: 0.929rem;
|
||||
}
|
||||
}
|
||||
|
||||
+ .address-item {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
padding: 0 1.429rem;
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
padding: 1.429rem 0;
|
||||
|
||||
.icon {
|
||||
margin-right: 1.429rem;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-right: auto;
|
||||
max-width: 346px;
|
||||
font-size: 0.929rem;
|
||||
line-height: 1.714rem;
|
||||
|
||||
span {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.balance {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&-item {
|
||||
white-space: nowrap;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #353535;
|
||||
}
|
||||
|
||||
.switch {
|
||||
margin-left: 1.429rem;
|
||||
margin-right: 0;
|
||||
|
||||
.control-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
+ .check {
|
||||
background-color: #313131;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:checked + .check {
|
||||
&:before {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
|
||||
&.has-switch {
|
||||
min-height: 136px;
|
||||
}
|
||||
|
||||
.desc {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 0%;
|
||||
}
|
||||
|
||||
> .button,
|
||||
> .b-tooltip {
|
||||
margin-top: 1.5rem;
|
||||
width: 100%;
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.switch {
|
||||
margin-left: 0;
|
||||
top: 6.378rem;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
.button {
|
||||
margin-left: 1.429rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.note-account {
|
||||
.title {
|
||||
padding-top: 1.857rem;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.account-box {
|
||||
box-shadow: 0 0 20px $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-decrypt-info {
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
padding: 0.75rem 0;
|
||||
|
||||
.desc {
|
||||
margin-right: auto;
|
||||
max-width: 346px;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid #353535;
|
||||
}
|
||||
|
||||
.switch {
|
||||
margin-left: 1.429rem;
|
||||
margin-right: 0;
|
||||
|
||||
.control-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
flex-wrap: wrap;
|
||||
min-height: 136px;
|
||||
align-items: flex-start;
|
||||
|
||||
.desc {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 0%;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: 1.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.switch {
|
||||
margin-left: 0;
|
||||
top: 6.378rem;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
.button {
|
||||
margin-left: 1.429rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
251
assets/styles/components/_base.scss
Normal file
251
assets/styles/components/_base.scss
Normal file
|
|
@ -0,0 +1,251 @@
|
|||
$control-height: 2.857em;
|
||||
$control-border-width: 1px;
|
||||
$control-padding-vertical: calc(0.429em - #{$control-border-width});
|
||||
$control-padding-horizontal: calc(1.25em - #{$control-border-width});
|
||||
|
||||
$white: #eee;
|
||||
$primary: #94febf;
|
||||
$primary-invert: #000403;
|
||||
$warning: #ff8a00;
|
||||
$black: #2c4538;
|
||||
$danger: #ff0658;
|
||||
$danger-invert: #000403;
|
||||
$dark: #171717;
|
||||
$dark-invert: $primary;
|
||||
$info: $primary-invert;
|
||||
$info-invert: $white;
|
||||
$violet: #865ff3;
|
||||
$gray: #6b6b6b;
|
||||
$grey-lighter: #393939;
|
||||
$dark-tooltip: #313131;
|
||||
$custom-colors: (
|
||||
'black': (
|
||||
$black,
|
||||
$primary-invert
|
||||
),
|
||||
'violet': (
|
||||
$violet,
|
||||
$white
|
||||
),
|
||||
'gray': (
|
||||
$gray,
|
||||
$white
|
||||
),
|
||||
'dark-tooltip': (
|
||||
$dark-tooltip,
|
||||
$gray
|
||||
)
|
||||
);
|
||||
|
||||
@import '~bulma/sass/utilities/_all';
|
||||
|
||||
$body-family: 'PT Mono', monospace;
|
||||
$body-background-color: $primary-invert;
|
||||
$body-color: $white;
|
||||
$body-size: 14px;
|
||||
$body-min-width: 320px;
|
||||
|
||||
$navbar-background-color: transparent;
|
||||
$navbar-item-color: $white;
|
||||
$navbar-item-hover-color: $primary;
|
||||
$navbar-item-hover-background-color: transparent;
|
||||
$navbar-item-active-color: $primary;
|
||||
$navbar-breakpoint: $tablet;
|
||||
|
||||
$label-color: $white;
|
||||
$label-weight: $weight-normal;
|
||||
|
||||
$button-background-color: #181818;
|
||||
$button-border-color: #666;
|
||||
$button-color: $white;
|
||||
$button-hover-border-color: $primary;
|
||||
$button-focus-border-color: $primary;
|
||||
$button-focus-color: $primary;
|
||||
$button-focus-box-shadow-color: rgba($primary, 0.25);
|
||||
|
||||
$button-active-border-color: darken($primary, 10%);
|
||||
$button-active-color: darken($primary, 10%);
|
||||
|
||||
$button-text-color: $primary;
|
||||
$button-text-hover-background-color: $primary;
|
||||
$button-text-hover-color: $primary-invert;
|
||||
|
||||
$button-disabled-background-color: #000;
|
||||
$button-disabled-border-color: #393939;
|
||||
|
||||
$input-color: $white;
|
||||
$input-background-color: transparent;
|
||||
$input-border-color: #393939;
|
||||
$input-hover-border-color: $white;
|
||||
$input-hover-color: $white;
|
||||
$input-focus-border-color: $primary;
|
||||
$input-placeholder-color: #393939;
|
||||
$input-focus-box-shadow-size: 0 0 0;
|
||||
|
||||
$input-disabled-background-color: #181818;
|
||||
$input-disabled-border-color: #222222;
|
||||
$input-disabled-color: #5e5e5e;
|
||||
|
||||
$radio-size: 1.5rem;
|
||||
|
||||
$link: $white;
|
||||
$link-hover: $primary;
|
||||
$link-invert: $primary;
|
||||
|
||||
$tabs-border-bottom-width: 0;
|
||||
$tabs-link-color: $link;
|
||||
$tabs-link-active-color: $primary;
|
||||
$tabs-link-hover-color: $primary;
|
||||
|
||||
$box-background-color: $primary-invert;
|
||||
$box-shadow: none;
|
||||
$box-color: #fefefe;
|
||||
$box-padding: 1.5rem;
|
||||
|
||||
$title-size: 1.5rem;
|
||||
$title-line-height: 1;
|
||||
$title-color: $primary;
|
||||
$subtitle-color: $white;
|
||||
|
||||
$footer-background-color: transparent;
|
||||
$footer-padding: 2rem;
|
||||
|
||||
$modal-background-background-color: rgba(#050505, 0.86);
|
||||
$modal-card-title-color: $primary;
|
||||
$modal-card-head-background-color: $primary-invert;
|
||||
$modal-card-head-border-bottom: none;
|
||||
$modal-card-foot-border-top: none;
|
||||
$modal-card-body-background-color: $primary-invert;
|
||||
$modal-card-foot-radius: 0;
|
||||
$modal-card-head-radius: 0;
|
||||
$modal-card-body-padding: 0 1.5rem;
|
||||
$modal-card-head-padding: 1.5rem;
|
||||
|
||||
$input-arrow: #393939;
|
||||
$radius-small: 4px;
|
||||
|
||||
$steps-default-color: $primary;
|
||||
$steps-marker-default-border: 0.2em solid $primary;
|
||||
$steps-maker-default-color: $primary-invert;
|
||||
$steps-previous-color: $primary-invert;
|
||||
|
||||
$hr-background-color: #1e3629;
|
||||
$hr-height: 1px;
|
||||
$hr-margin: 0.5rem 0;
|
||||
|
||||
$dropdown-item-color: $white;
|
||||
$dropdown-content-shadow: 0 0 0 1px $primary, 0 6px 12px rgba(0, 0, 0, 0.3);
|
||||
$dropdown-content-background-color: $primary-invert;
|
||||
$dropdown-item-hover-background-color: #0e1f17;
|
||||
$dropdown-item-hover-color: $primary;
|
||||
|
||||
$dropdown-item-active-background-color: $primary;
|
||||
$dropdown-item-active-color: $primary-invert;
|
||||
|
||||
$dropdown-content-padding-bottom: 0;
|
||||
$dropdown-content-padding-top: 0;
|
||||
|
||||
$dropdown-background-color: $modal-background-background-color;
|
||||
|
||||
$widescreen-enabled: false;
|
||||
$fullhd-enabled: false;
|
||||
|
||||
$navbar-dropdown-arrow: $primary;
|
||||
$navbar-dropdown-background-color: $primary-invert;
|
||||
$navbar-dropdown-border-top: 2px solid $primary;
|
||||
$navbar-dropdown-item-hover-background-color: $dropdown-item-hover-background-color;
|
||||
$navbar-dropdown-item-hover-color: $dropdown-item-hover-color;
|
||||
$navbar-dropdown-item-active-background-color: $dropdown-item-active-background-color;
|
||||
$navbar-dropdown-item-active-color: $dropdown-item-active-color;
|
||||
$navbar-dropdown-boxed-shadow: $dropdown-content-shadow;
|
||||
|
||||
$button-static-color: #6b6b6b;
|
||||
$button-static-background-color: $input-background-color;
|
||||
$button-static-border-color: $input-border-color;
|
||||
|
||||
$tag-background-color: #1c1c1c;
|
||||
$tag-color: #6b6b6b;
|
||||
|
||||
$progress-bar-background-color: #393939;
|
||||
|
||||
$strong-color: #6b6b6b;
|
||||
$strong-weight: 400;
|
||||
|
||||
$notification-background-color: #1f1f1f;
|
||||
$notification-radius: 6px;
|
||||
|
||||
$button-text-color: #6b6b6b;
|
||||
$button-text-hover-background-color: transparent;
|
||||
$button-text-hover-color: #6b6b6b;
|
||||
|
||||
$textarea-padding: 0.75rem;
|
||||
|
||||
$icon-dimensions-large: 3.429rem;
|
||||
|
||||
.column {
|
||||
@include from(576px) {
|
||||
&.is-half-small {
|
||||
flex: none;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&.is-full-small {
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
&.is-order-1-mobile {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
&.is-order-2-mobile {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
&.is-order-3-mobile {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
&.is-none {
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import '~bulma/sass/base/_all';
|
||||
@import '~bulma/sass/helpers/_all';
|
||||
@import '~bulma/sass/elements/_all';
|
||||
@import '~bulma/sass/components/_all';
|
||||
@import '~bulma/sass/form/_all';
|
||||
@import '~bulma/sass/grid/_all';
|
||||
@import '~bulma/sass/layout/_all';
|
||||
@import '~buefy/src/scss/buefy';
|
||||
|
||||
@mixin noWrap {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.columns {
|
||||
@include from(576px) {
|
||||
&.is-small {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
@media screen and (min-width: 576px) and (max-width: $tablet - 1px) {
|
||||
&.is-half-small-only {
|
||||
flex: none;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
189
assets/styles/components/_box.scss
Normal file
189
assets/styles/components/_box.scss
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
.box {
|
||||
border: 1px solid #393939;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
&-stats {
|
||||
height: 100%;
|
||||
|
||||
@include tablet {
|
||||
max-width: 440px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-top-left-radius: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tab-with-corner.is-left-top {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
font-size: 1.35rem;
|
||||
|
||||
@include until(375px) {
|
||||
font-size: 1.135rem;
|
||||
}
|
||||
|
||||
&:after {
|
||||
right: -1.8rem;
|
||||
|
||||
@include until(375px) {
|
||||
right: -1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.selected {
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
background-color: #0d1f16;
|
||||
border: 1px solid $primary;
|
||||
color: $primary;
|
||||
padding: calc(0.375em - 1px) 0.75em;
|
||||
height: 2.25em;
|
||||
display: inline-flex;
|
||||
margin-left: 1rem;
|
||||
|
||||
> span {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.deposits {
|
||||
font-size: 0.82rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
height: 27px;
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: #171717;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
padding-top: 0.375rem;
|
||||
padding-bottom: 0.375rem;
|
||||
padding-left: 0.625rem;
|
||||
padding-right: 0.3125rem;
|
||||
white-space: nowrap;
|
||||
padding-right: 0.25rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.data {
|
||||
width: 100%;
|
||||
padding-top: 0.375rem;
|
||||
padding-bottom: 0.375rem;
|
||||
padding-right: 0.625rem;
|
||||
color: $primary;
|
||||
@include noWrap;
|
||||
}
|
||||
|
||||
.b-skeleton {
|
||||
&-item {
|
||||
height: 1.429rem;
|
||||
}
|
||||
|
||||
+ .b-skeleton {
|
||||
margin-top: 0.625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include until(375px) {
|
||||
.b-tooltip.is-top.is-multiline.is-large:after {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.box-ip {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&-modal {
|
||||
max-width: 440px;
|
||||
overflow-y: auto;
|
||||
|
||||
&.has-delete {
|
||||
.delete {
|
||||
position: absolute;
|
||||
right: 1.5rem;
|
||||
top: 1.571rem;
|
||||
}
|
||||
|
||||
.b-tabs.is-modal {
|
||||
.tabs {
|
||||
margin-top: -0.5em;
|
||||
margin-right: 2.143rem;
|
||||
overflow: hidden;
|
||||
overflow-x: auto;
|
||||
|
||||
ul {
|
||||
@include tablet {
|
||||
flex-wrap: wrap;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
&.is-spaced {
|
||||
margin-bottom: 0.475rem;
|
||||
}
|
||||
|
||||
.delete {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 1.143rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.note {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.znote {
|
||||
color: $primary;
|
||||
word-break: break-all;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
.b-tooltip {
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
.button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p {
|
||||
font-size: 0.929rem;
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
326
assets/styles/components/_button.scss
Normal file
326
assets/styles/components/_button.scss
Normal file
|
|
@ -0,0 +1,326 @@
|
|||
.button {
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
|
||||
box-shadow 0.15s ease-in-out;
|
||||
font-weight: $weight-bold;
|
||||
|
||||
.trnd {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
svg {
|
||||
& + span {
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-text {
|
||||
text-decoration: none;
|
||||
|
||||
.trnd {
|
||||
background-color: $button-text-color;
|
||||
}
|
||||
|
||||
&:focus:not(:active),
|
||||
&.is-focused:not(:active) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.max-content {
|
||||
max-width: max-content;
|
||||
}
|
||||
|
||||
&.has-icon {
|
||||
padding: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
.icon {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
|
||||
&.icon-info {
|
||||
background-size: 6px 8px;
|
||||
}
|
||||
}
|
||||
.icon-link {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
&.is-icon {
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
||||
.trnd {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #6b6b6b;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
path:not(.no-hover) {
|
||||
fill: #87feb7;
|
||||
transition: fill 0.15s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not(:active) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
&.is-loading {
|
||||
&::after {
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
&.is-black {
|
||||
path {
|
||||
fill: $primary;
|
||||
}
|
||||
}
|
||||
&.is-primary {
|
||||
path {
|
||||
fill: $primary-invert;
|
||||
}
|
||||
|
||||
.trnd {
|
||||
background-color: $primary-invert;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #3bf0a1;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
&.is-outlined {
|
||||
background-color: #0e1f17;
|
||||
|
||||
.trnd {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.is-hovered,
|
||||
&.is-focused {
|
||||
.trnd {
|
||||
background-color: $primary-invert;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
.trnd {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-danger {
|
||||
&.is-outlined {
|
||||
background-color: #1c080d;
|
||||
|
||||
.trnd {
|
||||
background-color: $danger;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.trnd {
|
||||
background-color: $danger-invert;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
.trnd {
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-dark {
|
||||
path {
|
||||
fill: $primary;
|
||||
}
|
||||
|
||||
.trnd {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-primary-link {
|
||||
color: $primary;
|
||||
height: auto;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1;
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus:not(:active) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.is-underlined {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
|
||||
span {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
&:first-child:not(:last-child) {
|
||||
margin-left: 0;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
&:last-child:not(:first-child) {
|
||||
margin-left: 0.5em;
|
||||
margin-right: 0;
|
||||
}
|
||||
&:first-child:last-child {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-small):not(.is-primary-text) {
|
||||
span:not(.icon):not(.b-tooltip):first-child:last-child {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-nav-icon {
|
||||
width: 2.857rem;
|
||||
padding: 0;
|
||||
cursor: default;
|
||||
background-color: #242424;
|
||||
border-color: #4f4f4f;
|
||||
|
||||
.trnd {
|
||||
background-color: #595959;
|
||||
}
|
||||
|
||||
&:focus:not(:active) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.walletConnect {
|
||||
background-color: #07141e;
|
||||
border-color: #3b99fc;
|
||||
|
||||
.trnd {
|
||||
background-color: #3b99fc;
|
||||
}
|
||||
}
|
||||
|
||||
&.metamask {
|
||||
background-color: #2d2419;
|
||||
border-color: #f89c35;
|
||||
|
||||
.trnd {
|
||||
background-color: #f89c35;
|
||||
}
|
||||
}
|
||||
|
||||
&.tornado {
|
||||
background-color: #0e1f17;
|
||||
border-color: $primary;
|
||||
|
||||
.trnd {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.network {
|
||||
background-color: darken($primary, 80);
|
||||
border-color: $primary;
|
||||
|
||||
.trnd {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.hide-icon-desktop {
|
||||
@include desktop {
|
||||
span.icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
&__social {
|
||||
.button {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: $primary;
|
||||
|
||||
.icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__halfwidth {
|
||||
flex-wrap: nowrap;
|
||||
|
||||
.button,
|
||||
.b-skeleton {
|
||||
flex: 1 1 calc(50% - 0.5rem);
|
||||
|
||||
&:last-child {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.b-skeleton {
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
+ .b-skeleton {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.break {
|
||||
margin: 0 1rem 0.5rem 0.5rem;
|
||||
width: 1px;
|
||||
align-self: stretch;
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
39
assets/styles/components/_checkbox.scss
Normal file
39
assets/styles/components/_checkbox.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
.b-checkbox {
|
||||
&.checkbox {
|
||||
input[type=checkbox] {
|
||||
+ .check {
|
||||
border-radius: 2px;
|
||||
border: 1px solid $primary;
|
||||
position: relative;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: calc(-1.5rem/2);
|
||||
bottom: 50%;
|
||||
margin-bottom: calc(-1.5rem/2);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
transition: transform .15s ease-out;
|
||||
transform: scale(0);
|
||||
background-color: $primary;
|
||||
border-radius: 1px;
|
||||
}
|
||||
}
|
||||
&:checked + .check {
|
||||
background: none;
|
||||
|
||||
&:before {
|
||||
transform: scale(.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
.control-label {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
354
assets/styles/components/_compliance.scss
Normal file
354
assets/styles/components/_compliance.scss
Normal file
|
|
@ -0,0 +1,354 @@
|
|||
.compliance {
|
||||
@media print {
|
||||
margin-top: -2rem;
|
||||
}
|
||||
.title {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
|
||||
span {
|
||||
color: $primary;
|
||||
}
|
||||
.print {
|
||||
display: none;
|
||||
}
|
||||
@media print {
|
||||
.not-print {
|
||||
display: none;
|
||||
}
|
||||
.print {
|
||||
display: inline-block;
|
||||
}
|
||||
font-size: 2.5rem !important;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
text-align: left;
|
||||
|
||||
span {
|
||||
color: #000;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
@media print {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.p {
|
||||
font-size: 0.857rem;
|
||||
margin-bottom: 2rem;
|
||||
text-align: center;
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
.input {
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.print-help {
|
||||
display: none;
|
||||
|
||||
@media print {
|
||||
display: block;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
font-weight: 700;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns {
|
||||
margin-top: 1.5rem;
|
||||
|
||||
&-blocks {
|
||||
@include touch {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
.column {
|
||||
&.is-5-desktop {
|
||||
width: calc(50% - 40px);
|
||||
}
|
||||
&.is-2-desktop {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
display: flex;
|
||||
.column {
|
||||
&.is-5-desktop {
|
||||
flex: none;
|
||||
width: 50%;
|
||||
|
||||
&:first-child {
|
||||
padding-right: 1rem !important;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-left: 1rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-verified {
|
||||
@include touch {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-withdrawal {
|
||||
@include mobile {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
span {
|
||||
color: $primary;
|
||||
|
||||
@media print {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
&--title {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.25;
|
||||
|
||||
@media print {
|
||||
margin-bottom: 0.5rem;
|
||||
color: #000;
|
||||
|
||||
span {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--status {
|
||||
color: #616161;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
&.is-success {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&.is-warning {
|
||||
color: $warning;
|
||||
}
|
||||
|
||||
.fee {
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
@media print {
|
||||
color: #000 !important;
|
||||
font-size: 0.85rem;
|
||||
|
||||
.fee {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--data {
|
||||
font-size: 0.9rem;
|
||||
|
||||
@include mobile {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: inherit;
|
||||
width: 106px;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.value {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: $primary;
|
||||
margin-left: 1rem;
|
||||
flex-grow: 1;
|
||||
|
||||
@include mobile {
|
||||
margin-left: 0;
|
||||
text-align: left;
|
||||
word-break: break-all;
|
||||
overflow: visible;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@include touch {
|
||||
&[data-value] {
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
font-family: 'PT Mono';
|
||||
color: $primary;
|
||||
content: attr(data-value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.copy {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.value {
|
||||
overflow: visible;
|
||||
word-break: break-all;
|
||||
text-align: left;
|
||||
margin-left: 0;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
|
||||
&[data-value] {
|
||||
font: 0/0 a;
|
||||
color: transparent;
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
font-weight: 700;
|
||||
font-family: 'PT Mono', monospace;
|
||||
color: #000;
|
||||
content: attr(data-value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-size: 46px 41px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url('../img/icons/arrow.svg');
|
||||
|
||||
@include touch {
|
||||
background-size: 41px 46px;
|
||||
width: 41px;
|
||||
height: 46px;
|
||||
transform: rotate(90deg);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.verified {
|
||||
margin: 1rem 0 1rem auto;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
display: block;
|
||||
|
||||
@include touch {
|
||||
margin-top: 1rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.stroke {
|
||||
fill: none;
|
||||
fill-rule: evenodd;
|
||||
stroke: #94febf;
|
||||
}
|
||||
|
||||
.fill {
|
||||
fill: #94febf;
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.stroke {
|
||||
stroke: #000;
|
||||
}
|
||||
|
||||
.fill {
|
||||
fill: #000;
|
||||
}
|
||||
margin-top: -2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.generate {
|
||||
&-container {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin: 2rem 0 !important;
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.print {
|
||||
display: none;
|
||||
|
||||
@media print {
|
||||
display: block;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
&-p {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
33
assets/styles/components/_deposit.scss
Normal file
33
assets/styles/components/_deposit.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
.deposit {
|
||||
&-buttons.field {
|
||||
.button {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
@include until($desktop) {
|
||||
justify-content: space-between;
|
||||
|
||||
.control {
|
||||
flex-basis: calc(50% - .75rem);
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+ .deposit-buttons.field {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-p {
|
||||
margin-bottom: 1rem;
|
||||
font-size: .85rem;
|
||||
}
|
||||
}
|
||||
108
assets/styles/components/_dropdown.scss
Normal file
108
assets/styles/components/_dropdown.scss
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
|
||||
.dropdown.is-mobile-modal {
|
||||
.dropdown-trigger {
|
||||
.control {
|
||||
.input {
|
||||
&::after {
|
||||
border: 2px solid $primary;
|
||||
border-radius: 2px;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
content: " ";
|
||||
display: block;
|
||||
margin-top: -0.5em;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: center;
|
||||
height: .625em;
|
||||
width: .625em;
|
||||
right: 1.125em;
|
||||
transition: border-color .15s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-loading {
|
||||
.input {
|
||||
&::after {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
height: 1.143rem;
|
||||
width: 1.143rem;
|
||||
right: .86rem;
|
||||
top: .86rem;
|
||||
border-radius: 1.143rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-expanded .dropdown-menu{
|
||||
@include touch {
|
||||
max-width: 460px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
> .dropdown-content {
|
||||
overflow: hidden;
|
||||
margin: 1px;
|
||||
|
||||
> .dropdown-item {
|
||||
font-size: 1rem;
|
||||
padding: 0.675rem 1.25rem;
|
||||
transition: color .15s ease-in-out, background-color .15s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.dropdown-trigger {
|
||||
.control {
|
||||
.input {
|
||||
border-color: $primary;
|
||||
|
||||
&::after {
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-langs {
|
||||
margin-bottom: .5rem;
|
||||
|
||||
.dropdown-menu {
|
||||
min-width: auto;
|
||||
padding-top: 0;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
&.is-mobile-modal {
|
||||
.dropdown-menu {
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
a.dropdown-item {
|
||||
padding-right: 1rem;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
196
assets/styles/components/_field.scss
Normal file
196
assets/styles/components/_field.scss
Normal file
|
|
@ -0,0 +1,196 @@
|
|||
.field {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.control {
|
||||
&.has-icons-right {
|
||||
.input {
|
||||
padding-right: calc(1.25em - 1px);
|
||||
|
||||
+ .icon.is-right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-with-buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
margin-right: auto;
|
||||
|
||||
.b-tooltip {
|
||||
.button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
&.is-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
@include touch {
|
||||
.b-tooltip {
|
||||
&:before,
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+ .button {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
&.is-primary-text {
|
||||
color: $primary;
|
||||
padding: 0;
|
||||
height: auto;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom: 1px dotted $primary;
|
||||
border-radius: 0;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1;
|
||||
|
||||
&:focus:not(:active) {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-custom-field {
|
||||
margin-top: -0.65rem;
|
||||
|
||||
+ .help {
|
||||
margin-top: -1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-withdraw {
|
||||
margin-top: -0.6rem;
|
||||
}
|
||||
|
||||
&.has-addons {
|
||||
.input {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.control {
|
||||
&.has-text {
|
||||
border: 1px solid #393939;
|
||||
transition: border-color 0.15s ease-in-out;
|
||||
border-left: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
color: #6b6b6b;
|
||||
font-size: 0.929rem;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: 0;
|
||||
padding-right: 0.643rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
padding-right: 0.643rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: border-color 0.15s ease-in-out;
|
||||
border: 1px solid #393939;
|
||||
border-left: 0;
|
||||
padding-right: 0.357rem;
|
||||
|
||||
.button {
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.929rem;
|
||||
height: 28px;
|
||||
border-bottom-right-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
border-right: 0;
|
||||
padding-right: 0.643rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-right-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
|
||||
&:not(:only-child) .button {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-top-left-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child):not(:last-child) .button {
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.input,
|
||||
.control {
|
||||
border-color: $input-hover-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
.input,
|
||||
.control {
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-warning {
|
||||
.has-addons {
|
||||
.input,
|
||||
.control {
|
||||
border-color: $warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-grouped {
|
||||
@include mobile {
|
||||
flex-wrap: wrap;
|
||||
|
||||
> .field.is-expanded {
|
||||
&:not(:last-child) {
|
||||
margin-right: 0;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
flex: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .field {
|
||||
+ .help {
|
||||
margin-top: -1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
73
assets/styles/components/_fieldset.scss
Normal file
73
assets/styles/components/_fieldset.scss
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
fieldset[disabled] {
|
||||
cursor: not-allowed;
|
||||
position: relative;
|
||||
filter: grayscale(70%);
|
||||
color: #5e5e5e;
|
||||
|
||||
.tooltip {
|
||||
&:after {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
content: attr(data-label);
|
||||
padding: 1rem 2rem;
|
||||
border-radius: $radius-large;
|
||||
font-size: 0.85rem;
|
||||
font-weight: $weight-normal;
|
||||
box-shadow: 0px 1px 2px 1px rgba(0, 1, 0, 0.2);
|
||||
z-index: 888;
|
||||
display: flex-block;
|
||||
text-align: center;
|
||||
width: 240px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #393939;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
&:not([data-label=""]):after {
|
||||
transition-delay: inherit;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.notice {
|
||||
position: relative;
|
||||
border-color: #5c4d3c;
|
||||
color: #5e5e5e;
|
||||
}
|
||||
|
||||
.label {
|
||||
@include unselectable;
|
||||
color: #5e5e5e;
|
||||
|
||||
&.is-primary {
|
||||
color: #558b6b;
|
||||
}
|
||||
}
|
||||
|
||||
.b-radio {
|
||||
&.radio {
|
||||
&:focus {
|
||||
input[type=radio] {
|
||||
+ .check {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=radio] {
|
||||
+ .check {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.withdraw-data-item span {
|
||||
color: #4f5e57;
|
||||
}
|
||||
}
|
||||
24
assets/styles/components/_flag.scss
Normal file
24
assets/styles/components/_flag.scss
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
.flag-icon {
|
||||
background-size: contain;
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
&:before {
|
||||
content: '\00a0';
|
||||
}
|
||||
}
|
||||
|
||||
// https://github.com/HatScripts/circle-flags/
|
||||
|
||||
@mixin flag-icon($country) {
|
||||
.flag-icon-#{$country} {
|
||||
background-image: url('../img/flags/#{$country}.svg');
|
||||
}
|
||||
}
|
||||
$countries: es fr gb ru tr uk cn;
|
||||
@each $country in $countries {
|
||||
@include flag-icon($country);
|
||||
}
|
||||
14
assets/styles/components/_fonts.scss
Normal file
14
assets/styles/components/_fonts.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
@font-face {
|
||||
font-family: 'PT Mono';
|
||||
src: local('PT Mono'), local('PTMono-Regular'), url('../fonts/PTMono-Regular.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'PT Mono';
|
||||
src: local('PT Mono Bold'), local('PTMono-Bold'), url('../fonts/PTMono-Bold.woff2') format('woff2');
|
||||
font-display: swap;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
144
assets/styles/components/_footer.scss
Normal file
144
assets/styles/components/_footer.scss
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
.footer {
|
||||
font-size: 0.7rem;
|
||||
line-height: 2;
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.level {
|
||||
&-item {
|
||||
&.is-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&-subitem {
|
||||
display: flex;
|
||||
|
||||
@include mobile {
|
||||
justify-content: center;
|
||||
|
||||
& + .level-subitem {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-left {
|
||||
.level-item {
|
||||
&.is-column {
|
||||
@include tablet {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& + .level-right {
|
||||
@include mobile {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
.level-item {
|
||||
&.is-column {
|
||||
@include tablet {
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet-only {
|
||||
.level {
|
||||
&-left {
|
||||
.footer-address__name {
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
.footer-address {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-address {
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__name {
|
||||
@include desktop {
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&__value {
|
||||
color: $primary;
|
||||
|
||||
@include mobile {
|
||||
width: 100%;
|
||||
@include noWrap;
|
||||
text-align: center;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.b-tooltip {
|
||||
@include mobile {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-version__value {
|
||||
color: $primary;
|
||||
padding-left: 5px;
|
||||
|
||||
@include mobile {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
.button.is-icon:not(:last-child):not(.is-fullwidth) {
|
||||
margin-right: 1.286rem;
|
||||
}
|
||||
|
||||
.break {
|
||||
margin-left: 0;
|
||||
margin-right: 1.286rem;
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
.icon,
|
||||
.trnd {
|
||||
width: 1.714rem;
|
||||
height: 1.714rem;
|
||||
}
|
||||
|
||||
@include until(425px) {
|
||||
justify-content: center;
|
||||
max-width: 200px;
|
||||
|
||||
.button.is-icon:not(:last-child):not(.is-fullwidth) {
|
||||
margin: 0.5rem 0.7145rem;
|
||||
}
|
||||
|
||||
.break {
|
||||
margin: 0.5rem 0.7145rem;
|
||||
}
|
||||
|
||||
.dropdown-langs {
|
||||
margin: 0.5rem 0.7145rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
145
assets/styles/components/_has-eth-purchase.scss
Normal file
145
assets/styles/components/_has-eth-purchase.scss
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
.field.has-eth-purchase {
|
||||
border: $button-border-width solid $button-border-color;
|
||||
border-radius: 4px;
|
||||
background-color: $button-background-color;
|
||||
padding: 1.28rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: border-color 0.15s ease-in-out;
|
||||
|
||||
.columns {
|
||||
margin-left: -1.28rem;
|
||||
margin-right: -1.28rem;
|
||||
margin-top: -1.28rem;
|
||||
}
|
||||
|
||||
.columns:last-child {
|
||||
margin-bottom: -1.28rem;
|
||||
}
|
||||
|
||||
.column {
|
||||
padding: 1.28rem;
|
||||
|
||||
&:first-child {
|
||||
padding-right: 0.64rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-left: 0.64rem;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
border-color: transparent;
|
||||
background-color: $primary-invert;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
height: 3.57rem;
|
||||
box-shadow: none;
|
||||
transition: color 0.15s ease-in-out;
|
||||
|
||||
@include until(375px) {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.control.has-icons-right {
|
||||
.input {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.currency {
|
||||
font-size: 1.125rem;
|
||||
text-align: right;
|
||||
line-height: 1;
|
||||
margin-bottom: 0.78rem;
|
||||
transition: color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.withdraw-data {
|
||||
margin-top: 0.78rem;
|
||||
}
|
||||
|
||||
.is-inverted {
|
||||
background: $primary-invert;
|
||||
|
||||
.currency {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-container {
|
||||
padding: 0;
|
||||
flex: none;
|
||||
width: 30px;
|
||||
margin: -1px -2px;
|
||||
position: relative;
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.arrow-border {
|
||||
transition: fill 0.15s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-warning {
|
||||
border-color: $warning;
|
||||
|
||||
.is-light {
|
||||
.currency {
|
||||
color: $warning;
|
||||
}
|
||||
|
||||
.input {
|
||||
color: $warning;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-container {
|
||||
.arrow {
|
||||
.arrow-border {
|
||||
fill: $warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-primary {
|
||||
border-color: $primary;
|
||||
|
||||
.is-light {
|
||||
.currency {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.input {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow-container {
|
||||
.arrow {
|
||||
.arrow-border {
|
||||
fill: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
136
assets/styles/components/_header.scss
Normal file
136
assets/styles/components/_header.scss
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
.header {
|
||||
padding-top: 20px;
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
|
||||
@include tablet {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 900px) {
|
||||
> .container {
|
||||
flex-direction: column;
|
||||
|
||||
.navbar-brand {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
> .container {
|
||||
.navbar-brand {
|
||||
margin-left: 0;
|
||||
|
||||
.navbar-item {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 40px;
|
||||
|
||||
@media print {
|
||||
path {
|
||||
fill: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-end {
|
||||
@include tablet {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-item {
|
||||
&.has-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&--tag {
|
||||
margin-left: 0.05rem;
|
||||
margin-top: -0.55rem;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: $primary;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 0 1px 1px $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-link {
|
||||
&:not(.is-arrowless) {
|
||||
padding-right: 2rem;
|
||||
|
||||
&::after {
|
||||
right: 0.714rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
.navbar-dropdown.is-boxed {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
.navbar-dropdown {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
a.navbar-item.is-active:not(:focus):not(:hover) {
|
||||
background-color: $dropdown-item-active-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet-only {
|
||||
.buttons > .button:not(.network-button) {
|
||||
span:first-child:not(:last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
span:not(.icon) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
.b-tooltip {
|
||||
margin-right: 0.714rem;
|
||||
|
||||
.tooltip-content {
|
||||
text-align: center;
|
||||
top: 100%;
|
||||
display: block !important;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity $speed-slow $easing;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.tooltip-content {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
400
assets/styles/components/_icon.scss
Normal file
400
assets/styles/components/_icon.scss
Normal file
|
|
@ -0,0 +1,400 @@
|
|||
.icon {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
|
||||
&-info {
|
||||
background-image: url('../img/icons/info.svg');
|
||||
}
|
||||
&-update {
|
||||
background-image: url('../img/icons/refresh.svg');
|
||||
}
|
||||
&-eye {
|
||||
background-image: url('../img/icons/eye.svg');
|
||||
}
|
||||
&-copy {
|
||||
background-image: url('../img/icons/copy.svg');
|
||||
}
|
||||
&-save {
|
||||
background-image: url('../img/icons/save.svg');
|
||||
}
|
||||
&-close {
|
||||
background-image: url('../img/icons/close.svg');
|
||||
}
|
||||
&-link {
|
||||
background-image: url('../img/icons/link.svg');
|
||||
}
|
||||
|
||||
&.information {
|
||||
background-image: url('../img/icons/warning.svg');
|
||||
}
|
||||
|
||||
&.alert {
|
||||
background-image: url('../img/icons/alert.svg');
|
||||
}
|
||||
|
||||
&-chevron-up {
|
||||
background-image: url('../img/icons/chevron-up.svg');
|
||||
}
|
||||
|
||||
&-arrow-up {
|
||||
background-image: url('../img/icons/arrow-up.svg');
|
||||
}
|
||||
|
||||
&.is-desc {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.trnd {
|
||||
height: 1.286rem;
|
||||
width: 1.286rem;
|
||||
background-color: $primary;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
transition: background-color 0.15s ease-in-out;
|
||||
|
||||
.has-text-warning & {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
.has-text-danger & {
|
||||
background-color: $danger;
|
||||
}
|
||||
|
||||
&.trnd-36px {
|
||||
height: 2.286rem;
|
||||
width: 2.286rem;
|
||||
}
|
||||
|
||||
.trnd-48px {
|
||||
height: 2.286rem;
|
||||
width: 2.286rem;
|
||||
}
|
||||
|
||||
&.trnd-48px {
|
||||
height: 3.429rem;
|
||||
width: 3.429rem;
|
||||
}
|
||||
|
||||
&-settings {
|
||||
mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 0C5.44769 0 5 0.447716 5 1V3C5 3.55228 5.44769 4 6 4C6.55231 4 7 3.55228 7 3H17C17.5523 3 18 2.55228 18 2C18 1.44772 17.5523 1 17 1H7C7 0.447716 6.55231 0 6 0Z' fill='%230E1633'/%3E%3Cpath d='M0 2C0 1.44772 0.447693 1 1 1H3V3H1C0.447693 3 0 2.55228 0 2Z' fill='%230E1633'/%3E%3Cpath d='M0 9C0 8.44772 0.447693 8 1 8H7V10H1C0.447693 10 0 9.55228 0 9Z' fill='%230E1633'/%3E%3Cpath d='M17 8H11C11 7.44772 10.5523 7 10 7C9.44769 7 9 7.44772 9 8V10C9 10.5523 9.44769 11 10 11C10.5523 11 11 10.5523 11 10H17C17.5523 10 18 9.55228 18 9C18 8.44772 17.5523 8 17 8Z' fill='%230E1633'/%3E%3Cpath d='M1 15C0.447693 15 0 15.4477 0 16C0 16.5523 0.447693 17 1 17H11V15H1Z' fill='%230E1633'/%3E%3Cpath d='M15 15H17C17.5523 15 18 15.4477 18 16C18 16.5523 17.5523 17 17 17H15C15 17.5523 14.5523 18 14 18C13.4477 18 13 17.5523 13 17V15C13 14.4477 13.4477 14 14 14C14.5523 14 15 14.4477 15 15Z' fill='%230E1633'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
&-wallet {
|
||||
mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 10C10.4477 10 10 10.4477 10 11C10 11.5523 10.4477 12 11 12H13C13.5523 12 14 11.5523 14 11C14 10.4477 13.5523 10 13 10H11Z' fill='%230E1633'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 0C1.79083 0 0 1.79086 0 4V14C0 16.2091 1.79083 18 4 18H14C16.2092 18 18 16.2091 18 14V8C18 5.79086 16.2092 4 14 4H12C12 1.79086 10.2092 0 8 0H4ZM2 6V14C2 15.1046 2.89545 16 4 16H14C15.1046 16 16 15.1046 16 14V8C16 6.89543 15.1046 6 14 6H2ZM2 4C2 2.89543 2.89545 2 4 2H8C9.10455 2 10 2.89543 10 4H2Z' fill='%230E1633'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
&-logout {
|
||||
mask-image: url("data:image/svg+xml,%3Csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 0C1.79083 0 0 1.79086 0 4V14C0 16.2091 1.79083 18 4 18H10C10.5523 18 11 17.5523 11 17C11 16.4477 10.5523 16 10 16H4C2.89545 16 2 15.1046 2 14V4C2 2.89543 2.89545 2 4 2H10C10.5523 2 11 1.55228 11 1C11 0.447716 10.5523 0 10 0H4Z' fill='%230E1633'/%3E%3Cpath d='M15.1213 5.70708C14.7308 5.31655 14.0976 5.31655 13.7071 5.70708C13.3165 6.0976 13.3165 6.73077 13.7071 7.12129L14.5858 7.99997H6C5.44769 7.99997 5 8.44769 5 8.99997C5 9.55225 5.44769 9.99997 6 9.99997H14.6406L13.707 10.9336C13.3165 11.3241 13.3165 11.9571 13.707 12.3476C14.0975 12.7381 14.7306 12.7381 15.1211 12.3476L17.7148 9.75388C17.9575 9.51125 18.0494 9.17508 17.9905 8.86153C17.9597 8.63882 17.8555 8.43955 17.7031 8.28889L15.1213 5.70708Z' fill='%230E1633'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
&-arrow-down {
|
||||
mask-image: url('../img/icons/arrow-down.svg');
|
||||
}
|
||||
|
||||
&-arrow-up {
|
||||
transform: rotate(180deg);
|
||||
mask-image: url('../img/icons/arrow-down.svg');
|
||||
}
|
||||
|
||||
&-arrow-up-down {
|
||||
mask-image: url('../img/icons/arrow-up-down.svg');
|
||||
}
|
||||
|
||||
&-tool {
|
||||
mask-image: url('../img/icons/tool.svg');
|
||||
}
|
||||
|
||||
&-alert {
|
||||
mask-image: url('../img/icons/warning.svg');
|
||||
}
|
||||
|
||||
&-plus {
|
||||
mask-image: url('../img/icons/plus.svg');
|
||||
}
|
||||
|
||||
&-close {
|
||||
mask-image: url('../img/icons/close.svg');
|
||||
}
|
||||
|
||||
&-check {
|
||||
mask-image: url('../img/icons/check.svg');
|
||||
}
|
||||
|
||||
&-arrow-left {
|
||||
mask-image: url('../img/icons/arrow-left.svg');
|
||||
}
|
||||
|
||||
&-arrow-right {
|
||||
mask-image: url('../img/icons/arrow-left.svg');
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
&-logo {
|
||||
mask-image: url('../img/logo.svg');
|
||||
}
|
||||
|
||||
&-loading {
|
||||
&.trnd-48px {
|
||||
height: 2.286rem;
|
||||
width: 2.286rem;
|
||||
}
|
||||
background: conic-gradient(from 180deg at 50% 50%, $primary 0deg, rgba(255, 255, 255, 0) 360deg);
|
||||
animation: spin 2s linear infinite;
|
||||
position: relative;
|
||||
border-radius: 100%;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
background: $notification-background-color;
|
||||
left: calc(50% - 11px);
|
||||
top: calc(50% - 11px);
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.is-small & {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
|
||||
&:after {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
left: calc(50% - 4px);
|
||||
top: calc(50% - 4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
&.trnd-48px {
|
||||
height: 2.286rem;
|
||||
width: 2.286rem;
|
||||
}
|
||||
background-image: url('../img/icons/info.svg');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 100%;
|
||||
}
|
||||
&-success {
|
||||
&.trnd-48px {
|
||||
height: 2.286rem;
|
||||
width: 2.286rem;
|
||||
}
|
||||
background-image: url('../img/icons/notice/success.svg');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 100%;
|
||||
}
|
||||
&-warning {
|
||||
&.trnd-48px {
|
||||
height: 2.286rem;
|
||||
width: 2.286rem;
|
||||
}
|
||||
background-image: url('../img/icons/notice/warning.svg');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 100%;
|
||||
background-color: $warning;
|
||||
}
|
||||
&-danger {
|
||||
&.trnd-48px {
|
||||
height: 2.286rem;
|
||||
width: 2.286rem;
|
||||
}
|
||||
background-image: url('../img/icons/notice/danger.svg');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 100%;
|
||||
background-color: $danger;
|
||||
}
|
||||
|
||||
&-more {
|
||||
mask-image: url('../img/icons/more.svg');
|
||||
}
|
||||
|
||||
&-copy {
|
||||
mask-image: url('../img/icons/copy.svg');
|
||||
}
|
||||
|
||||
&-decrypt {
|
||||
mask-image: url('../img/icons/decrypt.svg');
|
||||
}
|
||||
|
||||
&-remove {
|
||||
mask-image: url('../img/icons/remove.svg');
|
||||
}
|
||||
|
||||
&-account {
|
||||
mask-image: url('../img/icons/account.svg');
|
||||
}
|
||||
|
||||
&-astronaut {
|
||||
mask-image: url('../img/icons/astronaut.svg');
|
||||
}
|
||||
|
||||
&-account-key {
|
||||
mask-image: url('../img/icons/account/key.svg');
|
||||
}
|
||||
|
||||
&-account-notes {
|
||||
mask-image: url('../img/icons/account/notes.svg');
|
||||
}
|
||||
|
||||
&-account-raw {
|
||||
mask-image: url('../img/icons/account/raw.svg');
|
||||
}
|
||||
|
||||
&-account-recover {
|
||||
mask-image: url('../img/icons/account/recover.svg');
|
||||
}
|
||||
|
||||
&-account-remove {
|
||||
mask-image: url('../img/icons/account/remove.svg');
|
||||
}
|
||||
|
||||
&-account-rpc {
|
||||
mask-image: url('../img/icons/account/rpc.svg');
|
||||
}
|
||||
|
||||
&-account-setup {
|
||||
mask-image: url('../img/icons/account/setup.svg');
|
||||
}
|
||||
|
||||
&-account-wallet {
|
||||
mask-image: url('../img/icons/account/wallet.svg');
|
||||
}
|
||||
|
||||
&-stats {
|
||||
mask-image: url("data:image/svg+xml,%3Csvg width='22' height='24' viewBox='0 0 22 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 0C12.4477 0 12 0.447693 12 1V19C12 19.5523 12.4477 20 13 20C13.5523 20 14 19.5523 14 19V1C14 0.447693 13.5523 0 13 0Z' fill='%23838BAD'/%3E%3Cpath d='M8 6C8 5.44769 8.44769 5 9 5C9.55231 5 10 5.44769 10 6V19C10 19.5523 9.55231 20 9 20C8.44769 20 8 19.5523 8 19V6Z' fill='%23838BAD'/%3E%3Cpath d='M5 8C4.44769 8 4 8.44769 4 9V19C4 19.5523 4.44769 20 5 20C5.55231 20 6 19.5523 6 19V9C6 8.44769 5.55231 8 5 8Z' fill='%23838BAD'/%3E%3Cpath d='M0 13C0 12.4477 0.447693 12 1 12C1.55231 12 2 12.4477 2 13V19C2 19.5523 1.55231 20 1 20C0.447693 20 0 19.5523 0 19V13Z' fill='%23838BAD'/%3E%3Cpath d='M0 23C0 22.4477 0.447693 22 1 22H21C21.5523 22 22 22.4477 22 23C22 23.5523 21.5523 24 21 24H1C0.447693 24 0 23.5523 0 23Z' fill='%23838BAD'/%3E%3Cpath d='M16 9C16 8.44769 16.4477 8 17 8C17.5523 8 18 8.44769 18 9V19C18 19.5523 17.5523 20 17 20C16.4477 20 16 19.5523 16 19V9Z' fill='%23838BAD'/%3E%3Cpath d='M21 5C20.4477 5 20 5.44769 20 6V19C20 19.5523 20.4477 20 21 20C21.5523 20 22 19.5523 22 19V6C22 5.44769 21.5523 5 21 5Z' fill='%23838BAD'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
&-twitter {
|
||||
mask-image: url("data:image/svg+xml,%3Csvg width='24' height='20' viewBox='0 0 24 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 2.3037C23.1075 2.69439 22.1565 2.95335 21.165 3.07909C22.185 2.47135 22.9635 1.51634 23.3295 0.365239C22.3785 0.93106 21.3285 1.33073 20.2095 1.55376C19.3065 0.594262 18.0195 0 16.6155 0C13.8915 0 11.6985 2.2064 11.6985 4.91127C11.6985 5.30046 11.7315 5.67468 11.8125 6.03094C7.722 5.83185 4.1025 3.87543 1.671 0.895135C1.2465 1.6301 0.9975 2.47135 0.9975 3.37696C0.9975 5.07742 1.875 6.58478 3.183 7.45746C2.3925 7.44249 1.617 7.21347 0.96 6.85272C0.96 6.86769 0.96 6.88715 0.96 6.90661C0.96 9.29264 2.6655 11.2745 4.902 11.7311C4.5015 11.8403 4.065 11.8927 3.612 11.8927C3.297 11.8927 2.979 11.8748 2.6805 11.8089C3.318 13.7533 5.127 15.1829 7.278 15.2293C5.604 16.536 3.4785 17.3234 1.1775 17.3234C0.774 17.3234 0.387 17.3054 0 17.2561C2.1795 18.6586 4.7625 19.4595 7.548 19.4595C16.602 19.4595 21.552 11.9751 21.552 5.48757C21.552 5.27052 21.5445 5.06096 21.534 4.85289C22.5105 4.16133 23.331 3.29763 24 2.3037Z' fill='%23838BAD'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
&-telegram {
|
||||
mask-image: url("data:image/svg+xml,%3Csvg width='24' height='20' viewBox='0 0 24 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.4174 13.1813L9.0204 18.7653C9.58841 18.7653 9.83441 18.5213 10.1294 18.2283L12.7925 15.6833L18.3106 19.7243C19.3226 20.2883 20.0357 19.9913 20.3087 18.7933L23.9308 1.8214L23.9318 1.8204C24.2528 0.324404 23.3907 -0.260593 22.4047 0.106405L1.1142 8.25736C-0.33883 8.82136 -0.31683 9.63136 0.867199 9.99835L6.31033 11.6913L18.9536 3.78039C19.5486 3.38639 20.0897 3.60439 19.6446 3.99839L9.4174 13.1813Z' fill='%23838BAD'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
&-github {
|
||||
mask-image: url("data:image/svg+xml,%3Csvg width='24' height='23' viewBox='0 0 24 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 0C5.37 0 0 5.28 0 11.792C0 17.003 3.438 21.422 8.205 22.98C8.805 23.091 9.025 22.726 9.025 22.413C9.025 22.133 9.015 21.391 9.01 20.408C5.672 21.119 4.968 18.826 4.968 18.826C4.422 17.465 3.633 17.101 3.633 17.101C2.546 16.37 3.717 16.385 3.717 16.385C4.922 16.467 5.555 17.6 5.555 17.6C6.625 19.403 8.364 18.882 9.05 18.581C9.158 17.818 9.467 17.299 9.81 17.004C7.145 16.709 4.344 15.695 4.344 11.177C4.344 9.89 4.809 8.838 5.579 8.013C5.444 7.715 5.039 6.516 5.684 4.892C5.684 4.892 6.689 4.576 8.984 6.101C9.944 5.839 10.964 5.709 11.984 5.703C13.004 5.709 14.024 5.839 14.984 6.101C17.264 4.576 18.269 4.892 18.269 4.892C18.914 6.516 18.509 7.715 18.389 8.013C19.154 8.838 19.619 9.89 19.619 11.177C19.619 15.707 16.814 16.704 14.144 16.994C14.564 17.348 14.954 18.071 14.954 19.176C14.954 20.754 14.939 22.022 14.939 22.405C14.939 22.714 15.149 23.083 15.764 22.965C20.565 21.417 24 16.995 24 11.792C24 5.28 18.627 0 12 0Z' fill='%23838BAD'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
&-discord {
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
&-discourse {
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M225.9 32C103.3 32 0 130.5 0 252.1 0 256 .1 480 .1 480l225.8-.2c122.7 0 222.1-102.3 222.1-223.9C448 134.3 348.6 32 225.9 32zM224 384c-19.4 0-37.9-4.3-54.4-12.1L88.5 392l22.9-75c-9.8-18.1-15.4-38.9-15.4-61 0-70.7 57.3-128 128-128s128 57.3 128 128-57.3 128-128 128z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
&-medium {
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M71.5 142.3c.6-5.9-1.7-11.8-6.1-15.8L20.3 72.1V64h140.2l108.4 237.7L364.2 64h133.7v8.1l-38.6 37c-3.3 2.5-5 6.7-4.3 10.8v272c-.7 4.1 1 8.3 4.3 10.8l37.7 37v8.1H307.3v-8.1l39.1-37.9c3.8-3.8 3.8-5 3.8-10.8V171.2L241.5 447.1h-14.7L100.4 171.2v184.9c-1.1 7.8 1.5 15.6 7 21.2l50.8 61.6v8.1h-144v-8L65 377.3c5.4-5.6 7.9-13.5 6.5-21.2V142.3z'%3E%3C/path%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
&-account {
|
||||
mask-image: url('../img/icons/account.svg');
|
||||
}
|
||||
|
||||
&-astronaut {
|
||||
mask-image: url('../img/icons/astronaut.svg');
|
||||
}
|
||||
|
||||
&-ethereum-mainnet {
|
||||
mask-image: url('../img/icons/ethereum.svg');
|
||||
}
|
||||
|
||||
&-ethereum-goerli {
|
||||
mask-image: url('../img/icons/goerli.svg');
|
||||
}
|
||||
|
||||
&-optimism {
|
||||
mask-image: url('../img/icons/optimism.svg');
|
||||
}
|
||||
|
||||
&-arbitrum-one {
|
||||
mask-image: url('../img/icons/arbitrum.svg');
|
||||
}
|
||||
|
||||
&-binance-smart-chain {
|
||||
mask-image: url('../img/icons/binance.svg');
|
||||
}
|
||||
|
||||
&-polygon-matic-network {
|
||||
mask-image: url('../img/icons/polygon.svg');
|
||||
}
|
||||
|
||||
&-gnosis-chain {
|
||||
mask-image: url('../img/icons/gnosis.svg');
|
||||
}
|
||||
|
||||
&-avalanche-mainnet {
|
||||
mask-image: url('../img/icons/avalanche.svg');
|
||||
}
|
||||
|
||||
&-account-key {
|
||||
mask-image: url('../img/icons/account/key.svg');
|
||||
}
|
||||
|
||||
&-account-notes {
|
||||
mask-image: url('../img/icons/account/notes.svg');
|
||||
}
|
||||
|
||||
&-account-raw {
|
||||
mask-image: url('../img/icons/account/raw.svg');
|
||||
}
|
||||
|
||||
&-account-recover {
|
||||
mask-image: url('../img/icons/account/recover.svg');
|
||||
}
|
||||
|
||||
&-account-remove {
|
||||
mask-image: url('../img/icons/account/remove.svg');
|
||||
}
|
||||
|
||||
&-account-rpc {
|
||||
mask-image: url('../img/icons/account/rpc.svg');
|
||||
}
|
||||
|
||||
&-account-setup {
|
||||
mask-image: url('../img/icons/account/setup.svg');
|
||||
}
|
||||
|
||||
&-account-wallet {
|
||||
mask-image: url('../img/icons/account/wallet.svg');
|
||||
}
|
||||
|
||||
&-account-file {
|
||||
mask-image: url('../img/icons/account/file.svg');
|
||||
}
|
||||
|
||||
&-account-balance {
|
||||
mask-image: url('../img/icons/account/balance.svg');
|
||||
}
|
||||
|
||||
&-metamask {
|
||||
mask-image: url('../img/icons/metamask.svg');
|
||||
}
|
||||
|
||||
&-walletConnect {
|
||||
mask-image: url('../img/walletConnect.svg');
|
||||
}
|
||||
|
||||
&-open-book {
|
||||
mask-image: url('../img/icons/open-book.svg');
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(-1turn);
|
||||
}
|
||||
}
|
||||
45
assets/styles/components/_info.scss
Normal file
45
assets/styles/components/_info.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
.info {
|
||||
&-name {
|
||||
font-size: 0.929rem;
|
||||
}
|
||||
|
||||
&-value {
|
||||
font-size: 1.429rem;
|
||||
color: $primary;
|
||||
font-weight: 700;
|
||||
|
||||
&.has-tooltip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.b-tooltip {
|
||||
margin-left: 0.75rem;
|
||||
|
||||
.tooltip-trigger {
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-line {
|
||||
display: none;
|
||||
|
||||
@include desktop {
|
||||
width: 192px;
|
||||
height: 42px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
background-image: url('../img/info-line.svg');
|
||||
margin-top: -0.643rem;
|
||||
|
||||
.column:last-child & {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
14
assets/styles/components/_label.scss
Normal file
14
assets/styles/components/_label.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
.label {
|
||||
font-size: 1.125rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.b-tooltip {
|
||||
margin: 0 .45rem;
|
||||
}
|
||||
|
||||
&.is-primary {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
55
assets/styles/components/_loading.scss
Normal file
55
assets/styles/components/_loading.scss
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
.loading-overlay {
|
||||
&.is-full-page {
|
||||
.loading-background {
|
||||
background:rgba(0,0,0,0.85);
|
||||
}
|
||||
}
|
||||
.loading-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.loading-tornado {
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
background-image: url('../img/logo.svg');
|
||||
animation: spinAroundReverse 2000ms infinite linear;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-message {
|
||||
padding-top: .5rem;
|
||||
color: $primary;
|
||||
text-align: center;
|
||||
|
||||
+ .button {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
}
|
||||
.loading-alert {
|
||||
padding-top: 1.5rem;
|
||||
color: $primary;
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.button {
|
||||
margin-top: 1rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spinAroundReverse {
|
||||
from {
|
||||
transform: rotate(359deg); }
|
||||
to {
|
||||
transform: rotate(0deg); }
|
||||
}
|
||||
62
assets/styles/components/_modal.scss
Normal file
62
assets/styles/components/_modal.scss
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
.modal.is-pinned {
|
||||
justify-content: flex-start;
|
||||
|
||||
.animation-content {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
@include desktop {
|
||||
@media screen and (max-height: 720px - 1px) {
|
||||
.dropdown {
|
||||
.background {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: fixed;
|
||||
width: calc(100vw - 40px);
|
||||
max-width: 460px;
|
||||
max-height: calc(100vh - 120px);
|
||||
top: 25% !important;
|
||||
left: 50% !important;
|
||||
bottom: auto !important;
|
||||
right: auto !important;
|
||||
transform: translate3d(-50%, -25%, 0);
|
||||
white-space: normal;
|
||||
overflow-y: auto;
|
||||
z-index: 50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-height: 720px) {
|
||||
.box-modal {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.animation-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.b-tabs .tab-content {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: static;
|
||||
|
||||
.dropdown-menu {
|
||||
padding: 0px 1.5rem;
|
||||
margin-top: calc(2.857em + 4px);
|
||||
top: initial;
|
||||
|
||||
> .dropdown-content {
|
||||
overflow-y: auto;
|
||||
max-height: calc(100vh - 20rem);
|
||||
margin: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
42
assets/styles/components/_notice.scss
Normal file
42
assets/styles/components/_notice.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
.notice {
|
||||
border-radius: 4px;
|
||||
border: 1px solid $white;
|
||||
color: $white;
|
||||
padding: 0.75rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
&__h {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
&.is-primary {
|
||||
border-color: $primary;
|
||||
|
||||
.notice__h {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-warning {
|
||||
border-color: $warning;
|
||||
|
||||
.notice__h {
|
||||
color: $warning;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
text-transform: lowercase;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&.is-recovery-key {
|
||||
border-color: $input-border-color;
|
||||
color: $primary;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
166
assets/styles/components/_notification.scss
Normal file
166
assets/styles/components/_notification.scss
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
.notification {
|
||||
&.main-notification {
|
||||
padding: 0;
|
||||
border: solid 1px #393939;
|
||||
overflow: hidden;
|
||||
|
||||
.modal & {
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@include until(375px) {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.media {
|
||||
align-items: center;
|
||||
|
||||
.media-left {
|
||||
position: relative;
|
||||
align-self: stretch;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
+ .media-content {
|
||||
padding: 0.5rem 2rem 0.5rem 0.5rem;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
transform: skewX(20deg);
|
||||
background-color: #1d1d1d;
|
||||
border-right: 1px solid #393939;
|
||||
top: -1px;
|
||||
bottom: -1px;
|
||||
border-top-right-radius: 2px;
|
||||
left: -50%;
|
||||
right: -0.2rem;
|
||||
}
|
||||
|
||||
> .icon {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-content {
|
||||
text-align: center;
|
||||
padding: 0.5rem 2rem 0.5rem 1rem;
|
||||
|
||||
span {
|
||||
@media print {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete {
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: #393939;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-primary {
|
||||
background-color: #000403;
|
||||
color: #eee;
|
||||
border-color: $primary;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
|
||||
.media {
|
||||
.media-left {
|
||||
&:after {
|
||||
background-color: #1a1203;
|
||||
border-right: 1px solid $primary;
|
||||
}
|
||||
}
|
||||
.media-content {
|
||||
strong {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-warning {
|
||||
background-color: #000403;
|
||||
color: #eee;
|
||||
border-color: $warning;
|
||||
|
||||
.media {
|
||||
.media-left {
|
||||
&:after {
|
||||
background-color: #1a1203;
|
||||
border-right: 1px solid $warning;
|
||||
}
|
||||
}
|
||||
.media-content {
|
||||
strong {
|
||||
color: $warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
border-color: #000 !important;
|
||||
color: #000 !important;
|
||||
|
||||
.media-content {
|
||||
span {
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notices {
|
||||
.notification {
|
||||
width: 290px;
|
||||
pointer-events: auto;
|
||||
padding: 1.071rem 3.214rem 1.071rem 1.071em;
|
||||
font-size: 0.929rem;
|
||||
|
||||
a:not(.button):not(.dropdown-item) {
|
||||
color: $primary;
|
||||
display: block;
|
||||
margin-top: 0.15rem;
|
||||
text-decoration: none;
|
||||
font-size: 0.857rem;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
align-items: center;
|
||||
|
||||
&-content {
|
||||
b {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete {
|
||||
right: 1rem;
|
||||
top: calc(50% - 10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
377
assets/styles/components/_proposals.scss
Normal file
377
assets/styles/components/_proposals.scss
Normal file
|
|
@ -0,0 +1,377 @@
|
|||
.proposals {
|
||||
&-list {
|
||||
&--header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.title {
|
||||
color: #fff;
|
||||
font-size: 1.714rem;
|
||||
margin-bottom: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 0;
|
||||
|
||||
&-btn {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.b-radio.button {
|
||||
border-radius: 0;
|
||||
color: #6b6b6b;
|
||||
background-color: #000403;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
border-bottom: 3px solid #2a2a2a;
|
||||
padding-left: 1.75rem;
|
||||
padding-right: 1.75rem;
|
||||
min-width: 100px;
|
||||
|
||||
&:focus:not(:active),
|
||||
&.is-focused:not(:active) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-primary {
|
||||
color: $primary;
|
||||
border-bottom-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
order: 1;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.field {
|
||||
&.field-tabs {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
&.field-btn {
|
||||
order: 2;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-box {
|
||||
margin: 1.25rem 0;
|
||||
padding: 1.429rem;
|
||||
background: #1f1f1f;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
|
||||
.title {
|
||||
color: #fff;
|
||||
font-size: 1.143rem;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.286;
|
||||
}
|
||||
|
||||
&--info {
|
||||
display: flex;
|
||||
|
||||
@include until(576px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@include from(576px) {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.b-skeleton {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&--id {
|
||||
@include until(576px) {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
margin-right: 0.714rem;
|
||||
|
||||
.tag {
|
||||
color: #fff;
|
||||
background: #363636;
|
||||
min-width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
@include until(576px) {
|
||||
margin-top: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include from(576px) {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #6b6b6b;
|
||||
}
|
||||
}
|
||||
|
||||
.results {
|
||||
background-color: #1a1a1a;
|
||||
border-radius: 6px;
|
||||
padding: 1.429rem;
|
||||
|
||||
@include mobile {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
margin-top: -0.7145rem;
|
||||
margin-bottom: -0.7145rem;
|
||||
margin-right: -0.7145rem;
|
||||
}
|
||||
|
||||
.result {
|
||||
+ .result {
|
||||
margin-top: 0.7145rem;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
span.has-text-primary,
|
||||
span.has-text-danger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
span.icon {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.b-skeleton {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button.is-back {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: #94febf;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:focus:not(:active) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.trnd {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.proposal {
|
||||
.title {
|
||||
color: #fff;
|
||||
font-size: 1.714rem;
|
||||
margin-bottom: 2.5rem;
|
||||
line-height: 1.286;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.description {
|
||||
p {
|
||||
line-height: 1.7;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-block {
|
||||
background-color: #1a1a1a;
|
||||
border-radius: 6px;
|
||||
padding: 1.429rem;
|
||||
|
||||
.b-tooltip.fit-content {
|
||||
width: 100%;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.buttons__halfwidth {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
+ .proposal-block {
|
||||
@include tablet {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.143rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
.percent {
|
||||
margin-left: auto;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.b-skeleton {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.columns {
|
||||
&.has-countdown {
|
||||
.column {
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.has-countdown) {
|
||||
.column {
|
||||
@include until(576px) {
|
||||
&:not(:last-child) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include from(576px) {
|
||||
&:not(:nth-last-child(-n + 2)) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
font-size: 0.929rem;
|
||||
margin-top: 0.35rem;
|
||||
|
||||
.address {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.5;
|
||||
@include noWrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
height: 1.714rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
min-width: auto;
|
||||
font-size: 0.714rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.governance-head {
|
||||
position: relative;
|
||||
padding: 0 2.143rem 1.786rem;
|
||||
margin-bottom: 4.85rem;
|
||||
|
||||
border: 1px solid #2a2a2a;
|
||||
border-top-width: 0;
|
||||
|
||||
border-bottom-left-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
|
||||
.column {
|
||||
&:first-child {
|
||||
@include mobile {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
padding-top: 0;
|
||||
|
||||
.info-value.without-label {
|
||||
padding-top: 1.394rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include touch {
|
||||
text-align: center;
|
||||
|
||||
.info-value.has-tooltip {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
button.is-text {
|
||||
border-width: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
color: $primary;
|
||||
height: 2.143rem;
|
||||
|
||||
.trnd {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&.is-loading::after {
|
||||
border-left-color: $primary;
|
||||
border-bottom-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
31
assets/styles/components/_radio.scss
Normal file
31
assets/styles/components/_radio.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
.b-radio {
|
||||
&.radio {
|
||||
input[type=radio] {
|
||||
+ .check {
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ .check {
|
||||
&:before {
|
||||
transform: scale(.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+ .radio {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.control-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $white;
|
||||
|
||||
.button {
|
||||
margin-left: .45rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
87
assets/styles/components/_slider.scss
Normal file
87
assets/styles/components/_slider.scss
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
.field-slider {
|
||||
.label {
|
||||
margin-bottom: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input {
|
||||
font-size: 0.857rem;
|
||||
padding-left: 0.643rem;
|
||||
padding-right: 0.643rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.control.has-text {
|
||||
font-size: 0.857rem;
|
||||
}
|
||||
|
||||
.b-slider.is-primary {
|
||||
margin: 0.429em 0 0;
|
||||
padding-top: 8px;
|
||||
|
||||
.b-slider-track {
|
||||
height: 2px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.b-slider-tick {
|
||||
height: 2px;
|
||||
width: 2px;
|
||||
|
||||
.b-slider-tick-label {
|
||||
margin-top: 5px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&.is-tick-hidden {
|
||||
&[style*='left: 0%'] {
|
||||
.b-slider-tick-label {
|
||||
left: 0;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
&[style*='left: 100%'] {
|
||||
.b-slider-tick-label {
|
||||
left: auto;
|
||||
right: 0;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.b-slider-thumb-wrapper {
|
||||
&[style*='left: 0%'] {
|
||||
transform: translate(0%, -50%);
|
||||
}
|
||||
&[style*='left: 100%'] {
|
||||
transform: translate(-100%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.b-slider-fill {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.b-slider-thumb {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-color: $primary;
|
||||
background-color: $primary;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #0e1633;
|
||||
left: calc(50% - 3px);
|
||||
top: calc(50% - 3px);
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
146
assets/styles/components/_steps.scss
Normal file
146
assets/styles/components/_steps.scss
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
.b-steps {
|
||||
margin-bottom: 1.25rem;
|
||||
|
||||
.steps {
|
||||
+ .step-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.step-items {
|
||||
.step-item {
|
||||
.step-details {
|
||||
margin-top: 1rem;
|
||||
|
||||
@include until(375px) {
|
||||
word-spacing: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.step-link {
|
||||
transition: color .15s ease-in-out;
|
||||
|
||||
&:not(.is-clickable) {
|
||||
color: #393939;
|
||||
|
||||
.step-marker {
|
||||
border-color: #393939;
|
||||
|
||||
&:before {
|
||||
background-color: #393939;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-marker {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: calc(-1.5rem/2);
|
||||
bottom: 50%;
|
||||
margin-bottom: calc(-1.5rem/2);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
transition: transform 150ms ease-out;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.step-link {
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: $primary;
|
||||
height: .2em;
|
||||
width: 100%;
|
||||
left: -50%;
|
||||
bottom: 0;
|
||||
top: .7rem;
|
||||
}
|
||||
|
||||
&:not(.is-clickable) {
|
||||
&::before {
|
||||
background-color: #393939;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child, &:last-child {
|
||||
.step-link {
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: $primary;
|
||||
height: .2em;
|
||||
width: 50%;
|
||||
bottom: 0;
|
||||
top: .7rem;
|
||||
}
|
||||
|
||||
&:not(.is-clickable) {
|
||||
&::after {
|
||||
background: #393939;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.step-link {
|
||||
&::after {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.step-link {
|
||||
&::after {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
.step-link {
|
||||
color: $primary;
|
||||
|
||||
&:not(.is-clickable) {
|
||||
color: #393939;
|
||||
}
|
||||
|
||||
.step-marker {
|
||||
background-color: $primary-invert;
|
||||
|
||||
&:before {
|
||||
transform: scale(0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-active) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&::before, &::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
114
assets/styles/components/_tab-with-corner.scss
Normal file
114
assets/styles/components/_tab-with-corner.scss
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
.tab-with-corner {
|
||||
border: 1px solid #393939;
|
||||
display: inline-flex;
|
||||
padding: 0.68rem .625rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: $primary-invert;
|
||||
|
||||
&:before, &:after {
|
||||
position: absolute;
|
||||
border: 1px solid #393939;
|
||||
transform-origin: bottom left;
|
||||
width: 2.5em;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: $primary-invert;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
span.is-small {
|
||||
font-size: .7rem;
|
||||
line-height: 2.9;
|
||||
|
||||
@include until(375px) {
|
||||
font-size: .6rem;
|
||||
line-height: 2.8;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-left-bottom {
|
||||
padding-left: 1.75rem;
|
||||
border-top-width: 0;
|
||||
border-right-width: 0;
|
||||
margin-right: 1.75rem;
|
||||
border-bottom-left-radius: 4px;
|
||||
|
||||
@include until(375px) {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: .75rem;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
right: -1rem;
|
||||
transform: skewX(-20deg);
|
||||
border-bottom-right-radius: 4px;
|
||||
border-top-width: 0;
|
||||
border-left-width: 0;
|
||||
bottom: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-right-bottom {
|
||||
margin-left: auto;
|
||||
padding-right: 1.75rem;
|
||||
border-top-width: 0;
|
||||
border-left-width: 0;
|
||||
border-bottom-right-radius: 4px;
|
||||
|
||||
@include until(375px) {
|
||||
padding-right: 1.5rem;
|
||||
padding-left: .75rem;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
left: -1rem;
|
||||
transform: skewX(20deg);
|
||||
border-bottom-left-radius: 4px;
|
||||
border-right-width: 0;
|
||||
border-top-width: 0;
|
||||
bottom: -1px;
|
||||
|
||||
@include until(375px) {
|
||||
left: -.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-left-top {
|
||||
padding-left: 1.75rem;
|
||||
border-bottom-width: 0;
|
||||
border-right-width: 0;
|
||||
margin-right: 1.75rem;
|
||||
border-top-left-radius: 4px;
|
||||
|
||||
@include until(375px) {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: .75rem;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
right: -1rem;
|
||||
transform: skewX(20deg);
|
||||
border-top-right-radius: 4px;
|
||||
border-left-width: 0;
|
||||
border-bottom-width: 0;
|
||||
top: -1px;
|
||||
|
||||
@include until(375px) {
|
||||
right: -.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-primary {
|
||||
border-color: $primary;
|
||||
|
||||
&:before, &:after {
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
251
assets/styles/components/_tabs.scss
Normal file
251
assets/styles/components/_tabs.scss
Normal file
|
|
@ -0,0 +1,251 @@
|
|||
.b-tabs.is-tornado {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 0;
|
||||
|
||||
@include tablet {
|
||||
max-width: 440px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
font-size: 1.35rem;
|
||||
min-height: 3.3483rem;
|
||||
|
||||
@include until(375px) {
|
||||
font-size: 1.135rem;
|
||||
min-height: 3.074rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
justify-content: space-between;
|
||||
|
||||
li {
|
||||
a {
|
||||
color: $primary;
|
||||
font-weight: $weight-bold;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
border: 1px solid $primary;
|
||||
border-bottom-width: 0;
|
||||
background-color: #0e1f17;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
|
||||
padding: 0.68rem 1.25rem;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
position: absolute;
|
||||
background-color: #0e1f17;
|
||||
transform-origin: bottom left;
|
||||
width: 1.5rem;
|
||||
border: 1px solid $primary;
|
||||
border-bottom-width: 0;
|
||||
top: -1px;
|
||||
bottom: 0;
|
||||
transition: background-color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(#0e1f17, 10%);
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
background-color: lighten(#0e1f17, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
a {
|
||||
margin-right: 1.75rem;
|
||||
border-top-left-radius: 4px;
|
||||
border-right-width: 0;
|
||||
padding-left: 1.75rem;
|
||||
|
||||
@include until(375px) {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
right: -1.5rem;
|
||||
transform: skewX(20deg);
|
||||
border-left: none;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
a {
|
||||
margin-left: 1.75rem;
|
||||
border-top-right-radius: 4px;
|
||||
border-left-width: 0;
|
||||
padding-right: 1.75rem;
|
||||
|
||||
@include until(375px) {
|
||||
padding-right: 1.5rem;
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
left: -1.5rem;
|
||||
transform: skewX(-20deg);
|
||||
border-right: none;
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
a {
|
||||
color: $primary-invert;
|
||||
background-color: $primary;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
background-color: $primary-invert;
|
||||
padding: 1.5rem 1.5rem 2rem;
|
||||
border: 1px solid $primary;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
min-height: 19.536rem;
|
||||
|
||||
.help {
|
||||
a {
|
||||
color: $primary;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.relayer-network {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.withdraw-radio {
|
||||
@include mobile {
|
||||
.b-tooltip {
|
||||
&:after {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-relayer {
|
||||
.b-tooltip {
|
||||
&:before,
|
||||
&:after {
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin});
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
&:before {
|
||||
border-top: 5px solid $primary;
|
||||
border-right: 5px solid transparent;
|
||||
border-left: 5px solid transparent;
|
||||
border-bottom: 0;
|
||||
bottom: calc(100% + 2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio-metamask {
|
||||
.b-tooltip {
|
||||
&:before,
|
||||
&:after {
|
||||
top: 50%;
|
||||
right: calc(100% + #{$tooltip-arrow-size} + #{$tooltip-arrow-margin});
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
&:before {
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid $primary;
|
||||
border-right: 0;
|
||||
right: calc(100% + 2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.withdraw-address {
|
||||
margin-bottom: 1.95rem;
|
||||
|
||||
+ .field {
|
||||
margin-top: -0.1rem;
|
||||
margin-bottom: 1.35rem;
|
||||
}
|
||||
|
||||
.label {
|
||||
.fee {
|
||||
margin-left: auto;
|
||||
color: #7b7b7b;
|
||||
}
|
||||
}
|
||||
}
|
||||
fieldset[disabled] {
|
||||
.withdraw-address {
|
||||
.fee {
|
||||
color: darken(#7b7b7b, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.b-tabs.is-modal {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
overflow: initial;
|
||||
|
||||
ul {
|
||||
li {
|
||||
flex: 1 1 auto;
|
||||
|
||||
a {
|
||||
transition: border-color 0.15s ease-in-out;
|
||||
border-bottom: 2px solid #767676;
|
||||
|
||||
&:hover {
|
||||
border-bottom-color: $primary;
|
||||
}
|
||||
|
||||
.b-tooltip {
|
||||
margin: 0 0.45rem;
|
||||
}
|
||||
|
||||
.is-manage-box & {
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
a {
|
||||
border-bottom: 2px solid $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
padding: 1rem 0 0;
|
||||
}
|
||||
}
|
||||
6
assets/styles/components/_textarea.scss
Normal file
6
assets/styles/components/_textarea.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
.is-disabled-resize {
|
||||
.textarea {
|
||||
height: 4.393rem;
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
382
assets/styles/components/_txs.scss
Normal file
382
assets/styles/components/_txs.scss
Normal file
|
|
@ -0,0 +1,382 @@
|
|||
.txs {
|
||||
padding-top: 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
|
||||
.tx-filters {
|
||||
@include tablet {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
justify-content: center;
|
||||
|
||||
.break {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
&.is-primary.is-outlined {
|
||||
&:not(.is-hovered):focus {
|
||||
background-color: #0e1f17;
|
||||
border-color: $primary;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 0.75rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-right: 1rem;
|
||||
|
||||
@include mobile {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tx-head {
|
||||
padding: 1.5rem 1.429rem 1.5rem 2.143rem;
|
||||
|
||||
@include mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.columns {
|
||||
.column {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.is-sortable {
|
||||
cursor: pointer;
|
||||
|
||||
> .icon {
|
||||
height: 0.786rem;
|
||||
width: 0.786rem;
|
||||
margin-left: 0.5rem;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.b-tooltip {
|
||||
margin-left: 0.45rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-mobile {
|
||||
@include tablet {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.columns {
|
||||
.column {
|
||||
flex: none;
|
||||
|
||||
&.is-time {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
&.is-amount {
|
||||
width: 14%;
|
||||
}
|
||||
|
||||
&.is-deposit {
|
||||
width: 14.5%;
|
||||
}
|
||||
|
||||
&.is-status {
|
||||
width: 12%;
|
||||
}
|
||||
|
||||
&.is-hash {
|
||||
width: 10%;
|
||||
@include desktop {
|
||||
width: 12.5%;
|
||||
}
|
||||
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
&-buttons {
|
||||
width: 145px;
|
||||
display: inline-flex;
|
||||
|
||||
@include tablet-only {
|
||||
width: 102px;
|
||||
|
||||
.button {
|
||||
span {
|
||||
&:not(.icon) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .button:last-child {
|
||||
margin-left: 0.65rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-tx {
|
||||
background-color: #1f1f1f;
|
||||
border: none;
|
||||
padding: 1.571rem 1.429rem 1.571rem 2.143rem;
|
||||
|
||||
.columns {
|
||||
min-height: 3.642rem;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 10px;
|
||||
background-color: $primary;
|
||||
border-radius: 6px 0px 0px 6px;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
+ .box-tx {
|
||||
margin-top: 0.825rem;
|
||||
}
|
||||
|
||||
&.is-spent {
|
||||
background-color: #111312;
|
||||
color: #878887;
|
||||
|
||||
&:before {
|
||||
background-color: #538968;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-violet {
|
||||
&:before {
|
||||
background-color: $violet;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-waiting {
|
||||
&:before {
|
||||
background-color: #6b6b6b;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-danger {
|
||||
&:before {
|
||||
background-color: $danger;
|
||||
}
|
||||
|
||||
button.is-dark {
|
||||
path {
|
||||
fill: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-white {
|
||||
color: $white;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
.detail {
|
||||
display: flex;
|
||||
|
||||
&-label {
|
||||
flex: 1 0 128px;
|
||||
}
|
||||
|
||||
&-description {
|
||||
@include noWrap;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-left: 0.45rem;
|
||||
}
|
||||
|
||||
+ .detail {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
.columns {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
|
||||
.column {
|
||||
width: 50%;
|
||||
flex: none;
|
||||
|
||||
&:before {
|
||||
content: attr(data-label);
|
||||
display: block;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.is-time {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
&.is-amount {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
&.is-deposit {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
&.is-status {
|
||||
order: 4;
|
||||
}
|
||||
|
||||
&.is-hash {
|
||||
order: 5;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-buttons {
|
||||
order: 7;
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
|
||||
.b-tooltip {
|
||||
flex-grow: 1;
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-with-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-encrypted {
|
||||
border: 1px solid $primary;
|
||||
|
||||
.lock {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 4px;
|
||||
background-color: #182922;
|
||||
border: 1px solid $primary;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -7px;
|
||||
margin-top: -7px;
|
||||
background-color: $primary;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
mask-image: url(../img/icons/lock.svg);
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
}
|
||||
|
||||
&-tooltip {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
&.is-danger {
|
||||
border-color: $danger;
|
||||
|
||||
.lock {
|
||||
background-color: #2a0c12;
|
||||
border-color: $danger;
|
||||
|
||||
&:after {
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-waiting {
|
||||
border-color: #4c4c4c;
|
||||
|
||||
.lock {
|
||||
background-color: #1a1a1a;
|
||||
border-color: #4c4c4c;
|
||||
|
||||
&:after {
|
||||
background-color: #4c4c4c;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-spent {
|
||||
border-color: #538968;
|
||||
|
||||
.lock {
|
||||
background-color: #060a08;
|
||||
border-color: #538968;
|
||||
|
||||
&:after {
|
||||
background-color: #538968;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
32
assets/styles/components/_video.scss
Normal file
32
assets/styles/components/_video.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
.video {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 640px;
|
||||
position: relative;
|
||||
|
||||
&.is-loading {
|
||||
&:after {
|
||||
@include loader;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: calc(50% - .5em);
|
||||
left: calc(50% - .5em);
|
||||
}
|
||||
}
|
||||
|
||||
&--iframe {
|
||||
padding-top: 56.25%;
|
||||
position: relative;
|
||||
background-color: #1B3147;
|
||||
display: block;
|
||||
|
||||
iframe {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
138
assets/styles/components/_wallets.scss
Normal file
138
assets/styles/components/_wallets.scss
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
.wallets {
|
||||
&.field.is-grouped.is-grouped-multiline {
|
||||
margin: -0.5rem;
|
||||
|
||||
> .control {
|
||||
margin: 0;
|
||||
|
||||
&.control-with-select {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
&:not(.control-with-select) {
|
||||
.button {
|
||||
margin: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 120px;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
|
||||
&.is-black {
|
||||
background-color: #559774;
|
||||
|
||||
&:hover {
|
||||
background-color: #94febf;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-background {
|
||||
color: black;
|
||||
background-color: #7ddaa9;
|
||||
|
||||
&:hover {
|
||||
background-color: #94febf;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
&.is-metamask:before {
|
||||
background-image: url('../img/metamask-fox.svg');
|
||||
}
|
||||
|
||||
&.is-walletConnect:before {
|
||||
background-image: url('../img/walletConnect.svg');
|
||||
}
|
||||
|
||||
&.is-generic:before {
|
||||
background-image: url('../img/ethereum.svg');
|
||||
}
|
||||
}
|
||||
|
||||
.control-with-select {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.button {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-width: 0;
|
||||
|
||||
&:before {
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
.select {
|
||||
&.is-empty {
|
||||
select {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-width: 0;
|
||||
border-color: #559774;
|
||||
background-color: #559774;
|
||||
height: 1.929rem;
|
||||
color: $primary-invert;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: #559774;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.is-multiple) {
|
||||
height: 1.929rem;
|
||||
|
||||
&:not(.is-loading) {
|
||||
&::after {
|
||||
border-color: $primary-invert;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.network-select {
|
||||
width: 120px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*> .control:hover {
|
||||
.button {
|
||||
border-color: #cdcdcd;
|
||||
}
|
||||
|
||||
&.control-with-select {
|
||||
.button {
|
||||
border-bottom-color: $black;
|
||||
}
|
||||
|
||||
.select select {
|
||||
border-color: #cdcdcd;
|
||||
}
|
||||
}*
|
||||
}*/
|
||||
}
|
||||
77
assets/styles/components/_withdraw-data.scss
Normal file
77
assets/styles/components/_withdraw-data.scss
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
.withdraw-data {
|
||||
font-size: .85rem;
|
||||
width: 100%;
|
||||
line-height: 1;
|
||||
|
||||
.b-tooltip {
|
||||
.tooltip-content {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-spaced {
|
||||
margin-top: -.75rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
+ .help {
|
||||
margin-top: -1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
span {
|
||||
color: $primary;
|
||||
margin-left: .5rem;
|
||||
text-align: right;
|
||||
|
||||
> span {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.has-low-anonymity {
|
||||
margin-left: 0.5rem;
|
||||
|
||||
> span {
|
||||
margin-left: 1.1rem;
|
||||
position: relative;
|
||||
border-bottom: 1px dotted $warning;
|
||||
margin-bottom: -1px;
|
||||
color: $warning;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-image: url("data:image/svg+xml,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23ff8a00' d='m13 14h-2v-4h2m0 8h-2v-2h2m-12 5h22l-11-19z'/%3E%3C/svg%3E");
|
||||
background-size: contain;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
left: -18px;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-alone {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.b-tooltip {
|
||||
flex-shrink: 0;
|
||||
|
||||
&:after {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
+ .withdraw-data-item {
|
||||
margin-top: .6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue