diff options
Diffstat (limited to 'src/bem/_state.scss')
| -rw-r--r-- | src/bem/_state.scss | 84 |
1 files changed, 42 insertions, 42 deletions
diff --git a/src/bem/_state.scss b/src/bem/_state.scss index 41bacee..bd0efb1 100644 --- a/src/bem/_state.scss +++ b/src/bem/_state.scss | |||
| @@ -4,6 +4,8 @@ | |||
| 4 | /// @access public | 4 | /// @access public |
| 5 | //// | 5 | //// |
| 6 | 6 | ||
| 7 | @use 'sass:list'; | ||
| 8 | @use 'sass:selector'; | ||
| 7 | @use './validators'; | 9 | @use './validators'; |
| 8 | @use './vars'; | 10 | @use './vars'; |
| 9 | @use '../contexts'; | 11 | @use '../contexts'; |
| @@ -56,22 +58,22 @@ | |||
| 56 | /// } | 58 | /// } |
| 57 | /// | 59 | /// |
| 58 | @mixin state($prefix, $state, $states...) { | 60 | @mixin state($prefix, $state, $states...) { |
| 59 | $result: state($prefix, $state, $states...); | 61 | $result: state($prefix, $state, $states...); |
| 60 | $selector: nth($result, 1); | 62 | $selector: list.nth($result, 1); |
| 61 | $context: nth($result, 2); | 63 | $context: list.nth($result, 2); |
| 62 | 64 | ||
| 63 | @include validators.validate( | 65 | @include validators.validate( |
| 64 | 'state', | 66 | 'state', |
| 65 | (prefix: $prefix, state: $state, states: $states), | 67 | (prefix: $prefix, state: $state, states: $states), |
| 66 | $selector, | 68 | $selector, |
| 67 | $context | 69 | $context |
| 68 | ); | 70 | ); |
| 69 | 71 | ||
| 70 | @include contexts.push(vars.$context-id, $context...); | 72 | @include contexts.push(vars.$context-id, $context...); |
| 71 | @at-root #{$selector} { | 73 | @at-root #{$selector} { |
| 72 | @content; | 74 | @content; |
| 73 | } | 75 | } |
| 74 | @include contexts.pop(vars.$context-id); | 76 | @include contexts.pop(vars.$context-id); |
| 75 | } | 77 | } |
| 76 | 78 | ||
| 77 | /// | 79 | /// |
| @@ -82,29 +84,27 @@ | |||
| 82 | /// @see {mixin} has | 84 | /// @see {mixin} has |
| 83 | /// | 85 | /// |
| 84 | @function state($prefix, $state, $states...) { | 86 | @function state($prefix, $state, $states...) { |
| 85 | $selector: (); | 87 | $selector: (); |
| 86 | $parts-data: (); | 88 | $parts-data: (); |
| 87 | 89 | ||
| 88 | @each $state in join($state, $states) { | 90 | @each $state in list.join($state, $states) { |
| 89 | $sel: selector-parse('.#{$prefix}-#{$state}'); | 91 | $sel: selector.parse('.#{$prefix}-#{$state}'); |
| 90 | @if & { | 92 | @if & { |
| 91 | $sel: selector-append(&, $sel); | 93 | $sel: selector.append(&, $sel); |
| 92 | } | 94 | } |
| 93 | $selector: join($selector, $sel, comma); | 95 | $selector: list.join($selector, $sel, comma); |
| 94 | $parts-data: append( | 96 | $parts-data: list.append($parts-data, ( |
| 95 | $parts-data, ( | 97 | 'name': $state, |
| 96 | 'name': $state, | 98 | 'selector': $sel |
| 97 | 'selector': $sel | 99 | )); |
| 98 | ) | 100 | } |
| 99 | ); | ||
| 100 | } | ||
| 101 | 101 | ||
| 102 | $context: 'state', ( | 102 | $context: 'state', ( |
| 103 | 'parts': $parts-data, | 103 | 'parts': $parts-data, |
| 104 | 'selector': $selector | 104 | 'selector': $selector |
| 105 | ); | 105 | ); |
| 106 | 106 | ||
| 107 | @return $selector $context; | 107 | @return $selector $context; |
| 108 | } | 108 | } |
| 109 | 109 | ||
| 110 | /// | 110 | /// |
| @@ -113,9 +113,9 @@ | |||
| 113 | /// It's a shorthand for state('is', $state, $states...). | 113 | /// It's a shorthand for state('is', $state, $states...). |
| 114 | /// | 114 | /// |
| 115 | @mixin is($state, $states...) { | 115 | @mixin is($state, $states...) { |
| 116 | @include state('is', $state, $states...) { | 116 | @include state('is', $state, $states...) { |
| 117 | @content; | 117 | @content; |
| 118 | } | 118 | } |
| 119 | } | 119 | } |
| 120 | 120 | ||
| 121 | /// | 121 | /// |
| @@ -126,7 +126,7 @@ | |||
| 126 | /// @see {mixin} is | 126 | /// @see {mixin} is |
| 127 | /// | 127 | /// |
| 128 | @function is($state, $states...) { | 128 | @function is($state, $states...) { |
| 129 | @return state('is', $state, $states...); | 129 | @return state('is', $state, $states...); |
| 130 | } | 130 | } |
| 131 | 131 | ||
| 132 | /// | 132 | /// |
| @@ -135,9 +135,9 @@ | |||
| 135 | /// It's a shorthand for state('has', $state, $states...). | 135 | /// It's a shorthand for state('has', $state, $states...). |
| 136 | /// | 136 | /// |
| 137 | @mixin has($state, $states...) { | 137 | @mixin has($state, $states...) { |
| 138 | @include state('has', $state, $states...) { | 138 | @include state('has', $state, $states...) { |
| 139 | @content; | 139 | @content; |
| 140 | } | 140 | } |
| 141 | } | 141 | } |
| 142 | 142 | ||
| 143 | /// | 143 | /// |
| @@ -148,5 +148,5 @@ | |||
| 148 | /// @see {mixin} has | 148 | /// @see {mixin} has |
| 149 | /// | 149 | /// |
| 150 | @function has($state, $states...) { | 150 | @function has($state, $states...) { |
| 151 | @return state('has', $state, $states...); | 151 | @return state('has', $state, $states...); |
| 152 | } | 152 | } |
