Skip to content

B
bootstrap
Commit 9b1ee315 authored by Mark Otto's avatar Mark Otto
Browse files
Options

nuke the shared padding vars and assign to individual components 

- no real need for everything to be 100% shared
- padding looked and felt too large for inputs but not for buttons
- tying forms and buttons seems fine, but throwing in pagination feels wrong
parent 879114a8
Hide whitespace changes
Inline Side-by-side
Showing with 60 additions and 65 deletions
dist/css/bootstrap.css
View file @ 9b1ee315
......@@ -1859,7 +1859,7 @@ pre code {
.form-control {
display: block;
width: 100%;
padding: .5rem 1rem;
padding: .5rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #55595c;
......@@ -1917,7 +1917,7 @@ fieldset[disabled] .form-control {
}
.form-control-label {
padding: .5625rem 1rem;
padding: .5625rem .75rem;
margin-bottom: 0;
}
......@@ -2069,7 +2069,7 @@ fieldset[disabled] .checkbox label {
.form-control-success,
.form-control-warning,
.form-control-error {
padding-right: 3rem;
padding-right: 2.25rem;
background-repeat: no-repeat;
background-position: center right .65625rem;
-webkit-background-size: 1.70625rem 1.70625rem;
......@@ -2832,13 +2832,6 @@ fieldset[disabled] .btn-link:hover {
border-radius: .2rem;
}
.btn-xs, .btn-group-xs > .btn {
padding: .2rem .5rem;
font-size: .75rem;
line-height: 1.5;
border-radius: .2rem;
}
.btn-block {
display: block;
width: 100%;
......@@ -3262,7 +3255,7 @@ input[type="button"].btn-block {
}
.input-group-addon {
padding: .5rem 1rem;
padding: .5rem .75rem;
font-size: 1rem;
font-weight: normal;
line-height: 1;
......@@ -3282,7 +3275,7 @@ input[type="button"].btn-block {
.input-group-addon.form-control-lg, .input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .input-group-addon.btn {
padding: .75rem 1.5rem;
padding: 1.5rem 1.5rem;
font-size: 1.25rem;
border-radius: .3rem;
}
......@@ -4253,7 +4246,7 @@ input[type="button"].btn-block {
.pagination > li > span {
position: relative;
float: left;
padding: .5rem 1rem;
padding: .5rem .75rem;
margin-left: -1px;
line-height: 1.5;
color: #0275d8;
......
dist/css/bootstrap.css.map
View file @ 9b1ee315
This diff was suppressed by a .gitattributes entry.
dist/css/bootstrap.min.css
View file @ 9b1ee315
This source diff could not be displayed because it is too large. You can view the blob instead.
dist/css/bootstrap.min.css.map
View file @ 9b1ee315
This diff was suppressed by a .gitattributes entry.
docs/dist/css/bootstrap.css
View file @ 9b1ee315
......@@ -1859,7 +1859,7 @@ pre code {
.form-control {
display: block;
width: 100%;
padding: .5rem 1rem;
padding: .5rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #55595c;
......@@ -1917,7 +1917,7 @@ fieldset[disabled] .form-control {
}
.form-control-label {
padding: .5625rem 1rem;
padding: .5625rem .75rem;
margin-bottom: 0;
}
......@@ -2069,7 +2069,7 @@ fieldset[disabled] .checkbox label {
.form-control-success,
.form-control-warning,
.form-control-error {
padding-right: 3rem;
padding-right: 2.25rem;
background-repeat: no-repeat;
background-position: center right .65625rem;
-webkit-background-size: 1.70625rem 1.70625rem;
......@@ -2832,13 +2832,6 @@ fieldset[disabled] .btn-link:hover {
border-radius: .2rem;
}
.btn-xs, .btn-group-xs > .btn {
padding: .2rem .5rem;
font-size: .75rem;
line-height: 1.5;
border-radius: .2rem;
}
.btn-block {
display: block;
width: 100%;
......@@ -3262,7 +3255,7 @@ input[type="button"].btn-block {
}
.input-group-addon {
padding: .5rem 1rem;
padding: .5rem .75rem;
font-size: 1rem;
font-weight: normal;
line-height: 1;
......@@ -3282,7 +3275,7 @@ input[type="button"].btn-block {
.input-group-addon.form-control-lg, .input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .input-group-addon.btn {
padding: .75rem 1.5rem;
padding: 1.5rem 1.5rem;
font-size: 1.25rem;
border-radius: .3rem;
}
......@@ -4253,7 +4246,7 @@ input[type="button"].btn-block {
.pagination > li > span {
position: relative;
float: left;
padding: .5rem 1rem;
padding: .5rem .75rem;
margin-left: -1px;
line-height: 1.5;
color: #0275d8;
......
docs/dist/css/bootstrap.css.map
View file @ 9b1ee315
This diff was suppressed by a .gitattributes entry.
docs/dist/css/bootstrap.min.css
View file @ 9b1ee315
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/dist/css/bootstrap.min.css.map
View file @ 9b1ee315
This diff was suppressed by a .gitattributes entry.
scss/_button-group.scss
View file @ 9b1ee315
......@@ -99,7 +99,6 @@
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-xs > .btn { @extend .btn-xs; }
.btn-group-sm > .btn { @extend .btn-sm; }
.btn-group-lg > .btn { @extend .btn-lg; }
......
scss/_buttons.scss
View file @ 9b1ee315
......@@ -17,7 +17,7 @@
cursor: pointer;
user-select: none;
border: $border-width solid transparent;
@include button-size($padding-y, $padding-x, $font-size-base, $line-height, $btn-border-radius);
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height, $btn-border-radius);
transition: all .2s ease-in-out;
&,
......@@ -150,14 +150,11 @@ fieldset[disabled] a.btn {
.btn-lg {
// line-height: ensure even-numbered height of button next to large input
@include button-size($padding-lg-y, $padding-lg-x, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
}
.btn-sm {
// line-height: ensure proper height of button next to small input
@include button-size($padding-sm-y, $padding-sm-x, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
}
.btn-xs {
@include button-size($padding-xs-y, $padding-xs-x, $font-size-xs, $line-height-sm, $btn-border-radius-sm);
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
}
......
scss/_forms.scss
View file @ 9b1ee315
......@@ -12,7 +12,7 @@
width: 100%;
// // Make inputs at least the height of their button counterpart (base line-height + padding + border)
// height: $input-height;
padding: $padding-y $padding-x;
padding: $input-padding-y $input-padding-x;
font-size: $font-size-base;
line-height: $line-height;
color: $input-color;
......@@ -83,7 +83,7 @@
// For use with horizontal and inline forms, when you need the label text to
// align with the form controls.
.form-control-label {
padding: ($padding-y + $border-width) $padding-x;
padding: ($input-padding-y + $border-width) $input-padding-x;
margin-bottom: 0; // Override the `<label>` default
}
......@@ -127,8 +127,8 @@
.form-control-static {
min-height: $input-height;
// Size it appropriately next to real form controls
padding-top: ($padding-y + $border-width);
padding-bottom: ($padding-y + $border-width);
padding-top: ($input-padding-y + $border-width);
padding-bottom: ($input-padding-y + $border-width);
// Remove default margin from `p`
margin-bottom: 0;
......@@ -150,7 +150,7 @@
.form-control-sm {
height: $input-height-sm;
padding: $padding-sm-y $padding-sm-x;
padding: $input-padding-y-sm $input-padding-x-sm;
font-size: $font-size-sm;
line-height: $line-height-sm;
border-radius: $input-border-radius-sm;
......@@ -158,7 +158,7 @@
.form-control-lg {
height: $input-height-lg;
padding: $padding-lg-y $padding-lg-x;
padding: $input-padding-y-lg $input-padding-x-lg;
font-size: $font-size-lg;
line-height: $line-height-lg;
border-radius: $input-border-radius-lg;
......@@ -270,7 +270,7 @@ input[type="checkbox"] {
.form-control-success,
.form-control-warning,
.form-control-error {
padding-right: ($padding-x * 3);
padding-right: ($input-padding-x * 3);
background-position: center right ($input-height * .25);
background-size: ($input-height * .65) ($input-height * .65);
background-repeat: no-repeat;
......
scss/_input-group.scss
View file @ 9b1ee315
......@@ -85,7 +85,7 @@
//
.input-group-addon {
padding: $padding-y $padding-x;
padding: $input-padding-y $input-padding-x;
font-size: $font-size-base;
font-weight: normal;
line-height: 1;
......@@ -97,12 +97,12 @@
// Sizing
&.form-control-sm {
padding: $padding-sm-y $padding-sm-x;
padding: $input-padding-y-sm $input-padding-x-sm;
font-size: $font-size-sm;
@include border-radius($border-radius-sm);
}
&.form-control-lg {
padding: $padding-lg-y $padding-lg-x;
padding: $input-padding-x-lg $input-padding-x-lg;
font-size: $font-size-lg;
@include border-radius($border-radius-lg);
}
......
scss/_pagination.scss
View file @ 9b1ee315
......@@ -17,7 +17,7 @@
> span {
position: relative;
float: left; // Collapse white-space
padding: $padding-y $padding-x;
padding: $pagination-padding-y $pagination-padding-x;
margin-left: -1px;
line-height: $line-height;
color: $pagination-color;
......@@ -79,9 +79,9 @@
//
.pagination-lg {
@include pagination-size($padding-lg-y, $padding-lg-x, $font-size-lg, $line-height-lg, $border-radius-lg);
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
}
.pagination-sm {
@include pagination-size($padding-sm-y, $padding-sm-x, $font-size-sm, $line-height-sm, $border-radius-sm);
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
}
scss/_variables.scss
View file @ 9b1ee315
......@@ -161,18 +161,6 @@ $headings-color: inherit !default;
//
// Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
$padding-y: .5rem !default;
$padding-x: 1rem !default;
$padding-lg-y: .75rem !default;
$padding-lg-x: 1.5rem !default;
$padding-sm-y: .275rem !default;
$padding-sm-x: .75rem !default;
$padding-xs-y: .2rem !default;
$padding-xs-x: .5rem !default;
$line-height-lg: (4/3) !default;
$line-height-sm: 1.5 !default;
......@@ -206,6 +194,8 @@ $table-border-color: $gray-lighter !default;
//
// For each of Bootstrap's buttons, define text, background and border color.
$btn-padding-x: 1rem;
$btn-padding-y: .5rem;
$btn-font-weight: normal !default;
$btn-primary-color: #fff !default;
......@@ -234,6 +224,12 @@ $btn-danger-border: $btn-danger-bg !default;
$btn-link-disabled-color: $gray-light !default;
$btn-padding-x-sm: .75rem !default;
$btn-padding-y-sm: .275rem !default;
$btn-padding-x-lg: 1.5rem !default;
$btn-padding-y-lg: .75rem !default;
// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius;
$btn-border-radius-lg: $border-radius-lg;
......@@ -242,6 +238,9 @@ $btn-border-radius-sm: $border-radius-sm;
// Forms
$input-padding-x: .75rem !default;
$input-padding-y: .5rem !default;
$input-bg: #fff !default;
$input-bg-disabled: $gray-lighter !default;
......@@ -258,9 +257,15 @@ $input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: #999 !default;
$input-height: (($font-size-base * $line-height) + ($padding-y * 2) + ($border-width * 2)) !default;
$input-height-lg: (($font-size-lg * $line-height-lg) + ($padding-lg-y * 2) + ($border-width * 2)) !default;
$input-height-sm: (($font-size-sm * $line-height-sm) + ($padding-sm-y * 2) + ($border-width * 2)) !default;
$input-padding-x-sm: .75rem !default;
$input-padding-y-sm: .275rem !default;
$input-padding-x-lg: 1.5rem !default;
$input-padding-y-lg: .75rem !default;
$input-height: (($font-size-base * $line-height) + ($input-padding-y * 2) + ($border-width * 2)) !default;
$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2) + ($border-width * 2)) !default;
$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2) + ($border-width * 2)) !default;
$form-group-margin-bottom: 15px;
......@@ -391,6 +396,14 @@ $nav-pills-active-link-hover-color: $component-active-color !default;
// Pagination
$pagination-padding-x: .75rem !default;
$pagination-padding-y: .5rem !default;
$pagination-padding-x-sm: .75rem !default;
$pagination-padding-y-sm: .275rem !default;
$pagination-padding-x-lg: 1.5rem !default;
$pagination-padding-y-lg: .75rem !default;
$pagination-color: $link-color !default;
$pagination-bg: #fff !default;
$pagination-border: #ddd !default;
......
scss/mixins/_buttons.scss
View file @ 9b1ee315
......@@ -84,8 +84,8 @@
}
// Button sizes
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
padding: $padding-vertical $padding-horizontal;
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
padding: $padding-y $padding-x;
font-size: $font-size;
line-height: $line-height;
@include border-radius($border-radius);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment