Skip to content

Instantly share code, notes, and snippets.

@spazione

spazione/input.scss

Created May 10, 2023 09:04
Show Gist options
  • Save spazione/42766c9d19264dea4ea169aa4f59a7e0 to your computer and use it in GitHub Desktop.
Save spazione/42766c9d19264dea4ea169aa4f59a7e0 to your computer and use it in GitHub Desktop.
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;
}
@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;
}
@mixin checkProps {
/* checkProps */
content: $name;
block: $block;
root: $root;
element-separator: $element-separator;
modifier-separator: $modifier-separator;
modifier-check: $modifier-check;
where-mode: $where-mode;
where-prefix: $where-prefix;
where-suffix: $where-suffix;
state-check: $state-check;
scope: $scope2;
nested: $nested;
blockType: $block-type;
stored-block: $stored-block;
}
$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;
$stored-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;
@if $stored-block == null {
$stored-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}');
//}
@if $stored-block != null {
$block: $stored-block !global;
$nested: false !global;
$wrapper: '' !global;
}
}
///////////////////////////////////////////////////////////////////////////////
//
// 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', $name);
#{$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 {
@if $nested == true {
$root: '#{&}';
@include trim-parent-class($root, $nested-item-name);
}
#{$where-prefix}#{$wrapper} .#{$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';
}
}
@include element('NEWTEST') {
CONTENT: NEWTEST;
}
}
}
}
///////////////////////////////////////////////////////////////////////////////
//
// Default Settings
//
///////////////////////////////////////////////////////////////////////////////
$name: null;
$block: null;
$stored-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: '';
@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';
}
}
}
}
///////////////////////////////////////////////////////////////////////////////
//
// Default Settings
//
///////////////////////////////////////////////////////////////////////////////
$name: null;
$block: null;
$stored-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: '';
@include extend-object( 'pippo', 'login' ) {
content: 'modals';
@include component('forms') {
content: 'modals';
//@include btn('checkout', $eurobet-btn, 'xs');
@include element('test-element') {
content: 'test-element';
}
}
}
/*///////////////////////////////////////////////////////////////////////////*/
/* */
/* component inside another component */
/* */
/*///////////////////////////////////////////////////////////////////////////*/
///////////////////////////////////////////////////////////////////////////////
//
// Default Settings
//
///////////////////////////////////////////////////////////////////////////////
$name: null;
$block: null;
$stored-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: '';
@include component('modals') {
content: 'block';
//@include btn('checkout', $eurobet-btn, 'xs');
@include checkProps;
//@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 checkProps;
@include component('forms') {
@include checkProps;
content: 'modals';
@include element('test-element') {
content: 'test-element';
}
}
@include element('test') {
@include checkProps;
content: 'test';
}
@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';
}
}
}
}
}
}
}
///////////////////////////////////////////////////////////////////////////////
//
// Default Settings
//
///////////////////////////////////////////////////////////////////////////////
$name: null;
$block: null;
$stored-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: '';
/*///////////////////////////////////////////////////////////////////////////*/
/* */
/* Component */
/* */
/*///////////////////////////////////////////////////////////////////////////*/
@include component('breadcrumbs') {
list-style-type: none;
@include checkProps;
@include element('item') {
position: relative;
@include component('forms') {
font-size: .5625rem;
@include element('test') {
margin-right: 15
}
}
}
@include checkProps;
@include element('icon') {
@include checkProps;
margin-right: 15;
}
@include element('icon') {
margin-right: 15;
}
}
Raw
output.css
/*///////////////////////////////////////////////////////////////////////////*/
/* */
/* 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 .modals__header--modifier .modals__NEWTEST {
CONTENT: NEWTEST;
}
.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__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);
}
: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";
}
:where(.pippo--login) {
content: "modals";
}
:where(.pippo--login) .forms {
content: "modals";
}
:where(.pippo--login) .forms .forms__test-element {
content: "test-element";
}
/*///////////////////////////////////////////////////////////////////////////*/
/* */
/* component inside another component */
/* */
/*///////////////////////////////////////////////////////////////////////////*/
.modals {
content: "block";
/* checkProps */
block: "modals";
element-separator: "__";
modifier-separator: "--";
modifier-check: false;
where-mode: false;
where-prefix: "";
where-suffix: "";
nested: false;
blockType: "components";
stored-block: "modals";
/* checkProps */
block: "modals";
element-separator: "__";
modifier-separator: "--";
modifier-check: false;
where-mode: false;
where-prefix: "";
where-suffix: "";
nested: false;
blockType: "components";
stored-block: "modals";
}
.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 {
/* checkProps */
block: "forms";
element-separator: "__";
modifier-separator: "--";
modifier-check: false;
where-mode: false;
where-prefix: "";
where-suffix: "";
nested: true;
blockType: "components";
stored-block: "modals";
content: "modals";
}
.modals .forms__test-element {
where: "";
content: "test-element";
}
.modals__test {
where: "";
/* checkProps */
block: "modals";
element-separator: "__";
modifier-separator: "--";
modifier-check: false;
where-mode: false;
where-prefix: "";
where-suffix: "";
nested: false;
blockType: "components";
stored-block: "modals";
content: "test";
}
.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";
}
/*///////////////////////////////////////////////////////////////////////////*/
/* */
/* Component */
/* */
/*///////////////////////////////////////////////////////////////////////////*/
.breadcrumbs {
list-style-type: none;
/* checkProps */
block: "breadcrumbs";
element-separator: "__";
modifier-separator: "--";
modifier-check: false;
where-mode: false;
where-prefix: "";
where-suffix: "";
nested: false;
blockType: "components";
stored-block: "breadcrumbs";
/* checkProps */
block: "breadcrumbs";
element-separator: "__";
modifier-separator: "--";
modifier-check: false;
where-mode: false;
where-prefix: "";
where-suffix: "";
nested: false;
blockType: "components";
stored-block: "breadcrumbs";
}
.breadcrumbs__item {
where: "";
position: relative;
}
.breadcrumbs__item .forms {
font-size: 0.5625rem;
}
.breadcrumbs__item .forms__test {
where: "";
margin-right: 15;
}
.breadcrumbs__icon {
where: "";
/* checkProps */
block: "breadcrumbs";
element-separator: "__";
modifier-separator: "--";
modifier-check: false;
where-mode: false;
where-prefix: "";
where-suffix: "";
nested: false;
blockType: "components";
stored-block: "breadcrumbs";
margin-right: 15;
}
.breadcrumbs__icon {
where: "";
margin-right: 15;
}
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