_forms.scss in spectre_scss-0.5.0.0

- old
+ new

@@ -20,14 +20,16 @@
   display: block;
   line-height: $line-height;
   padding: $control-padding-y + $border-width 0;
 
   &.label-sm {
+    font-size: $font-size-sm;
     padding: $control-padding-y-sm + $border-width 0;
   }
 
   &.label-lg {
+    font-size: $font-size-lg;
     padding: $control-padding-y-lg + $border-width 0;
   }
 }
 
 // Form element: Input
@@ -190,11 +192,13 @@
 .form-checkbox,
 .form-radio,
 .form-switch {
   display: inline-block;
   line-height: $line-height;
-  padding: (($control-size-sm - $line-height) / 2)  ($control-icon-size + $control-padding-x);
+  margin: ($control-size - $control-size-sm) / 2 0;
+  min-height: 1.2rem;
+  padding: (($control-size-sm - $line-height) / 2) $control-padding-x (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);
   position: relative;
 
   input {
     clip: rect(0, 0, 0, 0);
     height: 1px;
@@ -217,10 +221,21 @@
     border: $border-width solid $border-color-dark;
     cursor: pointer;
     display: inline-block;
     position: absolute;
   }
+
+  // Input checkbox, radio and switch sizes
+  &.input-sm {
+    font-size: $font-size-sm;
+    margin: 0;
+  }
+
+  &.input-lg {
+    font-size: $font-size-lg;
+    margin: ($control-size-lg - $control-size-sm) / 2 0;
+  }
 }
 
 .form-checkbox,
 .form-radio {
   .form-icon {
@@ -347,15 +362,17 @@
     background: $bg-color;
     border: $border-width solid $border-color-dark;
     border-radius: $border-radius;
     line-height: $line-height;
     padding: $control-padding-y $control-padding-x;
+    white-space: nowrap;
 
     &.addon-sm {
       font-size: $font-size-sm;
       padding: $control-padding-y-sm $control-padding-x-sm;
     }
+
     &.addon-lg {
       font-size: $font-size-lg;
       padding: $control-padding-y-lg $control-padding-x-lg;
     }
   }
@@ -502,13 +519,7 @@
 .form-horizontal {
   padding: $layout-spacing 0;
 
   .form-group {
     display: flex;
-  }
-
-  .form-checkbox,
-  .form-radio,
-  .form-switch {
-    margin: ($control-size - $control-size-sm) / 2 0;
   }
 }