1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-13 17:14:04 +02:00

append btn-* and input-* variables and extends their from input-btn-* variables

This commit is contained in:
i.sychev
2017-10-19 10:05:07 +03:00
parent 39b144c88f
commit 58e553d7bc
5 changed files with 78 additions and 47 deletions

View File

@@ -28,7 +28,7 @@
.btn + .btn-group, .btn + .btn-group,
.btn-group + .btn, .btn-group + .btn,
.btn-group + .btn-group { .btn-group + .btn-group {
margin-left: -$input-btn-border-width; margin-left: -$btn-border-width;
} }
} }
@@ -98,8 +98,8 @@
// //
.btn + .dropdown-toggle-split { .btn + .dropdown-toggle-split {
padding-right: $input-btn-padding-x * .75; padding-right: $btn-padding-x * .75;
padding-left: $input-btn-padding-x * .75; padding-left: $btn-padding-x * .75;
&::after { &::after {
margin-left: 0; margin-left: 0;
@@ -107,13 +107,13 @@
} }
.btn-sm + .dropdown-toggle-split { .btn-sm + .dropdown-toggle-split {
padding-right: $input-btn-padding-x-sm * .75; padding-right: $btn-padding-x-sm * .75;
padding-left: $input-btn-padding-x-sm * .75; padding-left: $btn-padding-x-sm * .75;
} }
.btn-lg + .dropdown-toggle-split { .btn-lg + .dropdown-toggle-split {
padding-right: $input-btn-padding-x-lg * .75; padding-right: $btn-padding-x-lg * .75;
padding-left: $input-btn-padding-x-lg * .75; padding-left: $btn-padding-x-lg * .75;
} }
@@ -147,7 +147,7 @@
> .btn + .btn-group, > .btn + .btn-group,
> .btn-group + .btn, > .btn-group + .btn,
> .btn-group + .btn-group { > .btn-group + .btn-group {
margin-top: -$input-btn-border-width; margin-top: -$btn-border-width;
margin-left: 0; margin-left: 0;
} }

View File

@@ -11,8 +11,8 @@
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
user-select: none; user-select: none;
border: $input-btn-border-width solid transparent; border: $btn-border-width solid transparent;
@include button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius); @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
@include transition($btn-transition); @include transition($btn-transition);
// Share hover and focus styles // Share hover and focus styles
@@ -104,11 +104,11 @@ fieldset[disabled] a.btn {
// //
.btn-lg { .btn-lg {
@include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $input-btn-line-height-lg, $btn-border-radius-lg); @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
} }
.btn-sm { .btn-sm {
@include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $input-btn-line-height-sm, $btn-border-radius-sm); @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
} }

View File

