diff options
author | Feuerfuchs <git@feuerfuchs.dev> | 2020-11-01 20:55:14 +0100 |
---|---|---|
committer | Feuerfuchs <git@feuerfuchs.dev> | 2020-11-01 20:55:14 +0100 |
commit | d07f664450ddaaebb44127a4bd057763d13d3f82 (patch) | |
tree | 234cfd673ac527869a8dda4f32afbec48c87b512 /src/bem/_state.scss | |
download | iro-sass-d07f664450ddaaebb44127a4bd057763d13d3f82.tar.gz iro-sass-d07f664450ddaaebb44127a4bd057763d13d3f82.tar.bz2 iro-sass-d07f664450ddaaebb44127a4bd057763d13d3f82.zip |
Init
Diffstat (limited to 'src/bem/_state.scss')
-rw-r--r-- | src/bem/_state.scss | 146 |
1 files changed, 146 insertions, 0 deletions
diff --git a/src/bem/_state.scss b/src/bem/_state.scss new file mode 100644 index 0000000..4a85bbb --- /dev/null +++ b/src/bem/_state.scss | |||
@@ -0,0 +1,146 @@ | |||
1 | //// | ||
2 | /// @group BEM | ||
3 | /// | ||
4 | /// @access public | ||
5 | //// | ||
6 | |||
7 | /// | ||
8 | /// Create a new state rule. | ||
9 | /// | ||
10 | /// @param {string} $state - First state name | ||
11 | /// @param {list} $states - List of more state names | ||
12 | /// | ||
13 | /// @content | ||
14 | /// | ||
15 | /// @example scss - Using single is-state | ||
16 | /// @include iro-bem-object('menu') { | ||
17 | /// display: none; | ||
18 | /// | ||
19 | /// @include iro-bem-state('is', open') { | ||
20 | /// display: block; | ||
21 | /// } | ||
22 | /// } | ||
23 | /// | ||
24 | /// // Generates: | ||
25 | /// | ||
26 | /// .o-menu { | ||
27 | /// display: none; | ||
28 | /// } | ||
29 | /// | ||
30 | /// .o-menu.is-open { | ||
31 | /// display: block; | ||
32 | /// } | ||
33 | /// | ||
34 | /// @example scss - Using multiple is-states | ||
35 | /// @include iro-bem-object('menu') { | ||
36 | /// display: none; | ||
37 | /// | ||
38 | /// @include iro-bem-state('is', open', 'visible') { | ||
39 | /// display: block; | ||
40 | /// } | ||
41 | /// } | ||
42 | /// | ||
43 | /// // Generates: | ||
44 | /// | ||
45 | /// .o-menu { | ||
46 | /// display: none; | ||
47 | /// } | ||
48 | /// | ||
49 | /// .o-menu.is-open, | ||
50 | /// .o-menu.is-visible { | ||
51 | /// display: block; | ||
52 | /// } | ||
53 | /// | ||
54 | @mixin iro-bem-state($prefix, $state, $states...) { | ||
55 | $result: iro-bem-state($prefix, $state, $states...); | ||
56 | $selector: nth($result, 1); | ||
57 | $context: nth($result, 2); | ||
58 | |||
59 | @include iro-bem-validate( | ||
60 | 'state', | ||
61 | (prefix: $prefix, state: $state, states: $states), | ||
62 | $selector, | ||
63 | $context | ||
64 | ); | ||
65 | |||
66 | @include iro-context-push($iro-bem-context-id, $context...); | ||
67 | @at-root #{$selector} { | ||
68 | @content; | ||
69 | } | ||
70 | @include iro-context-pop($iro-bem-context-id); | ||
71 | } | ||
72 | |||
73 | /// | ||
74 | /// Generate a new state. | ||
75 | /// | ||
76 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | ||
77 | /// | ||
78 | /// @see {mixin} iro-bem-has | ||
79 | /// | ||
80 | @function iro-bem-state($prefix, $state, $states...) { | ||
81 | $selector: (); | ||
82 | $parts-data: (); | ||
83 | |||
84 | @each $state in join($state, $states) { | ||
85 | $sel: selector-parse('.#{$prefix}-#{$state}'); | ||
86 | @if & { | ||
87 | $sel: selector-append(&, $sel); | ||
88 | } | ||
89 | $selector: join($selector, $sel, comma); | ||
90 | $parts-data: append($parts-data, ( | ||
91 | 'name': $state, | ||
92 | 'selector': $sel | ||
93 | )); | ||
94 | } | ||
95 | |||
96 | $context: 'state', ( | ||
97 | 'parts': $parts-data, | ||
98 | 'selector': $selector | ||
99 | ); | ||
100 | |||
101 | @return $selector $context; | ||
102 | } | ||
103 | |||
104 | /// | ||
105 | /// Create a new has-state modifier. | ||
106 | /// | ||
107 | /// It's a shorthand for iro-bem-state('is', $state, $states...). | ||
108 | /// | ||
109 | @mixin iro-bem-is($state, $states...) { | ||
110 | @include iro-bem-state('is', $state, $states...) { | ||
111 | @content; | ||
112 | } | ||
113 | } | ||
114 | |||
115 | /// | ||
116 | /// Generate a new is-state modifier. Check the respective mixin documentation for more information. | ||
117 | /// | ||
118 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | ||
119 | /// | ||
120 | /// @see {mixin} iro-bem-is | ||
121 | /// | ||
122 | @function iro-bem-is($state, $states...) { | ||
123 | @return iro-bem-state('is', $state, $states...); | ||
124 | } | ||
125 | |||
126 | /// | ||
127 | /// Create a new has-state modifier. | ||
128 | /// | ||
129 | /// It's a shorthand for iro-bem-state('has', $state, $states...). | ||
130 | /// | ||
131 | @mixin iro-bem-has($state, $states...) { | ||
132 | @include iro-bem-state('has', $state, $states...) { | ||
133 | @content; | ||
134 | } | ||
135 | } | ||
136 | |||
137 | /// | ||
138 | /// Generate a new has-state modifier. Check the respective mixin documentation for more information. | ||
139 | /// | ||
140 | /// @return {list} A list with two items: 1. selector, 2. context or `null` | ||
141 | /// | ||
142 | /// @see {mixin} iro-bem-has | ||
143 | /// | ||
144 | @function iro-bem-has($state, $states...) { | ||
145 | @return iro-bem-state('has', $state, $states...); | ||
146 | } | ||