diff options
author | Volpeon <git@volpeon.ink> | 2022-02-05 07:52:13 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-02-05 07:52:13 +0100 |
commit | dd5f3c463fab336d694f426dcad11a1783590fc9 (patch) | |
tree | faebf738a9556eaa393371852ed86550d4adf66a /test/bem/_examples.scss | |
parent | Fix errors from transition from node-sass to sass (diff) | |
download | iro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.tar.gz iro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.tar.bz2 iro-sass-dd5f3c463fab336d694f426dcad11a1783590fc9.zip |
Ported from import syntax to modules
Diffstat (limited to 'test/bem/_examples.scss')
-rw-r--r-- | test/bem/_examples.scss | 43 |
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 | } |