Add Buttons and Forms variables

README.md

@@ -59,7 +59,7 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
 - [Empty states](https://picturepan2.github.io/spectre/layout.html#empty) - empty states/blank slates for first time use, empty data and error screens
 
 #### Components
-- [Accordions](https://picturepan2.github.io/spectre/experimentals.html#accordions) - used to toggle sections of content
+- [Accordions](https://picturepan2.github.io/spectre/components.html#accordions) - used to toggle sections of content
 - [Autocomplete](https://picturepan2.github.io/spectre/components.html#autocomplete) - form component provides suggestions while you type
 - [Avatars](https://picturepan2.github.io/spectre/components.html#avatars) - user profile pictures or name initials rendered avatar
 - [Badges](https://picturepan2.github.io/spectre/components.html#badges) - unread number indicators

docs/dist/spectre.css

@@ -859,9 +859,9 @@ textarea.form-input {
   padding: 2px 4px;
 }
 .form-select:not([multiple]) {
-  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 7.5px center / 8px 10px;
+  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23667189' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 7px center / 8px 10px;
   height: 32px;
-  padding-right: 24px;
+  padding-right: 22px;
 }
 .form-select:focus {
   border-color: #5764c6;
@@ -873,12 +873,12 @@ textarea.form-input {
 .form-select.select-sm {
   font-size: 12px;
   height: 24px;
-  padding: 1px 20px 1px 6px;
+  padding: 1px 22px 1px 8px;
 }
 .form-select.select-lg {
   font-size: 16px;
   height: 40px;
-  padding: 9px 24px 9px 8px;
+  padding: 9px 22px 9px 8px;
 }
 .has-success .form-input,
 .has-success .form-select,
@@ -919,31 +919,33 @@ textarea.form-input {
 }
 .has-icon-left .form-icon,
 .has-icon-right .form-icon {
-  margin: 0 8px;
-  min-width: 14px;
+  height: 14px;
+  margin: 0 5px;
   position: absolute;
   top: 50%;
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
+  width: 14px;
 }
 .has-icon-left .form-icon {
-  left: 0;
+  left: 1px;
 }
 .has-icon-left .form-input {
-  padding-left: 30px;
+  padding-left: 24px;
 }
 .has-icon-right .form-icon {
-  right: 0;
+  right: 1px;
 }
 .has-icon-right .form-input {
-  padding-right: 30px;
+  padding-right: 24px;
 }
 .form-checkbox,
 .form-radio,
 .form-switch {
   display: inline-block;
   line-height: 20px;
+  padding: 2px 22px;
   position: relative;
 }
 .form-checkbox input,
@@ -977,10 +979,6 @@ textarea.form-input {
   position: absolute;
   transition: all .2s ease;
 }
-.form-checkbox,
-.form-radio {
-  padding: 2px 20px;
-}
 .form-checkbox .form-icon,
 .form-radio .form-icon {
   background: #fff;
@@ -1044,7 +1042,7 @@ textarea.form-input {
   width: 4px;
 }
 .form-switch {
-  padding: 2px 20px 2px 36px;
+  padding-left: 40px;
 }
 .form-switch .form-icon {
   background: #e7e9ed;
@@ -1053,7 +1051,7 @@ textarea.form-input {
   height: 18px;
   left: 0;
   top: 3px;
-  width: 30px;
+  width: 32px;
 }
 .form-switch .form-icon::before {
   background: #fff;
@@ -1068,7 +1066,7 @@ textarea.form-input {
   width: 16px;
 }
 .form-switch input:checked + .form-icon::before {
-  left: 12px;
+  left: 14px;
 }
 .form-switch input:active + .form-icon::before {
   background: #f8f9fa;
@@ -1167,7 +1165,7 @@ input.disabled + .form-icon {
 .form-horizontal .form-checkbox,
 .form-horizontal .form-radio,
 .form-horizontal .form-switch {
-  margin: 16px 0;
+  margin: 4px 0;
 }
 .label {
   background: #f8f9fa;
@@ -2925,7 +2923,7 @@ a.text-error:hover {
 }
 .loading {
   color: transparent !important;
-  min-height: 16px;
+  min-height: 14px;
   pointer-events: none;
   position: relative;
 }
@@ -2938,13 +2936,13 @@ a.text-error:hover {
   border-top-color: transparent;
   content: "";
   display: block;
-  height: 16px;
+  height: 14px;
   left: 50%;
-  margin-left: -8px;
-  margin-top: -8px;
+  margin-left: -7px;
+  margin-top: -7px;
   position: absolute;
   top: 50%;
-  width: 16px;
+  width: 14px;
   z-index: 1;
 }
 .clearfix::after,

src/buttons.less

@@ -9,10 +9,10 @@
   cursor: pointer;
   display: inline-block;
   font-size: @font-size;
-  height: @unit-8;
+  height: @control-size;
   line-height: @line-height;
   outline: none;
-  padding: 5px 8px;
+  padding: @control-padding-v @control-padding-h;
   text-align: center;
   text-decoration: none;
   user-select: none;
@@ -90,14 +90,14 @@
   // Button Sizes
   &.btn-sm {
     font-size: @font-size-sm;
-    height: @unit-6;
-    padding: 1px 8px;
+    height: @control-size-sm;
+    padding: @control-padding-v-sm @control-padding-h;
   }
 
   &.btn-lg {
     font-size: @font-size-lg;
-    height: @unit-10;
-    padding: 9px 8px;
+    height: @control-size-lg;
+    padding: @control-padding-v-lg @control-padding-h;
   }
 
   // Button Block
@@ -108,16 +108,16 @@
 
   // Button Action
   &.btn-action {
-    width: @unit-8;
+    width: @control-size;
     padding-left: 0;
     padding-right: 0;
 
     &.btn-sm {
-      width: @unit-6;
+      width: @control-size-sm;
     }
 
     &.btn-lg {
-      width: @unit-10;
+      width: @control-size-lg;
     }
   }