aboutsummaryrefslogtreecommitdiffstats
path: root/src/bem/_state.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/bem/_state.scss')
-rw-r--r--src/bem/_state.scss50
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}