mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 00:59:51 +02:00
Code Issues Releases Wiki Activity

nuke the shared padding vars and assign to individual components

Browse Source 
- 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
This commit is contained in:
Mark Otto
2015-08-13 23:04:16 -07:00
parent 879114a808
commit 9b1ee31567
15 changed files with 64 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
scss/_button-group.scss
View File

@@ -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; }

9
scss/_buttons.scss
View File

@@ -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);
}

14
scss/_forms.scss
View File

@@ -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;

6
scss/_input-group.scss
View File

@@ -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);
}

6
scss/_pagination.scss
View File

@@ -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);
}

43
scss/_variables.scss
View File

@@ -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;

4
scss/mixins/_buttons.scss
View File

@@ -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);