Added text field

3 files changed, 209 insertions, 2 deletions

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);
+            }
+        }
+    }
+}