From f0f84513f8efe533b6ee670a6f1a0c074387b2ec Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 13 Aug 2025 12:01:46 +0200 Subject: Make use of SASS modules --- test/bem/_examples.scss | 432 ++++++++++++++++++++++++------------------------ 1 file changed, 219 insertions(+), 213 deletions(-) (limited to 'test/bem/_examples.scss') 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 @@ // @include it('Examples') { - @include assert('Media object') { /// 1 /// - @include output { - @include bem.object('media') { - display: flex; - align-items: flex-start; - justify-content: flex-start; - - @include bem.elem('image') { - display: block; - flex: 0 0 auto; - order: 1; - overflow: hidden; - } - - @include bem.elem('body') { - order: 2; - } - - @include bem.modifier('rtl') { - justify-content: flex-end; - - @include bem.elem('image') { - order: 2; - } - - @include bem.elem('body') { - order: 1; - } - } - } - } - - @include expect { - .o-media { - display: flex; - align-items: flex-start; - justify-content: flex-start; - } - - .o-media__image { - display: block; - flex: 0 0 auto; - order: 1; - overflow: hidden; - } - - .o-media__body { - order: 2; - } - - .o-media--rtl { - justify-content: flex-end; - - .o-media__image { - order: 2; - } - - .o-media__body { - order: 1; - } - } - } - } - - @include assert('Tabs') { /// 2 /// - @include output { - @include bem.component('tabs') { - position: relative; - - @include bem.elem('tab') { - float: left; - } - - @include bem.elem('tabRadio') { - position: absolute; - top: -9999px; - left: -9999px; - - &:checked { - @include bem.sibling-elem('tabLabel') { - font-weight: bold; - } - - @include bem.sibling-elem('tabContent') { - display: block; - } - } - } - - @include bem.elem('tabLabel') { - cursor: pointer; - - &:hover, - &:active { - text-decoration: underline; - } - } - - @include bem.elem('tabContent') { - position: absolute; - left: 0; - display: none; - } - } - } - - @include expect { - .c-tabs { - position: relative; - } - - .c-tabs__tab { - float: left; - } - - .c-tabs__tabRadio { - position: absolute; - top: -9999px; - left: -9999px; - } - - .c-tabs__tabRadio:checked ~ .c-tabs__tabLabel { - font-weight: bold; - } - - .c-tabs__tabRadio:checked ~ .c-tabs__tabContent { - display: block; - } - - .c-tabs__tabLabel { - cursor: pointer; - } - - .c-tabs__tabLabel:hover, - .c-tabs__tabLabel:active { - text-decoration: underline; - } - - .c-tabs__tabContent { - position: absolute; - left: 0; - display: none; - } - } - } - - @include assert('Accordion') { /// 3 /// - @include output { - @include bem.component('accordion') { - @include bem.elem('section') { - // nothing to do - } - - @include bem.elem('sectionCheckbox') { - position: absolute; - top: -9999px; - left: -9999px; - - &:checked { - @include bem.sibling-elem('sectionLabel') { - font-weight: bold; - } - - @include bem.sibling-elem('sectionContent') { - display: block; - } - } - } - - @include bem.elem('sectionLabel') { - cursor: pointer; - - &:hover, - &:active { - text-decoration: underline; - } - } - - @include bem.elem('sectionContent') { - display: none; - } - } - } - - @include expect { - .c-accordion__sectionCheckbox { - position: absolute; - top: -9999px; - left: -9999px; - } - - .c-accordion__sectionCheckbox:checked ~ .c-accordion__sectionLabel { - font-weight: bold; - } - - .c-accordion__sectionCheckbox:checked ~ .c-accordion__sectionContent { - display: block; - } - - .c-accordion__sectionLabel { - cursor: pointer; - } - - .c-accordion__sectionLabel:hover, - .c-accordion__sectionLabel:active { - text-decoration: underline; - } - - .c-accordion__sectionContent { - display: none; - } - } - } + @include assert('Media object') { /// 1 /// + @include output { + @include bem.object('media') { + display: flex; + align-items: flex-start; + justify-content: flex-start; + + @include bem.elem('image') { + display: block; + flex: 0 0 auto; + order: 1; + overflow: hidden; + } + + @include bem.elem('body') { + order: 2; + } + + @include bem.modifier('rtl') { + justify-content: flex-end; + + @include bem.elem('image') { + order: 2; + } + + @include bem.elem('body') { + order: 1; + } + } + } + } + + @include expect { + @layer object { + .o-media { + display: flex; + align-items: flex-start; + justify-content: flex-start; + } + + .o-media__image { + display: block; + flex: 0 0 auto; + order: 1; + overflow: hidden; + } + + .o-media__body { + order: 2; + } + + .o-media--rtl { + justify-content: flex-end; + + .o-media__image { + order: 2; + } + + .o-media__body { + order: 1; + } + } + } + } + } + + @include assert('Tabs') { /// 2 /// + @include output { + @include bem.component('tabs') { + position: relative; + + @include bem.elem('tab') { + float: left; + } + + @include bem.elem('tabRadio') { + position: absolute; + top: -9999px; + left: -9999px; + + &:checked { + @include bem.sibling-elem('tabLabel') { + font-weight: bold; + } + + @include bem.sibling-elem('tabContent') { + display: block; + } + } + } + + @include bem.elem('tabLabel') { + cursor: pointer; + + &:hover, + &:active { + text-decoration: underline; + } + } + + @include bem.elem('tabContent') { + position: absolute; + left: 0; + display: none; + } + } + } + + @include expect { + @layer component { + .c-tabs { + position: relative; + } + + .c-tabs__tab { + float: left; + } + + .c-tabs__tabRadio { + position: absolute; + top: -9999px; + left: -9999px; + } + + .c-tabs__tabRadio:checked ~ .c-tabs__tabLabel { + font-weight: bold; + } + + .c-tabs__tabRadio:checked ~ .c-tabs__tabContent { + display: block; + } + + .c-tabs__tabLabel { + cursor: pointer; + } + + .c-tabs__tabLabel:hover, + .c-tabs__tabLabel:active { + text-decoration: underline; + } + + .c-tabs__tabContent { + position: absolute; + left: 0; + display: none; + } + } + } + } + + @include assert('Accordion') { /// 3 /// + @include output { + @include bem.component('accordion') { + @include bem.elem('section') { + // nothing to do + } + + @include bem.elem('sectionCheckbox') { + position: absolute; + top: -9999px; + left: -9999px; + + &:checked { + @include bem.sibling-elem('sectionLabel') { + font-weight: bold; + } + + @include bem.sibling-elem('sectionContent') { + display: block; + } + } + } + + @include bem.elem('sectionLabel') { + cursor: pointer; + + &:hover, + &:active { + text-decoration: underline; + } + } + + @include bem.elem('sectionContent') { + display: none; + } + } + } + + @include expect { + @layer component { + .c-accordion__sectionCheckbox { + position: absolute; + top: -9999px; + left: -9999px; + } + + .c-accordion__sectionCheckbox:checked ~ .c-accordion__sectionLabel { + font-weight: bold; + } + + .c-accordion__sectionCheckbox:checked ~ .c-accordion__sectionContent { + display: block; + } + + .c-accordion__sectionLabel { + cursor: pointer; + } + + .c-accordion__sectionLabel:hover, + .c-accordion__sectionLabel:active { + text-decoration: underline; + } + + .c-accordion__sectionContent { + display: none; + } + } + } + } } -- cgit v1.2.3-70-g09d2