clones/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-09-21 18:47:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
scss/_button-group.scss
View File

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

8
scss/_buttons.scss
View File

@ -11,8 +11,8 @@
white-space: nowrap;
vertical-align: middle;
user-select: none;
border: $input-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);
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 transition($btn-transition);
// Share hover and focus styles
@ -104,11 +104,11 @@ fieldset[disabled] a.btn {
//
.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 {
@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);
}

44
scss/_forms.scss
View File

@ -7,15 +7,15 @@
.form-control {
display: block;
width: 100%;
padding: $input-btn-padding-y $input-btn-padding-x;
padding: $input-padding-y $input-padding-x;
font-size: $font-size-base;
line-height: $input-btn-line-height;
line-height: $input-line-height;
color: $input-color;
background-color: $input-bg;
// Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
background-image: none;
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.
@if $enable-rounded {
@ -88,24 +88,24 @@ select.form-control {
// For use with horizontal and inline forms, when you need the label text to
// align with the form controls.
.col-form-label {
padding-top: calc(#{$input-btn-padding-y} + #{$input-btn-border-width});
padding-bottom: calc(#{$input-btn-padding-y} + #{$input-btn-border-width});
padding-top: calc(#{$input-padding-y} + #{$input-border-width});
padding-bottom: calc(#{$input-padding-y} + #{$input-border-width});
margin-bottom: 0; // Override the `<label>` default
line-height: $input-btn-line-height;
line-height: $input-line-height;
}
.col-form-label-lg {
padding-top: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width});
padding-bottom: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width});
padding-top: calc(#{$input-padding-y-lg} + #{$input-border-width});
padding-bottom: calc(#{$input-padding-y-lg} + #{$input-border-width});
font-size: $font-size-lg;
line-height: $input-btn-line-height-lg;
line-height: $input-line-height-lg;
}
.col-form-label-sm {
padding-top: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width});
padding-bottom: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width});
padding-top: calc(#{$input-padding-y-sm} + #{$input-border-width});
padding-bottom: calc(#{$input-padding-y-sm} + #{$input-border-width});
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
// be the same size as regular labels, and to align with the form controls.
.col-form-legend {
padding-top: $input-btn-padding-y;
padding-bottom: $input-btn-padding-y;
padding-top: $input-padding-y;
padding-bottom: $input-padding-y;
margin-bottom: 0;
font-size: $font-size-base;
}
@ -129,13 +129,13 @@ select.form-control {
// text (without any border, background color, focus indicator)
.form-control-plaintext {
padding-top: $input-btn-padding-y;
padding-bottom: $input-btn-padding-y;
padding-top: $input-padding-y;
padding-bottom: $input-padding-y;
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;
border: solid transparent;
border-width: $input-btn-border-width 0;
border-width: $input-border-width 0;
&.form-control-sm,
&.form-control-lg {
@ -154,9 +154,9 @@ select.form-control {
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
.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;
line-height: $input-btn-line-height-sm;
line-height: $input-line-height-sm;
@include border-radius($input-border-radius-sm);
}
@ -167,9 +167,9 @@ select.form-control-sm {
}
.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;
line-height: $input-btn-line-height-lg;
line-height: $input-line-height-lg;
@include border-radius($input-border-radius-lg);
}

18
scss/_input-group.scss
View File

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

39
scss/_variables.scss
View File

@ -306,9 +306,7 @@ $table-dark-border-color: lighten($gray-900, 7.5%) !default;
$table-dark-color: $body-bg !default;
// Buttons
//
// For each of Bootstrap's buttons, define text, background and border color.
// Buttons + Forms common varialbes
$input-btn-padding-y: .375rem !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-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-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;
@ -341,12 +360,24 @@ $btn-transition: background-color .15s ease-in-out, border-color .1
// 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-disabled-bg: $gray-200 !default;
$input-color: $gray-700 !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-border-radius: $border-radius !default;