rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #19121 from twbs/v4-form-sizing

Browse Source 
v4: Updated form and button sizing
This commit is contained in:
Mark Otto 2016-02-07 23:35:45 -08:00
commit e8b6e5fc69
5 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
scss/_buttons.scss
View File

@ -7,13 +7,14 @@
.btn { .btn {
display: inline-block; display: inline-block;
font-weight: $btn-font-weight; font-weight: $btn-font-weight;
line-height: $btn-line-height;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
border: $input-btn-border-width solid transparent; border: $input-btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height-base, $btn-border-radius); @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
@include transition(all .2s ease-in-out); @include transition(all .2s ease-in-out);
&, &,
@ -143,11 +144,11 @@ fieldset[disabled] a.btn {
.btn-lg { .btn-lg {
// line-height: ensure even-numbered height of button next to large input // line-height: ensure even-numbered height of button next to large input
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg); @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius-lg);
} }
.btn-sm { .btn-sm {
// line-height: ensure proper height of button next to small input // line-height: ensure proper height of button next to small input
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm); @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
} }

5
scss/_forms.scss
View File

@ -11,6 +11,7 @@
// height: $input-height; // height: $input-height;
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
font-size: $font-size-base; font-size: $font-size-base;
line-height: $input-line-height;
color: $input-color; color: $input-color;
background-color: $input-bg; background-color: $input-bg;
// Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214. // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
@ -141,18 +142,14 @@ input[type="month"] {
// issue documented in https://github.com/twbs/bootstrap/issues/15074. // issue documented in https://github.com/twbs/bootstrap/issues/15074.
.form-control-sm { .form-control-sm {
// height: $input-height-sm;
padding: $input-padding-y-sm $input-padding-x-sm; padding: $input-padding-y-sm $input-padding-x-sm;
font-size: $font-size-sm; font-size: $font-size-sm;
line-height: $line-height-sm;
@include border-radius($input-border-radius-sm); @include border-radius($input-border-radius-sm);
} }
.form-control-lg { .form-control-lg {
// height: $input-height-lg;
padding: $input-padding-y-lg $input-padding-x-lg; padding: $input-padding-y-lg $input-padding-x-lg;
font-size: $font-size-lg; font-size: $font-size-lg;
line-height: $line-height-lg;
@include border-radius($input-border-radius-lg); @include border-radius($input-border-radius-lg);
} }

2
scss/_input-group.scss
View File

@ -88,7 +88,7 @@
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
font-size: $font-size-base; font-size: $font-size-base;
font-weight: normal; font-weight: normal;
line-height: 1.5; line-height: $input-line-height;
color: $input-color; color: $input-color;
text-align: center; text-align: center;
background-color: $input-group-addon-bg; background-color: $input-group-addon-bg;

16
scss/_variables.scss
View File

@ -252,7 +252,8 @@ $table-border-color: $gray-lighter !default;
// For each of Bootstrap's buttons, define text, background and border color. // For each of Bootstrap's buttons, define text, background and border color.
$btn-padding-x: 1rem !default; $btn-padding-x: 1rem !default;
$btn-padding-y: .375rem !default; $btn-padding-y: .5rem !default;
$btn-line-height: 1.25 !default;
$btn-font-weight: normal !default; $btn-font-weight: normal !default;
$btn-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default; $btn-box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !default;
$btn-active-box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !default; $btn-active-box-shadow: inset 0 3px 5px rgba(0,0,0,.125) !default;
@ -283,10 +284,10 @@ $btn-danger-border: $btn-danger-bg !default;
$btn-link-disabled-color: $gray-light !default; $btn-link-disabled-color: $gray-light !default;
$btn-padding-x-sm: .75rem !default; $btn-padding-x-sm: .5rem !default;
$btn-padding-y-sm: .25rem !default; $btn-padding-y-sm: .25rem !default;
$btn-padding-x-lg: 1.25rem !default; $btn-padding-x-lg: 1.5rem !default;
$btn-padding-y-lg: .75rem !default; $btn-padding-y-lg: .75rem !default;
$btn-block-spacing-y: 5px !default; $btn-block-spacing-y: 5px !default;
@ -304,7 +305,8 @@ $btn-border-radius-sm: $border-radius-sm !default;
// Forms // Forms
$input-padding-x: .75rem !default; $input-padding-x: .75rem !default;
$input-padding-y: .375rem !default; $input-padding-y: .5rem !default;
$input-line-height: 1.25 !default;
$input-bg: #fff !default; $input-bg: #fff !default;
$input-bg-disabled: $gray-lighter !default; $input-bg-disabled: $gray-lighter !default;
@ -323,10 +325,10 @@ $input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: #999 !default; $input-color-placeholder: #999 !default;
$input-padding-x-sm: .75rem !default; $input-padding-x-sm: .5rem !default;
$input-padding-y-sm: .275rem !default; $input-padding-y-sm: .25rem !default;
$input-padding-x-lg: 1.25rem !default; $input-padding-x-lg: 1.5rem !default;
$input-padding-y-lg: .75rem !default; $input-padding-y-lg: .75rem !default;
$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default; $input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default;

2
scss/mixins/_buttons.scss
View File

@ -92,7 +92,7 @@
} }
// Button sizes // Button sizes
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
padding: $padding-y $padding-x; padding: $padding-y $padding-x;
font-size: $font-size; font-size: $font-size;
@include border-radius($border-radius); @include border-radius($border-radius);