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