Custom select styles

darklow · Nov 23, 2016 · 0df8514 · 0df8514
1 parent 6c97382
commit 0df8514
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 16 deletions.
diff --git a/suit/sass/_variables.scss b/suit/sass/_variables.scss
@@ -60,14 +60,21 @@ $nav-padding-horizontal: $grid-gutter-width-base + .75rem;
 //$btn-line-height: $line-height-base;
 //$btn-padding-x: 1.2rem;
 //$btn-padding-y: .35rem;
-$btn-padding-x-md: .85rem;
-$btn-padding-y-md: .35rem;
+$btn-padding-x-sm: .75rem;
+$btn-padding-y-sm: .35rem;
+//$btn-padding-x-md: .85rem;
+//$btn-padding-y-md: .35rem;
 $font-size-md: 0.9375rem;
 //$btn-padding-x-sm: .75rem;
 
 // Inputs
 // --------------------------------------------------
+$input-padding-x-sm: $btn-padding-x-sm;
+$input-padding-y-sm: $btn-padding-y-sm;
 $textarea-line-height: $line-height-base;
+$custom-select-sm-padding-y: $btn-padding-x-sm;
+$custom-select-sm-font-size: $font-size-xs;
+
 //$input-padding-y: $btn-padding-y;
 
 // Tables

diff --git a/suit/sass/components/_buttons.scss b/suit/sass/components/_buttons.scss
@@ -26,7 +26,3 @@
   border-color: transparentize($brand-danger, .25);
   background-color: #fff;
 }
-.btn-md {
-  // line-height: ensure proper height of button next to small input
-  @include button-size($btn-padding-y-md, $btn-padding-x-md, $font-size-md, $btn-border-radius-sm);
-}
diff --git a/suit/sass/components/_forms.scss b/suit/sass/components/_forms.scss
@@ -354,3 +354,7 @@ fieldset {
     background-color: $form-bg;
   }
 }
+.custom-select-sm {
+  $select-border-width: ($border-width * 2);
+  height: calc(#{$input-height} - #{$select-border-width} - 5px);
+}
diff --git a/suit/sass/layout/_content.scss b/suit/sass/layout/_content.scss
@@ -41,9 +41,9 @@ body.change-form {
       > a {
         &:not([class*="btn-"]) {
           @extend .btn-round;
-          @include btn-mixin(info, none, md, round=true);
+          @include btn-mixin(info, none, sm, round=true);
           &.addlink {
-            @include btn-mixin(success, $icon-plus-circle, md, round=true);
+            @include btn-mixin(success, $icon-plus-circle, sm, round=true);
           }
         }
       }