Просмотр исходного кода

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
Domagoj Kriskovic 2 лет назад
Родитель
Сommit
94d78e68cd

+ 10 - 2
services/web/frontend/stylesheets/app/editor/review-panel-new.less

@@ -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 {

+ 8 - 2
services/web/frontend/stylesheets/bootstrap-5/pages/editor/review-panel-new.scss

@@ -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 {