From e6049586413f663ae99ec660d6378306833e2223 Mon Sep 17 00:00:00 2001 From: Martijn Cuppens Date: Tue, 18 Sep 2018 14:35:25 +0200 Subject: [PATCH] Variable .btn and .form-control font sizes (#26908) --- scss/_buttons.scss | 6 +++--- scss/_forms.scss | 4 ++-- scss/_variables.scss | 19 ++++++++++++++----- 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 17a94c2bd7..af4f2dbe98 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -13,7 +13,7 @@ user-select: none; background-color: transparent; border: $btn-border-width solid transparent; - @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius); + @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); @include transition($btn-transition); // Share hover and focus styles @@ -109,11 +109,11 @@ fieldset:disabled a.btn { // .btn-lg { - @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg); + @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg); } .btn-sm { - @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); + @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm); } diff --git a/scss/_forms.scss b/scss/_forms.scss index 5530630ed6..cd9a423f7b 100644 --- a/scss/_forms.scss +++ b/scss/_forms.scss @@ -141,7 +141,7 @@ select.form-control { .form-control-sm { height: $input-height-sm; padding: $input-padding-y-sm $input-padding-x-sm; - font-size: $font-size-sm; + font-size: $input-font-size-sm; line-height: $input-line-height-sm; @include border-radius($input-border-radius-sm); } @@ -149,7 +149,7 @@ select.form-control { .form-control-lg { height: $input-height-lg; padding: $input-padding-y-lg $input-padding-x-lg; - font-size: $font-size-lg; + font-size: $input-font-size-lg; line-height: $input-line-height-lg; @include border-radius($input-border-radius-lg); } diff --git a/scss/_variables.scss b/scss/_variables.scss index 05e0a5b21c..bfa1438fa9 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -356,6 +356,7 @@ $table-caption-color: $text-muted !default; $input-btn-padding-y: .375rem !default; $input-btn-padding-x: .75rem !default; +$input-btn-font-size: $font-size-base !default; $input-btn-line-height: $line-height-base !default; $input-btn-focus-width: .2rem !default; @@ -364,10 +365,12 @@ $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-colo $input-btn-padding-y-sm: .25rem !default; $input-btn-padding-x-sm: .5rem !default; +$input-btn-font-size-sm: $font-size-sm !default; $input-btn-line-height-sm: $line-height-sm !default; $input-btn-padding-y-lg: .5rem !default; $input-btn-padding-x-lg: 1rem !default; +$input-btn-font-size-lg: $font-size-lg !default; $input-btn-line-height-lg: $line-height-lg !default; $input-btn-border-width: $border-width !default; @@ -379,14 +382,17 @@ $input-btn-border-width: $border-width !default; $btn-padding-y: $input-btn-padding-y !default; $btn-padding-x: $input-btn-padding-x !default; +$btn-font-size: $input-btn-font-size !default; $btn-line-height: $input-btn-line-height !default; $btn-padding-y-sm: $input-btn-padding-y-sm !default; $btn-padding-x-sm: $input-btn-padding-x-sm !default; +$btn-font-size-sm: $input-btn-font-size-sm !default; $btn-line-height-sm: $input-btn-line-height-sm !default; $btn-padding-y-lg: $input-btn-padding-y-lg !default; $btn-padding-x-lg: $input-btn-padding-x-lg !default; +$btn-font-size-lg: $input-btn-font-size-lg !default; $btn-line-height-lg: $input-btn-line-height-lg !default; $btn-border-width: $input-btn-border-width !default; @@ -416,14 +422,17 @@ $label-margin-bottom: .5rem !default; $input-padding-y: $input-btn-padding-y !default; $input-padding-x: $input-btn-padding-x !default; +$input-font-size: $input-btn-font-size !default; $input-line-height: $input-btn-line-height !default; $input-padding-y-sm: $input-btn-padding-y-sm !default; $input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-font-size-sm: $input-btn-font-size-sm !default; $input-line-height-sm: $input-btn-line-height-sm !default; $input-padding-y-lg: $input-btn-padding-y-lg !default; $input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-font-size-lg: $input-btn-font-size-lg !default; $input-line-height-lg: $input-btn-line-height-lg !default; $input-bg: $white !default; @@ -449,13 +458,13 @@ $input-plaintext-color: $body-color !default; $input-height-border: $input-border-width * 2 !default; -$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; +$input-height-inner: ($input-btn-font-size * $input-btn-line-height) + ($input-btn-padding-y * 2) !default; $input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; -$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; +$input-height-inner-sm: ($input-btn-font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default; $input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default; -$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; +$input-height-inner-lg: ($input-btn-font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default; $input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default; $input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default; @@ -535,12 +544,12 @@ $custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width rgba($custo $custom-select-padding-y-sm: $input-btn-padding-y-sm !default; $custom-select-padding-x-sm: $input-btn-padding-x-sm !default; -$custom-select-font-size-sm: $font-size-sm !default; +$custom-select-font-size-sm: $input-btn-font-size-sm !default; $custom-select-height-sm: $input-height-sm !default; $custom-select-padding-y-lg: $input-btn-padding-y-lg !default; $custom-select-padding-x-lg: $input-btn-padding-x-lg !default; -$custom-select-font-size-lg: $font-size-lg !default; +$custom-select-font-size-lg: $input-btn-font-size-lg !default; $custom-select-height-lg: $input-height-lg !default; $custom-range-track-width: 100% !default;