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 | } |