| 1 | @import "variables";
|
| 2 |
|
| 3 | .rounded {
|
| 4 | border-radius: $border-radius-default;
|
| 5 | }
|
| 6 |
|
| 7 | .rounded\:t {
|
| 8 | border-top-left-radius: $border-radius-default;
|
| 9 | border-top-right-radius: $border-radius-default;
|
| 10 | }
|
| 11 |
|
| 12 | .rounded\:r {
|
| 13 | border-top-right-radius: $border-radius-default;
|
| 14 | border-bottom-right-radius: $border-radius-default;
|
| 15 | }
|
| 16 |
|
| 17 | .rounded\:b {
|
| 18 | border-bottom-left-radius: $border-radius-default;
|
| 19 | border-bottom-right-radius: $border-radius-default;
|
| 20 | }
|
| 21 |
|
| 22 | .rounded\:l {
|
| 23 | border-top-left-radius: $border-radius-default;
|
| 24 | border-bottom-left-radius: $border-radius-default;
|
| 25 | }
|
| 26 |
|
| 27 | .rounded\:full {
|
| 28 | border-radius: map-get($border-radius, "full");
|
| 29 | }
|
| 30 |
|
| 31 | @each $variantName, $variantValue in $variants {
|
| 32 | .#{$variantName}\:rounded:#{$variantValue} {
|
| 33 | border-radius: $border-radius-default;
|
| 34 | }
|
| 35 |
|
| 36 | .#{$variantName}\:rounded\:t:#{$variantValue} {
|
| 37 | border-top-left-radius: $border-radius-default;
|
| 38 | border-top-right-radius: $border-radius-default;
|
| 39 | }
|
| 40 |
|
| 41 | .#{$variantName}\:rounded\:r:#{$variantValue} {
|
| 42 | border-top-right-radius: $border-radius-default;
|
| 43 | border-bottom-right-radius: $border-radius-default;
|
| 44 | }
|
| 45 |
|
| 46 | .#{$variantName}\:rounded\:b:#{$variantValue} {
|
| 47 | border-bottom-left-radius: $border-radius-default;
|
| 48 | border-bottom-right-radius: $border-radius-default;
|
| 49 | }
|
| 50 |
|
| 51 | .#{$variantName}\:rounded\:l:#{$variantValue} {
|
| 52 | border-top-left-radius: $border-radius-default;
|
| 53 | border-bottom-left-radius: $border-radius-default;
|
| 54 | }
|
| 55 |
|
| 56 | .#{$variantName}\:rounded\:full:#{$variantValue} {
|
| 57 | border-radius: map-get($border-radius, "full");
|
| 58 | }
|
| 59 | }
|
| 60 |
|
| 61 | @each $name, $value in $border-radius {
|
| 62 | .rounded\:#{$name} {
|
| 63 | border-radius: #{$value};
|
| 64 | }
|
| 65 | .rounded\:t\:#{$name} {
|
| 66 | border-top-left-radius: #{$value};
|
| 67 | border-top-right-radius: #{$value};
|
| 68 | }
|
| 69 | .rounded\:r\:#{$name} {
|
| 70 | border-top-right-radius: #{$value};
|
| 71 | border-bottom-right-radius: #{$value};
|
| 72 | }
|
| 73 | .rounded\:b\:#{$name} {
|
| 74 | border-bottom-left-radius: #{$value};
|
| 75 | border-bottom-right-radius: #{$value};
|
| 76 | }
|
| 77 | .rounded\:l\:#{$name} {
|
| 78 | border-top-left-radius: #{$value};
|
| 79 | border-bottom-left-radius: #{$value};
|
| 80 | }
|
| 81 | }
|
| 82 |
|
| 83 | @each $variantName, $variantValue in $variants {
|
| 84 | @each $name, $value in $border-radius {
|
| 85 | .#{$variantName}\:rounded\:#{$name}:#{$variantValue} {
|
| 86 | border-radius: #{$value};
|
| 87 | }
|
| 88 | .#{$variantName}\:rounded\:t\:#{$name}:#{$variantValue} {
|
| 89 | border-top-left-radius: #{$value};
|
| 90 | border-top-right-radius: #{$value};
|
| 91 | }
|
| 92 | .#{$variantName}\:rounded\:r\:#{$name}:#{$variantValue} {
|
| 93 | border-top-right-radius: #{$value};
|
| 94 | border-bottom-right-radius: #{$value};
|
| 95 | }
|
| 96 | .#{$variantName}\:rounded\:b\:#{$name}:#{$variantValue} {
|
| 97 | border-bottom-left-radius: #{$value};
|
| 98 | border-bottom-right-radius: #{$value};
|
| 99 | }
|
| 100 | .#{$variantName}\:rounded\:l\:#{$name}:#{$variantValue} {
|
| 101 | border-top-left-radius: #{$value};
|
| 102 | border-bottom-left-radius: #{$value};
|
| 103 | }
|
| 104 | }
|
| 105 | }
|