[MWPW-156723] Add option for brick stroke (#2954)

adobecom · Sep 26, 2024 · e364702 · e364702
1 parent e6e12c8
commit e364702
Showing 1 changed file with 31 additions and 32 deletions.
diff --git a/libs/blocks/brick/brick.css b/libs/blocks/brick/brick.css
@@ -20,6 +20,14 @@
   color: var(--color-white);
 }
 
+.brick.border {
+  border: 1px solid var(--color-gray-200);
+}
+
+.brick.click > a {
+  text-decoration: none;
+}
+
 .brick .background {
   position: absolute;
   bottom: 0;
@@ -30,7 +38,7 @@
 }
 
 .brick .foreground {
-  position: relative; 
+  position: relative;
   display: flex;
   flex-grow: 1;
   padding: var(--spacing-m);
@@ -116,17 +124,31 @@
 .brick .foreground p.action-area {
   display: flex;
   flex-wrap: wrap;
-  gap: 24px;
+  gap: var(--spacing-s);
   margin-top: var(--spacing-s);
 }
 
+.brick .icon-stack-area li,
+.brick .icon-stack-area li a {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  text-align: start;
+  flex-shrink: 0;
+}
+
 .brick .icon-stack-area li picture {
   display: flex;
   margin: 0;
   padding: 0;
   flex-shrink: 0;
 }
 
+.brick .foreground a:not([class]),
+.brick .foreground span.first-link {
+  font-weight: 700;
+}
+
 .brick .foreground .icon-area picture {
   display: flex;
 }
@@ -145,10 +167,6 @@
   width: auto;
 }
 
-.brick.click > a {
-  text-decoration: none;
-}
-
 .brick .icon-stack-area {
   display: flex;
   flex-flow: row wrap;
@@ -165,25 +183,6 @@
   width: auto;
 }
 
-.brick .icon-stack-area li,
-.brick .icon-stack-area li a {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  text-align: left;
-  flex-shrink: 0;
-}
-
-.brick .foreground a:not([class]),
-.brick .foreground span.first-link {
-  font-weight: 700;
-}
-
-[dir="rtl"] .brick .icon-stack-area li,
-[dir="rtl"] .brick .icon-stack-area li a {
-  text-align: right;
-}
-
 .brick.click a.foreground .first-link:not([class*="button"]) {
   color: var(--link-color);
   text-decoration: none;
@@ -295,6 +294,12 @@
     width: 41.66%;
   }
 
+  .brick.split.row .foreground,
+  .brick.split.row .foreground .brick-media,
+  .brick.split.row .foreground picture {
+    border-radius: inherit;
+  }
+
   .brick.split.horizontal-center .foreground .brick-text,
   .brick.split.center .foreground .brick-text {
     margin: 0;
@@ -320,12 +325,6 @@
     grid-column: 8 / span 5;
   }
 
-  .brick.split.row .foreground,
-  .brick.split.row .foreground .brick-media,
-  .brick.split.row .foreground picture {
-    border-radius: inherit;
-  }
-
   .brick.stack .foreground .brick-media picture,
   .brick.stack .foreground .brick-media img,
   .brick.stack .foreground .brick-media video {
@@ -342,7 +341,7 @@
     margin: 0;
     position: absolute;
   }
-  
+
   .brick .foreground .brick-media video,
   .brick.split.row .foreground .brick-media video {
     object-fit: fill;