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