MWPW-134889 Icon block link style update (#1110)

* update word wrap in action area and fix style lint errors * remove extra space
adobecom · Aug 16, 2023 · 7054a49 · 7054a49
1 parent e2ae319
commit 7054a49
Showing 1 changed file with 50 additions and 51 deletions.
diff --git a/libs/blocks/icon-block/icon-block.css b/libs/blocks/icon-block/icon-block.css
@@ -1,4 +1,3 @@
-/* stylelint-disable selector-class-pattern */
 .icon-block {
   display: block;
   width: 100%;
@@ -64,10 +63,6 @@
   overflow: hidden;
 }
 
-.icon-block.fullwidth .foreground .icon-area {
-  margin-bottom: var(--spacing-m);
-}
-
 .icon-block .foreground .icon-area img {
   height: var(--icon-size-xxl);
   width: auto;
@@ -78,11 +73,21 @@
   min-width: var(--icon-size-xxl);
 }
 
+.icon-block.bio .foreground .icon-area img {
+  object-fit: cover;
+  height: var(--icon-size-xl);
+  width: var(--icon-size-xl);
+}
+
 .icon-block.inline.bio .icon-area,
 .icon-block.inline.bio .icon-area picture img {
   min-width: var(--icon-size-xl);
 }
 
+.icon-block.fullwidth .foreground .icon-area {
+  margin-bottom: var(--spacing-m);
+}
+
 .icon-block.vertical .foreground .icon-area {
   margin: 0;
 }
@@ -106,12 +111,6 @@
   margin-top: var(--spacing-s);
 }
 
-.icon-block.bio .foreground .icon-area img {
-  object-fit: cover;
-  height: var(--icon-size-xl);
-  width: var(--icon-size-xl);
-}
-
 .icon-block.inline.m-icon .icon-area,
 .icon-block.inline.m-icon .icon-area picture img {
   min-width:var(--icon-size-m);
@@ -162,6 +161,18 @@
   max-width: var(--icon-size-xxl);
 }
 
+.icon-block.inline.m-icon.bio .icon-area,
+.icon-block.inline.m-icon.bio .icon-area picture img {
+  height: var(--icon-size-m);
+  width: var(--icon-size-m);
+}
+
+.icon-block.inline.l-icon.bio .icon-area,
+.icon-block.inline.l-icon.bio .icon-area picture img {
+  height: var(--icon-size-l);
+  width: var(--icon-size-l);
+}
+
 .five-up .icon-block.inline.m-icon .foreground .icon-area,
 .five-up .icon-block.inline.m-icon .foreground .icon-area img {
   max-width: var(--icon-size-m);
@@ -202,15 +213,6 @@
   margin-bottom: 0;
 }
 
-.icon-block:not(.small.fullwidth) .foreground .text-content .action-area {
-  white-space: nowrap;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  column-gap: var(--spacing-s);
-  row-gap: var(--spacing-xs);
-}
-
 .icon-block.fullwidth .foreground .text-content .action-area {
   justify-content: center;
 }
@@ -220,6 +222,15 @@
   flex-direction: column;
 }
 
+.icon-block:not(.small.fullwidth) .foreground .text-content .action-area {
+  white-space: initial;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: var(--spacing-s);
+  row-gap: var(--spacing-xs);
+}
+
 .icon-block .foreground div {
   flex: 1 1 auto;
 }
@@ -239,26 +250,14 @@
   margin: 0 auto;
 }
 
-[class*="-up"] .icon-block.bio.inline .foreground {
-  max-width: unset;
-  width: unset;
-}
-
 .icon-block.bio.center .foreground,
 .icon-block.vertical.center .foreground {
   text-align: center;
 }
 
-.icon-block.inline.m-icon.bio .icon-area,
-.icon-block.inline.m-icon.bio .icon-area picture img {
-  height: var(--icon-size-m);
-  width: var(--icon-size-m);
-}
-
-.icon-block.inline.l-icon.bio .icon-area,
-.icon-block.inline.l-icon.bio .icon-area picture img {
-  height: var(--icon-size-l);
-  width: var(--icon-size-l);
+[class*="-up"] .icon-block.bio.inline .foreground {
+  max-width: unset;
+  width: unset;
 }
 
 .icon-block.vertical.center .foreground .text-content .icon-area {
@@ -359,6 +358,10 @@
     min-width:var(--icon-size-xxl);
   }
 
+  .two-up .icon-block.vertical .foreground .icon-area {
+    max-width: 400px;
+  }
+
   .icon-block.inline.bio.m-icon .icon-area,
   .icon-block.inline.bio.m-icon .icon-area picture img {
     min-width: var(--icon-size-m);
@@ -369,6 +372,18 @@
     min-width: var(--icon-size-l);
   }
 
+  .five-up .icon-block .foreground .text-content .icon-area {
+    text-align: center;
+  }
+
+  .three-up .icon-block.vertical .foreground .icon-area {
+    max-width: 300px;
+  }
+
+  .four-up .icon-block.vertical .foreground .icon-area {
+    max-width: 276px;
+  }
+
   .five-up .icon-block.inline.m-icon .foreground .icon-area,
   .five-up .icon-block.inline.m-icon .foreground .icon-area img {
     max-width: var(--icon-size-m);
@@ -401,30 +416,14 @@
     text-align: center;
   }
 
-  .five-up .icon-block .foreground .text-content .icon-area {
-    text-align: center;
-  }
-
   .three-up .icon-block.vertical .foreground .text-content:last-child {
     padding-right: 0;
   }
 
-  .two-up .icon-block.vertical .foreground .icon-area {
-    max-width: 400px;
-  }
-
   .three-up .icon-block.bio .foreground {
     max-width: 300px;
   }
 
-  .three-up .icon-block.vertical .foreground .icon-area {
-    max-width: 300px;
-  }
-
-  .four-up .icon-block.vertical .foreground .icon-area {
-    max-width: 276px;
-  }
-
   .section.five-up {
     grid-template-columns: repeat(5, 1fr) !important;
   }