Box shadow on review panel entry hover and focus (#21055)

* Box shadow on review panel entry hover and focus

* fix formatting

* added box-shadow in scss

* css priority

* fix styling lint

GitOrigin-RevId: fdf4ff0fbef6c9a924e83d40703958eb28caaa49
This commit is contained in:
Domagoj Kriskovic 2024-10-21 10:57:30 +02:00 committed by Copybot
parent 42eea0017d
commit 94d78e68cd
2 changed files with 18 additions and 4 deletions

View file

@ -30,6 +30,10 @@
margin-left: @spacing-02;
z-index: 1;
}
.review-panel-entry:hover {
// shadow-sm
box-shadow: 0px 2px 4px rgba(30, 37, 48, 0.16);
}
.review-panel-entry.review-panel-entry-disabled {
opacity: 0.5;
@ -47,10 +51,14 @@
gap: @spacing-04;
}
.review-panel-entry-focused,
.review-panel-entry-highlighted {
.review-panel-entry.review-panel-entry-focused,
.review-panel-entry.review-panel-entry-highlighted {
margin-left: @spacing-01;
border: 1px solid @blue-50;
// shadow-md
box-shadow:
0px 4px 12px rgba(30, 37, 48, 0.12),
0px 2px 4px rgba(30, 37, 48, 0.08);
}
.review-panel-entry-header {

View file

@ -36,6 +36,10 @@
z-index: 1;
}
.review-panel-entry:hover {
@include shadow-sm;
}
.review-panel-entry.review-panel-entry-disabled {
opacity: 0.5;
pointer-events: none;
@ -52,10 +56,12 @@
gap: var(--spacing-04);
}
.review-panel-entry-focused,
.review-panel-entry-highlighted {
.review-panel-entry.review-panel-entry-focused,
.review-panel-entry.review-panel-entry-highlighted {
margin-left: var(--spacing-01);
border: 1px solid var(--border-active);
@include shadow-md;
}
.review-panel-entry-header {