diff options
Diffstat (limited to 'src/bem/_element.scss')
-rw-r--r-- | src/bem/_element.scss | 191 |
1 files changed, 98 insertions, 93 deletions
diff --git a/src/bem/_element.scss b/src/bem/_element.scss index b3d2fee..84e85fb 100644 --- a/src/bem/_element.scss +++ b/src/bem/_element.scss | |||
@@ -4,6 +4,11 @@ | |||
4 | /// @access public | 4 | /// @access public |
5 | //// | 5 | //// |
6 | 6 | ||
7 | @use './validators'; | ||
8 | @use './vars'; | ||
9 | @use '../functions'; | ||
10 | @use '../contexts'; | ||
11 | |||
7 | /// | 12 | /// |
8 | /// Generate a new BEM element. | 13 | /// Generate a new BEM element. |
9 | /// | 14 | /// |
@@ -20,10 +25,10 @@ | |||
20 | /// @throw If the element is not preceded by a block, element, modifier or suffix. | 25 | /// @throw If the element is not preceded by a block, element, modifier or suffix. |
21 | /// | 26 | /// |
22 | /// @example scss - Element for a block | 27 | /// @example scss - Element for a block |
23 | /// @include iro-bem-component('block') { | 28 | /// @include component('block') { |
24 | /// /* some block definitions */ | 29 | /// /* some block definitions */ |
25 | /// | 30 | /// |
26 | /// @include iro-bem-element('elem') { | 31 | /// @include elem('elem') { |
27 | /// /* some element definitions */ | 32 | /// /* some element definitions */ |
28 | /// } | 33 | /// } |
29 | /// } | 34 | /// } |
@@ -39,15 +44,15 @@ | |||
39 | /// } | 44 | /// } |
40 | /// | 45 | /// |
41 | /// @example scss - Element that is affected by the user hovering the block | 46 | /// @example scss - Element that is affected by the user hovering the block |
42 | /// @include iro-bem-component('block') { | 47 | /// @include component('block') { |
43 | /// /* some block definitions */ | 48 | /// /* some block definitions */ |
44 | /// | 49 | /// |
45 | /// @include iro-bem-element('elem') { | 50 | /// @include elem('elem') { |
46 | /// background-color: #eee; | 51 | /// background-color: #eee; |
47 | /// } | 52 | /// } |
48 | /// | 53 | /// |
49 | /// &:hover { | 54 | /// &:hover { |
50 | /// @include iro-bem-element('elem') { | 55 | /// @include elem('elem') { |
51 | /// background-color: #000; | 56 | /// background-color: #000; |
52 | /// } | 57 | /// } |
53 | /// } | 58 | /// } |
@@ -68,10 +73,10 @@ | |||
68 | /// } | 73 | /// } |
69 | /// | 74 | /// |
70 | /// @example scss - Multiple elements | 75 | /// @example scss - Multiple elements |
71 | /// @include iro-bem-component('block') { | 76 | /// @include component('block') { |
72 | /// /* some block definitions */ | 77 | /// /* some block definitions */ |
73 | /// | 78 | /// |
74 | /// @include iro-bem-element('elem1', 'elem2') { | 79 | /// @include elem('elem1', 'elem2') { |
75 | /// /* some element definitions */ | 80 | /// /* some element definitions */ |
76 | /// } | 81 | /// } |
77 | /// } | 82 | /// } |
@@ -86,23 +91,23 @@ | |||
86 | /// /* some element definitions */ | 91 | /// /* some element definitions */ |
87 | /// } | 92 | /// } |
88 | /// | 93 | /// |
89 | @mixin iro-bem-element($name, $names...) { | 94 | @mixin elem($name, $names...) { |
90 | $result: iro-bem-element($name, $names...); | 95 | $result: elem($name, $names...); |
91 | $selector: nth($result, 1); | 96 | $selector: nth($result, 1); |
92 | $context: nth($result, 2); | 97 | $context: nth($result, 2); |
93 | 98 | ||
94 | @include iro-bem-validate( | 99 | @include validators.validate( |
95 | 'element', | 100 | 'element', |
96 | (name: $name, names: $names), | 101 | (name: $name, names: $names), |
97 | $selector, | 102 | $selector, |
98 | $context | 103 | $context |
99 | ); | 104 | ); |
100 | 105 | ||
101 | @include iro-context-push($iro-bem-context-id, $context...); | 106 | @include contexts.push(vars.$context-id, $context...); |
102 | @at-root #{$selector} { | 107 | @at-root #{$selector} { |
103 | @content; | 108 | @content; |
104 | } | 109 | } |
105 | @include iro-context-pop($iro-bem-context-id); | 110 | @include contexts.pop(vars.$context-id); |
106 | } | 111 | } |
107 | 112 | ||
108 | /// | 113 | /// |
@@ -110,26 +115,26 @@ | |||
110 | /// | 115 | /// |
111 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 116 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
112 | /// | 117 | /// |
113 | /// @see {mixin} iro-bem-element | 118 | /// @see {mixin} element |
114 | /// | 119 | /// |
115 | @function iro-bem-element($name, $names...) { | 120 | @function elem($name, $names...) { |
116 | $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); | 121 | $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); |
117 | $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'block'); | 122 | $noop: contexts.assert-stack-must-contain(vars.$context-id, 'block'); |
118 | 123 | ||
119 | $parent-context: iro-context-get($iro-bem-context-id, 'block' 'element'); | 124 | $parent-context: contexts.get(vars.$context-id, 'block' 'element'); |
120 | 125 | ||
121 | $selector: (); | 126 | $selector: (); |
122 | $parts-data: (); | 127 | $parts-data: (); |
123 | 128 | ||
124 | @if nth($parent-context, 1) == 'element' { | 129 | @if nth($parent-context, 1) == 'element' { |
125 | @if $iro-bem-element-nesting-policy == 'disallow' { | 130 | @if vars.$element-nesting-policy == 'disallow' { |
126 | @error 'Element nesting is forbidden.'; | 131 | @error 'Element nesting is forbidden.'; |
127 | } | 132 | } |
128 | 133 | ||
129 | @if $iro-bem-element-nesting-policy == 'append' { | 134 | @if vars.$element-nesting-policy == 'append' { |
130 | $element-selector: map-get(nth($parent-context, 2), 'selector'); | 135 | $element-selector: map-get(nth($parent-context, 2), 'selector'); |
131 | 136 | ||
132 | @if not iro-selector-suffix-match(&, $element-selector) { | 137 | @if not functions.selector-suffix-match(&, $element-selector) { |
133 | @error 'A nested element must be an immediate children of the parent element.'; | 138 | @error 'A nested element must be an immediate children of the parent element.'; |
134 | } | 139 | } |
135 | 140 | ||
@@ -140,7 +145,7 @@ | |||
140 | // | 145 | // |
141 | 146 | ||
142 | @each $name in join($name, $names) { | 147 | @each $name in join($name, $names) { |
143 | $sel: selector-append(&, $iro-bem-element-separator + $name); | 148 | $sel: selector-append(&, vars.$element-separator + $name); |
144 | $selector: join($selector, $sel, comma); | 149 | $selector: join($selector, $sel, comma); |
145 | $parts-data: append($parts-data, ( | 150 | $parts-data: append($parts-data, ( |
146 | 'name': $name, | 151 | 'name': $name, |
@@ -149,13 +154,13 @@ | |||
149 | } | 154 | } |
150 | } | 155 | } |
151 | 156 | ||
152 | $parent-context: iro-context-get($iro-bem-context-id, 'block'); | 157 | $parent-context: contexts.get(vars.$context-id, 'block'); |
153 | } | 158 | } |
154 | 159 | ||
155 | @if length($selector) == 0 { | 160 | @if length($selector) == 0 { |
156 | $parent-selector: map-get(nth($parent-context, 2), 'selector'); | 161 | $parent-selector: map-get(nth($parent-context, 2), 'selector'); |
157 | 162 | ||
158 | @if iro-selector-suffix-match(&, $parent-selector) { | 163 | @if functions.selector-suffix-match(&, $parent-selector) { |
159 | // | 164 | // |
160 | // Possible outcomes: | 165 | // Possible outcomes: |
161 | // - {b}__element | 166 | // - {b}__element |
@@ -163,7 +168,7 @@ | |||
163 | // | 168 | // |
164 | 169 | ||
165 | @each $name in join($name, $names) { | 170 | @each $name in join($name, $names) { |
166 | $sel: selector-append(&, $iro-bem-element-separator + $name); | 171 | $sel: selector-append(&, vars.$element-separator + $name); |
167 | $selector: join($selector, $sel, comma); | 172 | $selector: join($selector, $sel, comma); |
168 | $parts-data: append($parts-data, ( | 173 | $parts-data: append($parts-data, ( |
169 | 'name': $name, | 174 | 'name': $name, |
@@ -178,13 +183,13 @@ | |||
178 | // | 183 | // |
179 | 184 | ||
180 | @if nth($parent-context, 1) != 'block' { | 185 | @if nth($parent-context, 1) != 'block' { |
181 | $parent-context: iro-context-get($iro-bem-context-id, 'block'); | 186 | $parent-context: contexts.get(vars.$context-id, 'block'); |
182 | } | 187 | } |
183 | 188 | ||
184 | $block-base-selector: map-get(nth($parent-context, 2), 'base-selector'); | 189 | $block-base-selector: map-get(nth($parent-context, 2), 'base-selector'); |
185 | 190 | ||
186 | @each $name in join($name, $names) { | 191 | @each $name in join($name, $names) { |
187 | $sel: selector-nest(&, selector-append($block-base-selector, $iro-bem-element-separator + $name)); | 192 | $sel: selector-nest(&, selector-append($block-base-selector, vars.$element-separator + $name)); |
188 | $selector: join($selector, $sel, comma); | 193 | $selector: join($selector, $sel, comma); |
189 | $parts-data: append($parts-data, ( | 194 | $parts-data: append($parts-data, ( |
190 | 'name': $name, | 195 | 'name': $name, |
@@ -217,11 +222,11 @@ | |||
217 | /// @throw If the element is not preceded by an element. | 222 | /// @throw If the element is not preceded by an element. |
218 | /// | 223 | /// |
219 | /// @example scss - A sibling element to a single element | 224 | /// @example scss - A sibling element to a single element |
220 | /// @include iro-bem-component('block') { | 225 | /// @include component('block') { |
221 | /// @include iro-bem-element('elem') { | 226 | /// @include elem('elem') { |
222 | /// /* some element definitions */ | 227 | /// /* some element definitions */ |
223 | /// | 228 | /// |
224 | /// @include iro-bem-related-element('~', 'sibling') { | 229 | /// @include related-elem('~', 'sibling') { |
225 | /// /* some sibling element definitions */ | 230 | /// /* some sibling element definitions */ |
226 | /// } | 231 | /// } |
227 | /// } | 232 | /// } |
@@ -238,11 +243,11 @@ | |||
238 | /// } | 243 | /// } |
239 | /// | 244 | /// |
240 | /// @example scss - A successor element to a single element | 245 | /// @example scss - A successor element to a single element |
241 | /// @include iro-bem-component('block') { | 246 | /// @include component('block') { |
242 | /// @include iro-bem-element('elem') { | 247 | /// @include elem('elem') { |
243 | /// /* some element definitions */ | 248 | /// /* some element definitions */ |
244 | /// | 249 | /// |
245 | /// @include iro-bem-related-element('+', 'successor') { | 250 | /// @include related-elem('+', 'successor') { |
246 | /// /* some successor element definitions */ | 251 | /// /* some successor element definitions */ |
247 | /// } | 252 | /// } |
248 | /// } | 253 | /// } |
@@ -259,11 +264,11 @@ | |||
259 | /// } | 264 | /// } |
260 | /// | 265 | /// |
261 | /// @example scss - A successor element to multiple elements | 266 | /// @example scss - A successor element to multiple elements |
262 | /// @include iro-bem-component('block') { | 267 | /// @include component('block') { |
263 | /// @include iro-bem-element('elem1', 'elem2') { | 268 | /// @include elem('elem1', 'elem2') { |
264 | /// /* some element definitions */ | 269 | /// /* some element definitions */ |
265 | /// | 270 | /// |
266 | /// @include iro-bem-related-element('+', 'successor') { | 271 | /// @include related-elem('+', 'successor') { |
267 | /// /* some successor element definitions */ | 272 | /// /* some successor element definitions */ |
268 | /// } | 273 | /// } |
269 | /// } | 274 | /// } |
@@ -279,23 +284,23 @@ | |||
279 | /// /* some successor element definitions */ | 284 | /// /* some successor element definitions */ |
280 | /// } | 285 | /// } |
281 | /// | 286 | /// |
282 | @mixin iro-bem-related-element($sign, $name, $names...) { | 287 | @mixin related-elem($sign, $name, $names...) { |
283 | $result: iro-bem-related-element($sign, $name, $names...); | 288 | $result: related-elem($sign, $name, $names...); |
284 | $selector: nth($result, 1); | 289 | $selector: nth($result, 1); |
285 | $context: nth($result, 2); | 290 | $context: nth($result, 2); |
286 | 291 | ||
287 | @include iro-bem-validate( | 292 | @include validators.validate( |
288 | 'related-element', | 293 | 'related-element', |
289 | (sign: $sign, name: $name, names: $names), | 294 | (sign: $sign, name: $name, names: $names), |
290 | $selector, | 295 | $selector, |
291 | $context | 296 | $context |
292 | ); | 297 | ); |
293 | 298 | ||
294 | @include iro-context-push($iro-bem-context-id, $context...); | 299 | @include contexts.push(vars.$context-id, $context...); |
295 | @at-root #{$selector} { | 300 | @at-root #{$selector} { |
296 | @content; | 301 | @content; |
297 | } | 302 | } |
298 | @include iro-context-pop($iro-bem-context-id); | 303 | @include contexts.pop(vars.$context-id); |
299 | } | 304 | } |
300 | 305 | ||
301 | /// | 306 | /// |
@@ -304,9 +309,9 @@ | |||
304 | /// | 309 | /// |
305 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 310 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
306 | /// | 311 | /// |
307 | /// @see {mixin} iro-bem-related-element | 312 | /// @see {mixin} related-element |
308 | /// | 313 | /// |
309 | @function iro-bem-related-element($sign, $name, $names...) { | 314 | @function related-elem($sign, $name, $names...) { |
310 | // | 315 | // |
311 | // Generating this selector is simple: Take the latest block context, use it | 316 | // Generating this selector is simple: Take the latest block context, use it |
312 | // to generate the element part, and insert it at the end of the current selector. | 317 | // to generate the element part, and insert it at the end of the current selector. |
@@ -315,21 +320,21 @@ | |||
315 | // - {e} ({m,s}) ([manual selector]) ~ {e} | 320 | // - {e} ({m,s}) ([manual selector]) ~ {e} |
316 | // | 321 | // |
317 | 322 | ||
318 | $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); | 323 | $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); |
319 | $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'element'); | 324 | $noop: contexts.assert-stack-must-contain(vars.$context-id, 'element'); |
320 | 325 | ||
321 | @if $sign != '+' and $sign != '~' { | 326 | @if $sign != '+' and $sign != '~' { |
322 | @error 'Invalid relationship sign #{inspect($sign)}.'; | 327 | @error 'Invalid relationship sign #{inspect($sign)}.'; |
323 | } | 328 | } |
324 | 329 | ||
325 | $block-context: iro-context-get($iro-bem-context-id, 'block'); | 330 | $block-context: contexts.get(vars.$context-id, 'block'); |
326 | $block-base-selector: map-get(nth($block-context, 2), 'base-selector'); | 331 | $block-base-selector: map-get(nth($block-context, 2), 'base-selector'); |
327 | 332 | ||
328 | $selector: (); | 333 | $selector: (); |
329 | $parts-data: (); | 334 | $parts-data: (); |
330 | 335 | ||
331 | @each $name in join($name, $names) { | 336 | @each $name in join($name, $names) { |
332 | $sel: selector-nest(&, $sign, selector-append($block-base-selector, $iro-bem-element-separator + $name)); | 337 | $sel: selector-nest(&, $sign, selector-append($block-base-selector, vars.$element-separator + $name)); |
333 | $selector: join($selector, $sel, comma); | 338 | $selector: join($selector, $sel, comma); |
334 | $parts-data: append($parts-data, ( | 339 | $parts-data: append($parts-data, ( |
335 | 'name': $name, | 340 | 'name': $name, |
@@ -348,15 +353,15 @@ | |||
348 | /// | 353 | /// |
349 | /// Generate a BEM element that is a sibling of the current element. | 354 | /// Generate a BEM element that is a sibling of the current element. |
350 | /// | 355 | /// |
351 | /// It's a shorthand for iro-bem-related-element('~', $name). | 356 | /// It's a shorthand for related-elem('~', $name). |
352 | /// | 357 | /// |
353 | /// @param {string} $name - First element name | 358 | /// @param {string} $name - First element name |
354 | /// @param {list} $names - List of more element names | 359 | /// @param {list} $names - List of more element names |
355 | /// | 360 | /// |
356 | /// @content | 361 | /// @content |
357 | /// | 362 | /// |
358 | @mixin iro-bem-sibling-element($name, $names...) { | 363 | @mixin sibling-elem($name, $names...) { |
359 | @include iro-bem-related-element('~', $name, $names...) { | 364 | @include related-elem('~', $name, $names...) { |
360 | @content; | 365 | @content; |
361 | } | 366 | } |
362 | } | 367 | } |
@@ -367,24 +372,24 @@ | |||
367 | /// | 372 | /// |
368 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 373 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
369 | /// | 374 | /// |
370 | /// @see {mixin} iro-bem-sibling-element | 375 | /// @see {mixin} sibling-element |
371 | /// | 376 | /// |
372 | @function iro-bem-sibling-element($name, $names...) { | 377 | @function sibling-elem($name, $names...) { |
373 | @return iro-bem-related-element('~', $name, $names...); | 378 | @return related-elem('~', $name, $names...); |
374 | } | 379 | } |
375 | 380 | ||
376 | /// | 381 | /// |
377 | /// Generate a BEM element that is the successor of the current element. | 382 | /// Generate a BEM element that is the successor of the current element. |
378 | /// | 383 | /// |
379 | /// It's a shorthand for iro-bem-related-element('+', $name). | 384 | /// It's a shorthand for related-elem('+', $name). |
380 | /// | 385 | /// |
381 | /// @param {string} $name - First element name | 386 | /// @param {string} $name - First element name |
382 | /// @param {string} $names - More element names | 387 | /// @param {string} $names - More element names |
383 | /// | 388 | /// |
384 | /// @content | 389 | /// @content |
385 | /// | 390 | /// |
386 | @mixin iro-bem-next-element($name, $names...) { | 391 | @mixin next-elem($name, $names...) { |
387 | @include iro-bem-related-element('+', $name, $names...) { | 392 | @include related-elem('+', $name, $names...) { |
388 | @content; | 393 | @content; |
389 | } | 394 | } |
390 | } | 395 | } |
@@ -395,28 +400,28 @@ | |||
395 | /// | 400 | /// |
396 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 401 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
397 | /// | 402 | /// |
398 | /// @see {mixin} iro-bem-next-element | 403 | /// @see {mixin} next-element |
399 | /// | 404 | /// |
400 | @function iro-bem-next-element($name, $names...) { | 405 | @function next-elem($name, $names...) { |
401 | @return iro-bem-related-element('+', $name, $names...); | 406 | @return related-elem('+', $name, $names...); |
402 | } | 407 | } |
403 | 408 | ||
404 | /// | 409 | /// |
405 | /// Generate the current BEM element as a successor of itself. | 410 | /// Generate the current BEM element as a successor of itself. |
406 | /// | 411 | /// |
407 | /// If this is applied to a single element, it behaves exactly the same as | 412 | /// If this is applied to a single element, it behaves exactly the same as |
408 | /// iro-bem-related-element('+', name); | 413 | /// related-elem('+', name); |
409 | /// However, if it is applied to multiple elements, each twin element only will influence | 414 | /// However, if it is applied to multiple elements, each twin element only will influence |
410 | /// their other twin, which is not replicable with iro-bem-related-element. | 415 | /// their other twin, which is not replicable with related-element. |
411 | /// | 416 | /// |
412 | /// @content | 417 | /// @content |
413 | /// | 418 | /// |
414 | /// @example scss - Two twin elements | 419 | /// @example scss - Two twin elements |
415 | /// @include iro-bem-component('block') { | 420 | /// @include component('block') { |
416 | /// @include iro-bem-element('elem') { | 421 | /// @include elem('elem') { |
417 | /// /* some element definitions */ | 422 | /// /* some element definitions */ |
418 | /// | 423 | /// |
419 | /// @include iro-bem-next-twin-element { | 424 | /// @include next-twin-element { |
420 | /// /* some twin element definitions */ | 425 | /// /* some twin element definitions */ |
421 | /// } | 426 | /// } |
422 | /// } | 427 | /// } |
@@ -433,11 +438,11 @@ | |||
433 | /// } | 438 | /// } |
434 | /// | 439 | /// |
435 | /// @example scss - Multiple twin elements | 440 | /// @example scss - Multiple twin elements |
436 | /// @include iro-bem-component('block') { | 441 | /// @include component('block') { |
437 | /// @include iro-bem-element('elem1', 'elem2') { | 442 | /// @include elem('elem1', 'elem2') { |
438 | /// /* some element definitions */ | 443 | /// /* some element definitions */ |
439 | /// | 444 | /// |
440 | /// @include iro-bem-next-twin-element { | 445 | /// @include next-twin-element { |
441 | /// /* some twin element definitions */ | 446 | /// /* some twin element definitions */ |
442 | /// } | 447 | /// } |
443 | /// } | 448 | /// } |
@@ -453,23 +458,23 @@ | |||
453 | /// /* some twin element definitions */ | 458 | /// /* some twin element definitions */ |
454 | /// } | 459 | /// } |
455 | /// | 460 | /// |
456 | @mixin iro-bem-related-twin-element($sign) { | 461 | @mixin related-twin-elem($sign) { |
457 | $result: iro-bem-related-twin-element($sign); | 462 | $result: related-twin-elem($sign); |
458 | $selector: nth($result, 1); | 463 | $selector: nth($result, 1); |
459 | $context: nth($result, 2); | 464 | $context: nth($result, 2); |
460 | 465 | ||
461 | @include iro-bem-validate( | 466 | @include validators.validate( |
462 | 'next-twin-element', | 467 | 'next-twin-element', |
463 | (), | 468 | (), |
464 | $selector, | 469 | $selector, |
465 | $context | 470 | $context |
466 | ); | 471 | ); |
467 | 472 | ||
468 | @include iro-context-push($iro-bem-context-id, $context...); | 473 | @include contexts.push(vars.$context-id, $context...); |
469 | @at-root #{$selector} { | 474 | @at-root #{$selector} { |
470 | @content; | 475 | @content; |
471 | } | 476 | } |
472 | @include iro-context-pop($iro-bem-context-id); | 477 | @include contexts.pop(vars.$context-id); |
473 | } | 478 | } |
474 | 479 | ||
475 | /// | 480 | /// |
@@ -478,16 +483,16 @@ | |||
478 | /// | 483 | /// |
479 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 484 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
480 | /// | 485 | /// |
481 | /// @see {mixin} iro-bem-next-twin-element | 486 | /// @see {mixin} next-twin-element |
482 | /// | 487 | /// |
483 | @function iro-bem-related-twin-element($sign) { | 488 | @function related-twin-elem($sign) { |
484 | $noop: iro-context-assert-stack-count($iro-bem-context-id, $iro-bem-max-depth); | 489 | $noop: contexts.assert-stack-count(vars.$context-id, vars.$max-depth); |
485 | $noop: iro-context-assert-stack-must-contain($iro-bem-context-id, 'element'); | 490 | $noop: contexts.assert-stack-must-contain(vars.$context-id, 'element'); |
486 | 491 | ||
487 | $element-context: iro-context-get($iro-bem-context-id, 'element'); | 492 | $element-context: contexts.get(vars.$context-id, 'element'); |
488 | $element-selector: map-get(nth($element-context, 2), 'selector'); | 493 | $element-selector: map-get(nth($element-context, 2), 'selector'); |
489 | 494 | ||
490 | $block-context: iro-context-get($iro-bem-context-id, 'block'); | 495 | $block-context: contexts.get(vars.$context-id, 'block'); |
491 | $block-base-selector: map-get(nth($block-context, 2), 'base-selector'); | 496 | $block-base-selector: map-get(nth($block-context, 2), 'base-selector'); |
492 | 497 | ||
493 | $selector: (); | 498 | $selector: (); |
@@ -505,7 +510,7 @@ | |||
505 | $part-name: map-get($part-data, 'name'); | 510 | $part-name: map-get($part-data, 'name'); |
506 | 511 | ||
507 | $sel: (); | 512 | $sel: (); |
508 | @if iro-selector-suffix-match(&, $element-selector) { | 513 | @if functions.selector-suffix-match(&, $element-selector) { |
509 | // | 514 | // |
510 | // This mixin is included in the selector the last element mixin created. | 515 | // This mixin is included in the selector the last element mixin created. |
511 | // Possible outcomes: | 516 | // Possible outcomes: |
@@ -516,7 +521,7 @@ | |||
516 | @each $s in & { | 521 | @each $s in & { |
517 | @each $ps in $part-selector { | 522 | @each $ps in $part-selector { |
518 | @if nth($s, -1) == nth($ps, -1) { | 523 | @if nth($s, -1) == nth($ps, -1) { |
519 | $sel-ent: selector-nest($s, $sign, selector-append($block-base-selector, $iro-bem-element-separator + $part-name)); | 524 | $sel-ent: selector-nest($s, $sign, selector-append($block-base-selector, vars.$element-separator + $part-name)); |
520 | $sel: join($sel, $sel-ent, comma); | 525 | $sel: join($sel, $sel-ent, comma); |
521 | } | 526 | } |
522 | } | 527 | } |
@@ -537,7 +542,7 @@ | |||
537 | $match: index(' ' ':' ',', str-slice(inspect($s), $char-index, $char-index)) != null; | 542 | $match: index(' ' ':' ',', str-slice(inspect($s), $char-index, $char-index)) != null; |
538 | 543 | ||
539 | @if not $match { | 544 | @if not $match { |
540 | @each $separator in $iro-bem-element-separator $iro-bem-modifier-separator $iro-bem-suffix-separator { | 545 | @each $separator in vars.$element-separator vars.$modifier-separator vars.$suffix-separator { |
541 | @if str-slice(inspect($s), $char-index, $char-index + str-length($separator) - 1) == $separator { | 546 | @if str-slice(inspect($s), $char-index, $char-index + str-length($separator) - 1) == $separator { |
542 | $match: true; | 547 | $match: true; |
543 | } | 548 | } |
@@ -545,7 +550,7 @@ | |||
545 | } | 550 | } |
546 | 551 | ||
547 | @if $match { | 552 | @if $match { |
548 | $sel-ent: selector-nest($s, '+', selector-append($block-base-selector, $iro-bem-element-separator + $part-name)); | 553 | $sel-ent: selector-nest($s, '+', selector-append($block-base-selector, vars.$element-separator + $part-name)); |
549 | $sel: join($sel, $sel-ent, comma); | 554 | $sel: join($sel, $sel-ent, comma); |
550 | } | 555 | } |
551 | } | 556 | } |
@@ -574,12 +579,12 @@ | |||
574 | /// | 579 | /// |
575 | /// Generate the current BEM element as a sibling of itself. | 580 | /// Generate the current BEM element as a sibling of itself. |
576 | /// | 581 | /// |
577 | /// It's a shorthand for iro-bem-related-twin-element('~'). | 582 | /// It's a shorthand for related-twin-elem('~'). |
578 | /// | 583 | /// |
579 | /// @content | 584 | /// @content |
580 | /// | 585 | /// |
581 | @mixin iro-bem-sibling-twin-element { | 586 | @mixin sibling-twin-element { |
582 | @include iro-bem-related-twin-element('~') { | 587 | @include related-twin-elem('~') { |
583 | @content; | 588 | @content; |
584 | } | 589 | } |
585 | } | 590 | } |
@@ -590,21 +595,21 @@ | |||
590 | /// | 595 | /// |
591 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 596 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
592 | /// | 597 | /// |
593 | /// @see {mixin} iro-bem-sibling-twin-element | 598 | /// @see {mixin} sibling-twin-element |
594 | /// | 599 | /// |
595 | @function iro-bem-sibling-twin-element() { | 600 | @function sibling-twin-elem() { |
596 | @return iro-bem-related-twin-element('~'); | 601 | @return related-twin-elem('~'); |
597 | } | 602 | } |
598 | 603 | ||
599 | /// | 604 | /// |
600 | /// Generate the current BEM element as a next sibling of itself. | 605 | /// Generate the current BEM element as a next sibling of itself. |
601 | /// | 606 | /// |
602 | /// It's a shorthand for iro-bem-related-twin-element('+', $name). | 607 | /// It's a shorthand for related-twin-elem('+', $name). |
603 | /// | 608 | /// |
604 | /// @content | 609 | /// @content |
605 | /// | 610 | /// |
606 | @mixin iro-bem-next-twin-element { | 611 | @mixin next-twin-element { |
607 | @include iro-bem-related-twin-element('+') { | 612 | @include related-twin-elem('+') { |
608 | @content; | 613 | @content; |
609 | } | 614 | } |
610 | } | 615 | } |
@@ -615,8 +620,8 @@ | |||
615 | /// | 620 | /// |
616 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 621 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
617 | /// | 622 | /// |
618 | /// @see {mixin} iro-bem-next-twin-element | 623 | /// @see {mixin} next-twin-element |
619 | /// | 624 | /// |
620 | @function iro-bem-next-twin-element() { | 625 | @function next-twin-elem() { |
621 | @return iro-bem-related-twin-element('+'); | 626 | @return related-twin-elem('+'); |
622 | } | 627 | } |