Created
February 17, 2023 08:28
-
-
Save spazione/8ca8bd3b9312b0fea0fc8103a74eafc4 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@use "sass:string"; | |
@use 'sass:meta'; | |
@use "sass:map"; | |
@function str-replace($string, $search, $replace: "") { | |
$index: str-index($string, $search); | |
@if $index { | |
@return str-slice($string, 1, $index - 1) + $replace + | |
str-replace(str-slice($string, $index + str-length($search)), $search, $replace); | |
} | |
@return $string; | |
} | |
@function str-split($string, $separator) { | |
// empty array/list | |
$split-arr: (); | |
// first index of separator in string | |
$index : str-index($string, $separator); | |
// loop through string | |
@while $index != null { | |
// get the substring from the first character to the separator | |
$item: str-slice($string, 1, $index - 1); | |
// push item to array | |
$split-arr: append($split-arr, $item); | |
// remove item and separator from string | |
$string: str-slice($string, $index + 1); | |
// find new index of separator | |
$index : str-index($string, $separator); | |
} | |
// add the remaining string to list (the last item) | |
$split-arr: append($split-arr, $string); | |
@return $split-arr; | |
} | |
@function value-replace($list, $old-value, $new-value, $recursive: false) { | |
$result: (); | |
@for $i from 1 through length($list) { | |
@if type-of(nth($list, $i)) == list and $recursive { | |
$result: append( | |
$result, | |
value-replace(nth($list, $i), $old-value, $new-value, $recursive) | |
); | |
} @else { | |
@if nth($list, $i) == $old-value { | |
$result: append($result, $new-value); | |
} @else { | |
$result: append($result, nth($list, $i)); | |
} | |
} | |
} | |
@return $result; | |
} | |
@function list-to-string($list, $glue: '', $is-nested: false) { | |
$result: null; | |
@for $i from 1 through length($list) { | |
$e: nth($list, $i); | |
@if type-of($e) == list { | |
$result: $result#{to-string($e, $glue, true)}; | |
} @else { | |
$result: if( | |
$i != length($list) or $is-nested, | |
$result#{$e}#{$glue}, | |
$result#{$e} | |
); | |
} | |
} | |
@return $result; | |
} | |
$eurobet-btn: ( | |
prefix: "btn", | |
vars: ( | |
primary: ( | |
solid: ( | |
enabled:( | |
default: ( | |
color: #000, | |
background-color:white, | |
// border: pink, | |
), | |
hover: ( | |
background-color:white, | |
// border: pink, | |
), | |
active: ( | |
background-color:white, | |
// border: pink, | |
), | |
), | |
// disabled:( | |
// default: ( | |
// background: var($palette, Aries), | |
// ), | |
// hover: ( | |
// background: var($palette, Aries), | |
// ), | |
// active: ( | |
// background: var($palette, Aries), | |
// ), | |
// ), | |
), | |
), | |
), | |
); | |
$btn: ( | |
prefix: "btn", | |
vars: ( | |
size: ( | |
xs: ( | |
height: 30px, | |
font-size: 1em, | |
padding: 8px 12px, | |
gap: 8px, | |
line-height: 1.1875em, | |
), | |
small: ( | |
height: 40px, | |
font-size: 1.125em, | |
padding: 8px 16px, | |
gap: 8px, | |
), | |
medium: ( | |
height: 44px, | |
font-size: 1.25em, | |
padding: 10px 16px, | |
gap: 10px, | |
), | |
large: ( | |
height: 48px, | |
font-size: 1.5em, | |
padding: 12px 16px, | |
gap: 12px, | |
), | |
), | |
), | |
); | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Default Settings | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
$name: null; | |
$block: null; | |
$root: null; | |
$element-separator: "__" !default; | |
$modifier-separator: "--" !default; | |
$modifier-check: false; | |
$where-mode: true; | |
$where-prefix: ':where(' !default; | |
$where-suffix: ')' !default; | |
$state-check: null; | |
$scope2: null; | |
$nested: false; | |
$block-type: null; | |
$wrapper: ''; | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Blocktype checker | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin blocktype($input, $name) { | |
$block: $name !global; | |
// Some initial checks before the block-type has been seted | |
@if $block-type == null { | |
$nested: false !global; | |
} @else if $block-type == $input and $nested == false { | |
$nested: true !global; | |
} | |
@if $nested == true { | |
$nested-item-name : '.#{$name}' !global; | |
} | |
// Set the block-type globaly | |
$block-type: $input !global; | |
// Other checks after the block-type was set | |
@if $input == 'components' { | |
$where-prefix: '' !global; | |
$where-suffix: '' !global; | |
$where-mode: false !global; | |
} @else if $input == 'objects' { | |
$where-prefix: ':where(' !global; | |
$where-suffix: ')' !global; | |
$where-mode: true !global; | |
} | |
@if $nested == true { | |
$where-prefix: '' !global; | |
$where-suffix: '' !global; | |
$where-mode: false !global; | |
} | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Component Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin component($name, $include-theme: '', $groupsvars...) { | |
@include blocktype('components', $name); | |
#{$where-prefix}.#{$name}#{$where-suffix} { | |
//@include inject-css3-vars($groupsvars...); | |
@content; | |
} | |
//@if $include-theme == includeTheme { | |
// @include meta.load-css('/src/scss/#{$block-type}/#{$name}/#{$block-type}.#{$name}-#{settings.$theme-id}'); | |
//} | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Extend Component Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin extend-component($name, $extend, $include-theme: '', $groupsvars...) { | |
@include blocktype('components', $name); | |
#{$where-prefix}.#{$name}#{$where-suffix} { | |
@include modifier($extend) { | |
//@include inject-css3-vars($groupsvars...); | |
@content; | |
} | |
} | |
//@if $include-theme == includeTheme { | |
// @include meta.load-css('/src/scss/#{$block-type}/#{$extend-component}/#{$block-type}.#{$extend-component}-#{settings.$theme-id}'); | |
//} | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Object Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin object($name, $include-theme: '', $groupsvars...) { | |
@include blocktype('objects', $name); | |
#{$where-prefix}.#{$name}#{$where-suffix} { | |
//@include inject-css3-vars($groupsvars...); | |
@content; | |
} | |
$where-prefix: ':where(' !global; | |
$where-suffix: ')' !global; | |
$where-mode: true !global; | |
//@if $include-theme == includeTheme { | |
// @include meta.load-css('@base/scss/#{$block-type}/#{$extend}/#{$block-type}.#{$extend}-#{settings.$theme-id}'); | |
//} | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Extend Component Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin extend-object($name, $extend: '', $include-theme: '', $groupsvars...) { | |
@include blocktype('objects'); | |
#{$where-prefix}.#{$name}#{$where-suffix} { | |
@include modifier($extend) { | |
//@include inject-css3-vars($groupsvars...); | |
@content; | |
} | |
} | |
//@if $include-theme == includeTheme { | |
// @include meta.load-css('@base/scss/#{$block-type}/#{$extend}/#{$block-type}.#{$extend}-#{settings.$theme-id}'); | |
//} | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Trim parent class Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin trim-parent-class($root, $nested-item-name) { | |
$splited-root: str-split($root, ' '); | |
@each $key in $splited-root { | |
@if (str-index($key, --)) == null and (str-index($key, __)) == null { | |
$wrapper : list-to-string(value-replace($splited-root, $nested-item-name, ''), ' ') !global; | |
} @else { | |
$wrapper: $root !global; | |
} | |
} | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Element Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin element($name) { | |
@if $modifier-check == true or $state-check == true { | |
@at-root { | |
$root: '#{&}'; | |
@if $nested != true { | |
#{$root} .#{$block}#{$element-separator}#{$name} { | |
@content; | |
} | |
} @else { | |
@include trim-parent-class($root, $nested-item-name); | |
#{$wrapper} .#{$block}#{$element-separator}#{$name} { | |
@content; | |
} | |
$wrapper: null !global; | |
} | |
} | |
} @else { | |
@at-root { | |
@if $nested == true { | |
$root: '#{&}'; | |
@include trim-parent-class($root, $nested-item-name); | |
} | |
#{$where-prefix}#{$wrapper} .#{$block}#{$element-separator}#{$name}#{$where-suffix} { | |
where: '#{$where-prefix}'; | |
@content; | |
} | |
} | |
} | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Extract Button properties Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin extract-btn-props( $theme-settings, $size, $category, $variant, $state, $icon, $icon-align) { | |
// COMMON PROPERTIES | |
$common-properties: map.get($btn, vars, size, $size ); | |
@each $property, $value in $common-properties { | |
#{$property}: string.unquote('var(--btn-size-#{$size}-#{$property})'); | |
} | |
// THEME PROPERTIES | |
$theme-styles: map.get($theme-settings, vars, $category, $variant, $state ); | |
@each $style, $value in $theme-styles { | |
@if $style == 'default' { | |
@each $property, $value in $value { | |
#{$property}: string.unquote('var(--btn-#{$category}-#{$variant}-#{$state}-#{$style}-#{$property})'); | |
} | |
} @else { | |
@include selector(':#{$style}') { | |
@each $property, $value in $value { | |
#{$property}: string.unquote('var(--btn-#{$category}-#{$variant}-#{$state}-#{$style}-#{$property})'); | |
} | |
} | |
} | |
} | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// BTN Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin btn($name, $theme-settings, $size: 'medium', $category: 'primary', $variant: 'solid', $state: 'enabled', $icon: 'true', $icon-align: 'left') { | |
@if $modifier-check == true or $state-check == true { | |
@at-root { | |
$root: '#{&}'; | |
@if $nested != true { | |
#{$root} .#{$block}#{$element-separator}btn-#{$name}:#{$state} { | |
@include extract-btn-props( $theme-settings, $size, $category, $variant, $state, $icon, $icon-align); | |
@content; | |
} | |
} @else { | |
@include trim-parent-class($root, $nested-item-name); | |
#{$wrapper} .#{$block}#{$element-separator}btn-#{$name}:#{$state} { | |
@include extract-btn-props( $theme-settings, $size, $category, $variant, $state, $icon, $icon-align); | |
@content; | |
} | |
} | |
} | |
} @else { | |
@at-root { | |
#{$where-prefix}.#{$block}#{$element-separator}btn-#{$name}:#{$state}#{$where-suffix} { | |
@include extract-btn-props( $theme-settings, $size, $category, $variant, $state, $icon, $icon-align); | |
@content; | |
} | |
} | |
} | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Modifier Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin modifier($name) { | |
@if $modifier-check == true or $state-check == true { | |
@at-root { | |
$modifier-check: true !global; | |
&#{$modifier-separator}#{$name} { | |
@content; | |
} | |
$modifier-check: true !global; | |
} | |
} @else { | |
@at-root { | |
$block: &; | |
@if $where-mode == true { | |
$block: str-slice(#{$block}, 8, str-length(#{$block})-1); | |
} | |
$modifier-check: true !global; | |
#{$where-prefix}#{$block}#{$modifier-separator}#{$name}#{$where-suffix} { | |
@content; | |
} | |
$modifier-check: false !global; | |
} | |
} | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Selector Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin selector($state) { | |
$state-check: true !global; | |
$parent: &; | |
$state-wrapper: '#{$parent}#{$state}' !global; | |
@at-root { | |
#{$parent}#{$state}{ | |
@content; | |
} | |
} | |
$state-check: false !global; | |
} | |
/////////////////////////////////////////////////////////////////////////////// | |
// | |
// Scope Mixin | |
// | |
/////////////////////////////////////////////////////////////////////////////// | |
@mixin scope2($name, $scope2...) { | |
$where-prefix: '' !global; | |
$where-suffix: '' !global; | |
$where-mode: false !global; | |
#{$where-prefix}.#{$name}#{$where-suffix} { | |
@each $scopekey2 in $scope2{ | |
@include modifier($scopekey2) { | |
@content; | |
} | |
} | |
} | |
} | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
/* */ | |
/* Component */ | |
/* */ | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
@include component('block') { | |
content: 'block'; | |
@include modifier('seq-mod') { | |
content: 'seq-mod'; | |
} | |
@include modifier('seq-mod') { | |
content: 'seq-mod'; | |
} | |
@include element('puzza') { | |
content: element-3; | |
} | |
@include btn('checkout', $eurobet-btn, 'xs'); | |
@include modifier('modifier') { | |
content: 'modifier'; | |
@include btn('checkout', $eurobet-btn, 'xs'); | |
@include element('element-1') { | |
content: 'element-1'; | |
@include modifier('modifier-2') { | |
content: 'modifier-2'; | |
@include element('sub-element') { | |
content: 'element'; | |
} | |
} | |
} | |
@include element('element-3') { | |
content: element-3; | |
} | |
} | |
@include element('test-element') { | |
content: 'test-element'; | |
} | |
@include element('test-element') { | |
content: 'test-element'; | |
@include selector(':selector') { | |
content: 'selector'; | |
@include element('sub-element') { | |
content: 'sub-element'; | |
} | |
} | |
@include modifier('test-modifier') { | |
content: 'test-modifier'; | |
@include element('sub-element') { | |
content: 'sub-element'; | |
@include modifier('theme-1') { | |
content: 'test'; | |
@include element('themed-element') { | |
content: 'themed element'; | |
} | |
} | |
} | |
} | |
} | |
} | |
.type { | |
content: $block-type; | |
} | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
/* */ | |
/* Object */ | |
/* */ | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
.type { | |
content: $block-type; | |
} | |
//$block-type: null !global; | |
// $nested: false !global; | |
@include object('objecttest') { | |
content: 'block'; | |
@include btn('checkout', $eurobet-btn, 'xs'); | |
@include modifier('modifier') { | |
content: 'modifier'; | |
@include btn('checkout', $eurobet-btn, 'xs'); | |
@include element('element-1') { | |
content: 'element-1'; | |
@include modifier('modifier-2') { | |
content: 'modifier-2'; | |
@include element('sub-element') { | |
content: 'element'; | |
} | |
} | |
} | |
} | |
@include element('test-element') { | |
content: 'test-element'; | |
} | |
@include element('test-element') { | |
content: 'test-element'; | |
@include selector(':selector') { | |
content: 'selector'; | |
@include element('sub-element') { | |
content: 'sub-element'; | |
} | |
} | |
@include modifier('test-modifier') { | |
content: 'test-modifier'; | |
@include element('sub-element') { | |
content: 'sub-element'; | |
@include modifier('theme-1') { | |
content: 'test'; | |
@include element('themed-element') { | |
content: 'themed element'; | |
} | |
} | |
} | |
} | |
} | |
} | |
.type { | |
content: $block-type; | |
} | |
$block-type : null !global; | |
@include object('object') { | |
content: 'block'; | |
@include modifier('modifier') { | |
content: 'modifier'; | |
@include element('element-1') { | |
content: 'element-1'; | |
@include modifier('modifier-2') { | |
content: 'modifier-2'; | |
@include element('sub-element') { | |
content: 'element'; | |
} | |
} | |
} | |
} | |
@include element('test-element') { | |
content: 'test-element'; | |
@include selector(':selector') { | |
content: 'selector'; | |
@include element('sub-element') { | |
content: 'sub-element'; | |
} | |
} | |
@include modifier('test-modifier') { | |
content: 'test-modifier'; | |
@include element('sub-element') { | |
content: 'sub-element'; | |
@include modifier('theme-1') { | |
content: 'test'; | |
@include element('themed-element') { | |
content: 'themed element'; | |
} | |
} | |
} | |
} | |
} | |
} | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
/* */ | |
/* Extend Component */ | |
/* */ | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
$block-type : null !global; | |
@include extend-component( 'modals', 'login' ) { | |
content: 'modals--login eurobet'; | |
@include btn('checkout', $eurobet-btn, 'xs'); | |
@include element('header') { | |
background: red; | |
content: 'pippo'; | |
@include modifier('modifier') { | |
content: 'modifier'; | |
} | |
} | |
// $modifier-check: true !global; | |
@include element('header') { | |
background: red; | |
content: 'pippo'; | |
@include modifier('modifier') { | |
content: 'modifier'; | |
@include btn('checkout', $eurobet-btn, 'xs'); | |
@include component('forms') { | |
content: 'forms'; | |
@include element('header') { | |
content: 'header'; | |
} | |
@include modifier('modifier') { | |
content: 'modifier'; | |
} | |
@include modifier('modifier') { | |
content: 'modifier'; | |
} | |
} | |
} | |
} | |
} | |
$block-type : null !global; | |
@include extend-component( 'modals', 'login' ) { | |
content: 'modals--login eurobet'; | |
@include btn('checkout', $eurobet-btn, 'xs'); | |
@include element('header') { | |
background: red; | |
content: 'pippo'; | |
@include modifier('modifier') { | |
content: 'modifier'; | |
@include btn('checkout', $eurobet-btn, 'xs'); | |
@include component('forms') { | |
content: 'forms'; | |
@include modifier('modifier') { | |
content: 'modifier'; | |
} | |
} | |
} | |
} | |
} | |
@include component('modals') { | |
content: 'modals'; | |
} | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
/* */ | |
/* Scoped Component */ | |
/* */ | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
/* */ | |
/* Object inside another Object */ | |
/* */ | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
$block-type: null !global; | |
//$nested: false !global; | |
@include object('modals') { | |
content: 'modals'; | |
@include modifier('modifier') { | |
content: 'modifier'; | |
@include object('forms') { | |
content: 'modals'; | |
@include element('test-element') { | |
content: 'test-element'; | |
} | |
@include element('test-element') { | |
content: 'test-element'; | |
} | |
} | |
} | |
@include object('forms') { | |
content: 'modals'; | |
//@include btn('checkout', $eurobet-btn, 'xs'); | |
@include element('test-element') { | |
content: 'test-element'; | |
} | |
} | |
@include modifier('modifier') { | |
content: 'modifier'; | |
@include object('forms') { | |
content: 'modals'; | |
@include btn('checkout', $eurobet-btn, 'xs'); | |
@include element('test-element') { | |
content: 'test-element'; | |
} | |
} | |
} | |
} | |
$block-type: null !global; | |
@include component('modalsssss') { | |
content: 'modals'; | |
@include component('forms') { | |
content: 'modals'; | |
//@include btn('checkout', $eurobet-btn, 'xs'); | |
@include element('test-element') { | |
content: 'test-element'; | |
} | |
} | |
} | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
/* */ | |
/* component inside another component */ | |
/* */ | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
$block-type: null !global; | |
@include component('modals') { | |
content: 'block'; | |
//@include btn('checkout', $eurobet-btn, 'xs'); | |
//@include btn('checkout', $eurobet-btn, 'xs'); | |
@include modifier('modifier') { | |
content: 'modifier'; | |
@include element('element-1') { | |
content: 'element-1'; | |
@include modifier('modifier-2') { | |
content: 'modifier-2'; | |
@include element('sub-element') { | |
content: 'element'; | |
} | |
} | |
} | |
@include element('header') { | |
background: red; | |
content: 'pippo'; | |
@include modifier('modifier') { | |
content: 'modifier'; | |
//@include btn('checkout', $eurobet-btn, 'xs'); | |
@include component('forms') { | |
content: 'formsssss'; | |
@include element('header') { | |
content: 'form header'; | |
} | |
@include modifier('modifier') { | |
content: 'modifier'; | |
} | |
@include modifier('modifier') { | |
content: 'modifier'; | |
} | |
} | |
} | |
} | |
} | |
@include component('forms') { | |
content: 'modals'; | |
@include element('test-element') { | |
content: 'test-element'; | |
} | |
} | |
@include modifier('modifierrrr') { | |
content: 'modifier'; | |
@include component('forms') { | |
content: 'modals'; | |
@include element('test-element') { | |
content: 'test-element'; | |
} | |
} | |
} | |
} | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
/* */ | |
/* extend component with a component inside another component */ | |
/* */ | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
$block-type : null !global; | |
@include extend-component( 'modals', 'login' ) { | |
@include component( 'ciccio' ) { | |
content: 'modals--login eurobet'; | |
@include btn('checkout', $eurobet-btn, 'xs'); | |
@include element('header') { | |
background: red; | |
content: 'pippo'; | |
@include modifier('modifier') { | |
content: 'modifier'; | |
} | |
} | |
// $modifier-check: true !global; | |
@include element('header-bla') { | |
background: red; | |
content: 'pippo'; | |
@include modifier('modifier') { | |
content: 'modifier'; | |
@include element('eeeelement') { | |
background: red; | |
} | |
@include btn('checkout', $eurobet-btn, 'xs'); | |
@include component('forms') { | |
content: 'forms'; | |
@include element('header') { | |
content: 'header'; | |
} | |
@include modifier('modifier') { | |
content: 'modifier'; | |
} | |
@include modifier('modifier') { | |
content: 'modifier'; | |
} | |
} | |
} | |
} | |
} | |
} | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
/* */ | |
/* scoped component */ | |
/* */ | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
@include scope2( 'mode', 'bet-booker', 'bet-and-pay' ) { | |
@include extend-component( 'modals', 'login' ) { | |
@include component( 'ciccio' ) { | |
content: 'modals--login eurobet'; | |
@include btn('checkout', $eurobet-btn, 'xs'); | |
@include element('header') { | |
background: red; | |
content: 'pippo'; | |
@include modifier('modifier') { | |
content: 'modifier'; | |
} | |
} | |
// $modifier-check: true !global; | |
@include element('header-bla') { | |
background: red; | |
content: 'pippo'; | |
@include modifier('modifier') { | |
content: 'modifier'; | |
@include element('eeeelement') { | |
background: red; | |
} | |
@include btn('checkout', $eurobet-btn, 'xs'); | |
@include component('forms') { | |
content: 'forms'; | |
@include element('header') { | |
content: 'header'; | |
} | |
@include modifier('modifier') { | |
content: 'modifier'; | |
} | |
@include modifier('modifier') { | |
content: 'modifier'; | |
} | |
} | |
} | |
} | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*///////////////////////////////////////////////////////////////////////////*/ | |
/* */ | |
/* Component */ | |
/* */ | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
.block { | |
content: "block"; | |
} | |
.block--seq-mod { | |
content: "seq-mod"; | |
} | |
.block--seq-mod { | |
content: "seq-mod"; | |
} | |
.block__puzza { | |
where: ""; | |
content: element-3; | |
} | |
.block__btn-checkout:enabled { | |
height: var(--btn-size-xs-height); | |
font-size: var(--btn-size-xs-font-size); | |
padding: var(--btn-size-xs-padding); | |
gap: var(--btn-size-xs-gap); | |
line-height: var(--btn-size-xs-line-height); | |
color: var(--btn-primary-solid-enabled-default-color); | |
background-color: var(--btn-primary-solid-enabled-default-background-color); | |
} | |
.block__btn-checkout:enabled:hover { | |
background-color: var(--btn-primary-solid-enabled-hover-background-color); | |
} | |
.block__btn-checkout:enabled:active { | |
background-color: var(--btn-primary-solid-enabled-active-background-color); | |
} | |
.block--modifier { | |
content: "modifier"; | |
} | |
.block--modifier .block__btn-checkout:enabled { | |
height: var(--btn-size-xs-height); | |
font-size: var(--btn-size-xs-font-size); | |
padding: var(--btn-size-xs-padding); | |
gap: var(--btn-size-xs-gap); | |
line-height: var(--btn-size-xs-line-height); | |
color: var(--btn-primary-solid-enabled-default-color); | |
background-color: var(--btn-primary-solid-enabled-default-background-color); | |
} | |
.block--modifier .block__btn-checkout:enabled:hover { | |
background-color: var(--btn-primary-solid-enabled-hover-background-color); | |
} | |
.block--modifier .block__btn-checkout:enabled:active { | |
background-color: var(--btn-primary-solid-enabled-active-background-color); | |
} | |
.block--modifier .block__element-1 { | |
content: "element-1"; | |
} | |
.block--modifier .block__element-1--modifier-2 { | |
content: "modifier-2"; | |
} | |
.block--modifier .block__element-1--modifier-2 .block__sub-element { | |
content: "element"; | |
} | |
.block--modifier .block__element-3 { | |
content: element-3; | |
} | |
.block__test-element { | |
where: ""; | |
content: "test-element"; | |
} | |
.block__test-element { | |
where: ""; | |
content: "test-element"; | |
} | |
.block__test-element:selector { | |
content: "selector"; | |
} | |
.block__test-element:selector .block__sub-element { | |
content: "sub-element"; | |
} | |
.block__test-element--test-modifier { | |
content: "test-modifier"; | |
} | |
.block__test-element--test-modifier .block__sub-element { | |
content: "sub-element"; | |
} | |
.block__test-element--test-modifier .block__sub-element--theme-1 { | |
content: "test"; | |
} | |
.block__test-element--test-modifier .block__sub-element--theme-1 .block__themed-element { | |
content: "themed element"; | |
} | |
.type { | |
content: "components"; | |
} | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
/* */ | |
/* Object */ | |
/* */ | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
.type { | |
content: "components"; | |
} | |
:where(.objecttest) { | |
content: "block"; | |
} | |
:where(.objecttest__btn-checkout:enabled) { | |
height: var(--btn-size-xs-height); | |
font-size: var(--btn-size-xs-font-size); | |
padding: var(--btn-size-xs-padding); | |
gap: var(--btn-size-xs-gap); | |
line-height: var(--btn-size-xs-line-height); | |
color: var(--btn-primary-solid-enabled-default-color); | |
background-color: var(--btn-primary-solid-enabled-default-background-color); | |
} | |
:where(.objecttest__btn-checkout:enabled):hover { | |
background-color: var(--btn-primary-solid-enabled-hover-background-color); | |
} | |
:where(.objecttest__btn-checkout:enabled):active { | |
background-color: var(--btn-primary-solid-enabled-active-background-color); | |
} | |
:where(.objecttest--modifier) { | |
content: "modifier"; | |
} | |
:where(.objecttest--modifier) .objecttest__btn-checkout:enabled { | |
height: var(--btn-size-xs-height); | |
font-size: var(--btn-size-xs-font-size); | |
padding: var(--btn-size-xs-padding); | |
gap: var(--btn-size-xs-gap); | |
line-height: var(--btn-size-xs-line-height); | |
color: var(--btn-primary-solid-enabled-default-color); | |
background-color: var(--btn-primary-solid-enabled-default-background-color); | |
} | |
:where(.objecttest--modifier) .objecttest__btn-checkout:enabled:hover { | |
background-color: var(--btn-primary-solid-enabled-hover-background-color); | |
} | |
:where(.objecttest--modifier) .objecttest__btn-checkout:enabled:active { | |
background-color: var(--btn-primary-solid-enabled-active-background-color); | |
} | |
:where(.objecttest--modifier) .objecttest__element-1 { | |
content: "element-1"; | |
} | |
:where(.objecttest--modifier) .objecttest__element-1--modifier-2 { | |
content: "modifier-2"; | |
} | |
:where(.objecttest--modifier) .objecttest__element-1--modifier-2 .objecttest__sub-element { | |
content: "element"; | |
} | |
:where(.objecttest__test-element) { | |
where: ":where("; | |
content: "test-element"; | |
} | |
:where(.objecttest__test-element) { | |
where: ":where("; | |
content: "test-element"; | |
} | |
:where(.objecttest__test-element):selector { | |
content: "selector"; | |
} | |
:where(.objecttest__test-element):selector .objecttest__sub-element { | |
content: "sub-element"; | |
} | |
:where(.objecttest__test-element--test-modifier) { | |
content: "test-modifier"; | |
} | |
:where(.objecttest__test-element--test-modifier) .objecttest__sub-element { | |
content: "sub-element"; | |
} | |
:where(.objecttest__test-element--test-modifier) .objecttest__sub-element--theme-1 { | |
content: "test"; | |
} | |
:where(.objecttest__test-element--test-modifier) .objecttest__sub-element--theme-1 .objecttest__themed-element { | |
content: "themed element"; | |
} | |
.type { | |
content: "objects"; | |
} | |
:where(.object) { | |
content: "block"; | |
} | |
:where(.object--modifier) { | |
content: "modifier"; | |
} | |
:where(.object--modifier) .object__element-1 { | |
content: "element-1"; | |
} | |
:where(.object--modifier) .object__element-1--modifier-2 { | |
content: "modifier-2"; | |
} | |
:where(.object--modifier) .object__element-1--modifier-2 .object__sub-element { | |
content: "element"; | |
} | |
:where(.object__test-element) { | |
where: ":where("; | |
content: "test-element"; | |
} | |
:where(.object__test-element):selector { | |
content: "selector"; | |
} | |
:where(.object__test-element):selector .object__sub-element { | |
content: "sub-element"; | |
} | |
:where(.object__test-element--test-modifier) { | |
content: "test-modifier"; | |
} | |
:where(.object__test-element--test-modifier) .object__sub-element { | |
content: "sub-element"; | |
} | |
:where(.object__test-element--test-modifier) .object__sub-element--theme-1 { | |
content: "test"; | |
} | |
:where(.object__test-element--test-modifier) .object__sub-element--theme-1 .object__themed-element { | |
content: "themed element"; | |
} | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
/* */ | |
/* Extend Component */ | |
/* */ | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
.modals--login { | |
content: "modals--login eurobet"; | |
} | |
.modals--login .modals__btn-checkout:enabled { | |
height: var(--btn-size-xs-height); | |
font-size: var(--btn-size-xs-font-size); | |
padding: var(--btn-size-xs-padding); | |
gap: var(--btn-size-xs-gap); | |
line-height: var(--btn-size-xs-line-height); | |
color: var(--btn-primary-solid-enabled-default-color); | |
background-color: var(--btn-primary-solid-enabled-default-background-color); | |
} | |
.modals--login .modals__btn-checkout:enabled:hover { | |
background-color: var(--btn-primary-solid-enabled-hover-background-color); | |
} | |
.modals--login .modals__btn-checkout:enabled:active { | |
background-color: var(--btn-primary-solid-enabled-active-background-color); | |
} | |
.modals--login .modals__header { | |
background: red; | |
content: "pippo"; | |
} | |
.modals--login .modals__header--modifier { | |
content: "modifier"; | |
} | |
.modals--login .modals__header { | |
background: red; | |
content: "pippo"; | |
} | |
.modals--login .modals__header--modifier { | |
content: "modifier"; | |
} | |
.modals--login .modals__header--modifier .modals__btn-checkout:enabled { | |
height: var(--btn-size-xs-height); | |
font-size: var(--btn-size-xs-font-size); | |
padding: var(--btn-size-xs-padding); | |
gap: var(--btn-size-xs-gap); | |
line-height: var(--btn-size-xs-line-height); | |
color: var(--btn-primary-solid-enabled-default-color); | |
background-color: var(--btn-primary-solid-enabled-default-background-color); | |
} | |
.modals--login .modals__header--modifier .modals__btn-checkout:enabled:hover { | |
background-color: var(--btn-primary-solid-enabled-hover-background-color); | |
} | |
.modals--login .modals__header--modifier .modals__btn-checkout:enabled:active { | |
background-color: var(--btn-primary-solid-enabled-active-background-color); | |
} | |
.modals--login .modals__header--modifier .forms { | |
content: "forms"; | |
} | |
.modals--login .modals__header--modifier .forms__header { | |
content: "header"; | |
} | |
.modals--login .modals__header--modifier .forms--modifier { | |
content: "modifier"; | |
} | |
.modals--login .modals__header--modifier .forms--modifier { | |
content: "modifier"; | |
} | |
.modals--login { | |
content: "modals--login eurobet"; | |
} | |
.modals--login .modals__btn-checkout:enabled { | |
height: var(--btn-size-xs-height); | |
font-size: var(--btn-size-xs-font-size); | |
padding: var(--btn-size-xs-padding); | |
gap: var(--btn-size-xs-gap); | |
line-height: var(--btn-size-xs-line-height); | |
color: var(--btn-primary-solid-enabled-default-color); | |
background-color: var(--btn-primary-solid-enabled-default-background-color); | |
} | |
.modals--login .modals__btn-checkout:enabled:hover { | |
background-color: var(--btn-primary-solid-enabled-hover-background-color); | |
} | |
.modals--login .modals__btn-checkout:enabled:active { | |
background-color: var(--btn-primary-solid-enabled-active-background-color); | |
} | |
.modals--login .modals__header { | |
background: red; | |
content: "pippo"; | |
} | |
.modals--login .modals__header--modifier { | |
content: "modifier"; | |
} | |
.modals--login .modals__header--modifier .modals__btn-checkout:enabled { | |
height: var(--btn-size-xs-height); | |
font-size: var(--btn-size-xs-font-size); | |
padding: var(--btn-size-xs-padding); | |
gap: var(--btn-size-xs-gap); | |
line-height: var(--btn-size-xs-line-height); | |
color: var(--btn-primary-solid-enabled-default-color); | |
background-color: var(--btn-primary-solid-enabled-default-background-color); | |
} | |
.modals--login .modals__header--modifier .modals__btn-checkout:enabled:hover { | |
background-color: var(--btn-primary-solid-enabled-hover-background-color); | |
} | |
.modals--login .modals__header--modifier .modals__btn-checkout:enabled:active { | |
background-color: var(--btn-primary-solid-enabled-active-background-color); | |
} | |
.modals--login .modals__header--modifier .forms { | |
content: "forms"; | |
} | |
.modals--login .modals__header--modifier .forms--modifier { | |
content: "modifier"; | |
} | |
.modals { | |
content: "modals"; | |
} | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
/* */ | |
/* Scoped Component */ | |
/* */ | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
/* */ | |
/* Object inside another Object */ | |
/* */ | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
:where(.modals) { | |
content: "modals"; | |
} | |
:where(.modals--modifier) { | |
content: "modifier"; | |
} | |
:where(.modals--modifier) .forms { | |
content: "modals"; | |
} | |
:where(.modals--modifier) .forms__test-element { | |
content: "test-element"; | |
} | |
:where(.modals--modifier) .forms__test-element { | |
content: "test-element"; | |
} | |
:where(.modals) .forms { | |
content: "modals"; | |
} | |
:where(.modals) .forms__test-element { | |
where: ""; | |
content: "test-element"; | |
} | |
:where(.modals--modifier) { | |
content: "modifier"; | |
} | |
:where(.modals--modifier) .forms { | |
content: "modals"; | |
} | |
:where(.modals--modifier) .forms__btn-checkout:enabled { | |
height: var(--btn-size-xs-height); | |
font-size: var(--btn-size-xs-font-size); | |
padding: var(--btn-size-xs-padding); | |
gap: var(--btn-size-xs-gap); | |
line-height: var(--btn-size-xs-line-height); | |
color: var(--btn-primary-solid-enabled-default-color); | |
background-color: var(--btn-primary-solid-enabled-default-background-color); | |
} | |
:where(.modals--modifier) .forms__btn-checkout:enabled:hover { | |
background-color: var(--btn-primary-solid-enabled-hover-background-color); | |
} | |
:where(.modals--modifier) .forms__btn-checkout:enabled:active { | |
background-color: var(--btn-primary-solid-enabled-active-background-color); | |
} | |
:where(.modals--modifier) .forms__test-element { | |
content: "test-element"; | |
} | |
.modalsssss { | |
content: "modals"; | |
} | |
.modalsssss .forms { | |
content: "modals"; | |
} | |
.modalsssss .forms__test-element { | |
where: ""; | |
content: "test-element"; | |
} | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
/* */ | |
/* component inside another component */ | |
/* */ | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
.modals { | |
content: "block"; | |
} | |
.modals--modifier { | |
content: "modifier"; | |
} | |
.modals--modifier .modals__element-1 { | |
content: "element-1"; | |
} | |
.modals--modifier .modals__element-1--modifier-2 { | |
content: "modifier-2"; | |
} | |
.modals--modifier .modals__element-1--modifier-2 .modals__sub-element { | |
content: "element"; | |
} | |
.modals--modifier .modals__header { | |
background: red; | |
content: "pippo"; | |
} | |
.modals--modifier .modals__header--modifier { | |
content: "modifier"; | |
} | |
.modals--modifier .modals__header--modifier .forms { | |
content: "formsssss"; | |
} | |
.modals--modifier .modals__header--modifier .forms__header { | |
content: "form header"; | |
} | |
.modals--modifier .modals__header--modifier .forms--modifier { | |
content: "modifier"; | |
} | |
.modals--modifier .modals__header--modifier .forms--modifier { | |
content: "modifier"; | |
} | |
.modals .forms { | |
content: "modals"; | |
} | |
.modals .forms__test-element { | |
where: ""; | |
content: "test-element"; | |
} | |
.modals--modifierrrr { | |
content: "modifier"; | |
} | |
.modals--modifierrrr .forms { | |
content: "modals"; | |
} | |
.modals--modifierrrr .forms__test-element { | |
content: "test-element"; | |
} | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
/* */ | |
/* extend component with a component inside another component */ | |
/* */ | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
.modals--login .ciccio { | |
content: "modals--login eurobet"; | |
} | |
.modals--login .ciccio__btn-checkout:enabled { | |
height: var(--btn-size-xs-height); | |
font-size: var(--btn-size-xs-font-size); | |
padding: var(--btn-size-xs-padding); | |
gap: var(--btn-size-xs-gap); | |
line-height: var(--btn-size-xs-line-height); | |
color: var(--btn-primary-solid-enabled-default-color); | |
background-color: var(--btn-primary-solid-enabled-default-background-color); | |
} | |
.modals--login .ciccio__btn-checkout:enabled:hover { | |
background-color: var(--btn-primary-solid-enabled-hover-background-color); | |
} | |
.modals--login .ciccio__btn-checkout:enabled:active { | |
background-color: var(--btn-primary-solid-enabled-active-background-color); | |
} | |
.modals--login .ciccio__header { | |
background: red; | |
content: "pippo"; | |
} | |
.modals--login .ciccio__header--modifier { | |
content: "modifier"; | |
} | |
.modals--login .ciccio__header-bla { | |
background: red; | |
content: "pippo"; | |
} | |
.modals--login .ciccio__header-bla--modifier { | |
content: "modifier"; | |
} | |
.modals--login .ciccio__header-bla--modifier .ciccio__eeeelement { | |
background: red; | |
} | |
.modals--login .ciccio__header-bla--modifier .ciccio__btn-checkout:enabled { | |
height: var(--btn-size-xs-height); | |
font-size: var(--btn-size-xs-font-size); | |
padding: var(--btn-size-xs-padding); | |
gap: var(--btn-size-xs-gap); | |
line-height: var(--btn-size-xs-line-height); | |
color: var(--btn-primary-solid-enabled-default-color); | |
background-color: var(--btn-primary-solid-enabled-default-background-color); | |
} | |
.modals--login .ciccio__header-bla--modifier .ciccio__btn-checkout:enabled:hover { | |
background-color: var(--btn-primary-solid-enabled-hover-background-color); | |
} | |
.modals--login .ciccio__header-bla--modifier .ciccio__btn-checkout:enabled:active { | |
background-color: var(--btn-primary-solid-enabled-active-background-color); | |
} | |
.modals--login .ciccio__header-bla--modifier .forms { | |
content: "forms"; | |
} | |
.modals--login .ciccio__header-bla--modifier .forms__header { | |
content: "header"; | |
} | |
.modals--login .ciccio__header-bla--modifier .forms--modifier { | |
content: "modifier"; | |
} | |
.modals--login .ciccio__header-bla--modifier .forms--modifier { | |
content: "modifier"; | |
} | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
/* */ | |
/* scoped component */ | |
/* */ | |
/*///////////////////////////////////////////////////////////////////////////*/ | |
.mode--bet-booker .modals--login .ciccio { | |
content: "modals--login eurobet"; | |
} | |
.mode--bet-booker .modals--login .ciccio__btn-checkout:enabled { | |
height: var(--btn-size-xs-height); | |
font-size: var(--btn-size-xs-font-size); | |
padding: var(--btn-size-xs-padding); | |
gap: var(--btn-size-xs-gap); | |
line-height: var(--btn-size-xs-line-height); | |
color: var(--btn-primary-solid-enabled-default-color); | |
background-color: var(--btn-primary-solid-enabled-default-background-color); | |
} | |
.mode--bet-booker .modals--login .ciccio__btn-checkout:enabled:hover { | |
background-color: var(--btn-primary-solid-enabled-hover-background-color); | |
} | |
.mode--bet-booker .modals--login .ciccio__btn-checkout:enabled:active { | |
background-color: var(--btn-primary-solid-enabled-active-background-color); | |
} | |
.mode--bet-booker .modals--login .ciccio__header { | |
background: red; | |
content: "pippo"; | |
} | |
.mode--bet-booker .modals--login .ciccio__header--modifier { | |
content: "modifier"; | |
} | |
.mode--bet-booker .modals--login .ciccio__header-bla { | |
background: red; | |
content: "pippo"; | |
} | |
.mode--bet-booker .modals--login .ciccio__header-bla--modifier { | |
content: "modifier"; | |
} | |
.mode--bet-booker .modals--login .ciccio__header-bla--modifier .ciccio__eeeelement { | |
background: red; | |
} | |
.mode--bet-booker .modals--login .ciccio__header-bla--modifier .ciccio__btn-checkout:enabled { | |
height: var(--btn-size-xs-height); | |
font-size: var(--btn-size-xs-font-size); | |
padding: var(--btn-size-xs-padding); | |
gap: var(--btn-size-xs-gap); | |
line-height: var(--btn-size-xs-line-height); | |
color: var(--btn-primary-solid-enabled-default-color); | |
background-color: var(--btn-primary-solid-enabled-default-background-color); | |
} | |
.mode--bet-booker .modals--login .ciccio__header-bla--modifier .ciccio__btn-checkout:enabled:hover { | |
background-color: var(--btn-primary-solid-enabled-hover-background-color); | |
} | |
.mode--bet-booker .modals--login .ciccio__header-bla--modifier .ciccio__btn-checkout:enabled:active { | |
background-color: var(--btn-primary-solid-enabled-active-background-color); | |
} | |
.mode--bet-booker .modals--login .ciccio__header-bla--modifier .forms { | |
content: "forms"; | |
} | |
.mode--bet-booker .modals--login .ciccio__header-bla--modifier .forms__header { | |
content: "header"; | |
} | |
.mode--bet-booker .modals--login .ciccio__header-bla--modifier .forms--modifier { | |
content: "modifier"; | |
} | |
.mode--bet-booker .modals--login .ciccio__header-bla--modifier .forms--modifier { | |
content: "modifier"; | |
} | |
.mode--bet-and-pay .modals--login .ciccio { | |
content: "modals--login eurobet"; | |
} | |
.mode--bet-and-pay .modals--login .ciccio__btn-checkout:enabled { | |
height: var(--btn-size-xs-height); | |
font-size: var(--btn-size-xs-font-size); | |
padding: var(--btn-size-xs-padding); | |
gap: var(--btn-size-xs-gap); | |
line-height: var(--btn-size-xs-line-height); | |
color: var(--btn-primary-solid-enabled-default-color); | |
background-color: var(--btn-primary-solid-enabled-default-background-color); | |
} | |
.mode--bet-and-pay .modals--login .ciccio__btn-checkout:enabled:hover { | |
background-color: var(--btn-primary-solid-enabled-hover-background-color); | |
} | |
.mode--bet-and-pay .modals--login .ciccio__btn-checkout:enabled:active { | |
background-color: var(--btn-primary-solid-enabled-active-background-color); | |
} | |
.mode--bet-and-pay .modals--login .ciccio__header { | |
background: red; | |
content: "pippo"; | |
} | |
.mode--bet-and-pay .modals--login .ciccio__header--modifier { | |
content: "modifier"; | |
} | |
.mode--bet-and-pay .modals--login .ciccio__header-bla { | |
background: red; | |
content: "pippo"; | |
} | |
.mode--bet-and-pay .modals--login .ciccio__header-bla--modifier { | |
content: "modifier"; | |
} | |
.mode--bet-and-pay .modals--login .ciccio__header-bla--modifier .ciccio__eeeelement { | |
background: red; | |
} | |
.mode--bet-and-pay .modals--login .ciccio__header-bla--modifier .ciccio__btn-checkout:enabled { | |
height: var(--btn-size-xs-height); | |
font-size: var(--btn-size-xs-font-size); | |
padding: var(--btn-size-xs-padding); | |
gap: var(--btn-size-xs-gap); | |
line-height: var(--btn-size-xs-line-height); | |
color: var(--btn-primary-solid-enabled-default-color); | |
background-color: var(--btn-primary-solid-enabled-default-background-color); | |
} | |
.mode--bet-and-pay .modals--login .ciccio__header-bla--modifier .ciccio__btn-checkout:enabled:hover { | |
background-color: var(--btn-primary-solid-enabled-hover-background-color); | |
} | |
.mode--bet-and-pay .modals--login .ciccio__header-bla--modifier .ciccio__btn-checkout:enabled:active { | |
background-color: var(--btn-primary-solid-enabled-active-background-color); | |
} | |
.mode--bet-and-pay .modals--login .ciccio__header-bla--modifier .forms { | |
content: "forms"; | |
} | |
.mode--bet-and-pay .modals--login .ciccio__header-bla--modifier .forms__header { | |
content: "header"; | |
} | |
.mode--bet-and-pay .modals--login .ciccio__header-bla--modifier .forms--modifier { | |
content: "modifier"; | |
} | |
.mode--bet-and-pay .modals--login .ciccio__header-bla--modifier .forms--modifier { | |
content: "modifier"; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"sass": { | |
"compiler": "dart-sass/1.32.12", | |
"extensions": {}, | |
"syntax": "SCSS", | |
"outputStyle": "expanded" | |
}, | |
"autoprefixer": false | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment