aboutsummaryrefslogtreecommitdiffstats
path: root/test/bem/_examples.scss
diff options
context:
space:
mode:
Diffstat (limited to 'test/bem/_examples.scss')
-rw-r--r--test/bem/_examples.scss43
1 files changed, 23 insertions, 20 deletions
diff --git a/test/bem/_examples.scss b/test/bem/_examples.scss
index 243ee35..33deca0 100644
--- a/test/bem/_examples.scss
+++ b/test/bem/_examples.scss
@@ -1,5 +1,8 @@
1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations no-empty-rulesets 1// sass-lint:disable class-name-format force-element-nesting force-pseudo-nesting mixins-before-declarations no-empty-rulesets
2 2
3@use 'true' as *;
4@use '../../src/bem';
5
3// 6//
4// Included test cases: 7// Included test cases:
5// - /// 1 /// - Media object 8// - /// 1 /// - Media object
@@ -10,30 +13,30 @@
10@include it('Examples') { 13@include it('Examples') {
11 @include assert('Media object') { /// 1 /// 14 @include assert('Media object') { /// 1 ///
12 @include output { 15 @include output {
13 @include iro-bem-object('media') { 16 @include bem.object('media') {
14 display: flex; 17 display: flex;
15 align-items: flex-start; 18 align-items: flex-start;
16 justify-content: flex-start; 19 justify-content: flex-start;
17 20
18 @include iro-bem-element('image') { 21 @include bem.elem('image') {
19 display: block; 22 display: block;
20 flex: 0 0 auto; 23 flex: 0 0 auto;
21 order: 1; 24 order: 1;
22 overflow: hidden; 25 overflow: hidden;
23 } 26 }
24 27
25 @include iro-bem-element('body') { 28 @include bem.elem('body') {
26 order: 2; 29 order: 2;
27 } 30 }
28 31
29 @include iro-bem-modifier('rtl') { 32 @include bem.modifier('rtl') {
30 justify-content: flex-end; 33 justify-content: flex-end;
31 34
32 @include iro-bem-element('image') { 35 @include bem.elem('image') {
33 order: 2; 36 order: 2;
34 } 37 }
35 38
36 @include iro-bem-element('body') { 39 @include bem.elem('body') {
37 order: 1; 40 order: 1;
38 } 41 }
39 } 42 }
@@ -74,30 +77,30 @@
74 77
75 @include assert('Tabs') { /// 2 /// 78 @include assert('Tabs') { /// 2 ///
76 @include output { 79 @include output {
77 @include iro-bem-component('tabs') { 80 @include bem.component('tabs') {
78 position: relative; 81 position: relative;
79 82
80 @include iro-bem-element('tab') { 83 @include bem.elem('tab') {
81 float: left; 84 float: left;
82 } 85 }
83 86
84 @include iro-bem-element('tabRadio') { 87 @include bem.elem('tabRadio') {
85 position: absolute; 88 position: absolute;
86 top: -9999px; 89 top: -9999px;
87 left: -9999px; 90 left: -9999px;
88 91
89 &:checked { 92 &:checked {
90 @include iro-bem-sibling-element('tabLabel') { 93 @include bem.sibling-elem('tabLabel') {
91 font-weight: bold; 94 font-weight: bold;
92 } 95 }
93 96
94 @include iro-bem-sibling-element('tabContent') { 97 @include bem.sibling-elem('tabContent') {
95 display: block; 98 display: block;
96 } 99 }
97 } 100 }
98 } 101 }
99 102
100 @include iro-bem-element('tabLabel') { 103 @include bem.elem('tabLabel') {
101 cursor: pointer; 104 cursor: pointer;
102 105
103 &:hover, 106 &:hover,
@@ -106,7 +109,7 @@
106 } 109 }
107 } 110 }
108 111
109 @include iro-bem-element('tabContent') { 112 @include bem.elem('tabContent') {
110 position: absolute; 113 position: absolute;
111 left: 0; 114 left: 0;
112 display: none; 115 display: none;
@@ -156,28 +159,28 @@
156 159
157 @include assert('Accordion') { /// 3 /// 160 @include assert('Accordion') { /// 3 ///
158 @include output { 161 @include output {
159 @include iro-bem-component('accordion') { 162 @include bem.component('accordion') {
160 @include iro-bem-element('section') { 163 @include bem.elem('section') {
161 // nothing to do 164 // nothing to do
162 } 165 }
163 166
164 @include iro-bem-element('sectionCheckbox') { 167 @include bem.elem('sectionCheckbox') {
165 position: absolute; 168 position: absolute;
166 top: -9999px; 169 top: -9999px;
167 left: -9999px; 170 left: -9999px;
168 171
169 &:checked { 172 &:checked {
170 @include iro-bem-sibling-element('sectionLabel') { 173 @include bem.sibling-elem('sectionLabel') {
171 font-weight: bold; 174 font-weight: bold;
172 } 175 }
173 176
174 @include iro-bem-sibling-element('sectionContent') { 177 @include bem.sibling-elem('sectionContent') {
175 display: block; 178 display: block;
176 } 179 }
177 } 180 }
178 } 181 }
179 182
180 @include iro-bem-element('sectionLabel') { 183 @include bem.elem('sectionLabel') {
181 cursor: pointer; 184 cursor: pointer;
182 185
183 &:hover, 186 &:hover,
@@ -186,7 +189,7 @@
186 } 189 }
187 } 190 }
188 191
189 @include iro-bem-element('sectionContent') { 192 @include bem.elem('sectionContent') {
190 display: none; 193 display: none;
191 } 194 }
192 } 195 }