Added radio

7 files changed, 183 insertions, 8 deletions

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