classic-ui/assets/styles/components/_account.scss

222 lines
3.8 KiB
SCSS
Raw Permalink Normal View History

2022-04-22 06:05:56 +03:00
.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;
}
}
}
}
}