@@ -7,15 +7,15 @@
.form-control { .form-control {
display: block; display: block;
width: 100%; width: 100%;
padding: $input-btn-padding-y $input-btn-padding-x; padding: $input-padding-y $input-padding-x;
font-size: $font-size-base; font-size: $font-size-base;
line-height: $input-btn-line-height; 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.
background-image: none; background-image: none;
background-clip: padding-box; background-clip: padding-box;
border: $input-btn-border-width solid $input-border-color; border: $input-border-width solid $input-border-color;
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS. // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
@if $enable-rounded { @if $enable-rounded {
@@ -88,24 +88,24 @@ select.form-control {
// For use with horizontal and inline forms, when you need the label text to // For use with horizontal and inline forms, when you need the label text to
// align with the form controls. // align with the form controls.
.col-form-label { .col-form-label {
padding-top: calc(#{$input-btn-padding-y} + #{$input-btn-border-width}); padding-top: calc(#{$input-padding-y} + #{$input-border-width});
padding-bottom: calc(#{$input-btn-padding-y} + #{$input-btn-border-width}); padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
margin-bottom: 0; // Override the `<label>` default margin-bottom: 0; // Override the `<label>` default
line-height: $input-btn-line-height; line-height: $input-line-height;
} }
.col-form-label-lg { .col-form-label-lg {
padding-top: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width}); padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
padding-bottom: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width}); padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
font-size: $font-size-lg; font-size: $font-size-lg;
line-height: $input-btn-line-height-lg; line-height: $input-line-height-lg;
} }
.col-form-label-sm { .col-form-label-sm {
padding-top: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width}); padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
padding-bottom: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width}); padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
font-size: $font-size-sm; font-size: $font-size-sm;
line-height: $input-btn-line-height-sm; line-height: $input-line-height-sm;
} }
@@ -116,8 +116,8 @@ select.form-control {
// For use with horizontal and inline forms, when you need the legend text to // For use with horizontal and inline forms, when you need the legend text to
// be the same size as regular labels, and to align with the form controls. // be the same size as regular labels, and to align with the form controls.
.col-form-legend { .col-form-legend {
padding-top: $input-btn-padding-y; padding-top: $input-padding-y;
padding-bottom: $input-btn-padding-y; padding-bottom: $input-padding-y;
margin-bottom: 0; margin-bottom: 0;
font-size: $font-size-base; font-size: $font-size-base;
} }
@@ -129,13 +129,13 @@ select.form-control {
// text (without any border, background color, focus indicator) // text (without any border, background color, focus indicator)
.form-control-plaintext { .form-control-plaintext {
padding-top: $input-btn-padding-y; padding-top: $input-padding-y;
padding-bottom: $input-btn-padding-y; padding-bottom: $input-padding-y;
margin-bottom: 0; // match inputs if this class comes on inputs with default margins margin-bottom: 0; // match inputs if this class comes on inputs with default margins
line-height: $input-btn-line-height; line-height: $input-line-height;
background-color: transparent; background-color: transparent;
border: solid transparent; border: solid transparent;
border-width: $input-btn-border-width 0; border-width: $input-border-width 0;
&.form-control-sm, &.form-control-sm,
&.form-control-lg { &.form-control-lg {
@@ -154,9 +154,9 @@ select.form-control {
// 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 {
padding: $input-btn-padding-y-sm $input-btn-padding-x-sm; padding: $input-padding-y-sm $input-padding-x-sm;
font-size: $font-size-sm; font-size: $font-size-sm;
line-height: $input-btn-line-height-sm; line-height: $input-line-height-sm;
@include border-radius($input-border-radius-sm); @include border-radius($input-border-radius-sm);
} }
@@ -167,9 +167,9 @@ select.form-control-sm {
} }
.form-control-lg { .form-control-lg {
padding: $input-btn-padding-y-lg $input-btn-padding-x-lg; padding: $input-padding-y-lg $input-padding-x-lg;
font-size: $font-size-lg; font-size: $font-size-lg;
line-height: $input-btn-line-height-lg; line-height: $input-line-height-lg;
@include border-radius($input-border-radius-lg); @include border-radius($input-border-radius-lg);
} }

View File

@@ -66,26 +66,26 @@
// //
.input-group-addon { .input-group-addon {
padding: $input-btn-padding-y $input-btn-padding-x; padding: $input-padding-y $input-padding-x;
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; // Match inputs font-size: $font-size-base; // Match inputs
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
line-height: $input-btn-line-height; line-height: $input-line-height;
color: $input-group-addon-color; color: $input-group-addon-color;
text-align: center; text-align: center;
background-color: $input-group-addon-bg; background-color: $input-group-addon-bg;
border: $input-btn-border-width solid $input-group-addon-border-color; border: $input-border-width solid $input-group-addon-border-color;
@include border-radius($input-border-radius); @include border-radius($input-border-radius);
// Sizing // Sizing
&.form-control-sm { &.form-control-sm {
padding: $input-btn-padding-y-sm $input-btn-padding-x-sm; padding: $input-padding-y-sm $input-padding-x-sm;
font-size: $font-size-sm; font-size: $font-size-sm;
@include border-radius($input-border-radius-sm); @include border-radius($input-border-radius-sm);
} }
&.form-control-lg { &.form-control-lg {
padding: $input-btn-padding-y-lg $input-btn-padding-x-lg; padding: $input-padding-y-lg $input-padding-x-lg;
font-size: $font-size-lg; font-size: $font-size-lg;
@include border-radius($input-border-radius-lg); @include border-radius($input-border-radius-lg);
} }
@@ -145,7 +145,7 @@
position: relative; position: relative;
+ .btn { + .btn {
margin-left: (-$input-btn-border-width); margin-left: (-$input-border-width);
} }
// Bring the "active" button to the front // Bring the "active" button to the front
@@ -162,19 +162,19 @@
&:not(:last-child) { &:not(:last-child) {
> .btn, > .btn,
> .btn-group { > .btn-group {
margin-right: (-$input-btn-border-width); margin-right: (-$input-border-width);
} }
} }
&:not(:first-child) { &:not(:first-child) {
> .btn, > .btn,
> .btn-group { > .btn-group {
z-index: 2; z-index: 2;
// remove nagative margin ($input-btn-border-width) to solve overlapping issue with button. // remove nagative margin ($input-border-width) to solve overlapping issue with button.
margin-left: 0; margin-left: 0;
// When input is first, overlap the right side of it with the button(-group) // When input is first, overlap the right side of it with the button(-group)
&:first-child { &:first-child {
margin-left: (-$input-btn-border-width); margin-left: (-$input-border-width);
} }
// Because specificity // Because specificity

View File

@@ -306,9 +306,7 @@ $table-dark-border-color: lighten($gray-900, 7.5%) !default;
$table-dark-color: $body-bg !default; $table-dark-color: $body-bg !default;
// Buttons // Buttons + Forms common varialbes
//
// For each of Bootstrap's buttons, define text, background and border color.
$input-btn-padding-y: .375rem !default; $input-btn-padding-y: .375rem !default;
$input-btn-padding-x: .75rem !default; $input-btn-padding-x: .75rem !default;
@@ -322,6 +320,27 @@ $input-btn-padding-y-lg: .5rem !default;
$input-btn-padding-x-lg: 1rem !default; $input-btn-padding-x-lg: 1rem !default;
$input-btn-line-height-lg: $line-height-lg !default; $input-btn-line-height-lg: $line-height-lg !default;
$input-btn-border-width: $border-width !default; // For form controls and buttons
// Buttons
//
// For each of Bootstrap's buttons, define text, background and border color.
$btn-padding-y: $input-btn-padding-y !default;
$btn-padding-x: $input-btn-padding-x !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-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-line-height-lg: $input-btn-line-height-lg !default;
$btn-border-width: $input-btn-border-width !default;
$btn-font-weight: $font-weight-normal !default; $btn-font-weight: $font-weight-normal !default;
$btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default; $btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
$btn-focus-box-shadow: 0 0 0 3px rgba(theme-color("primary"), .25) !default; $btn-focus-box-shadow: 0 0 0 3px rgba(theme-color("primary"), .25) !default;
@@ -341,12 +360,24 @@ $btn-transition: background-color .15s ease-in-out, border-color .1
// Forms // Forms
$input-padding-y: $input-btn-padding-y !default;
$input-padding-x: $input-btn-padding-x !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-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-line-height-lg: $input-btn-line-height-lg !default;
$input-bg: $white !default; $input-bg: $white !default;
$input-disabled-bg: $gray-200 !default; $input-disabled-bg: $gray-200 !default;
$input-color: $gray-700 !default; $input-color: $gray-700 !default;
$input-border-color: $gray-400 !default; $input-border-color: $gray-400 !default;
$input-btn-border-width: $border-width !default; // For form controls and buttons $input-border-width: $input-btn-border-width !default;
$input-box-shadow: inset 0 1px 1px rgba($black,.075) !default; $input-box-shadow: inset 0 1px 1px rgba($black,.075) !default;
$input-border-radius: $border-radius !default; $input-border-radius: $border-radius !default;