classic-ui-dev/assets/styles/components/_box.scss
Danil Kovtonyuk 44f31f8b9f
init
2022-04-22 13:14:19 +10:00

190 lines
3.2 KiB
SCSS

.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;
}
}
}