Skip to content

Instantly share code, notes, and snippets.

@spazione

spazione/input.scss

Created February 3, 2023 15:09
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
Generated by SassMeister.com.
Raw
input.scss
@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;
}
$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;
$scope: 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);
@if $scope != null and $nested == false {
@each $scopekey in $scope{
#{$scopekey} #{$where-prefix}.#{$name}#{$where-suffix} {
//@include inject-css3-vars($groupsvars...);
@content;
}
}
} @else {
#{$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}');
//}
}
///////////////////////////////////////////////////////////////////////////////
//
// 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 {
$nested: false !global;
$wrapper: str-replace($root, $nested-item-name, '');
#{$wrapper} .#{$block}#{$element-separator}#{$name} {
@content;
}
//$nested: false !global;
}
}
} @else {
@at-root {
@if $scope != null {
@each $scopekey in $scope{
#{$scopekey} #{$where-prefix}.#{$block}#{$element-separator}#{$name}#{$where-suffix} {
@content;
}
}
} @else {
@if $nested == true {
$root: '#{&}' ;
$wrapper: str-replace($root, $nested-item-name, '');
}
#{$wrapper} #{$where-prefix}.#{$block}#{$element-separator}#{$name}#{$where-suffix} {
@content;
}
}
}
}
}
///////////////////////////////////////////////////////////////////////////////
//
// Button mixins
//
///////////////////////////////////////////////////////////////////////////////
@mixin btn($name, $theme-settings, $size: 'medium', $category: 'primary', $variant: 'solid', $state: 'enabled', $icon: 'true', $icon-align: 'left') {
$classname: '';
@if $modifier-check == true {
$parent: &;
$classname: '#{$parent} .#{$block}#{$element-separator}btn-#{$name}';
} @else {
$parent: &;
$root: '#{&}';
@if $nested != true {
$classname: '#{$root} .#{$block}#{$element-separator}btn-#{$name}';
} @else {
$nested: false !global;
$wrapper: str-replace($root, $nested-item-name, '');
$classname: '#{$wrapper} .#{$block}#{$element-separator}btn-#{$name}';
//$nested: false !global;
}
//$classname: '#{$parent}#{$element-separator}btn-#{$name}';
}
@at-root {
#{$classname}:#{$state} {
// 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 {
&:#{$style} {
@each $property, $value in $value {
#{$property}: string.unquote('var(--btn-#{$category}-#{$variant}-#{$state}-#{$style}-#{$property})');
}
}
}
}
@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: false !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 scope($scope...) {
$block-type : null !global;
$scope: $scope !global;
@content;
$scope: null !global;
}
/*///////////////////////////////////////////////////////////////////////////*/
/* */
/* Component */
/* */
/*///////////////////////////////////////////////////////////////////////////*/
@include component('block') {
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 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('object') {
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 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 */
/* */
/*///////////////////////////////////////////////////////////////////////////*/
@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 */
/* */
/*///////////////////////////////////////////////////////////////////////////*/
@include scope('.scope-1','.scope-2') {
@include component('pippo') {
content: 'block';
@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('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';
}
}
}
}
}
}
}
/*///////////////////////////////////////////////////////////////////////////*/
/* */
/* 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 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';
}
}
}
}
/*///////////////////////////////////////////////////////////////////////////*/
/* */
/* component inside another component */
/* */
/*///////////////////////////////////////////////////////////////////////////*/
@include component('modals') {
content: 'modals';
@include modifier('modifier') {
content: 'modifier';
@include component('forms') {
content: 'modals';
@include btn('checkout', $eurobet-btn, 'xs');
@include element('test-element') {
content: 'test-element';
}
}
}
@include component('forms') {
content: 'modals';
@include element('test-element') {
content: 'test-element';
}
}
@include modifier('modifier') {
content: 'modifier';
@include component('forms') {
content: 'modals';
@include element('test-element') {
content: 'test-element';
}
}
}
}
/*///////////////////////////////////////////////////////////////////////////*/
/* */
/* Scoped component inside another component */
/* */
/*///////////////////////////////////////////////////////////////////////////*/
@include scope('.scope-1', '.scope-2') {
@include component('modals') {
content: 'modals';
@include component('forms') {
content: 'modals';
@include element('test-element') {
content: 'test-element';
}
}
@include modifier('modifier') {
content: 'modifier';
@include component('forms') {
content: 'modals';
@include element('test-element') {
content: 'test-element';
}
}
}
}
}
Raw
output.css
/*///////////////////////////////////////////////////////////////////////////*/
/* */
/* Component */
/* */
/*///////////////////////////////////////////////////////////////////////////*/
.block {
content: "block";
}
.block .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 .block__btn-checkout:enabled:hover {
background-color: var(--btn-primary-solid-enabled-hover-background-color);
}
.block .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__test-element {
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(.object) {
content: "block";
}
:where(.object) .object__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(.object) .object__btn-checkout:enabled:hover {
background-color: var(--btn-primary-solid-enabled-hover-background-color);
}
:where(.object) .object__btn-checkout:enabled:active {
background-color: var(--btn-primary-solid-enabled-active-background-color);
}
:where(.object--modifier) {
content: "modifier";
}
:where(.object--modifier) .object__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(.object--modifier) .object__btn-checkout:enabled:hover {
background-color: var(--btn-primary-solid-enabled-hover-background-color);
}
:where(.object--modifier) .object__btn-checkout:enabled:active {
background-color: var(--btn-primary-solid-enabled-active-background-color);
}
: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) {
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";
}
.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) {
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--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 */
/* */
/*///////////////////////////////////////////////////////////////////////////*/
.scope-1 .pippo {
content: "block";
}
.scope-1 .pippo .pippo__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);
}
.scope-1 .pippo .pippo__btn-checkout:enabled:hover {
background-color: var(--btn-primary-solid-enabled-hover-background-color);
}
.scope-1 .pippo .pippo__btn-checkout:enabled:active {
background-color: var(--btn-primary-solid-enabled-active-background-color);
}
.scope-1 .pippo--modifier {
content: "modifier";
}
.scope-1 .pippo--modifier .pippo__element-1 {
content: "element-1";
}
.scope-1 .pippo--modifier .pippo__element-1--modifier-2 {
content: "modifier-2";
}
.scope-1 .pippo--modifier .pippo__element-1--modifier-2 .pippo__sub-element {
content: "element";
}
.scope-1 .pippo__test-element {
content: "test-element";
}
.scope-1 .pippo__test-element:selector {
content: "selector";
}
.scope-1 .pippo__test-element:selector .pippo__sub-element {
content: "sub-element";
}
.scope-1 .pippo__test-element--test-modifier {
content: "test-modifier";
}
.scope-1 .pippo__test-element--test-modifier .pippo__sub-element {
content: "sub-element";
}
.scope-1 .pippo__test-element--test-modifier .pippo__sub-element--theme-1 {
content: "test";
}
.scope-1 .pippo__test-element--test-modifier .pippo__sub-element--theme-1 .pippo__themed-element {
content: "themed element";
}
.scope-2 .pippo__test-element {
content: "test-element";
}
.scope-2 .pippo__test-element:selector {
content: "selector";
}
.scope-2 .pippo__test-element:selector .pippo__sub-element {
content: "sub-element";
}
.scope-2 .pippo__test-element--test-modifier {
content: "test-modifier";
}
.scope-2 .pippo__test-element--test-modifier .pippo__sub-element {
content: "sub-element";
}
.scope-2 .pippo__test-element--test-modifier .pippo__sub-element--theme-1 {
content: "test";
}
.scope-2 .pippo__test-element--test-modifier .pippo__sub-element--theme-1 .pippo__themed-element {
content: "themed element";
}
.scope-2 .pippo {
content: "block";
}
.scope-2 .pippo .pippo__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);
}
.scope-2 .pippo .pippo__btn-checkout:enabled:hover {
background-color: var(--btn-primary-solid-enabled-hover-background-color);
}
.scope-2 .pippo .pippo__btn-checkout:enabled:active {
background-color: var(--btn-primary-solid-enabled-active-background-color);
}
.scope-2 .pippo--modifier {
content: "modifier";
}
.scope-2 .pippo--modifier .pippo__element-1 {
content: "element-1";
}
.scope-2 .pippo--modifier .pippo__element-1--modifier-2 {
content: "modifier-2";
}
.scope-2 .pippo--modifier .pippo__element-1--modifier-2 .pippo__sub-element {
content: "element";
}
.scope-1 .pippo__test-element {
content: "test-element";
}
.scope-1 .pippo__test-element:selector {
content: "selector";
}
.scope-1 .pippo__test-element:selector .pippo__sub-element {
content: "sub-element";
}
.scope-1 .pippo__test-element--test-modifier {
content: "test-modifier";
}
.scope-1 .pippo__test-element--test-modifier .pippo__sub-element {
content: "sub-element";
}
.scope-1 .pippo__test-element--test-modifier .pippo__sub-element--theme-1 {
content: "test";
}
.scope-1 .pippo__test-element--test-modifier .pippo__sub-element--theme-1 .pippo__themed-element {
content: "themed element";
}
.scope-2 .pippo__test-element {
content: "test-element";
}
.scope-2 .pippo__test-element:selector {
content: "selector";
}
.scope-2 .pippo__test-element:selector .pippo__sub-element {
content: "sub-element";
}
.scope-2 .pippo__test-element--test-modifier {
content: "test-modifier";
}
.scope-2 .pippo__test-element--test-modifier .pippo__sub-element {
content: "sub-element";
}
.scope-2 .pippo__test-element--test-modifier .pippo__sub-element--theme-1 {
content: "test";
}
.scope-2 .pippo__test-element--test-modifier .pippo__sub-element--theme-1 .pippo__themed-element {
content: "themed element";
}
/*///////////////////////////////////////////////////////////////////////////*/
/* */
/* 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) .forms {
content: "modals";
}
:where(.modals) .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) .forms__btn-checkout:enabled:hover {
background-color: var(--btn-primary-solid-enabled-hover-background-color);
}
:where(.modals) .forms__btn-checkout:enabled:active {
background-color: var(--btn-primary-solid-enabled-active-background-color);
}
.forms__test-element {
content: "test-element";
}
:where(.modals--modifier) {
content: "modifier";
}
:where(.modals--modifier) .forms {
content: "modals";
}
:where(.modals--modifier) .forms .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 .forms__btn-checkout:enabled:hover {
background-color: var(--btn-primary-solid-enabled-hover-background-color);
}
:where(.modals--modifier) .forms .forms__btn-checkout:enabled:active {
background-color: var(--btn-primary-solid-enabled-active-background-color);
}
:where(.modals--modifier) .forms__test-element {
content: "test-element";
}
/*///////////////////////////////////////////////////////////////////////////*/
/* */
/* component inside another component */
/* */
/*///////////////////////////////////////////////////////////////////////////*/
.modals {
content: "modals";
}
.modals--modifier {
content: "modifier";
}
.modals--modifier .forms {
content: "modals";
}
.modals--modifier .forms .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);
}
.modals--modifier .forms .forms__btn-checkout:enabled:hover {
background-color: var(--btn-primary-solid-enabled-hover-background-color);
}
.modals--modifier .forms .forms__btn-checkout:enabled:active {
background-color: var(--btn-primary-solid-enabled-active-background-color);
}
.modals--modifier .forms__test-element {
content: "test-element";
}
.modals .forms {
content: "modals";
}
.modals .forms__test-element {
content: "test-element";
}
.modals--modifier {
content: "modifier";
}
.modals--modifier .forms {
content: "modals";
}
.modals--modifier .forms__test-element {
content: "test-element";
}
/*///////////////////////////////////////////////////////////////////////////*/
/* */
/* Scoped component inside another component */
/* */
/*///////////////////////////////////////////////////////////////////////////*/
.scope-1 .modals {
content: "modals";
}
.scope-1 .modals .forms {
content: "modals";
}
.scope-1 .forms__test-element {
content: "test-element";
}
.scope-2 .forms__test-element {
content: "test-element";
}
.scope-1 .modals--modifier {
content: "modifier";
}
.scope-1 .modals--modifier .forms {
content: "modals";
}
.scope-1 .modals--modifier .forms__test-element {
content: "test-element";
}
.scope-2 .modals {
content: "modals";
}
.scope-2 .modals .forms {
content: "modals";
}
.scope-1 .forms__test-element {
content: "test-element";
}
.scope-2 .forms__test-element {
content: "test-element";
}
.scope-2 .modals--modifier {
content: "modifier";
}
.scope-2 .modals--modifier .forms {
content: "modals";
}
.scope-2 .modals--modifier .forms__test-element {
content: "test-element";
}
Raw
settings.json
{
"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