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 /test/bem/_examples.scss | |
download | iro-sass-d07f664450ddaaebb44127a4bd057763d13d3f82.tar.gz iro-sass-d07f664450ddaaebb44127a4bd057763d13d3f82.tar.bz2 iro-sass-d07f664450ddaaebb44127a4bd057763d13d3f82.zip |
Init
Diffstat (limited to 'test/bem/_examples.scss')
-rw-r--r-- | test/bem/_examples.scss | 224 |
1 files changed, 224 insertions, 0 deletions
diff --git a/test/bem/_examples.scss b/test/bem/_examples.scss new file mode 100644 index 0000000..243ee35 --- /dev/null +++ b/test/bem/_examples.scss | |||
@@ -0,0 +1,224 @@ | |||
1 | // sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations no-empty-rulesets | ||
2 | |||
3 | // | ||
4 | // Included test cases: | ||
5 | // - /// 1 /// - Media object | ||
6 | // - /// 2 /// - Tabs | ||
7 | /// - /// 3 /// - Accordion | ||
8 | // | ||
9 | |||
10 | @include it('Examples') { | ||
11 | @include assert('Media object') { /// 1 /// | ||
12 | @include output { | ||
13 | @include iro-bem-object('media') { | ||
14 | display: flex; | ||
15 | align-items: flex-start; | ||
16 | justify-content: flex-start; | ||
17 | |||
18 | @include iro-bem-element('image') { | ||
19 | display: block; | ||
20 | flex: 0 0 auto; | ||
21 | order: 1; | ||
22 | overflow: hidden; | ||
23 | } | ||
24 | |||
25 | @include iro-bem-element('body') { | ||
26 | order: 2; | ||
27 | } | ||
28 | |||
29 | @include iro-bem-modifier('rtl') { | ||
30 | justify-content: flex-end; | ||
31 | |||
32 | @include iro-bem-element('image') { | ||
33 | order: 2; | ||
34 | } | ||
35 | |||
36 | @include iro-bem-element('body') { | ||
37 | order: 1; | ||
38 | } | ||
39 | } | ||
40 | } | ||
41 | } | ||
42 | |||
43 | @include expect { | ||
44 | .o-media { | ||
45 | display: flex; | ||
46 | align-items: flex-start; | ||
47 | justify-content: flex-start; | ||
48 | } | ||
49 | |||
50 | .o-media__image { | ||
51 | display: block; | ||
52 | flex: 0 0 auto; | ||
53 | order: 1; | ||
54 | overflow: hidden; | ||
55 | } | ||
56 | |||
57 | .o-media__body { | ||
58 | order: 2; | ||
59 | } | ||
60 | |||
61 | .o-media--rtl { | ||
62 | justify-content: flex-end; | ||
63 | |||
64 | .o-media__image { | ||
65 | order: 2; | ||
66 | } | ||
67 | |||
68 | .o-media__body { | ||
69 | order: 1; | ||
70 | } | ||
71 | } | ||
72 | } | ||
73 | } | ||
74 | |||
75 | @include assert('Tabs') { /// 2 /// | ||
76 | @include output { | ||
77 | @include iro-bem-component('tabs') { | ||
78 | position: relative; | ||
79 | |||
80 | @include iro-bem-element('tab') { | ||
81 | float: left; | ||
82 | } | ||
83 | |||
84 | @include iro-bem-element('tabRadio') { | ||
85 | position: absolute; | ||
86 | top: -9999px; | ||
87 | left: -9999px; | ||
88 | |||
89 | &:checked { | ||
90 | @include iro-bem-sibling-element('tabLabel') { | ||
91 | font-weight: bold; | ||
92 | } | ||
93 | |||
94 | @include iro-bem-sibling-element('tabContent') { | ||
95 | display: block; | ||
96 | } | ||
97 | } | ||
98 | } | ||
99 | |||
100 | @include iro-bem-element('tabLabel') { | ||
101 | cursor: pointer; | ||
102 | |||
103 | &:hover, | ||
104 | &:active { | ||
105 | text-decoration: underline; | ||
106 | } | ||
107 | } | ||
108 | |||
109 | @include iro-bem-element('tabContent') { | ||
110 | position: absolute; | ||
111 | left: 0; | ||
112 | display: none; | ||
113 | } | ||
114 | } | ||
115 | } | ||
116 | |||
117 | @include expect { | ||
118 | .c-tabs { | ||
119 | position: relative; | ||
120 | } | ||
121 | |||
122 | .c-tabs__tab { | ||
123 | float: left; | ||
124 | } | ||
125 | |||
126 | .c-tabs__tabRadio { | ||
127 | position: absolute; | ||
128 | top: -9999px; | ||
129 | left: -9999px; | ||
130 | } | ||
131 | |||
132 | .c-tabs__tabRadio:checked ~ .c-tabs__tabLabel { | ||
133 | font-weight: bold; | ||
134 | } | ||
135 | |||
136 | .c-tabs__tabRadio:checked ~ .c-tabs__tabContent { | ||
137 | display: block; | ||
138 | } | ||
139 | |||
140 | .c-tabs__tabLabel { | ||
141 | cursor: pointer; | ||
142 | } | ||
143 | |||
144 | .c-tabs__tabLabel:hover, | ||
145 | .c-tabs__tabLabel:active { | ||
146 | text-decoration: underline; | ||
147 | } | ||
148 | |||
149 | .c-tabs__tabContent { | ||
150 | position: absolute; | ||
151 | left: 0; | ||
152 | display: none; | ||
153 | } | ||
154 | } | ||
155 | } | ||
156 | |||
157 | @include assert('Accordion') { /// 3 /// | ||
158 | @include output { | ||
159 | @include iro-bem-component('accordion') { | ||
160 | @include iro-bem-element('section') { | ||
161 | // nothing to do | ||
162 | } | ||
163 | |||
164 | @include iro-bem-element('sectionCheckbox') { | ||
165 | position: absolute; | ||
166 | top: -9999px; | ||
167 | left: -9999px; | ||
168 | |||
169 | &:checked { | ||
170 | @include iro-bem-sibling-element('sectionLabel') { | ||
171 | font-weight: bold; | ||
172 | } | ||
173 | |||
174 | @include iro-bem-sibling-element('sectionContent') { | ||
175 | display: block; | ||
176 | } | ||
177 | } | ||
178 | } | ||
179 | |||
180 | @include iro-bem-element('sectionLabel') { | ||
181 | cursor: pointer; | ||
182 | |||
183 | &:hover, | ||
184 | &:active { | ||
185 | text-decoration: underline; | ||
186 | } | ||
187 | } | ||
188 | |||
189 | @include iro-bem-element('sectionContent') { | ||
190 | display: none; | ||
191 | } | ||
192 | } | ||
193 | } | ||
194 | |||
195 | @include expect { | ||
196 | .c-accordion__sectionCheckbox { | ||
197 | position: absolute; | ||
198 | top: -9999px; | ||
199 | left: -9999px; | ||
200 | } | ||
201 | |||
202 | .c-accordion__sectionCheckbox:checked ~ .c-accordion__sectionLabel { | ||
203 | font-weight: bold; | ||
204 | } | ||
205 | |||
206 | .c-accordion__sectionCheckbox:checked ~ .c-accordion__sectionContent { | ||
207 | display: block; | ||
208 | } | ||
209 | |||
210 | .c-accordion__sectionLabel { | ||
211 | cursor: pointer; | ||
212 | } | ||
213 | |||
214 | .c-accordion__sectionLabel:hover, | ||
215 | .c-accordion__sectionLabel:active { | ||
216 | text-decoration: underline; | ||
217 | } | ||
218 | |||
219 | .c-accordion__sectionContent { | ||
220 | display: none; | ||
221 | } | ||
222 | } | ||
223 | } | ||
224 | } | ||