zyejMAll-mobile/sheep/scss/style/_border.scss
2024-08-07 10:31:42 +08:00

141 lines
2.8 KiB
SCSS

/* ==================
边框
==================== */
/* -- 实线 -- */
.border {
overflow: initial !important;
@at-root [class*='border'],
[class*='dashed'] {
position: relative;
&.dline {
--ui-Border: var(--ui-BG-3);
}
&::after {
content: ' ';
width: 200%;
height: 200%;
position: absolute;
z-index: 0;
top: 0;
left: 0;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
border-radius: inherit;
}
&.radius::after {
border-radius: calc(#{$radius} * 2);
}
&.round::after {
border-radius: #{$round-pill};
}
}
&::after {
border: 1px solid var(--ui-Border);
}
&s::after {
border: 4rpx solid var(--ui-Border);
}
&ss::after {
border: 8rpx solid var(--ui-Border);
}
@each $value in (top, right, bottom, left) {
&-#{$value}::after {
border-#{$value}: 1px solid var(--ui-Border);
}
&s-#{$value}::after {
border-#{$value}: 4rpx solid var(--ui-Border);
}
&ss-#{$value}::after {
border-#{$value}: 8rpx solid var(--ui-Border);
}
}
}
/* -- 虚线 -- */
.dashed {
&::after {
border: 4rpx dashed var(--ui-Border);
}
&s::after {
border: 6rpx dashed var(--ui-Border);
}
@each $value in (top, right, bottom, left) {
&-#{$value}::after {
border-#{$value}: 4rpx dashed var(--ui-Border);
}
&s-#{$value}::after {
border-#{$value}: 6rpx dashed var(--ui-Border);
}
}
}
@each $color, $value in map-merge($colors, map-merge($darks, $grays)) {
.border-#{$color}::after,
.border-#{$color}[class*='-shine']::before {
border-color: $value !important;
}
}
@each $value in (a, b, c, d, e) {
.main-#{$value}-border::after,
.main-#{$value}-border[class*='-shine']::before {
border-color: var(--main-#{$value}) !important;
}
}
.dashed-shine,
.dasheds-shine {
position: relative;
overflow: hidden;
&::after,
&::before {
border-style: dashed;
border-color: var(--ui-Border);
animation: shineafter 1s infinite linear;
width: calc(200% + 40px);
height: 200%;
border-width: 2px 0;
}
&::before {
content: ' ';
position: absolute;
transform: scale(0.5);
transform-origin: 0 0;
pointer-events: none;
box-sizing: border-box;
animation: shinebefore 1s infinite linear;
width: 200%;
height: calc(200% + 40px);
border-width: 0 2px;
}
}
.dasheds-shine {
&::after,
&::before {
border-width: 4px 0;
}
&::before {
border-width: 0 4px;
}
}
@keyframes shineafter {
0% {
top: 0;
left: -22px;
}
100% {
top: 0px;
left: 0px;
}
}
@keyframes shinebefore {
0% {
top: -22px;
left: 0;
}
100% {
top: 0px;
left: 0px;
}
}