github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

12
services/web/frontend/stylesheets/app/editor/review-panel-new.less
View file

@ -30,6 +30,10 @@
margin-left: @spacing-02; margin-left: @spacing-02;
z-index: 1; 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 { .review-panel-entry.review-panel-entry-disabled {
opacity: 0.5; opacity: 0.5;
@ -47,10 +51,14 @@
gap: @spacing-04; gap: @spacing-04;
} }
.review-panel-entry-focused, .review-panel-entry.review-panel-entry-focused,
.review-panel-entry-highlighted { .review-panel-entry.review-panel-entry-highlighted {
margin-left: @spacing-01; margin-left: @spacing-01;
border: 1px solid @blue-50; 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 { .review-panel-entry-header {

10
services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss
View file

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