[v5] Warnings and invalid CSS properties with enabled shadows but set to none
Created by: filkris
Operating System: Windows 10 Browser: Version 87.0.4280.88 (Official Build) (64-bit)
Compiling the Bootstrap v5.0.0beta1 with enabled shadows, but setting some of variables to none
produces warnings followed by setting invalid CSS properties (Example: box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), none;
).
Compiler warnings:
WARNING: The keyword 'none' must be used as a single argument.
node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9 box-shadow()
node_modules\bootstrap\scss\forms\_form-control.scss 40:7 @import
node_modules\bootstrap\scss\_forms.scss 3:9 @import
resources\sass\app.scss 23:9 root stylesheet
WARNING: The keyword 'none' must be used as a single argument.
node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9 box-shadow()
node_modules\bootstrap\scss\_buttons.scss 40:7 @import
resources\sass\app.scss 24:9 root stylesheet
WARNING: The keyword 'none' must be used as a single argument.
node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9 box-shadow()
node_modules\bootstrap\scss\mixins\_buttons.scss 37:7 button-variant()
node_modules\bootstrap\scss\_buttons.scss 60:5 @import
resources\sass\app.scss 24:9 root stylesheet
WARNING: The keyword 'none' must be used as a single argument.
node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9 box-shadow()
node_modules\bootstrap\scss\mixins\_buttons.scss 57:9 button-variant()
node_modules\bootstrap\scss\_buttons.scss 60:5 @import
resources\sass\app.scss 24:9 root stylesheet
WARNING: The keyword 'none' must be used as a single argument.
node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9 box-shadow()
node_modules\bootstrap\scss\mixins\_buttons.scss 107:9 button-outline-variant()
node_modules\bootstrap\scss\_buttons.scss 66:5 @import
resources\sass\app.scss 24:9 root stylesheet
WARNING: The keyword 'none' must be used as a single argument.
node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9 box-shadow()
node_modules\bootstrap\scss\forms\_form-control.scss 40:7 @import
node_modules\bootstrap\scss\_forms.scss 3:9 @import
resources\sass\app.scss 23:9 root stylesheet
WARNING: The keyword 'none' must be used as a single argument.
node_modules\bootstrap\scss\mixins\_box-shadow.scss 10:9 box-shadow()
node_modules\bootstrap\scss\forms\_form-select.scss 30:7 @import
node_modules\bootstrap\scss\_forms.scss 4:9 @import
resources\sass\app.scss 23:9 root stylesheet
Then we have tried to detect any of calls to the mixin by doing the following search:
Searching 79 files for "@include box-shadow("
bootstrapv5\node_modules\bootstrap\scss\_button-group.scss:
101: @include box-shadow($btn-active-box-shadow);
105: @include box-shadow(none);
bootstrapv5\node_modules\bootstrap\scss\_buttons.scss:
37: @include box-shadow($btn-active-box-shadow);
40: @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
49: @include box-shadow(none);
bootstrapv5\node_modules\bootstrap\scss\_dropdown.scss:
34: @include box-shadow($dropdown-box-shadow);
201: @include box-shadow($dropdown-dark-box-shadow);
bootstrapv5\node_modules\bootstrap\scss\_images.scss:
19: @include box-shadow($thumbnail-box-shadow);
bootstrapv5\node_modules\bootstrap\scss\_modal.scss:
90: @include box-shadow($modal-content-box-shadow-xs);
188: @include box-shadow($modal-content-box-shadow-sm-up);
bootstrapv5\node_modules\bootstrap\scss\_popover.scss:
18: @include box-shadow($popover-box-shadow);
bootstrapv5\node_modules\bootstrap\scss\_progress.scss:
15: @include box-shadow($progress-box-shadow);
bootstrapv5\node_modules\bootstrap\scss\forms\_form-control.scss:
22: @include box-shadow($input-box-shadow);
40: @include box-shadow($input-box-shadow, $input-focus-box-shadow);
bootstrapv5\node_modules\bootstrap\scss\forms\_form-range.scss:
34: @include box-shadow($form-range-thumb-box-shadow);
51: @include box-shadow($form-range-track-box-shadow);
60: @include box-shadow($form-range-thumb-box-shadow);
77: @include box-shadow($form-range-track-box-shadow);
bootstrapv5\node_modules\bootstrap\scss\forms\_form-select.scss:
23: @include box-shadow($form-select-box-shadow);
30: @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
bootstrapv5\node_modules\bootstrap\scss\mixins\_buttons.scss:
23: @include box-shadow($btn-box-shadow);
37: @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
57: @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
107: @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
24 matches across 11 files
From the results, we can see the following variables can not be set to none
:
$input-box-shadow: none;
$input-focus-box-shadow: none;
$btn-box-shadow: none;
$btn-focus-box-shadow: none;
$btn-active-box-shadow: none;
$form-select-box-shadow: none;
$form-select-focus-box-shadow: none;
Please, can you confirm the same behavior?