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