[MWPW-137523] Add dark and large styles for quiet marquee (#1454)

* add dark and large styles for quiet marquee * reduce :is() confusion
adobecom · Nov 2, 2023 · fe38def · fe38def
1 parent b055cb5
commit fe38def
Showing 1 changed file with 31 additions and 30 deletions.
diff --git a/libs/blocks/marquee/marquee.css b/libs/blocks/marquee/marquee.css
@@ -8,7 +8,7 @@
   min-height: 560px;
 }
 
-.marquee.small, .marquee.quiet, .marquee.inline, .marquee.large.compact {
+.marquee:is(.small, .inline, .large.compact) {
   min-height: 360px;
 }
 
@@ -17,25 +17,36 @@
   margin-bottom: 0;
 }
 
-.marquee.light, .marquee.mobile-light, .marquee.quiet, .marquee.inline {
+.marquee:is(.light, .mobile-light, .quiet, .inline) {
   color: var(--text-color);
 }
 
-.marquee.mobile-dark {
+.marquee:is(.mobile-dark, .quiet.dark) {
   color: var(--color-white);
 }
 
+.marquee .icon-area :is(picture, a) {
+  display: contents;
+}
+
+.marquee:is(.mobile-dark, .quiet.dark) a:not(.con-button),
+.marquee:is(.mobile-dark, .quiet.dark) a:not(.con-button):hover {
+  color: var(--link-color-dark);
+}
+
 .marquee.mobile-light a:not(.con-button) {
   color: var(--link-color);
 }
 
-.marquee.mobile-light a:not(.con-button):hover {
-  color: var(--link-hover-color);
+.marquee.static-links a:not(.con-button),
+.static-links .marquee a:not(.con-button),
+.marquee.static-links a:not(.con-button):hover,
+.static-links .marquee a:not(.con-button):hover {
+  color: inherit;
 }
 
-.marquee.mobile-dark a:not(.con-button),
-.marquee.mobile-dark a:not(.con-button):hover {
-  color: var(--link-color-dark);
+.marquee.mobile-light a:not(.con-button):hover {
+  color: var(--link-hover-color);
 }
 
 .marquee.mobile-light a.con-button.outline {
@@ -94,11 +105,6 @@
   margin-bottom: var(--spacing-s);
 }
 
-.marquee .icon-area picture,
-.marquee .icon-area a {
-  display: contents;
-}
-
 .marquee .icon-area img {
   height: 48px;
   width: auto;
@@ -356,15 +362,15 @@
     color: var(--link-color);
   }
 
-  .marquee.tablet-light a:not(.con-button):hover {
-    color: var(--link-hover-color);
-  }
-
   .marquee.tablet-dark a:not(.con-button),
   .marquee.tablet-dark a:not(.con-button):hover {
     color: var(--link-color-dark);
   }
 
+  .marquee.tablet-light a:not(.con-button):hover {
+    color: var(--link-hover-color);
+  }
+
   .marquee.tablet-light a.con-button.outline {
     border-color: var(--text-color);
     color: var(--text-color);
@@ -416,6 +422,10 @@
   .marquee.centered .foreground .text {
     margin: 0 auto;
   }
+
+  .marquee.quiet.large .foreground .text {
+    max-width: 800px;
+  }
 
   .marquee.split .foreground.container .text {
     max-width: calc(50% - var(--grid-column-width));
@@ -517,13 +527,12 @@
     color: var(--link-color);
   }
 
-  .marquee.desktop-light a:not(.con-button):hover {
-    color: var(--link-hover-color);
+  .marquee.desktop-dark a:is(:not(.con-button), :not(.con-button):hover) {
+    color: var(--link-color-dark);
   }
 
-  .marquee.desktop-dark a:not(.con-button),
-  .marquee.desktop-dark a:not(.con-button):hover {
-    color: var(--link-color-dark);
+  .marquee.desktop-light a:not(.con-button):hover {
+    color: var(--link-hover-color);
   }
 
   .marquee.desktop-light a.con-button.outline {
@@ -703,11 +712,3 @@
     max-width: var(--grid-container-width);
   }
 }
-
-
-.marquee.static-links a:not(.con-button),
-.marquee.static-links a:not(.con-button):hover,
-.static-links .marquee a:not(.con-button),
-.static-links .marquee a:not(.con-button):hover {
-  color: inherit;
-}