slate: fix input and input-addon-group borders, closes #556

slate/_bootswatch.scss

@@ -208,8 +208,8 @@ textarea {
   }
 
   .input-group-addon {
-    background-color: $body-bg;
-    border: none;
+    background-color: $gray-dark;
+    border-color: $input-group-addon-border-color;
   }
 }
 
@@ -234,8 +234,8 @@ textarea {
   }
 
   .input-group-addon {
-    background-color: $body-bg;
-    border: none;
+    background-color: $gray-dark;
+    border-color: $input-group-addon-border-color;
   }
 }
 
@@ -260,8 +260,8 @@ textarea {
   }
 
   .input-group-addon {
-    background-color: $body-bg;
-    border: none;
+    background-color: $gray-dark;
+    border-color: $input-group-addon-border-color;
   }
 }
 
@@ -270,9 +270,9 @@ legend {
 }
 
 .input-group-addon {
-  border-color: rgba(0, 0, 0, 0.6);
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+  background-color: $gray-dark;
   @include btn-shadow($btn-default-bg);
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
   color: $btn-default-color;
 }
 

slate/_variables.scss

@@ -189,7 +189,7 @@ $input-bg-disabled:              $gray-lighter !default;
 //** Text color for `<input>`s
 $input-color:                    $gray-darker !default;
 //** `<input>` border color
-$input-border:                   #ccc !default;
+$input-border:                   #000 !default;
 
 // TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
 //** Default `.form-control` border radius
@@ -222,7 +222,7 @@ $legend-border-color:            darken($gray-darker, 5%) !default;
 //** Background color for textual input addons
 $input-group-addon-bg:           $gray-lighter !default;
 //** Border color for textual input addons
-$input-group-addon-border-color: $input-border !default;
+$input-group-addon-border-color: rgba(0, 0, 0, 0.6) !default;
 
 //** Disabled cursor for form controls and buttons.
 $cursor-disabled:                not-allowed !default;

slate/bootstrap.css

@@ -2561,7 +2561,7 @@ output {
   color: #272b30;
   background-color: #ffffff;
   background-image: none;
-  border: 1px solid #cccccc;
+  border: 1px solid #000000;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@@ -3909,7 +3909,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   color: #272b30;
   text-align: center;
   background-color: #999999;
-  border: 1px solid #cccccc;
+  border: 1px solid rgba(0, 0, 0, 0.6);
   border-radius: 4px;
 }
 .input-group-addon.input-sm {
@@ -7013,8 +7013,8 @@ textarea {
   border-color: #f89406;
 }
 .has-warning .input-group-addon {
-  background-color: #272b30;
-  border: none;
+  background-color: #3a3f44;
+  border-color: rgba(0, 0, 0, 0.6);
 }
 .has-error .help-block,
 .has-error .control-label,
@@ -7034,8 +7034,8 @@ textarea {
   border-color: #ee5f5b;
 }
 .has-error .input-group-addon {
-  background-color: #272b30;
-  border: none;
+  background-color: #3a3f44;
+  border-color: rgba(0, 0, 0, 0.6);
 }
 .has-success .help-block,
 .has-success .control-label,
@@ -7055,15 +7055,14 @@ textarea {
   border-color: #62c462;
 }
 .has-success .input-group-addon {
-  background-color: #272b30;
-  border: none;
+  background-color: #3a3f44;
+  border-color: rgba(0, 0, 0, 0.6);
 }
 legend {
   color: #fff;
 }
 .input-group-addon {
-  border-color: rgba(0, 0, 0, 0.6);
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+  background-color: #3a3f44;
   background-image: -webkit-linear-gradient(#484e55, #3a3f44 60%, #313539);
   background-image: -o-linear-gradient(#484e55, #3a3f44 60%, #313539);
   background-image: -webkit-gradient(linear, left top, left bottom, from(#484e55), color-stop(60%, #3a3f44), to(#313539));
@@ -7072,6 +7071,7 @@ legend {
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff484e55', endColorstr='#ff313539', GradientType=0);
   -webkit-filter: none;
           filter: none;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
   color: #ffffff;
 }
 .nav .open > a,

slate/bootswatch.less

@@ -208,8 +208,8 @@ textarea {
   }
 
   .input-group-addon {
-    background-color: @body-bg;
-    border: none;
+    background-color: @gray-dark;
+    border-color: @input-group-addon-border-color;
   }
 }
 
@@ -234,8 +234,8 @@ textarea {
   }
 
   .input-group-addon {
-    background-color: @body-bg;
-    border: none;
+    background-color: @gray-dark;
+    border-color: @input-group-addon-border-color;
   }
 }
 
@@ -260,8 +260,8 @@ textarea {
   }
 
   .input-group-addon {
-    background-color: @body-bg;
-    border: none;
+    background-color: @gray-dark;
+    border-color: @input-group-addon-border-color;
   }
 }
 
@@ -270,9 +270,9 @@ legend {
 }
 
 .input-group-addon {
-  border-color: rgba(0, 0, 0, 0.6);
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
+  background-color: @gray-dark;
   .btn-shadow(@btn-default-bg);
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
   color: @btn-default-color;
 }
 

slate/variables.less

@@ -188,7 +188,7 @@
 //** Text color for `<input>`s
 @input-color:                    @gray-darker;
 //** `<input>` border color
-@input-border:                   #ccc;
+@input-border:                   #000;
 
 // TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
 //** Default `.form-control` border radius
@@ -221,7 +221,7 @@
 //** Background color for textual input addons
 @input-group-addon-bg:           @gray-lighter;
 //** Border color for textual input addons
-@input-group-addon-border-color: @input-border;
+@input-group-addon-border-color: rgba(0, 0, 0, 0.6);
 
 //** Disabled cursor for form controls and buttons.
 @cursor-disabled:                not-allowed;