diff --git a/labs/gb/components/checkbox/checkbox.scss b/labs/gb/components/checkbox/checkbox.scss index 379a79d6b0..ced29a5d46 100644 --- a/labs/gb/components/checkbox/checkbox.scss +++ b/labs/gb/components/checkbox/checkbox.scss @@ -64,19 +64,27 @@ height: 48px; background-image: none; outline: none; + margin: 0; + --icon: 'check'; + + &:is(:indeterminate, .indeterminate)::before { + --icon: 'remove'; + } &::before { - content: ''; + content: var(--icon); + display: inline-flex; + align-items: center; + justify-content: center; box-sizing: border-box; + overflow: hidden; + aspect-ratio: 1; width: var(--container-size); - height: var(--container-size); background: var(--container-color); border-radius: var(--container-shape); border: var(--outline-width) solid var(--outline-color); color: var(--icon-color); - font-family: var(--md-icon-font); - font-size: var(--icon-size); - line-height: 1; + font: var(--icon-size) / 1 var(--md-icon-font); } &::after { @@ -92,14 +100,6 @@ transition: var(--ripple-transition); animation: var(--ripple-animation), var(--focus-ring-animation); } - - &:is(:checked, .checked)::before { - content: 'check'; - } - - &:is(:indeterminate, .indeterminate)::before { - content: 'remove'; - } } } } diff --git a/labs/gb/components/radio/radio.scss b/labs/gb/components/radio/radio.scss index dbcc6dfddb..e3416eebbc 100644 --- a/labs/gb/components/radio/radio.scss +++ b/labs/gb/components/radio/radio.scss @@ -44,18 +44,17 @@ height: 48px; background-image: none; outline: none; + --icon: 'radio_button_unchecked'; &::before { - content: 'radio_button_unchecked'; + content: var(--icon); color: var(--icon-color); - font-family: var(--md-icon-font); - font-size: var(--icon-size); - line-height: 1; + font: var(--icon-size) / 1 var(--md-icon-font); width: var(--icon-size); aspect-ratio: 1; } &:is(:checked, .checked)::before { - content: 'radio_button_checked'; + --icon: 'radio_button_checked'; } &::after { content: '';