From aeed08dc46662a0d70e04bcea612a701633736e7 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 22 Jul 2026 13:00:59 +0200 Subject: Revert "Paths" This reverts commit cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226. --- src/objects/_radio.scss | 151 +++++++++++++++++++++++------------------------- 1 file changed, 71 insertions(+), 80 deletions(-) (limited to 'src/objects/_radio.scss') diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss index c964657..ae4a85a 100644 --- a/src/objects/_radio.scss +++ b/src/objects/_radio.scss @@ -1,100 +1,92 @@ -@use "sass:meta"; -@use "pkg:iro-sass/bem"; -@use "pkg:iro-sass/props"; -@use "../props" as *; -@use "../core.vars" as core; +@use 'sass:meta'; +@use 'pkg:iro-sass/src/bem'; +@use 'pkg:iro-sass/src/props'; +@use '../props' as *; +@use '../core.vars' as core; -@forward "radio.vars"; -@use "radio.vars" as vars; +@forward 'radio.vars'; +@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); + @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( - 0.5em * props.get(core.$font--standard--line-height) - 0.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; + 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; &::after { - position: relative; - inset-block-start: props.get(vars.$border-width); + 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 0.2s ease; + 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; + @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); + 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") { + @include bem.sibling-elem('label') { color: props.get(vars.$hover--label-color); } - @include bem.sibling-elem("circle") { + @include bem.sibling-elem('circle') { background-color: props.get(vars.$hover--circle-border-color); } } &:checked { - @include bem.sibling-elem("circle") { + @include bem.sibling-elem('circle') { &::after { - transform: scale(0.44); + transform: scale(.44); } } } &:disabled { - @include bem.sibling-elem("label") { + @include bem.sibling-elem('label') { color: props.get(vars.$disabled--label-color); } - @include bem.sibling-elem("circle") { + @include bem.sibling-elem('circle') { background-color: props.get(vars.$disabled--circle-border-color); &::after { @@ -104,46 +96,45 @@ } &:focus-visible { - @include bem.sibling-elem("label") { + @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) - ) + @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") { + @include bem.modifier('standalone') { + @include bem.elem('circle') { margin-block-start: 0; } } - @include bem.modifier("accent") { - @include bem.elem("native") { + @include bem.modifier('accent') { + @include bem.elem('native') { &:checked { - @include bem.sibling-elem("circle") { + @include bem.sibling-elem('circle') { background-color: props.get(vars.$accent--circle-border-color); } &:hover, &:focus-visible { - @include bem.sibling-elem("circle") { + @include bem.sibling-elem('circle') { background-color: props.get(vars.$accent--hover--circle-border-color); } } } &:disabled { - @include bem.sibling-elem("circle") { + @include bem.sibling-elem('circle') { background-color: props.get(vars.$disabled--circle-border-color); &::after { @@ -152,7 +143,7 @@ } &:checked { - @include bem.sibling-elem("circle") { + @include bem.sibling-elem('circle') { background-color: props.get(vars.$disabled--circle-border-color); } } -- cgit v1.3.1