Merge pull request #94 from szherebchuk/PRODDEV-490

PRODDEV-490: Updated migration and added styles for new button
ymcatwincities · Jan 6, 2022 · d085c9f · d085c9f
2 parents 7385f4d + 6ac745c
commit d085c9f
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 22 deletions.
diff --git a/css/paragraph_skins/button.css b/css/paragraph_skins/button.css
@@ -1,21 +1,31 @@
+.ps-simple_content-openy-memberships-button .field-prgf-description .buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 5px; }
+
 .ps-simple_content-openy-memberships-button a {
   width: 100%;
   font-family: "Cachet", Verdana, Geneva, sans-serif !important;
   font-weight: normal !important;
   text-transform: uppercase;
-  background-color: #92278f;
-  border: 2px solid #92278f;
+  background-color: #0060af;
+  color: #ffffff;
+  border: 2px solid #0060af;
   padding: 19px;
   font-size: 18px;
   line-height: 27px; }
-  @media all and (min-width: 1060px) {
-    .ps-simple_content-openy-memberships-button a {
-      font-size: 24px;
-      line-height: 36px;
-      padding: 15px; } }
-  .ps-simple_content-openy-memberships-button a:hover, .ps-simple_content-openy-memberships-button a:active, .ps-simple_content-openy-memberships-button a:focus {
-    background-color: #ba32b6;
-    border-color: #ba32b6; }
+@media all and (min-width: 1060px) {
+  .ps-simple_content-openy-memberships-button a {
+    font-size: 24px;
+    line-height: 36px;
+    padding: 15px; } }
+.ps-simple_content-openy-memberships-button a.btn-join {
+  color: #ffffff;
+  background-color: #92278f;
+  border: 2px solid #92278f; }
+.ps-simple_content-openy-memberships-button a.btn-join:hover, .ps-simple_content-openy-memberships-button a.btn-join:active, .ps-simple_content-openy-memberships-button a.btn-join:focus {
+  background-color: #ba32b6;
+  border-color: #ba32b6; }
 
 .ps-simple_content-openy-memberships-button .btn-list {
   display: flex; }
@@ -24,6 +34,6 @@
   margin-left: 10px;
   background: white;
   color: #92278f; }
-  .ps-simple_content-openy-memberships-button .free-trial:hover, .ps-simple_content-openy-memberships-button .free-trial:focus {
-    background: white;
-    color: #92278f; }
+.ps-simple_content-openy-memberships-button .free-trial:hover, .ps-simple_content-openy-memberships-button .free-trial:focus {
+  background: white;
+  color: #92278f; }
diff --git a/...erships_demo_content/migrations/migrate_plus.migration.openy_paragraph_simple_content.yml b/...erships_demo_content/migrations/migrate_plus.migration.openy_paragraph_simple_content.yml
@@ -15,8 +15,9 @@ source:
       id: openy_join_the_y_button
       skin: 'openy-memberships-button'
       description: |
-        <p><a class="btn btn-primary" href="/membership-builder">
-        <span class="text">Join</span></a></p>
+        <div class="buttons"><a class="btn btn-primary btn-join" href="/membership-builder">
+        <span class="text">Join the Y</span></a><a class="btn btn-primary" href="/free-trial">
+        <span class="text">Free Trial</span></a></div>
     -
       id: openy_membership_types_content
       skin: 'openy-memberships-simple-content'

diff --git a/scss/paragraph_skins/button.scss b/scss/paragraph_skins/button.scss
@@ -1,13 +1,21 @@
 @import 'variables';
 
 .ps-simple_content-openy-memberships-button {
+  .field-prgf-description {
+    .buttons {
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+  }
   a {
     width: 100%;
     font-family: $font-family-cachet !important;
     font-weight: normal !important;
     text-transform: uppercase;
-    background-color: $dark-purple;
-    border: 2px solid $dark-purple;
+    background-color: $dark-blue;
+    color: $white;
+    border: 2px solid $dark-blue;
 
     padding: 19px;
     font-size: 18px;
@@ -19,11 +27,17 @@
       padding: 15px;
     }
 
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: lighten($dark-purple, 10%);
-      border-color: lighten($dark-purple, 10%);
+    &.btn-join {
+      color: $white;
+      background-color: $dark-purple;
+      border: 2px solid $dark-purple;
+
+      &:hover,
+      &:active,
+      &:focus {
+        background-color: lighten($dark-purple, 10%);
+        border-color: lighten($dark-purple, 10%);
+      }
     }
   }
   .btn-list {