mirror of https://github.com/twbs/bootstrap.git
Consolidate multiple 'none' values in `box-shadow` Sass mixin (#41469)
BrowserStack / browserstack (push) Waiting to run
Details
Bundlewatch / bundlewatch (push) Waiting to run
Details
CodeQL / Analyze (push) Waiting to run
Details
cspell / cspell (push) Waiting to run
Details
CSS / css (push) Waiting to run
Details
Docs / docs (push) Waiting to run
Details
JS Tests / JS Tests (push) Waiting to run
Details
Lint / lint (push) Waiting to run
Details
CSS (node-sass) / css (push) Waiting to run
Details
Release notes / update_release_draft (push) Waiting to run
Details
BrowserStack / browserstack (push) Waiting to run
Details
Bundlewatch / bundlewatch (push) Waiting to run
Details
CodeQL / Analyze (push) Waiting to run
Details
cspell / cspell (push) Waiting to run
Details
CSS / css (push) Waiting to run
Details
Docs / docs (push) Waiting to run
Details
JS Tests / JS Tests (push) Waiting to run
Details
Lint / lint (push) Waiting to run
Details
CSS (node-sass) / css (push) Waiting to run
Details
Release notes / update_release_draft (push) Waiting to run
Details
This commit is contained in:
parent
e5b9f37149
commit
7f946d4241
|
@ -1,17 +1,23 @@
|
|||
@mixin box-shadow($shadow...) {
|
||||
@if $enable-shadows {
|
||||
$result: ();
|
||||
$has-single-value: false;
|
||||
$single-value: null;
|
||||
|
||||
@each $value in $shadow {
|
||||
@if $value != null {
|
||||
@if $value == none or $value == initial or $value == inherit or $value == unset {
|
||||
$has-single-value: true;
|
||||
$single-value: $value;
|
||||
} @else {
|
||||
$result: append($result, $value, "comma");
|
||||
}
|
||||
@if $value == none and length($shadow) > 1 {
|
||||
@warn "The keyword 'none' must be used as a single argument.";
|
||||
}
|
||||
}
|
||||
|
||||
@if (length($result) > 0) {
|
||||
@if $has-single-value {
|
||||
box-shadow: $single-value;
|
||||
} @else if (length($result) > 0) {
|
||||
box-shadow: $result;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,188 @@
|
|||
@import "../../functions";
|
||||
@import "../../variables";
|
||||
@import "../../mixins";
|
||||
|
||||
// Store original value
|
||||
$original-enable-shadows: $enable-shadows;
|
||||
|
||||
// Enable shadows for all tests
|
||||
$enable-shadows: true !global;
|
||||
|
||||
@include describe("box-shadow mixin") {
|
||||
@include it("handles single none value") {
|
||||
@include assert() {
|
||||
@include output() {
|
||||
.test {
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
@include expect() {
|
||||
.test {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include it("handles multiple none values by consolidating them") {
|
||||
@include assert() {
|
||||
@include output() {
|
||||
.test {
|
||||
@include box-shadow(none, none, none);
|
||||
}
|
||||
}
|
||||
|
||||
@include expect() {
|
||||
.test {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include it("handles other single-value keywords (initial, inherit, unset)") {
|
||||
@include assert() {
|
||||
@include output() {
|
||||
.test-initial {
|
||||
@include box-shadow(initial);
|
||||
}
|
||||
.test-inherit {
|
||||
@include box-shadow(inherit);
|
||||
}
|
||||
.test-unset {
|
||||
@include box-shadow(unset);
|
||||
}
|
||||
}
|
||||
|
||||
@include expect() {
|
||||
.test-initial {
|
||||
box-shadow: initial;
|
||||
}
|
||||
.test-inherit {
|
||||
box-shadow: inherit;
|
||||
}
|
||||
.test-unset {
|
||||
box-shadow: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include it("handles multiple single-value keywords by using the last one") {
|
||||
@include assert() {
|
||||
@include output() {
|
||||
.test {
|
||||
@include box-shadow(initial, inherit, unset);
|
||||
}
|
||||
}
|
||||
|
||||
@include expect() {
|
||||
.test {
|
||||
box-shadow: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include it("handles regular box-shadow values") {
|
||||
@include assert() {
|
||||
@include output() {
|
||||
.test {
|
||||
@include box-shadow(0 0 10px rgba(0, 0, 0, .5));
|
||||
}
|
||||
}
|
||||
|
||||
@include expect() {
|
||||
.test {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include it("handles multiple regular box-shadow values") {
|
||||
@include assert() {
|
||||
@include output() {
|
||||
.test {
|
||||
@include box-shadow(0 0 10px rgba(0, 0, 0, .5), 0 0 20px rgba(0, 0, 0, .3));
|
||||
}
|
||||
}
|
||||
|
||||
@include expect() {
|
||||
.test {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .5), 0 0 20px rgba(0, 0, 0, .3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include it("handles null values by ignoring them") {
|
||||
@include assert() {
|
||||
@include output() {
|
||||
.test {
|
||||
@include box-shadow(null, 0 0 10px rgba(0, 0, 0, .5), null);
|
||||
}
|
||||
}
|
||||
|
||||
@include expect() {
|
||||
.test {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include it("handles mixed values with keywords and regular shadows") {
|
||||
@include assert() {
|
||||
@include output() {
|
||||
.test {
|
||||
@include box-shadow(none, 0 0 10px rgba(0, 0, 0, .5));
|
||||
}
|
||||
}
|
||||
|
||||
@include expect() {
|
||||
.test {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include it("handles empty input") {
|
||||
@include assert() {
|
||||
@include output() {
|
||||
.test {
|
||||
@include box-shadow();
|
||||
}
|
||||
}
|
||||
|
||||
@include expect() {
|
||||
.test { // stylelint-disable-line block-no-empty
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include it("respects $enable-shadows variable") {
|
||||
$enable-shadows: false !global;
|
||||
|
||||
@include assert() {
|
||||
@include output() {
|
||||
.test {
|
||||
@include box-shadow(0 0 10px rgba(0, 0, 0, .5));
|
||||
}
|
||||
}
|
||||
|
||||
@include expect() {
|
||||
.test { // stylelint-disable-line block-no-empty
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$enable-shadows: true !global;
|
||||
}
|
||||
}
|
||||
|
||||
// Restore original value
|
||||
$enable-shadows: $original-enable-shadows !global;
|
Loading…
Reference in New Issue