From 90a97e6d127b18d4f04855418fd95f81c52f6cc2 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Wed, 22 Mar 2023 10:06:16 -0500
Subject: [PATCH] Merge pull request #12082 from overleaf/mf-jel-card-style-cms

Add new card style for CMS pages

GitOrigin-RevId: e664d185452e64702c23e2a09f3db6e950035cbe
---
 .../web/frontend/stylesheets/components/card.less    | 12 +++++++++++-
 .../stylesheets/core/ol-light-variables.less         |  2 --
 .../web/frontend/stylesheets/core/variables.less     |  3 ++-
 services/web/frontend/stylesheets/variables/all.less |  3 ++-
 .../frontend/stylesheets/variables/themes/light.less |  2 --
 5 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/services/web/frontend/stylesheets/components/card.less b/services/web/frontend/stylesheets/components/card.less
index e6af58b6c7..208cb3e862 100644
--- a/services/web/frontend/stylesheets/components/card.less
+++ b/services/web/frontend/stylesheets/components/card.less
@@ -1,7 +1,7 @@
 .card {
   background-color: white;
   border-radius: @border-radius-base;
-  box-shadow: @card-box-shadow;
+  box-shadow: none;
   padding: @line-height-computed;
   .page-header {
     margin: 0 0 1.5625rem;
@@ -30,6 +30,16 @@
   > :last-child {
     margin-bottom: 0;
   }
+
+  &.card-drop-shadow {
+    box-shadow: @card-box-shadow;
+    background-color: white;
+
+    > hr {
+      margin-left: -@line-height-computed;
+      margin-right: -@line-height-computed;
+    }
+  }
 }
 
 .card-thin {
diff --git a/services/web/frontend/stylesheets/core/ol-light-variables.less b/services/web/frontend/stylesheets/core/ol-light-variables.less
index 32041d8644..ac81d89c8d 100644
--- a/services/web/frontend/stylesheets/core/ol-light-variables.less
+++ b/services/web/frontend/stylesheets/core/ol-light-variables.less
@@ -102,8 +102,6 @@
 @navbar-subdued-hover-bg: @ol-blue-gray-1;
 @navbar-subdued-hover-color: @ol-blue-gray-3;
 
-@card-box-shadow: 0 0 0 1px @ol-blue-gray-1;
-
 // v2 History
 @history-toolbar-color: @ol-blue-gray-3;
 @history-base-bg: @ol-blue-gray-0;
diff --git a/services/web/frontend/stylesheets/core/variables.less b/services/web/frontend/stylesheets/core/variables.less
index 5b86b9f335..718a33551f 100644
--- a/services/web/frontend/stylesheets/core/variables.less
+++ b/services/web/frontend/stylesheets/core/variables.less
@@ -933,8 +933,9 @@
 @btn-border-bottom-width: 0;
 
 // Cards
-@card-box-shadow: none;
 @card-border-radius: @border-radius-base-new;
+@card-box-shadow: 0px 4px 12px rgba(30, 37, 48, 0.12),
+  0px 2px 4px rgba(30, 37, 48, 0.08);
 
 // Project table
 @structured-list-link-color: @ol-blue;
diff --git a/services/web/frontend/stylesheets/variables/all.less b/services/web/frontend/stylesheets/variables/all.less
index 1b326b0b3c..b6bbf65735 100644
--- a/services/web/frontend/stylesheets/variables/all.less
+++ b/services/web/frontend/stylesheets/variables/all.less
@@ -721,8 +721,9 @@
 @btn-secondary-hover-bg-color: @neutral-20;
 
 // Cards
-@card-box-shadow: none;
 @card-border-radius: @border-radius-base-new;
+@card-box-shadow: 0px 4px 12px rgba(30, 37, 48, 0.12),
+  0px 2px 4px rgba(30, 37, 48, 0.08);
 
 // Project table
 @structured-list-link-color: @blue;
diff --git a/services/web/frontend/stylesheets/variables/themes/light.less b/services/web/frontend/stylesheets/variables/themes/light.less
index 6a36a479a7..a383e59a0c 100644
--- a/services/web/frontend/stylesheets/variables/themes/light.less
+++ b/services/web/frontend/stylesheets/variables/themes/light.less
@@ -90,8 +90,6 @@
 @navbar-subdued-hover-bg: @neutral-20;
 @navbar-subdued-hover-color: @neutral-70;
 
-@card-box-shadow: 0 0 0 1px @neutral-20;
-
 // v2 History
 @history-toolbar-color: @neutral-70;
 @history-base-bg: @neutral-10;