rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-17 14:54:30 +01:00
Code Issues Actions Packages Releases Activity

Convert background shorthands to separate properties

Browse Source
This commit is contained in:
Martijn Cuppens 2019-12-19 10:38:43 +01:00 committed by XhmikosR
parent 980c5fd728
commit dc64ff3314
6 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_carousel.scss
View File

@ -128,7 +128,9 @@
display: inline-block;
width: $carousel-control-icon-width;
height: $carousel-control-icon-width;
background: no-repeat 50% / 100% 100%;
background-repeat: no-repeat;
background-position: 50%;
background-size: 100% 100%;
}
.carousel-control-prev-icon {
background-image: escape-svg($carousel-control-prev-icon-bg);

3
scss/_variables.scss
View File

@ -704,12 +704,11 @@ $form-select-disabled-color: $gray-600 !default;
$form-select-bg: $input-bg !default;
$form-select-disabled-bg: $gray-200 !default;
$form-select-disabled-border-color: $input-disabled-border-color !default;
$form-select-bg-position: right $form-select-padding-x center !default;
$form-select-bg-size: 16px 12px !default; // In pixels because image dimensions
$form-select-indicator-color: $gray-800 !default;
$form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
$form-select-background: no-repeat right $form-select-padding-x center / $form-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
$form-select-feedback-icon-padding-right: add(1em * .75, (2 * $form-select-padding-y * .75) + $form-select-padding-x + $form-select-indicator-padding) !default;
$form-select-feedback-icon-position: center right ($form-select-padding-x + $form-select-indicator-padding) !default;
$form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-half !default;

6
scss/forms/_form-select.scss
View File

@ -14,7 +14,11 @@
line-height: $form-select-line-height;
color: $form-select-color;
vertical-align: middle;
background: $form-select-bg escape-svg($form-select-indicator) $form-select-background;
background-color: $form-select-bg;
background-image: escape-svg($form-select-indicator);
background-repeat: no-repeat;
background-position: $form-select-bg-position;
background-size: $form-select-bg-size;
border: $form-select-border-width solid $form-select-border-color;
@include border-radius($form-select-border-radius, 0);
@include box-shadow($form-select-box-shadow);

2
scss/mixins/_background-variant.scss
View File

@ -2,6 +2,6 @@
@mixin bg-gradient-variant($parent, $color) {
#{$parent} {
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
background-image: linear-gradient(180deg, mix($body-bg, $color, 15%), $color) !important;
}
}

4
scss/mixins/_forms.scss
View File

@ -79,7 +79,9 @@
@if $enable-validation-icons {
padding-right: $form-select-feedback-icon-padding-right;
background: escape-svg($form-select-indicator) $form-select-background, escape-svg($icon) $form-select-bg no-repeat $form-select-feedback-icon-position / $form-select-feedback-icon-size;
background-image: escape-svg($form-select-indicator), escape-svg($icon);
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
}
&:focus {

5
site/assets/scss/_subnav.scss
View File

@ -14,7 +14,10 @@
.dropdown-item.active {
font-weight: 600;
color: $gray-900;
background: escape-svg($dropdown-active-icon) no-repeat .4rem .6rem/.75rem .75rem;
background-image: escape-svg($dropdown-active-icon);
background-repeat: no-repeat;
background-position: .4rem .6rem;
background-size: .75rem .75rem;
}
@include media-breakpoint-up(md) {