update CSS classes to use new block name

adobecom · Dec 17, 2024 · 451f48a · 451f48a
1 parent e53539b
commit 451f48a
Showing 1 changed file with 43 additions and 43 deletions.
diff --git a/express/blocks/how-to-v2/how-to-v2.css b/express/blocks/how-to-v2/how-to-v2.css
@@ -1,77 +1,77 @@
-main .how-to-steps-accordion h2 {
+main .how-to-v2 h2 {
   font-size: 22px;
   text-align: center;
   padding: 0 24px;
 }
 
-main .video-how-to-steps-accordion {
+main .video-how-to-v2 {
   margin-top: 20px;
 }
 
-main .how-to-steps-accordion ol {
+main .how-to-v2 ol {
   list-style-type: none;
   font-size: 21px;
   font-weight: 900;
 }
 
-main .how-to-steps-accordion ol li {
+main .how-to-v2 ol li {
   padding: 8px 0;
   cursor: pointer;
   transition: all 0.21s;
   display: flex;
 }
 
-main .how-to-steps-accordion ol li .step-indicator {
+main .how-to-v2 ol li .step-indicator {
   width: 5px;
   min-width: 5px;
   background: linear-gradient(-96.68deg, #FF4885 5.24%, #FC7D00 94.76%), #686DF4;
   border-radius: 2.5px;
 }
 
-main .how-to-steps-accordion ol li .step-content {
+main .how-to-v2 ol li .step-content {
   padding: 8px 16px;
   margin: 0;
 }
 
-main .how-to-steps-accordion ol li .step-indicator:has(+ div .closed) {
+main .how-to-v2 ol li .step-indicator:has(+ div .closed) {
   background: linear-gradient(95.55deg, rgba(255, 255, 255, 0.5) 4.43%, rgba(255, 255, 255, 0.3) 93.65%), #8F8F8F;
 }
 
-main .how-to-steps-accordion ol li h3 {
+main .how-to-v2 ol li h3 {
   text-align: left;
   font-size: 18px;
   line-height: 23.4px;
   font-weight: 700;
 }
 
-main .how-to-steps-accordion ol li .detail-container {
+main .how-to-v2 ol li .detail-container {
   font-size: 16px;
   line-height: 20.8px;
   font-weight: 400;
 }
 
-main .how-to-steps-accordion ol li .detail-container {
+main .how-to-v2 ol li .detail-container {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.21s ease-out;
 }
 
-main .how-to-steps-accordion ol li .detail-text {
+main .how-to-v2 ol li .detail-text {
   padding-top: 10px;
 }
 
 /* so that there is no initial re-paint */
-main .how-to-steps-accordion ol li:first-child .detail-container {
+main .how-to-v2 ol li:first-child .detail-container {
   max-height: none;
 }
 
-main .how-to-steps-accordion.video lite-youtube,
-main .how-to-steps-accordion.image picture {
+main .how-to-v2.video lite-youtube,
+main .how-to-v2.image picture {
   border-radius: 16px;
   overflow: hidden;
 }
 
-main .how-to-steps-accordion em {
+main .how-to-v2 em {
   font-style: normal;
   background: linear-gradient(140.08deg, #FF4DD2 67.54%, #FF993B 76.42%);
   background-size: 108% 108%;
@@ -81,14 +81,14 @@ main .how-to-steps-accordion em {
   font-weight: 900;
 }
 
-main .how-to-steps-accordion .steps-content {
+main .how-to-v2 .steps-content {
   display: flex;
   flex-direction: column;
   padding: 0 24px;
   position: relative;
 }
 
-main .how-to-steps-accordion .steps-content .steps-content-backg {
+main .how-to-v2 .steps-content .steps-content-backg {
   position: absolute;
   width: 100%;
   top: -24vw;
@@ -97,83 +97,83 @@ main .how-to-steps-accordion .steps-content .steps-content-backg {
   transform: scale(0.9);
 }
 
-main .how-to-steps-accordion ol.steps {
+main .how-to-v2 ol.steps {
   margin: 6px 0 0;
   padding: 0;
 }
 
-main .how-to-steps-accordion ol.steps .step .step-content h3:hover {
+main .how-to-v2 ol.steps .step .step-content h3:hover {
   background-color: var( --color-gray-100);
   margin: -8px 0 -8px -16px; 
   padding: 8px 0 8px 16px;
 }
 
-main .how-to-steps-accordion.image .image-container {
+main .how-to-v2.image .image-container {
   margin-top: 20px;
   width: 100%; 
   overflow: hidden;
 }
 
-main .how-to-steps-accordion.image .image-container img,
-main .how-to-steps-accordion.video .video-container > * {
+main .how-to-v2.image .image-container img,
+main .how-to-v2.video .video-container > * {
   border-radius: 16px;
   max-width: 400px;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 
-main .how-to-steps-accordion.video .video-container > * {
+main .how-to-v2.video .video-container > * {
   margin-left: auto;
   margin-right: auto;
   height: unset;
 }
 
-main .how-to-steps-accordion.video,
-main .how-to-steps-accordion.image {
+main .how-to-v2.video,
+main .how-to-v2.image {
   /* note we don't set margin here because background gradient has to go past into this container */
   margin: 0;
   max-width: unset;
 }
 
 @media (min-width: 768px) {
 
-  main .how-to-steps-accordion h2 {
+  main .how-to-v2 h2 {
     font-size: 28px;
   }
 
-  main .how-to-steps-accordion.video,
-  main .how-to-steps-accordion.image  {
+  main .how-to-v2.video,
+  main .how-to-v2.image  {
     max-width: 950px;
     margin: auto;
   }
 
-  main .how-to-steps-accordion .steps-content {
+  main .how-to-v2 .steps-content {
     display: flex;
     flex-direction: row;
     padding: 0 24px;
   }
 
-  main .how-to-steps-accordion .steps-content > * {
+  main .how-to-v2 .steps-content > * {
     flex: 1 1 50%;
     box-sizing: border-box;
   }
 
-  main .how-to-steps-accordion.image .image-container,
-  main .how-to-steps-accordion.video .video-container {
+  main .how-to-v2.image .image-container,
+  main .how-to-v2.video .video-container {
     align-items: center;
     display: inline-grid;
   }
 
-  main .how-to-steps-accordion.image .image-container img {
+  main .how-to-v2.image .image-container img {
     height: unset;
   }
 
-  main .how-to-steps-accordion .steps-content .steps {
+  main .how-to-v2 .steps-content .steps {
     padding-left: 20px;
   }
 
-  main .how-to-steps-accordion .steps-content .steps-content-backg {
+  main .how-to-v2 .steps-content .steps-content-backg {
     left: -90px;
     width: 67%;
     transform: scale(0.9);
@@ -183,31 +183,31 @@ main .how-to-steps-accordion.image {
 
 @media (min-width: 1280px) {
 
-  main .how-to-steps-accordion h2 {
+  main .how-to-v2 h2 {
     font-size: 36px;
   }
 
-  main .how-to-steps-accordion.video,
-  main .how-to-steps-accordion.image  {
+  main .how-to-v2.video,
+  main .how-to-v2.image  {
     max-width: 1300px;
     margin: auto;
   }
 
-  main .how-to-steps-accordion.image .image-container img,
-  main .how-to-steps-accordion.video .video-container > * {
+  main .how-to-v2.image .image-container img,
+  main .how-to-v2.video .video-container > * {
     max-height: 300px;
     max-width: 533px;
   }
 
-  main .how-to-steps-accordion.image .image-container {
+  main .how-to-v2.image .image-container {
     display: inline-block;
   }
 
-  main .how-to-steps-accordion .steps-content {
+  main .how-to-v2 .steps-content {
     margin-top: 30px;
   }
 
-  main .how-to-steps-accordion ol li h3 {
+  main .how-to-v2 ol li h3 {
     text-align: left;
     font-size: 22px;
     line-height: 28.6px;