#6: Working on forms

dist/css/site.css

@@ -3502,6 +3502,11 @@
   padding-right: 0.5em;
 }
 
+#k-ui-container input[type="text"],
+#k-ui-container input[type="search"] {
+  min-height: 32px;
+}
+
 #k-ui-container .k-inline-list {
   margin: 0;
   padding: 0;

src/scss/site/core/_core.scss

@@ -55,6 +55,7 @@
   @import "../molecules/card";
   @import "../molecules/flag-object";
   @import "../molecules/inline-list";
+  @import "../molecules/input";
   @import "../molecules/label";
   @import "../molecules/list";
   @import "../molecules/pagination";

src/scss/site/molecules/_input.scss

@@ -0,0 +1,74 @@
+@if ($k-site-molecules == true and $k-site-molecule-input != false) or $k-site-molecule-input == true {
+
+  /* Form elements
+     ========================================================================== */
+
+  input[type=text],
+  input[type=number],
+  input[type=search],
+  input[type=tel],
+  input[type=color],
+  input[type=password],
+  input[type=email],
+  input[type=url],
+  input[type=date],
+  input[type=month],
+  input[type=time],
+  input[type=datetime],
+  input[type=datetime-local],
+  input[type=week],
+  textarea {
+    padding: $padding-base-vertical $padding-base-horizontal;
+    display: inline-block;
+    border: 1px solid $input-border;
+    box-shadow: inset 0 1px 3px #ddd;
+    font-size: $font-size-base;
+    border-radius: $input-border-radius;
+    color: $input-color;
+    height: $input-height-base;
+    line-height: $k-line-height;
+    background: $input-bg;
+    vertical-align: middle;
+    box-sizing: border-box !important;
+    width: 100%;
+    margin: 0;
+
+    &:focus {
+      outline: 0;
+      border-color: $input-border-focus;
+    }
+
+    &[disabled] {
+      cursor: $cursor-disabled;
+      background-color: $input-bg-disabled;
+      color: $input-color;
+    }
+  }
+
+  input[type=file],
+  input[type=radio],
+  input[type=checkbox] {
+    &:focus {
+      outline: $input-border-focus auto 1px
+    }
+  }
+
+  input[readonly],
+  textarea[readonly] {
+    cursor: $cursor-disabled;
+    background-color: $input-bg-disabled;
+    color: $input-color;
+  }
+
+  input:focus:invalid,
+  textarea:focus:invalid {
+    color: $state-danger-text;
+    border-color: $state-danger-text;
+  }
+
+  input[type=file]:focus:invalid:focus,
+  input[type=radio]:focus:invalid:focus,
+  input[type=checkbox]:focus:invalid:focus {
+    outline-color: $state-danger-text;
+  }
+}

src/scss/site/molecules/_list.scss

@@ -52,7 +52,7 @@
       }
 
       &:first-child {
-        margin-top: 0.25em;
+        margin-top: 0.5em;
       }
 
       &:last-child {

src/scss/site/tools/_variables.scss

@@ -12,6 +12,7 @@ $k-site-molecule-card:                                inherit !default;
 $k-site-molecule-icon:                                inherit !default;
 $k-site-molecule-flag-object:                         inherit !default;
 $k-site-molecule-inline-list:                         inherit !default;
+$k-site-molecule-input:                               inherit !default;
 $k-site-molecule-label:                               inherit !default;
 $k-site-molecule-list:                                inherit !default;
 $k-site-molecule-pagination:                          inherit !default;