diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_carousel.scss | 4 | ||||
| -rw-r--r-- | scss/_variables.scss | 3 | ||||
| -rw-r--r-- | scss/forms/_form-select.scss | 6 | ||||
| -rw-r--r-- | scss/mixins/_background-variant.scss | 2 | ||||
| -rw-r--r-- | scss/mixins/_forms.scss | 4 |
5 files changed, 13 insertions, 6 deletions
diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 5e413cc701..fb4ed894d3 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -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); diff --git a/scss/_variables.scss b/scss/_variables.scss index 7501c3a29b..c32c634de2 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -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; diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss index 720b7a1c61..cd4c1d699d 100644 --- a/scss/forms/_form-select.scss +++ b/scss/forms/_form-select.scss @@ -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); diff --git a/scss/mixins/_background-variant.scss b/scss/mixins/_background-variant.scss index 55dcccd5d9..8a5bca4a90 100644 --- a/scss/mixins/_background-variant.scss +++ b/scss/mixins/_background-variant.scss @@ -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; } } diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss index 769bc3ba99..ab612334f4 100644 --- a/scss/mixins/_forms.scss +++ b/scss/mixins/_forms.scss @@ -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 { |