mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-26 23:04:32 +02:00
Code Issues Releases Wiki Activity

Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev

Browse Source
This commit is contained in:
Mark Otto
2017-12-26 22:28:14 -08:00
parent 6fd11a6169 b01e81ed36
commit cf5e99e172
7 changed files with 90 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
scss/_button-group.scss
View File

@@ -44,46 +44,18 @@
}
.btn-group {
> .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
// Set corners individual because sometimes a single button can be in a .btn-group
// and we need :first-child and :last-child to both match
> .btn:first-child {
margin-left: 0;
&:not(:last-child):not(.dropdown-toggle) {
@include border-right-radius(0);
}
}
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu
// immediately after it
> .btn:last-child:not(:first-child),
> .dropdown-toggle:not(:first-child) {
@include border-left-radius(0);
// Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle),
> .btn-group:not(:last-child) > .btn {
@include border-right-radius(0);
}
// Custom edits for including btn-groups within btn-groups (useful for including
// dropdown buttons within a btn-group)
> .btn-group {
float: left;
}
> .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
> .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
@include border-right-radius(0);
}
}
> .btn-group:last-child:not(:first-child) > .btn:first-child {
> .btn:not(:first-child),
> .btn-group:not(:first-child) > .btn {
@include border-left-radius(0);
}
}
@@ -154,32 +126,14 @@
margin-left: 0;
}
> .btn {
&:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:first-child:not(:last-child) {
@include border-bottom-radius(0);
}
&:last-child:not(:first-child) {
@include border-top-radius(0);
}
// Reset rounded corners
> .btn:not(:last-child):not(.dropdown-toggle),
> .btn-group:not(:last-child) > .btn {
@include border-bottom-radius(0);
}
> .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
> .btn-group:first-child:not(:last-child) {
> .btn:last-child,
> .dropdown-toggle {
@include border-bottom-radius(0);
}
}
> .btn-group:last-child:not(:first-child) > .btn:first-child {
> .btn:not(:first-child),
> .btn-group:not(:first-child) > .btn {
@include border-top-radius(0);
}
}

42
scss/_custom-forms.scss
View File

@@ -225,7 +225,9 @@
}
.custom-file-input {
max-width: 100%;
position: relative;
z-index: 2;
width: 100%;
height: $custom-file-height;
margin: 0;
opacity: 0;
@@ -238,49 +240,43 @@
border-color: $custom-file-focus-border-color;
}
}
@each $lang, $value in $custom-file-text {
&:lang(#{$lang}) ~ .custom-file-label::after {
content: $value;
}
}
}
.custom-file-control {
.custom-file-label {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
height: $custom-file-height;
padding: $custom-file-padding-y $custom-file-padding-x;
line-height: $custom-file-line-height;
color: $custom-file-color;
pointer-events: none;
user-select: none;
background-color: $custom-file-bg;
border: $custom-file-border-width solid $custom-file-border-color;
@include border-radius($custom-file-border-radius);
@include box-shadow($custom-file-box-shadow);
@each $lang, $text in map-get($custom-file-text, placeholder) {
&:lang(#{$lang}):empty::after {
content: $text;
}
}
&::before {
&::after {
position: absolute;
top: -$custom-file-border-width;
right: -$custom-file-border-width;
bottom: -$custom-file-border-width;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
z-index: 3;
display: block;
height: $custom-file-height;
height: calc(#{$custom-file-height} - #{$custom-file-border-width} * 2);
padding: $custom-file-padding-y $custom-file-padding-x;
line-height: $custom-file-line-height;
color: $custom-file-button-color;
content: "Browse";
@include gradient-bg($custom-file-button-bg);
border: $custom-file-border-width solid $custom-file-border-color;
border-left: $custom-file-border-width solid $custom-file-border-color;
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
}
@each $lang, $text in map-get($custom-file-text, button-label) {
&:lang(#{$lang})::before {
content: $text;
}
}
}

48
scss/_input-group.scss
View File

@@ -33,9 +33,8 @@
.form-control,
.custom-select {
&:not(:first-child):not(:last-of-type) { @include border-radius(0); }
&:first-child { @include border-right-radius(0); }
&:last-of-type:not(:first-child) { @include border-left-radius(0); }
&:not(:last-child) { @include border-right-radius(0); }
&:not(:first-child) { @include border-left-radius(0); }
}
// Custom file inputs have more complex markup, thus requiring different
@@ -44,12 +43,10 @@
display: flex;
align-items: center;
&:not(:first-child):not(:last-of-type) .custom-file-control,
&:not(:first-child):not(:last-of-type) .custom-file-control::before { @include border-radius(0); }
&:first-child .custom-file-control,
&:first-child .custom-file-control::before { @include border-right-radius(0); }
&:last-of-type:not(:first-child) .custom-file-control,
&:last-of-type:not(:first-child) .custom-file-control::before { @include border-left-radius(0); }
&:not(:last-child) .custom-file-control,
&:not(:last-child) .custom-file-control::before { @include border-right-radius(0); }
&:not(:first-child) .custom-file-control,
&:not(:first-child) .custom-file-control::before { @include border-left-radius(0); }
}
}
@@ -139,28 +136,21 @@
// border-radius values when extending. They're more specific than we'd like
// with the `.input-group >` part, but without it, we cannot override the sizing.
.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text {
// All prepended buttons have no right border-radius
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
@include border-right-radius(0);
+ .btn,
+ .input-group-text {
@include border-left-radius(0);
}
}
// We separate out the button and input resets here because `.input-group-text`
// can be any HTML element, but buttons are always inputs, buttons, or anchors.
.input-group > .input-group-append {
// Everything but the last one have no rounded corners
.btn:not(:last-of-type),
.input-group-text:not(:last-child) {
@include border-radius(0);
}
.btn:last-of-type,
.input-group-text:last-child {
@include border-left-radius(0);
}
.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
@include border-left-radius(0);
}

7
scss/_variables.scss
View File

@@ -509,12 +509,7 @@ $custom-file-box-shadow: $input-box-shadow !default;
$custom-file-button-color: $custom-file-color !default;
$custom-file-button-bg: $input-group-addon-bg !default;
$custom-file-text: (
placeholder: (
en: "Choose file..."
),
button-label: (
en: "Browse"
)
en: "Browse"
) !default;

17
scss/mixins/_forms.scss
View File

@@ -88,11 +88,18 @@
background-color: lighten($color, 25%);
}
}
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
&:checked {
~ .custom-control-label::before {
@include gradient-bg(lighten($color, 10%));
}
}
&:focus {
~ .custom-control-label::before {
box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
@@ -105,13 +112,19 @@
.custom-file-input {
.was-validated &:#{$state},
&.is-#{$state} {
~ .custom-file-control {
~ .custom-file-label {
border-color: $color;
&::before { border-color: inherit; }
}
~ .#{$state}-feedback,
~ .#{$state}-tooltip {
display: block;
}
&:focus {
~ .custom-file-control {
~ .custom-file-label {
box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
}
}