From 41b0d0497988274057fc2512c822a6bc9d2d3ebd Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 6 Aug 2025 16:40:56 +0200 Subject: Switch to tab indentation --- src/objects/_radio.scss | 248 ++++++++++++++++++++++++------------------------ 1 file changed, 124 insertions(+), 124 deletions(-) (limited to 'src/objects/_radio.scss') diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index aef6b92..8327a15 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss @@ -8,147 +8,147 @@ @use 'radio.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.object('radio') { - position: relative; - display: inline-block; - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); - margin-inline: - calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) - calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); + @include bem.object('radio') { + position: relative; + display: inline-block; + padding-block: props.get(vars.$pad-b); + padding-inline: props.get(vars.$pad-i); + margin-inline: + calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) + calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); - @include bem.elem('circle') { - display: inline-block; - flex: 0 0 auto; - inline-size: props.get(vars.$diameter); - block-size: props.get(vars.$diameter); - margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset)); - vertical-align: top; - background-color: props.get(vars.$circle-border-color); - background-clip: padding-box; - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: 2em; + @include bem.elem('circle') { + display: inline-block; + flex: 0 0 auto; + inline-size: props.get(vars.$diameter); + block-size: props.get(vars.$diameter); + margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset)); + vertical-align: top; + background-color: props.get(vars.$circle-border-color); + background-clip: padding-box; + border: props.get(vars.$key-focus--border-offset) solid transparent; + border-radius: 2em; - &::after { - position: relative; - inset-block-start: props.get(vars.$border-width); - inset-inline-start: props.get(vars.$border-width); - display: block; - inline-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); - block-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); - content: ''; - background-color: props.get(vars.$circle-bg-color); - border-radius: props.get(vars.$diameter); - transition: transform .2s ease; - } - } + &::after { + position: relative; + inset-block-start: props.get(vars.$border-width); + inset-inline-start: props.get(vars.$border-width); + display: block; + inline-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); + block-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); + content: ''; + background-color: props.get(vars.$circle-bg-color); + border-radius: props.get(vars.$diameter); + transition: transform .2s ease; + } + } - @include bem.elem('label') { - margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); - } + @include bem.elem('label') { + margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); + } - @include bem.elem('native') { - position: absolute; - inset-block-start: 0; - inset-inline-start: 0; - z-index: -1; - inline-size: 100%; - block-size: 100%; - padding: 0; - margin: 0; - overflow: hidden; - appearance: none; - border-radius: props.get(vars.$rounding); + @include bem.elem('native') { + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + z-index: -1; + inline-size: 100%; + block-size: 100%; + padding: 0; + margin: 0; + overflow: hidden; + appearance: none; + border-radius: props.get(vars.$rounding); - &:hover, - &:focus-visible { - @include bem.sibling-elem('label') { - color: props.get(vars.$hover--label-color); - } + &:hover, + &:focus-visible { + @include bem.sibling-elem('label') { + color: props.get(vars.$hover--label-color); + } - @include bem.sibling-elem('circle') { - background-color: props.get(vars.$hover--circle-border-color); - } - } + @include bem.sibling-elem('circle') { + background-color: props.get(vars.$hover--circle-border-color); + } + } - &:checked { - @include bem.sibling-elem('circle') { - &::after { - transform: scale(.44); - } - } - } + &:checked { + @include bem.sibling-elem('circle') { + &::after { + transform: scale(.44); + } + } + } - &:disabled { - @include bem.sibling-elem('label') { - color: props.get(vars.$disabled--label-color); - } + &:disabled { + @include bem.sibling-elem('label') { + color: props.get(vars.$disabled--label-color); + } - @include bem.sibling-elem('circle') { - background-color: props.get(vars.$disabled--circle-border-color); + @include bem.sibling-elem('circle') { + background-color: props.get(vars.$disabled--circle-border-color); - &::after { - background-color: props.get(vars.$disabled--circle-bg-color); - } - } - } + &::after { + background-color: props.get(vars.$disabled--circle-bg-color); + } + } + } - &:focus-visible { - @include bem.sibling-elem('label') { - color: props.get(vars.$key-focus--label-color); - } + &:focus-visible { + @include bem.sibling-elem('label') { + color: props.get(vars.$key-focus--label-color); + } - @include bem.sibling-elem('circle') { - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - box-shadow: - 0 - 0 - 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) - props.get(vars.$key-focus--outline-color); - } - } - } + @include bem.sibling-elem('circle') { + outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$key-focus--outline-color); + } + } + } - @include bem.modifier('standalone') { - @include bem.elem('circle') { - margin-block-start: 0; - } - } + @include bem.modifier('standalone') { + @include bem.elem('circle') { + margin-block-start: 0; + } + } - @include bem.modifier('accent') { - @include bem.elem('native') { - &:checked { - @include bem.sibling-elem('circle') { - background-color: props.get(vars.$accent--circle-border-color); - } + @include bem.modifier('accent') { + @include bem.elem('native') { + &:checked { + @include bem.sibling-elem('circle') { + background-color: props.get(vars.$accent--circle-border-color); + } - &:hover, - &:focus-visible { - @include bem.sibling-elem('circle') { - background-color: props.get(vars.$accent--hover--circle-border-color); - } - } - } + &:hover, + &:focus-visible { + @include bem.sibling-elem('circle') { + background-color: props.get(vars.$accent--hover--circle-border-color); + } + } + } - &:disabled { - @include bem.sibling-elem('circle') { - background-color: props.get(vars.$disabled--circle-border-color); + &:disabled { + @include bem.sibling-elem('circle') { + background-color: props.get(vars.$disabled--circle-border-color); - &::after { - background-color: props.get(vars.$disabled--circle-bg-color); - } - } + &::after { + background-color: props.get(vars.$disabled--circle-bg-color); + } + } - &:checked { - @include bem.sibling-elem('circle') { - background-color: props.get(vars.$disabled--circle-border-color); - } - } - } - } - } - } + &:checked { + @include bem.sibling-elem('circle') { + background-color: props.get(vars.$disabled--circle-border-color); + } + } + } + } + } + } } -- cgit v1.2.3-70-g09d2