From b2e7a1fac1613f63e879b22c577500de0b033fdc Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 5 Feb 2022 19:33:35 +0100 Subject: Added radio --- src/index.scss | 1 + src/objects/_field-label.scss | 2 - src/objects/_radio.scss | 155 ++++++++++++++++++++++++++++++++++++++++++ src/objects/_text-field.scss | 10 +-- tpl/index.pug | 15 ++++ tpl/objects/radio.pug | 6 ++ tpl/objects/text-field.pug | 2 +- 7 files changed, 183 insertions(+), 8 deletions(-) create mode 100644 src/objects/_radio.scss create mode 100644 tpl/objects/radio.pug diff --git a/src/index.scss b/src/index.scss index ad3b1af..faa053e 100644 --- a/src/index.scss +++ b/src/index.scss @@ -12,6 +12,7 @@ @import 'objects/button'; @import 'objects/text-field'; @import 'objects/field-label'; +@import 'objects/radio'; :root { @include iro.props-assign; diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss index 341bf49..d0bc6ad 100644 --- a/src/objects/_field-label.scss +++ b/src/objects/_field-label.scss @@ -1,6 +1,4 @@ @use 'iro-sass/src/index' as iro; -@use '../vars'; -@use '../mixins/typography'; @include iro.props-namespace('field-label') { @include iro.props-store(( diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss new file mode 100644 index 0000000..635a260 --- /dev/null +++ b/src/objects/_radio.scss @@ -0,0 +1,155 @@ +@use 'iro-sass/src/index' as iro; + +@include iro.props-namespace('radio') { + @include iro.props-store(( + --dims: ( + --diameter: iro.fn-px-to-rem(15px), + --label-gap: .6rem, + --border-width: iro.props-get(--dims --border-width --medium, $global: true), + --padding-x: .3rem, + --padding-y: .3rem, + --margin-right: iro.props-get(--dims --spacing --x --md, $global: true), + ), + --colors: ( + --circle-border: iro.props-get(--colors --fg-hi2, $global: true), + --circle-bg: iro.props-get(--colors --bg-hi, $global: true), + + --hover: ( + --label: iro.props-get(--colors --fg-lo, $global: true), + --circle-border: iro.props-get(--colors --fg-hi, $global: true), + ), + --active: ( + --circle-border: iro.props-get(--colors --accent --primary, $global: true), + + --hover: ( + --circle-border: iro.props-get(--colors --accent --primary-lo, $global: true), + ), + ), + --key-focus: ( + --label: iro.props-get(--colors --focus --text, $global: true), + --circle-border: iro.props-get(--colors --focus --fill, $global: true), + --shadow: iro.props-get(--colors --focus --shadow, $global: true), + ), + --disabled: ( + --label: iro.props-get(--colors --fg-hi3, $global: true), + --circle-border: iro.props-get(--colors --obj-lo, $global: true), + --circle-bg: iro.props-get(--colors --bg-hi, $global: true), + + --active: ( + --circle-border: iro.props-get(--colors --obj-lo, $global: true), + ), + ) + ), + )); + + @include iro.bem-object(iro.props-namespace()) { + display: inline-flex; + position: relative; + align-items: flex-start; + margin-right: calc(-1 * iro.props-get(--dims --padding-x) + iro.props-get(--dims --margin-right)); + margin-left: calc(-1 * iro.props-get(--dims --padding-x)); + padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); + + @include iro.bem-elem('circle') { + display: block; + position: relative; + box-sizing: border-box; + flex: 0 0 auto; + width: iro.props-get(--dims --diameter); + height: iro.props-get(--dims --diameter); + margin-top: calc(.5 * (#{$line-height * 1em} - #{iro.props-get(--dims --diameter)})); + border-radius: 2em; + background-color: iro.props-get(--colors --circle-border); + + &::after { + content: ''; + display: block; + position: absolute; + z-index: 10; + top: 50%; + left: iro.props-get(--dims --border-width); + width: calc(iro.props-get(--dims --diameter) - 2 * iro.props-get(--dims --border-width)); + height: calc(iro.props-get(--dims --diameter) - 2 * iro.props-get(--dims --border-width)); + transform: translateY(-50%); + transition: transform .2s ease; + border-radius: iro.props-get(--dims --diameter); + background-color: iro.props-get(--colors --circle-bg); + } + } + + @include iro.bem-elem('label') { + margin-left: iro.props-get(--dims --label-gap); + } + + @include iro.bem-elem('native') { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + overflow: hidden; + opacity: .0001; + + &:hover { + @include iro.bem-sibling-elem('label') { + color: iro.props-get(--colors --hover --label); + } + + @include iro.bem-sibling-elem('circle') { + background-color: iro.props-get(--colors --hover --circle-border); + } + } + + &:checked { + @include iro.bem-sibling-elem('circle') { + background-color: iro.props-get(--colors --active --circle-border); + + &::after { + transform: translateY(-50%) scale(.44); + } + } + + &:hover { + @include iro.bem-sibling-elem('circle') { + background-color: iro.props-get(--colors --active --hover --circle-border); + } + } + } + + &:disabled { + @include iro.bem-sibling-elem('label') { + color: iro.props-get(--colors --disabled --label); + } + + @include iro.bem-sibling-elem('circle') { + background-color: iro.props-get(--colors --disabled --circle-border); + + &::after { + background-color: iro.props-get(--colors --disabled --circle-bg); + } + } + + &:checked { + @include iro.bem-sibling-elem('circle') { + background-color: iro.props-get(--colors --disabled --active --circle-border); + } + } + } + + @include iro.bem-at-theme('keyboard') { + &:focus { + @include iro.bem-sibling-elem('label') { + color: iro.props-get(--colors --key-focus --label); + } + + @include iro.bem-sibling-elem('circle') { + background-color: iro.props-get(--colors --key-focus --circle-border); + box-shadow: iro.props-get(--colors --key-focus --shadow); + } + } + } + } + } +} diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index ac48216..4201f00 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -39,11 +39,11 @@ --hover: ( --border: iro.props-get(--colors --accent --error, $global: true), - --shadow: iro.props-get(--colors --text-input --error --shadow, null), + --shadow: 0 0 0 0 transparent, ), --focus: ( --border: iro.props-get(--colors --accent --error, $global: true), - --shadow: iro.props-get(--colors --text-input --error --shadow, null), + --shadow: 0 0 0 0 transparent, ), ), --disabled: ( @@ -75,7 +75,7 @@ pointer-events: none; } - @include iro.bem-elem('input') { + @include iro.bem-elem('native') { @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height)); color: iro.props-get(--colors --text); @@ -144,7 +144,7 @@ @include iro.bem-modifier('fill') { padding: 0; - @include iro.bem-elem('input') { + @include iro.bem-elem('native') { padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); } } @@ -152,7 +152,7 @@ @include iro.bem-is('disabled') { background-color: iro.props-get(--colors --disabled --bg); - @include iro.bem-elem('input') { + @include iro.bem-elem('native') { color: iro.props-get(--colors --disabled --text); &::placeholder { diff --git a/tpl/index.pug b/tpl/index.pug index e3918de..93c2057 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -8,6 +8,7 @@ include objects/rule.pug include objects/button.pug include objects/text-field.pug include objects/field-label.pug +include objects/radio.pug mixin box +container(padX=true padY=true inPage=true theme="raised") @@ -199,3 +200,17 @@ html br +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true) +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) + + //----------------------------------------- + + +h1-heading(level='xl')= 'Radio' + +rule(level='medium') + + +box + +radio(name="radio-demo-1")= 'Cats' + +radio(name="radio-demo-1")= 'Dogs' + +radio(name="radio-demo-1" checked=true)= 'Foxes' + br + +radio(name="radio-demo-2" disabled=true)= 'Cats' + +radio(name="radio-demo-2" disabled=true)= 'Dogs' + +radio(name="radio-demo-2" checked=true disabled=true)= 'Foxes' diff --git a/tpl/objects/radio.pug b/tpl/objects/radio.pug new file mode 100644 index 0000000..da6a026 --- /dev/null +++ b/tpl/objects/radio.pug @@ -0,0 +1,6 @@ +mixin radio + label.o-radio + input.o-radio__native(type='radio')&attributes(attributes) + .o-radio__circle + .o-radio__label + block diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug index 9069200..c933b69 100644 --- a/tpl/objects/text-field.pug +++ b/tpl/objects/text-field.pug @@ -9,5 +9,5 @@ mixin text-field } div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) - input(class='o-text-field__input')&attributes(attributes) + input(class='o-text-field__native')&attributes(attributes) .o-text-field__bg -- cgit v1.2.3-54-g00ecf