From 1cb77f7c4cb27e40e368656b6536bb208d96aef9 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 5 Feb 2022 18:32:31 +0100 Subject: Added text field --- src/objects/_icon.scss | 40 ++++++++++ src/objects/_rule.scss | 2 - src/objects/_text-field.scss | 169 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 209 insertions(+), 2 deletions(-) create mode 100644 src/objects/_icon.scss create mode 100644 src/objects/_text-field.scss (limited to 'src/objects') diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss new file mode 100644 index 0000000..b9e3c0d --- /dev/null +++ b/src/objects/_icon.scss @@ -0,0 +1,40 @@ +@use 'iro-sass/src/index' as iro; + +@include iro.props-namespace('icon') { + @include iro.bem-object(iro.props-namespace()) { + display: inline-block; + width: 1em; + height: 1em; + stroke-width: var(--icon-stroke-width, 1.5px); + stroke-linecap: round; + stroke-linejoin: round; + vertical-align: -.1em; + + @include iro.bem-modifier('block') { + display: block; + } + } + + @keyframes rotate { + 100% { + transform: rotate(360deg); + } + } + + @keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } + } +} diff --git a/src/objects/_rule.scss b/src/objects/_rule.scss index 74987da..bfd1240 100644 --- a/src/objects/_rule.scss +++ b/src/objects/_rule.scss @@ -1,6 +1,4 @@ @use 'iro-sass/src/index' as iro; -@use '../vars'; -@use '../mixins/typography'; @include iro.props-namespace('rule') { @include iro.props-store(( diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss new file mode 100644 index 0000000..f2c3678 --- /dev/null +++ b/src/objects/_text-field.scss @@ -0,0 +1,169 @@ +@use 'iro-sass/src/index' as iro; +@use '../vars'; +@use '../mixins/typography'; + +@include iro.props-namespace('text-field') { + @include iro.props-store(( + --dims: ( + --padding-x: .6rem, + --padding-y: .5rem, + --border-width: iro.props-get(--dims --border-width --thin, $global: true), + --border-radius: 2px, + + --focus: ( + --border-width: iro.props-get(--dims --border-width --medium, $global: true), + ) + ), + --colors: ( + --bg: iro.props-get(--colors --bg-hi2, $global: true), + --placeholder: iro.props-get(--colors --fg-hi2, $global: true), + --text: iro.props-get(--colors --fg, $global: true), + --border: iro.props-get(--colors --obj-lo, $global: true), + --shadow: 0 0 0 0 transparent, + + --hover: ( + --border: iro.props-get(--colors --fg-hi2, $global: true), + --shadow: 0 0 0 0 transparent, + ), + --focus: ( + --border: iro.props-get(--colors --accent --primary, $global: true), + --shadow: 0 0 0 0 transparent, + ), + --key-focus: ( + --border: iro.props-get(--colors --focus --fill, $global: true), + --shadow: iro.props-get(--colors --focus --shadow, $global: true), + ), + --error: ( + --border: iro.props-get(--colors --accent --error-hi, $global: true), + --shadow: 0 0 0 0 transparent, + + --hover: ( + --border: iro.props-get(--colors --accent --error, $global: true), + --shadow: iro.props-get(--colors --text-input --error --shadow, null), + ), + --focus: ( + --border: iro.props-get(--colors --accent --error, $global: true), + --shadow: iro.props-get(--colors --text-input --error --shadow, null), + ), + ), + --disabled: ( + --bg: iro.props-get(--colors --obj-hi, $global: true), + --placeholder: iro.props-get(--colors --fg-hi3, $global: true), + --text: iro.props-get(--colors --fg-hi3, $global: true), + --border: iro.props-get(--colors --obj-hi, $global: true), + --shadow: 0 0 0 0 transparent, + ), + ), + )); + + @include iro.bem-object(iro.props-namespace()) { + position: relative; + min-width: 0; + padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); + background-color: iro.props-get(--colors --bg); + + @include iro.bem-elem('bg') { + display: block; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border: iro.props-get(--dims --border-width) solid iro.props-get(--colors --border); + border-radius: iro.props-get(--dims --border-radius); + box-shadow: iro.props-get(--colors --shadow); + pointer-events: none; + } + + @include iro.bem-elem('input') { + @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height)); + + display: block; + color: iro.props-get(--colors --text); + resize: none; + + &::placeholder { + opacity: 1; + color: iro.props-get(--colors --placeholder); + font-style: italic; + } + + &:hover { + @include iro.bem-sibling-elem('bg') { + border-color: iro.props-get(--colors --hover --border); + box-shadow: iro.props-get(--colors --hover --shadow); + } + } + + &:focus { + outline: 0; + + @include iro.bem-sibling-elem('bg') { + $offset: calc(iro.props-get(--dims --border-width) - iro.props-get(--dims --focus --border-width)); + + top: $offset; + right: $offset; + bottom: $offset; + left: $offset; + border: iro.props-get(--dims --focus --border-width) solid iro.props-get(--colors --focus --border); + border-radius: calc(iro.props-get(--dims --border-radius) - $offset); + box-shadow: iro.props-get(--colors --focus --shadow); + } + } + + &:invalid { + @include iro.bem-sibling-elem('bg') { + border-color: iro.props-get(--colors --error --border); + box-shadow: iro.props-get(--colors --error --shadow); + } + + &:hover { + @include iro.bem-sibling-elem('bg') { + border-color: iro.props-get(--colors --error --hover --border); + box-shadow: iro.props-get(--colors --error --hover --shadow); + } + } + + &:focus { + @include iro.bem-sibling-elem('bg') { + border-color: iro.props-get(--colors --error --focus --border); + box-shadow: iro.props-get(--colors --error --focus --shadow); + } + } + } + + @include iro.bem-at-theme('keyboard') { + &:focus { + @include iro.bem-sibling-elem('bg') { + border-color: iro.props-get(--colors --key-focus --border); + box-shadow: iro.props-get(--colors --key-focus --shadow); + } + } + } + } + + @include iro.bem-modifier('fill') { + padding: 0; + + @include iro.bem-elem('input') { + padding: iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x); + } + } + + @include iro.bem-is('disabled') { + background-color: iro.props-get(--colors --disabled --bg); + + @include iro.bem-elem('input') { + color: iro.props-get(--colors --disabled --text); + + &::placeholder { + color: iro.props-get(--colors --disabled --placeholder); + } + } + + @include iro.bem-elem('bg') { + border-color: iro.props-get(--colors --disabled --border); + } + } + } +} -- cgit v1.2.3-70-g09d2