123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 |
- $varPre: '';
- $borderRadius: 'none' 0, 'sm' 2, '' 4, 'md' 6, 'lg' 8, 'xl' 12, '2xl' 16, '3xl' 24, 'full' 9999;
- @mixin setBorderRadius($arr) {
- @each $name, $val in $arr{
- $varName: '';
- @if($name != '') {
- $varName: --#{$varPre}rounded-#{$name};
- } @else {
- $varName: --#{$varPre}rounded;
- }
- @include render($name, $varName);
- }
- }
- // border Radius
- @mixin render($name, $varName) {
- @if ($name != '') {
- .rounded-#{$name} { border-radius: var($varName); }
-
- .rounded-s-#{$name} { border-start-start-radius: var($varName); border-end-start-radius: var($varName); }
- .rounded-e-#{$name} { border-start-end-radius: var($varName); border-end-end-radius: var($varName); }
- .rounded-t-#{$name} { border-top-left-radius: var($varName); border-top-right-radius: var($varName); }
- .rounded-r-#{$name} { border-top-right-radius: var($varName); border-bottom-right-radius: var($varName); }
- .rounded-b-#{$name} { border-bottom-right-radius: var($varName); border-bottom-left-radius: var($varName); }
- .rounded-l-#{$name} { border-top-left-radius: var($varName); border-bottom-left-radius: var($varName); }
- .rounded-ss-#{$name} { border-start-start-radius: var($varName); }
- .rounded-se-#{$name} { border-start-end-radius: var($varName); }
- .rounded-ee-#{$name} { border-end-end-radius: var($varName); }
- .rounded-es-#{$name} { border-end-start-radius: var($varName); }
- .rounded-tl-#{$name} { border-top-left-radius: var($varName); }
- .rounded-tr-#{$name} { border-top-right-radius: var($varName); }
- .rounded-br-#{$name} { border-bottom-right-radius: var($varName); }
- .rounded-bl-#{$name} { border-bottom-left-radius: var($varName); }
- } @else {
- .rounded { border-radius: var($varName); }
- .rounded-s { border-start-start-radius: var($varName); border-end-start-radius: var($varName); }
- .rounded-e { border-start-end-radius: var($varName); border-end-end-radius: var($varName); }
- .rounded-t { border-top-left-radius: var($varName); border-top-right-radius: var($varName); }
- .rounded-r { border-top-right-radius: var($varName); border-bottom-right-radius: var($varName); }
- .rounded-b { border-bottom-right-radius: var($varName); border-bottom-left-radius: var($varName); }
- .rounded-l { border-top-left-radius: var($varName); border-bottom-left-radius: var($varName); }
- .rounded-ss { border-start-start-radius: var($varName); }
- .rounded-se { border-start-end-radius: var($varName); }
- .rounded-ee { border-end-end-radius: var($varName); }
- .rounded-es { border-end-start-radius: var($varName); }
- .rounded-tl { border-top-left-radius: var($varName); }
- .rounded-tr { border-top-right-radius: var($varName); }
- .rounded-br { border-bottom-right-radius: var($varName); }
- .rounded-bl { border-bottom-left-radius: var($varName); }
- }
-
- }
- @include setBorderRadius($borderRadius);
|