576 lines
10 KiB
SCSS
576 lines
10 KiB
SCSS
@import "./variables";
|
|
|
|
.pb-safe-area {
|
|
padding-bottom: constant(safe-area-inset-bottom) !important;
|
|
padding-bottom: env(safe-area-inset-bottom) !important;
|
|
}
|
|
|
|
.pt-safe-area {
|
|
padding-top: constant(safe-area-inset-top) !important;
|
|
padding-top: env(safe-area-inset-top) !important;
|
|
}
|
|
|
|
.mx-auto,
|
|
.ml-auto {
|
|
margin-left: auto !important;
|
|
}
|
|
|
|
.mx-auto,
|
|
.mr-auto {
|
|
margin-right: auto !important;
|
|
}
|
|
|
|
@for $i from 0 through 10 {
|
|
|
|
.p-#{$i},
|
|
.pl-#{$i},
|
|
.px-#{$i} {
|
|
padding-left: $spacing * $i !important;
|
|
}
|
|
|
|
.p-#{$i},
|
|
.pr-#{$i},
|
|
.px-#{$i} {
|
|
padding-right: $spacing * $i !important;
|
|
}
|
|
|
|
.p-#{$i},
|
|
.pt-#{$i},
|
|
.py-#{$i} {
|
|
padding-top: $spacing * $i !important;
|
|
}
|
|
|
|
.p-#{$i},
|
|
.pb-#{$i},
|
|
.py-#{$i} {
|
|
padding-bottom: $spacing * $i !important;
|
|
}
|
|
|
|
.m-#{$i},
|
|
.ml-#{$i},
|
|
.mx-#{$i} {
|
|
margin-left: $spacing * $i !important;
|
|
}
|
|
|
|
.m-#{$i},
|
|
.mr-#{$i},
|
|
.mx-#{$i} {
|
|
margin-right: $spacing * $i !important;
|
|
}
|
|
|
|
.m-#{$i},
|
|
.mt-#{$i},
|
|
.my-#{$i} {
|
|
margin-top: $spacing * $i !important;
|
|
}
|
|
|
|
.m-#{$i},
|
|
.mb-#{$i},
|
|
.my-#{$i} {
|
|
margin-bottom: $spacing * $i !important;
|
|
}
|
|
|
|
.top-#{$i} {
|
|
top: $spacing * $i !important;
|
|
}
|
|
|
|
.left-#{$i} {
|
|
left: $spacing * $i !important;
|
|
}
|
|
|
|
.right-#{$i} {
|
|
right: $spacing * $i !important;
|
|
}
|
|
|
|
.bottom-#{$i} {
|
|
bottom: $spacing * $i !important;
|
|
}
|
|
|
|
.top--#{$i} {
|
|
top: -$spacing * $i !important;
|
|
}
|
|
|
|
.left--#{$i} {
|
|
left: -$spacing * $i !important;
|
|
}
|
|
|
|
.right--#{$i} {
|
|
right: -$spacing * $i !important;
|
|
}
|
|
|
|
.bottom--#{$i} {
|
|
bottom: -$spacing * $i !important;
|
|
}
|
|
}
|
|
|
|
.inline-flex {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
|
|
&-shrink-0 {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@each $var in wrap,
|
|
nowrap {
|
|
&-#{$var} {
|
|
flex-wrap: $var;
|
|
}
|
|
}
|
|
|
|
@each $var in column,
|
|
column-reverse,
|
|
row,
|
|
row-reverse {
|
|
&-#{$var} {
|
|
flex-direction: $var;
|
|
}
|
|
}
|
|
|
|
@each $var in center,
|
|
baseline,
|
|
flex-start,
|
|
flex-end {
|
|
&-y-#{$var} {
|
|
align-items: $var;
|
|
}
|
|
}
|
|
|
|
@each $var in center,
|
|
flex-start,
|
|
flex-end,
|
|
space-around,
|
|
space-between,
|
|
space-evenly {
|
|
&-x-#{$var} {
|
|
justify-content: $var;
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 12 {
|
|
&-#{$i} {
|
|
flex: $i;
|
|
min-width: 0;
|
|
}
|
|
}
|
|
|
|
&-center {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
[class*="grid-columns-"] {
|
|
display: grid;
|
|
align-content: flex-start;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(24, minmax(0px, 1fr));
|
|
|
|
@for $i from 1 through 23 {
|
|
&-columns-#{$i} {
|
|
grid-template-columns: repeat($i, minmax(0px, 1fr));
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 10 {
|
|
|
|
&-gap-#{$i},
|
|
&-gap-x-#{$i} {
|
|
column-gap: $spacing * $i !important;
|
|
}
|
|
|
|
&-gap-#{$i},
|
|
&-gap-y-#{$i} {
|
|
row-gap: $spacing * $i !important;
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 24 {
|
|
&-column-#{$i} {
|
|
grid-column: span $i / span $i;
|
|
}
|
|
|
|
&-row-#{$i} {
|
|
grid-row: span $i / span $i;
|
|
}
|
|
}
|
|
|
|
@each $key, $value in $breakpoint {
|
|
@media only screen and (min-width: $value) {
|
|
@for $i from 1 through 24 {
|
|
&-columns-#{$key}-#{$i} {
|
|
grid-template-columns: repeat($i, minmax(0px, 1fr));
|
|
}
|
|
|
|
&-column-#{$key}-#{$i} {
|
|
grid-column: span $i / span $i;
|
|
}
|
|
|
|
&-row-#{$key}-#{$i} {
|
|
grid-row: span $i / span $i;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $var in relative,
|
|
absolute,
|
|
fixed,
|
|
sticky {
|
|
.position-#{$var} {
|
|
position: $var;
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 20 {
|
|
.vh-#{$i * 5} {
|
|
height: $i * 5vh;
|
|
}
|
|
|
|
.vw-#{$i * 5} {
|
|
width: $i * 5vw;
|
|
}
|
|
|
|
.h-#{$i * 5} {
|
|
height: $i * 5%;
|
|
}
|
|
|
|
.w-#{$i * 5} {
|
|
width: $i * 5%;
|
|
}
|
|
|
|
.min-h-#{$i * 5} {
|
|
min-height: $i * 5%;
|
|
}
|
|
|
|
.min-w-#{$i * 5} {
|
|
min-width: $i * 5%;
|
|
}
|
|
|
|
.min-vh-#{$i * 5} {
|
|
min-height: $i * 5vh;
|
|
}
|
|
|
|
.min-vw-#{$i * 5} {
|
|
min-width: $i * 5vw;
|
|
}
|
|
|
|
.max-h-#{$i * 5} {
|
|
max-height: $i * 5%;
|
|
}
|
|
|
|
.max-w-#{$i * 5} {
|
|
max-width: $i * 5%;
|
|
}
|
|
|
|
.max-vh-#{$i * 5} {
|
|
max-height: $i * 5vh;
|
|
}
|
|
|
|
.max-vw-#{$i * 5} {
|
|
max-width: $i * 5vw;
|
|
}
|
|
}
|
|
|
|
.bg {
|
|
background-color: var(--el-bg-color);
|
|
}
|
|
|
|
.bg-filter {
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
|
|
.bg-mosaic,
|
|
.el-avatar.bg-mosaic,
|
|
#app .el-avatar {
|
|
--el-avatar-bg-color:#1E1E1E;
|
|
/* background: linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
|
|
linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%),
|
|
linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%),
|
|
linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%);
|
|
background-size: 20px 20px;
|
|
background-position: 0 0, 0 10px, 10px -10px, -10px 0px; */
|
|
}
|
|
|
|
@each $key,
|
|
$color in $color-list {
|
|
|
|
.bg-#{$key},
|
|
.hover-bg-#{$key}:hover {
|
|
background-color: $color;
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 20 {
|
|
.bg-#{$i * 5} {
|
|
background-color: rgba(var(--el-bg-color-rgb-r), var(--el-bg-color-rgb-g), var(--el-bg-color-rgb-b), $i * 0.05);
|
|
}
|
|
}
|
|
|
|
|
|
.text {
|
|
|
|
@each $key,
|
|
$color in $text-color-list {
|
|
&-#{$key} {
|
|
color: $color;
|
|
}
|
|
}
|
|
|
|
@each $var in nowrap,
|
|
wrap {
|
|
&-#{$var} {
|
|
white-space: $var;
|
|
}
|
|
}
|
|
|
|
@each $var in break-all,
|
|
break-word,
|
|
keep-all {
|
|
&-#{$var} {
|
|
word-break: $var;
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 10 {
|
|
&-ellipsis-#{$i} {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
line-clamp: $i;
|
|
-webkit-line-clamp: $i;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 5 {
|
|
&-spacing-#{$i} {
|
|
word-spacing: $i * 0.53333vw;
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 5 {
|
|
&-letter-spacing-#{$i} {
|
|
letter-spacing: $i * 0.53333vw;
|
|
}
|
|
}
|
|
|
|
@each $var in left,
|
|
center,
|
|
right,
|
|
initial {
|
|
&-#{$var} {
|
|
text-align: $var;
|
|
}
|
|
}
|
|
|
|
@each $var in capitalize,
|
|
uppercase,
|
|
lowercase {
|
|
&-#{$var} {
|
|
text-transform: $var;
|
|
}
|
|
}
|
|
|
|
&-s {
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
|
|
@each $i in $direction {
|
|
|
|
.border,
|
|
.border-#{$i} {
|
|
border-#{$i}-width: $border-size;
|
|
border-#{$i}-style: solid;
|
|
border-#{$i}-color: var(--el-border-color);
|
|
}
|
|
|
|
@each $key,
|
|
$var in $color-list {
|
|
|
|
.border-#{$key},
|
|
.border-#{$i}-#{$key} {
|
|
border-#{$i}-color: $var;
|
|
}
|
|
|
|
.border-hover-#{$key}:hover,
|
|
.border-hover-#{$i}-#{$key}:hover {
|
|
border-#{$i}-color: $var;
|
|
}
|
|
}
|
|
}
|
|
|
|
@for $i from 0 through 6 {
|
|
@each $n in $direction {
|
|
|
|
.border-#{$i},
|
|
.border-#{$n}-#{$i} {
|
|
border-#{$n}-width: $i * $border-size;
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $i in solid,
|
|
dotted,
|
|
dashed,
|
|
double,
|
|
groove,
|
|
ridge,
|
|
inset,
|
|
outset {
|
|
@each $n in $direction {
|
|
|
|
.border-#{$i},
|
|
.border-#{$n}-#{$i} {
|
|
border-#{$n}-style: $i;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rounded-circle {
|
|
border-radius: 50% !important;
|
|
}
|
|
|
|
.rounded-round {
|
|
border-radius: 100px !important;
|
|
}
|
|
|
|
@for $i from 0 through 6 {
|
|
@if $i ==1 {
|
|
|
|
.rounded,
|
|
.rounded-left,
|
|
.rounded-bottom,
|
|
.rounded-bottom-left {
|
|
border-bottom-left-radius: $i * $rounded-size;
|
|
}
|
|
|
|
.rounded,
|
|
.rounded-left,
|
|
.rounded-top,
|
|
.rounded-top-left {
|
|
border-top-left-radius: $i * $rounded-size;
|
|
}
|
|
|
|
.rounded,
|
|
.rounded-right,
|
|
.rounded-bottom,
|
|
.rounded-bottom-right {
|
|
border-bottom-right-radius: $i * $rounded-size;
|
|
}
|
|
|
|
.rounded,
|
|
.rounded-right,
|
|
.rounded-top,
|
|
.rounded-top-right {
|
|
border-top-right-radius: $i * $rounded-size;
|
|
}
|
|
}
|
|
|
|
@else {
|
|
|
|
.rounded-#{$i},
|
|
.rounded-left-#{$i},
|
|
.rounded-bottom-#{$i},
|
|
.rounded-bottom-left-#{$i} {
|
|
border-bottom-left-radius: $i * $rounded-size !important;
|
|
}
|
|
|
|
.rounded-#{$i},
|
|
.rounded-left-#{$i},
|
|
.rounded-top-#{$i},
|
|
.rounded-top-left-#{$i} {
|
|
border-top-left-radius: $i * $rounded-size !important;
|
|
}
|
|
|
|
.rounded-#{$i},
|
|
.rounded-right-#{$i},
|
|
.rounded-bottom-#{$i},
|
|
.rounded-bottom-right-#{$i} {
|
|
border-bottom-right-radius: $i * $rounded-size !important;
|
|
}
|
|
|
|
.rounded-#{$i},
|
|
.rounded-right-#{$i},
|
|
.rounded-top-#{$i},
|
|
.rounded-top-right-#{$i} {
|
|
border-top-right-radius: $i * $rounded-size !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.font-weight {
|
|
&-bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
&-normal {
|
|
font-weight: normal;
|
|
}
|
|
|
|
@for $i from 1 through 9 {
|
|
&-#{$i * 100} {
|
|
font-weight: $i * 100;
|
|
}
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 10 {
|
|
.h#{$i} {
|
|
font-size: 32px - ($i * 2px);
|
|
}
|
|
}
|
|
|
|
.line-height {
|
|
line-height: 1;
|
|
|
|
@for $i from 1 through 10 {
|
|
&-#{$i} {
|
|
line-height: 20px + ($i * 2px);
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $i in hidden,
|
|
visible,
|
|
auto,
|
|
scroll {
|
|
|
|
.overflow-#{$i},
|
|
.overflow-x-#{$i} {
|
|
overflow-x: $i;
|
|
}
|
|
|
|
.overflow-#{$i},
|
|
.overflow-y-#{$i} {
|
|
overflow-y: $i;
|
|
}
|
|
}
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.shadow {
|
|
box-shadow: var(--el-box-shadow);
|
|
|
|
@each $i in light,
|
|
lighter,
|
|
dark {
|
|
&-#{$i} {
|
|
box-shadow:var(--el-box-shadow-#{$i});
|
|
}
|
|
}
|
|
}
|
|
|
|
.pointer {
|
|
cursor: pointer;
|
|
} |