123456789101112131415161718192021222324252627282930313233343536 |
- // Border Width
- [class*='border-'] {
- border: 0 solid RGB(0 0 0 / var(--border-opacity));
- }
- $arr: '', 0, 2, 3, 4, 8;
- @mixin render($name, $val) {
- .border#{$name} { border-width: $val; }
- }
- @mixin renderOther($name, $val) {
- .border-x#{$name} { border-left-width: $val; border-right-width: $val; }
- .border-y#{$name} { border-top-width: $val; border-bottom-width: $val; }
- .border-s#{$name} { border-inline-start-width: $val; }
- .border-e#{$name} { border-inline-end-width: $val; }
- .border-t#{$name} { border-top-width: $val; }
- .border-r#{$name} { border-right-width: $val; }
- .border-b#{$name} { border-bottom-width: $val; }
- .border-l#{$name} { border-left-width: $val; }
- }
- @each $name in $arr {
- @if ($name == '') {
- @include render($name, 1rpx);
- } @else {
- @include render(-#{$name}, #{$name * 2}rpx);
- }
- }
- @each $name in $arr {
- @if ($name == '') {
- @include renderOther($name, 1rpx);
- } @else {
- @include renderOther(-#{$name}, #{$name * 2}rpx);
- }
- }
|