'How to overwrite a style from a partial "_shadows.scss" file to show box-shadows in ComboBox and DateEdit buttons only?

I had some ComboBox and DateEdit fields with very nice box-shadows

Shadows before update

Since updating DevExpress to 21.2.5, though, the box-shadows for the buttons have disappeared

Shadows after update

I looked at the button through Chrome Dev Tools, went to Styles, and filtered for "shadow." I found

.shadow-none {
    box-shadow: none !important;
}

in the file _shadows.scss line 6. Sure enough, unchecking it gave me the desired result. I clicked the link and was redirected to the file in Sources. It read

// stylelint-disable declaration-no-important

.shadow-sm { box-shadow: $box-shadow-sm !important; }
.shadow { box-shadow: $box-shadow !important; }
.shadow-lg { box-shadow: $box-shadow-lg !important; }
.shadow-none { box-shadow: none !important; }

I've searched high and low for _shadows.scss, and regardless, editing it might cause undesirable results elsewhere. I tried my own CSS and even used !important, but none of the following code worked

Overriding .shadow-none

.shadow-none{
    box-shadow: inset -10px -10px black !important;
}

Editing my own rule

.cmbStatus .btn {
    box-shadow: inset 0px 2px $combobox_shadow_dark, inset -2px -2px 
    $combobox_shadow_light !important;
}

I'm not sure what I should try next. Does anyone have any ideas?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source