Procházet zdrojové kódy

Plans Page new design - Implement href for all of the CTA buttons for mobile screen (#19858)

* simplifying the logic of button rendering that matches the desktop version

* removing the plans_page_new_btn_buy_now_free mixin and adding the class .plans-cta-buttons-gap

* adding .plans-cta-buttons-gap to the desktop version

* changing table-header to mobile-card while calling the function

* adding styling into .plans-new-table-cta and removing plans-cta-buttons-gap usage from desktop version

* moving .plans-cta-buttons-gap into  .plans-card-cta-container-monthly-annual

* renaming the gap class to .plans-card-cta-buttons-container and using nth-child approach

* using the nth-child approach in .plans-new-table-cta

GitOrigin-RevId: 692814af8d8cf4dda0ea53dea9a3fe4adcf1dcd3
Davinder Singh před 2 roky
rodič
revize
3a084d9606

+ 12 - 6
services/web/frontend/stylesheets/app/plans/plans-new-design.less

@@ -412,6 +412,9 @@
 
     .plans-new-table-cta {
       margin-top: auto;
+      a:nth-child(2) {
+        margin-top: var(--spacing-04);
+      }
     }
   }
 
@@ -676,12 +679,6 @@
       margin-top: var(--spacing-06);
     }
 
-    .additional-link-buy-btn-container {
-      text-align: center;
-      width: 100%;
-      padding-top: var(--spacing-04);
-    }
-
     .highlighted-plans-card {
       border: 2px solid var(--green-50) !important;
     }
@@ -758,6 +755,15 @@
           }
         }
 
+        .plans-card-cta-container-monthly-annual {
+          margin-top: var(--spacing-08);
+          .plans-card-cta-buttons-container {
+            a:nth-child(2) {
+              margin-top: var(--spacing-04);
+            }
+          }
+        }
+
         .group-members-picker-container-mobile {
           margin-top: var(--spacing-08);
         }