Update

4 files changed, 58 insertions, 283 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index 2fb865d..c63e9f1 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -4,19 +4,11 @@
 include layouts/container.pug
 include objects/heading.pug
 include objects/rule.pug
-include objects/button.pug
-include objects/icon.pug
-include objects/text-input.pug
-include objects/field-label.pug
-include objects/radio.pug
-include objects/checkbox.pug
-include objects/switch.pug
-include objects/form.pug
-include objects/action-button.pug
 
 mixin box
-    +container(padH=true padV=true theme='box' inPage=true)
-        block
+    .t-raised
+        +container(padH=true padV=true inPage=true themed=true)
+            block
 
 
 doctype html
@@ -25,6 +17,8 @@ html
         meta(charset='utf-8')
         meta(name='viewport' content='width=device-width, initial-scale=1')
         title iro-design
+        link(rel="stylesheet", href="style.css")
+        script(src="script.js") 
 
     body(class='t-lighter')
         +container(padH=true padV=true narrow=true)
@@ -64,268 +58,3 @@ html
                 +rule(level='strong')= 'Strong'
                 +rule(level='medium')= 'Medium'
                 +rule(level='faint')= 'Faint'
-
-            //-----------------------------------------
-
-            +h1-heading(level='xl')= 'Button'
-            +rule(level='medium')
-
-            +box
-                +a-button(variant='primary')= 'Button'
-                = ' '
-                +a-button(variant='primary' disabled=true)= 'Button'
-                br
-                br
-                +a-button(variant='secondary')= 'Button'
-                = ' '
-                +a-button(variant='secondary' disabled=true)= 'Button'
-
-            +box
-                +a-button(variant='primary' quiet=true)= 'Button'
-                = ' '
-                +a-button(variant='primary' quiet=true disabled=true)= 'Button'
-                br
-                br
-                +a-button(variant='secondary' quiet=true)= 'Button'
-                = ' '
-                +a-button(variant='secondary' quiet=true disabled=true)= 'Button'
-
-            //-----------------------------------------
-
-            +h1-heading(level='xl')= 'Text input'
-            +rule(level='medium')
-
-            +box
-                +text-input(placeholder='Placeholder')
-                br
-                br
-                +text-input(value='Just landed in L.A.')
-                br
-                br
-                +text-input(value='Readonly' readonly=true)
-                br
-                br
-                +text-input(value='Incorrect input' pattern='a+' required=true)
-                br
-                br
-                +text-input(placeholder='Placeholder' disabled=true)
-                br
-                br
-                +text-input(value='Just landed in L.A.' disabled=true)
-                br
-                br
-                +text-input(value='Readonly' readonly=true disabled=true)
-                br
-                br
-                +text-input(value='Incorrect input' pattern='a+' required=true disabled=true)
-
-            //-----------------------------------------
-
-            +h1-heading(level='xl')= 'Field label'
-            +rule(level='medium')
-
-            +box
-                +field-label('First name')
-                    +text-input(placeholder='Placeholder')
-                br
-                br
-                +field-label('Password', 'At least 6 characters required')
-                    +text-input(placeholder='Placeholder' type='password')
-                br
-                br
-                +field-label('Password', 'At least 6 characters required')(invalid=true)
-                    +text-input(placeholder='Placeholder' type='password' invalid=true)
-                br
-                br
-                +field-label('First name')(disabled=true)
-                    +text-input(placeholder='Placeholder' disabled=true)
-                br
-                br
-                +field-label('Password', 'At least 6 characters required')(disabled=true)
-                    +text-input(placeholder='Placeholder' type='password' disabled=true)
-                br
-                br
-                +field-label('Password', 'At least 6 characters required')(invalid=true disabled=true)
-                    +text-input(placeholder='Placeholder' type='password' invalid=true disabled=true)
-
-            +box
-                +field-label('First name')(align='left' labelWidth='100px')
-                    +text-input(placeholder='Placeholder')
-                br
-                br
-                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px')
-                    +text-input(placeholder='Placeholder' type='password')
-                br
-                br
-                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true)
-                    +text-input(placeholder='Placeholder' type='password' invalid=true)
-                br
-                br
-                +field-label('First name')(align='left' labelWidth='100px' disabled=true)
-                    +text-input(placeholder='Placeholder' disabled=true)
-                br
-                br
-                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true)
-                    +text-input(placeholder='Placeholder' type='password' disabled=true)
-                br
-                br
-                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true)
-                    +text-input(placeholder='Placeholder' type='password' invalid=true disabled=true)
-
-            +box
-                +field-label('First name')(align='right' labelWidth='100px')
-                    +text-input(placeholder='Placeholder')
-                br
-                br
-                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px')
-                    +text-input(placeholder='Placeholder' type='password')
-                br
-                br
-                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true)
-                    +text-input(placeholder='Placeholder' type='password' invalid=true)
-                br
-                br
-                +field-label('First name')(align='right' labelWidth='100px' disabled=true)
-                    +text-input(placeholder='Placeholder' disabled=true)
-                br
-                br
-                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true)
-                    +text-input(placeholder='Placeholder' type='password' disabled=true)
-                br
-                br
-                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true)
-                    +text-input(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'
-
-            //-----------------------------------------
-
-            +h1-heading(level='xl')= 'Checkbox'
-            +rule(level='medium')
-
-            +box
-                +checkbox(indeterminate=true)= 'Cats'
-                +checkbox= 'Dogs'
-                +checkbox(checked=true)= 'Foxes'
-                br
-                +checkbox(indeterminate=true disabled=true)= 'Cats'
-                +checkbox(disabled=true)= 'Dogs'
-                +checkbox(checked=true disabled=true)= 'Foxes'
-
-            //-----------------------------------------
-
-            +h1-heading(level='xl')= 'Switch'
-            +rule(level='medium')
-
-            +box
-                +switch= 'Cats'
-                +switch= 'Dogs'
-                +switch(checked=true)= 'Foxes'
-                br
-                +switch(disabled=true)= 'Cats'
-                +switch(disabled=true)= 'Dogs'
-                +switch(checked=true disabled=true)= 'Foxes'
-
-            //-----------------------------------------
-
-            +h1-heading(level='xl')= 'Form'
-            +rule(level='medium')
-
-            +box
-                +form
-                    +form-item('Username')
-                        +text-input(placeholder='Example: Feuerfuchs')
-
-                    +form-item('Password', 'At least 6 characters, all characters allowed')
-                        +text-input(placeholder='Example: hunter2' type='password')
-
-                    +form-item('Bio')
-                        +text-input(placeholder='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam...')
-
-                    +form-item('Favorite animal')
-                        +radio(name="form-demo-1" checked=true)= 'Foxes'
-                        +radio(name="form-demo-1")= 'Other'
-
-                    +form-item('Notification settings')
-                        +switch= 'In-app notifications'
-                        br
-                        +switch= 'Desktop notifications'
-                        br
-                        +switch= 'Email notifications'
-
-                    +form-item('')
-                        +checkbox= 'I\'ve read and accept the terms and conditions'
-
-                    +form-item('')
-                        +a-button(variant='primary')= 'Register'
-
-            //-----------------------------------------
-
-            +h1-heading(level='xl')= 'Action button'
-            +rule(level='medium')
-
-            +box
-                +a-action-button= 'Idle'
-                = ' '
-                +a-action-button(selected=true)= 'Selected'
-                = ' '
-                +a-action-button(disabled=true)= 'Disabled'
-                = ' '
-                +a-action-button(selected=true disabled=true)= 'Selected + disabled'
-                br
-                br
-                +a-action-button(icon='trash')= 'Idle'
-                = ' '
-                +a-action-button(icon='trash' selected=true)= 'Selected'
-                = ' '
-                +a-action-button(icon='trash' disabled=true)= 'Disabled'
-                = ' '
-                +a-action-button(icon='trash' selected=true disabled=true)= 'Selected + disabled'
-                br
-                br
-                +a-action-button(icon='trash')
-                = ' '
-                +a-action-button(icon='trash' selected=true)
-                = ' '
-                +a-action-button(icon='trash' disabled=true)
-                = ' '
-                +a-action-button(icon='trash' selected=true disabled=true)
-
-            +box
-                +a-action-button(quiet=true )= 'Idle'
-                = ' '
-                +a-action-button(quiet=true selected=true)= 'Selected'
-                = ' '
-                +a-action-button(quiet=true disabled=true)= 'Disabled'
-                = ' '
-                +a-action-button(quiet=true selected=true disabled=true)= 'Selected + disabled'
-                br
-                br
-                +a-action-button(quiet=true icon='trash')= 'Idle'
-                = ' '
-                +a-action-button(quiet=true icon='trash' selected=true)= 'Selected'
-                = ' '
-                +a-action-button(quiet=true icon='trash' disabled=true)= 'Disabled'
-                = ' '
-                +a-action-button(quiet=true icon='trash' selected=true disabled=true)= 'Selected + disabled'
-                br
-                br
-                +a-action-button(quiet=true icon='trash')
-                = ' '
-                +a-action-button(quiet=true icon='trash' selected=true)
-                = ' '
-                +a-action-button(quiet=true icon='trash' disabled=true)
-                = ' '
-                +a-action-button(quiet=true icon='trash' selected=true disabled=true)
diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug
index 75e3b36..9dde2d6 100644
--- a/tpl/layouts/container.pug
+++ b/tpl/layouts/container.pug
@@ -1,13 +1,13 @@
 mixin container
     -
         let classes = {
-            'l-container':           true,
-            'l-container--padH':     attributes.padH,
-            'l-container--padV':     attributes.padV,
-            'l-container--narrow':   attributes.narrow,
-            'l-container--smNarrow': attributes.smNarrow,
-            'l-container--inPage':   attributes.inPage,
-            'l-container--themed':   !!attributes.theme
+            'l-container':            true,
+            'l-container--pad-h':     attributes.padH,
+            'l-container--pad-v':     attributes.padV,
+            'l-container--narrow':    attributes.narrow,
+            'l-container--sm-narrow': attributes.smNarrow,
+            'l-container--in-page':   attributes.inPage,
+            'l-container--themed':    attributes.themed
         }
         if (!!attributes.theme) {
             classes['t-' + attributes.theme] = true
diff --git a/tpl/objects/heading.pug b/tpl/objects/heading.pug
new file mode 100644
index 0000000..546df43
--- /dev/null
+++ b/tpl/objects/heading.pug
@@ -0,0 +1,34 @@
+mixin h1-heading
+    - let classes = ['o-heading', 'o-heading--' + attributes.level]
+    h1(class=classes)
+        block
+
+mixin h2-heading
+    - let classes = ['o-heading', 'o-heading--' + attributes.level]
+    h2(class=classes)
+        block
+
+mixin h3-heading
+    - let classes = ['o-heading', 'o-heading--' + attributes.level]
+    h3(class=classes)
+        block
+
+mixin h4-heading
+    - let classes = ['o-heading', 'o-heading--' + attributes.level]
+    h4(class=classes)
+        block
+
+mixin h5-heading
+    - let classes = ['o-heading', 'o-heading--' + attributes.level]
+    h5(class=classes)
+        block
+
+mixin h6-heading
+    - let classes = ['o-heading', 'o-heading--' + attributes.level]
+    h6(class=classes)
+        block
+
+mixin div-heading
+    - let classes = ['o-heading', 'o-heading--' + attributes.level]
+    div(class=classes)
+        block
diff --git a/tpl/objects/rule.pug b/tpl/objects/rule.pug
new file mode 100644
index 0000000..958ff18
--- /dev/null
+++ b/tpl/objects/rule.pug
@@ -0,0 +1,12 @@
+mixin rule
+    -
+        let classes = {
+            'o-rule':           true,
+            'o-rule--labelled': !!block
+        }
+        classes['o-rule--' + attributes.level] = true
+
+    div(class=classes)
+        if block
+            .o-rule__label
+                block