BorderRadius.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. $varPre: '';
  2. $borderRadius: 'none' 0, 'sm' 2, '' 4, 'md' 6, 'lg' 8, 'xl' 12, '2xl' 16, '3xl' 24, 'full' 9999;
  3. @mixin setBorderRadius($arr) {
  4. @each $name, $val in $arr{
  5. $varName: '';
  6. @if($name != '') {
  7. $varName: --#{$varPre}rounded-#{$name};
  8. } @else {
  9. $varName: --#{$varPre}rounded;
  10. }
  11. @include render($name, $varName);
  12. }
  13. }
  14. // border Radius
  15. @mixin render($name, $varName) {
  16. @if ($name != '') {
  17. .rounded-#{$name} { border-radius: var($varName); }
  18. .rounded-s-#{$name} { border-start-start-radius: var($varName); border-end-start-radius: var($varName); }
  19. .rounded-e-#{$name} { border-start-end-radius: var($varName); border-end-end-radius: var($varName); }
  20. .rounded-t-#{$name} { border-top-left-radius: var($varName); border-top-right-radius: var($varName); }
  21. .rounded-r-#{$name} { border-top-right-radius: var($varName); border-bottom-right-radius: var($varName); }
  22. .rounded-b-#{$name} { border-bottom-right-radius: var($varName); border-bottom-left-radius: var($varName); }
  23. .rounded-l-#{$name} { border-top-left-radius: var($varName); border-bottom-left-radius: var($varName); }
  24. .rounded-ss-#{$name} { border-start-start-radius: var($varName); }
  25. .rounded-se-#{$name} { border-start-end-radius: var($varName); }
  26. .rounded-ee-#{$name} { border-end-end-radius: var($varName); }
  27. .rounded-es-#{$name} { border-end-start-radius: var($varName); }
  28. .rounded-tl-#{$name} { border-top-left-radius: var($varName); }
  29. .rounded-tr-#{$name} { border-top-right-radius: var($varName); }
  30. .rounded-br-#{$name} { border-bottom-right-radius: var($varName); }
  31. .rounded-bl-#{$name} { border-bottom-left-radius: var($varName); }
  32. } @else {
  33. .rounded { border-radius: var($varName); }
  34. .rounded-s { border-start-start-radius: var($varName); border-end-start-radius: var($varName); }
  35. .rounded-e { border-start-end-radius: var($varName); border-end-end-radius: var($varName); }
  36. .rounded-t { border-top-left-radius: var($varName); border-top-right-radius: var($varName); }
  37. .rounded-r { border-top-right-radius: var($varName); border-bottom-right-radius: var($varName); }
  38. .rounded-b { border-bottom-right-radius: var($varName); border-bottom-left-radius: var($varName); }
  39. .rounded-l { border-top-left-radius: var($varName); border-bottom-left-radius: var($varName); }
  40. .rounded-ss { border-start-start-radius: var($varName); }
  41. .rounded-se { border-start-end-radius: var($varName); }
  42. .rounded-ee { border-end-end-radius: var($varName); }
  43. .rounded-es { border-end-start-radius: var($varName); }
  44. .rounded-tl { border-top-left-radius: var($varName); }
  45. .rounded-tr { border-top-right-radius: var($varName); }
  46. .rounded-br { border-bottom-right-radius: var($varName); }
  47. .rounded-bl { border-bottom-left-radius: var($varName); }
  48. }
  49. }
  50. @include setBorderRadius($borderRadius);