diff options
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 | } | 
