form.scss in titon-toolkit-1.0.0.rc1

- old
+ new

@@ -46,88 +46,128 @@
 }
 
 //-------------------- Inputs --------------------//
 
 .input,
-.input-static {
+.input-static,
+.input-radio,
+.input-checkbox {
     @include reset-inline-block;
     border: 1px solid $gray-dark;
     font-size: $medium-size;
     padding: $medium-padding;
 }
 
 .input {
     background: $gray-lightest;
     border-radius: $round;
-    @include transition(all .3s);
+    @include transition(all $default-transition);
 
     &:hover { border-color: $gray-darkest; }
-    &:focus { border-color: $info; box-shadow: 0 0 5px $info-light; outline: none; }
 
-    @include disabled-state {
-        cursor: not-allowed;
-        color: $gray-darkest;
-        border-color: $gray;
+    &:focus {
+        border-color: $info;
+        box-shadow: 0 0 5px $info-light;
+        outline: none;
     }
 
     &[readonly] {
         color: $gray-darkest;
         border: 1px solid $gray-dark;
         box-shadow: none;
     }
+
+    @include disabled-state {
+        cursor: not-allowed;
+        color: $gray-darkest;
+        border-color: $gray;
+    }
 }
 
-.input-static {
+.input-static,
+.input-radio,
+.input-checkbox {
     background: transparent;
     border-color: transparent;
     padding-left: 0;
     padding-right: 0;
 }
 
-select.input { padding: $medium-padding - .05; } // fixes vertical alignment
-select.input[multiple] { min-height: 150px; max-height: 500px; }
+.input-radio,
+.input-checkbox {
+    padding: 0;
 
-textarea.input {
-    line-height: 135%;
-    min-height: 150px;
-}
-
-.radio,
-.checkbox {
-    display: inline-block;
-    vertical-align: middle;
-    cursor: pointer;
-
     input[type="checkbox"],
     input[type="radio"] {
         vertical-align: middle;
         position: relative;
         top: -1px;
-        margin-right: 3px;
+        margin-right: 5px;
     }
 }
 
+select.input {
+    -webkit-appearance: none;
+    padding: $medium-padding - .05rem; // fixes vertical alignment
+}
+
+select.input[multiple] {
+    min-height: 150px;
+    max-height: 500px;
+}
+
+textarea.input {
+    line-height: 135%;
+    min-height: 150px;
+}
+
 //-------------------- Fields, Labels --------------------//
 
 .field {
     margin-bottom: $margin;
 
     &.is-required {
         .field-label { font-weight: bold; }
     }
+}
 
-    @include field-style;
+.field:not(.is-disabled) {
+    &.is-error {
+        .input {
+            border-color: $error;
+
+            &:focus { box-shadow: 0 0 5px $error-light; }
+        }
+
+        .input-radio,
+        .input-checkbox {
+            color: $error-dark;
+        }
+    }
+
+    &.is-success {
+        .input {
+            border-color: $success;
+
+            &:focus { box-shadow: 0 0 5px $success-light; }
+        }
+
+        .input-radio,
+        .input-checkbox {
+            color: $success-dark;
+        }
+    }
 }
 
 .field-label {
     display: block;
     vertical-align: middle;
-    margin-bottom: 7px;
+    margin-bottom: .5em;
 }
 
 .field-help {
-    margin-top: 7px;
+    margin-top: .5em;
     font-size: $small-size;
 }
 
 .form-actions {
     text-align: center;
@@ -151,12 +191,18 @@
     .field,
     .field-label,
     .form-actions {
         display: inline-block;
         vertical-align: middle;
+        line-height: normal;
         margin-right: $margin;
         margin-bottom: $margin / 2;
     }
 
     .field-label { margin: 0 ($margin / 2) 0 0; }
     .field-help { display: none; }
+
+    .input-radio,
+    .input-checkbox {
+        padding: $medium-padding 0;
+    }
 }
\ No newline at end of file