Improve Minerva drop-shadows in dark-mode

Converts several drop-shadows to use standard Codex values:
- `.search-box .search` uses `@box-shadow-drop-small`
- `.drawer, .toast` uses `@box-shadow-drop-xx-large`
- `.toggle-list__list--drop-down` uses `@border-color-base`

Bug: T364425
Change-Id: Id00e525655d3a7138aa65f424fd6ab2ff82290c8
This commit is contained in:
Jan Drewniak 2024-06-11 16:46:30 -04:00 committed by Jdrewniak
parent 389518bb4f
commit 98eaa00cd5
3 changed files with 4 additions and 3 deletions

View file

@ -8,7 +8,8 @@
overflow-y: auto; overflow-y: auto;
// The menu floats over content but below overlays. // The menu floats over content but below overlays.
z-index: @z-index-drawer; z-index: @z-index-drawer;
box-shadow: 0 5px 17px 0 rgba( 0, 0, 0, 0.24 ), 0 0 1px #a2a9b1; // Two box-shadows: first creates a drop-shadow, second acts as a subtle border.
box-shadow: 0 5px 17px 0 rgba( 0, 0, 0, 0.24 ), 0 0 1px @border-color-base;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transform: translateY( -8px ); transform: translateY( -8px );

View file

@ -112,7 +112,7 @@ main {
border: @border-width-base @border-style-base var( --border-color-inverted ); border: @border-width-base @border-style-base var( --border-color-inverted );
border-radius: @border-radius-base; border-radius: @border-radius-base;
padding: @padding-vertical-search 0 @padding-vertical-search @padding-start-search-icon; padding: @padding-vertical-search 0 @padding-vertical-search @padding-start-search-icon;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.05 ); box-shadow: @box-shadow-drop-small;
// Keyboard focus is taken care of below at `.search:focus`. // Keyboard focus is taken care of below at `.search:focus`.
outline: 0; outline: 0;
transition-property: border-color, box-shadow; transition-property: border-color, box-shadow;

View file

@ -36,7 +36,7 @@
.toast, .toast,
.drawer { .drawer {
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 -1px 8px 0 @box-shadow-color-base; box-shadow: @box-shadow-drop-xx-large;
word-wrap: break-word; word-wrap: break-word;
// don't use visibility: hidden in old browsers that don't support animations // don't use visibility: hidden in old browsers that don't support animations
display: none; display: none;