diff options
Diffstat (limited to 'src/bem/_state.scss')
| -rw-r--r-- | src/bem/_state.scss | 50 |
1 files changed, 27 insertions, 23 deletions
diff --git a/src/bem/_state.scss b/src/bem/_state.scss index 4a85bbb..2d430bf 100644 --- a/src/bem/_state.scss +++ b/src/bem/_state.scss | |||
| @@ -4,6 +4,10 @@ | |||
| 4 | /// @access public | 4 | /// @access public |
| 5 | //// | 5 | //// |
| 6 | 6 | ||
| 7 | @use './validators'; | ||
| 8 | @use './vars'; | ||
| 9 | @use '../contexts'; | ||
| 10 | |||
| 7 | /// | 11 | /// |
| 8 | /// Create a new state rule. | 12 | /// Create a new state rule. |
| 9 | /// | 13 | /// |
| @@ -13,10 +17,10 @@ | |||
| 13 | /// @content | 17 | /// @content |
| 14 | /// | 18 | /// |
| 15 | /// @example scss - Using single is-state | 19 | /// @example scss - Using single is-state |
| 16 | /// @include iro-bem-object('menu') { | 20 | /// @include object('menu') { |
| 17 | /// display: none; | 21 | /// display: none; |
| 18 | /// | 22 | /// |
| 19 | /// @include iro-bem-state('is', open') { | 23 | /// @include state('is', open') { |
| 20 | /// display: block; | 24 | /// display: block; |
| 21 | /// } | 25 | /// } |
| 22 | /// } | 26 | /// } |
| @@ -32,10 +36,10 @@ | |||
| 32 | /// } | 36 | /// } |
| 33 | /// | 37 | /// |
| 34 | /// @example scss - Using multiple is-states | 38 | /// @example scss - Using multiple is-states |
| 35 | /// @include iro-bem-object('menu') { | 39 | /// @include object('menu') { |
| 36 | /// display: none; | 40 | /// display: none; |
| 37 | /// | 41 | /// |
| 38 | /// @include iro-bem-state('is', open', 'visible') { | 42 | /// @include state('is', open', 'visible') { |
| 39 | /// display: block; | 43 | /// display: block; |
| 40 | /// } | 44 | /// } |
| 41 | /// } | 45 | /// } |
| @@ -51,23 +55,23 @@ | |||
| 51 | /// display: block; | 55 | /// display: block; |
| 52 | /// } | 56 | /// } |
| 53 | /// | 57 | /// |
| 54 | @mixin iro-bem-state($prefix, $state, $states...) { | 58 | @mixin state($prefix, $state, $states...) { |
| 55 | $result: iro-bem-state($prefix, $state, $states...); | 59 | $result: state($prefix, $state, $states...); |
| 56 | $selector: nth($result, 1); | 60 | $selector: nth($result, 1); |
| 57 | $context: nth($result, 2); | 61 | $context: nth($result, 2); |
| 58 | 62 | ||
| 59 | @include iro-bem-validate( | 63 | @include validators.validate( |
| 60 | 'state', | 64 | 'state', |
| 61 | (prefix: $prefix, state: $state, states: $states), | 65 | (prefix: $prefix, state: $state, states: $states), |
| 62 | $selector, | 66 | $selector, |
| 63 | $context | 67 | $context |
| 64 | ); | 68 | ); |
| 65 | 69 | ||
| 66 | @include iro-context-push($iro-bem-context-id, $context...); | 70 | @include contexts.push(vars.$context-id, $context...); |
| 67 | @at-root #{$selector} { | 71 | @at-root #{$selector} { |
| 68 | @content; | 72 | @content; |
| 69 | } | 73 | } |
| 70 | @include iro-context-pop($iro-bem-context-id); | 74 | @include contexts.pop(vars.$context-id); |
| 71 | } | 75 | } |
| 72 | 76 | ||
| 73 | /// | 77 | /// |
| @@ -75,9 +79,9 @@ | |||
| 75 | /// | 79 | /// |
| 76 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 80 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
| 77 | /// | 81 | /// |
| 78 | /// @see {mixin} iro-bem-has | 82 | /// @see {mixin} has |
| 79 | /// | 83 | /// |
| 80 | @function iro-bem-state($prefix, $state, $states...) { | 84 | @function state($prefix, $state, $states...) { |
| 81 | $selector: (); | 85 | $selector: (); |
| 82 | $parts-data: (); | 86 | $parts-data: (); |
| 83 | 87 | ||
| @@ -104,10 +108,10 @@ | |||
| 104 | /// | 108 | /// |
| 105 | /// Create a new has-state modifier. | 109 | /// Create a new has-state modifier. |
| 106 | /// | 110 | /// |
| 107 | /// It's a shorthand for iro-bem-state('is', $state, $states...). | 111 | /// It's a shorthand for state('is', $state, $states...). |
| 108 | /// | 112 | /// |
| 109 | @mixin iro-bem-is($state, $states...) { | 113 | @mixin is($state, $states...) { |
| 110 | @include iro-bem-state('is', $state, $states...) { | 114 | @include state('is', $state, $states...) { |
| 111 | @content; | 115 | @content; |
| 112 | } | 116 | } |
| 113 | } | 117 | } |
| @@ -117,19 +121,19 @@ | |||
| 117 | /// | 121 | /// |
| 118 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 122 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
| 119 | /// | 123 | /// |
| 120 | /// @see {mixin} iro-bem-is | 124 | /// @see {mixin} is |
| 121 | /// | 125 | /// |
| 122 | @function iro-bem-is($state, $states...) { | 126 | @function is($state, $states...) { |
| 123 | @return iro-bem-state('is', $state, $states...); | 127 | @return state('is', $state, $states...); |
| 124 | } | 128 | } |
| 125 | 129 | ||
| 126 | /// | 130 | /// |
| 127 | /// Create a new has-state modifier. | 131 | /// Create a new has-state modifier. |
| 128 | /// | 132 | /// |
| 129 | /// It's a shorthand for iro-bem-state('has', $state, $states...). | 133 | /// It's a shorthand for state('has', $state, $states...). |
| 130 | /// | 134 | /// |
| 131 | @mixin iro-bem-has($state, $states...) { | 135 | @mixin has($state, $states...) { |
| 132 | @include iro-bem-state('has', $state, $states...) { | 136 | @include state('has', $state, $states...) { |
| 133 | @content; | 137 | @content; |
| 134 | } | 138 | } |
| 135 | } | 139 | } |
| @@ -139,8 +143,8 @@ | |||
| 139 | /// | 143 | /// |
| 140 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | 144 | /// @return {list} A list with two items: 1. selector, 2. context or `null` |
| 141 | /// | 145 | /// |
| 142 | /// @see {mixin} iro-bem-has | 146 | /// @see {mixin} has |
| 143 | /// | 147 | /// |
| 144 | @function iro-bem-has($state, $states...) { | 148 | @function has($state, $states...) { |
| 145 | @return iro-bem-state('has', $state, $states...); | 149 | @return state('has', $state, $states...); |
| 146 | } | 150 | } |
