Merge pull request #63 from ymcatwincities/styling_fixes

Memberships styling fixes
ymcatwincities · May 6, 2021 · 21d62d6 · 21d62d6
2 parents 893517c + d579d7b
commit 21d62d6
Show file tree

Hide file tree

Showing 10 changed files with 148 additions and 79 deletions.
diff --git a/css/paragraph_skins/accordion.css b/css/paragraph_skins/accordion.css
@@ -19,6 +19,6 @@
     display: none;
     padding: 10px;
     background-color: #f2f2f2;
-    font-family: Verdana, Arial, Helvetica, sans-serif;
+    font-family: Verdana, Geneva, sans-serif;
     font-size: 12px;
     line-height: 18px; }
diff --git a/css/paragraph_skins/desktop-sidebar.css b/css/paragraph_skins/desktop-sidebar.css
@@ -1,5 +1,11 @@
 .ps-block_container-openy-memberships-desktop-sidebar {
-  padding-bottom: 30px; }
+  padding-bottom: 30px;
+  padding-top: 15px; }
   @media all and (max-width: 1059px) {
     .ps-block_container-openy-memberships-desktop-sidebar {
       display: none; } }
+
+@media (min-width: 992px) and (max-width: 1059px) {
+  #block-openy-lily-content .ps-block_container-openy-memberships-desktop-sidebar,
+  #block-openy-rose-content .ps-block_container-openy-memberships-desktop-sidebar {
+    display: block; } }
diff --git a/css/paragraph_skins/memberships-app.css b/css/paragraph_skins/memberships-app.css
@@ -50,7 +50,7 @@
     .membership-app {
       font-size: 14px; } }
   .membership-app .navigation {
-    background: #fff;
+    background: #ffffff;
     border-top: 5px solid rgba(112, 112, 112, 0.2);
     bottom: 0;
     left: 0;
@@ -66,12 +66,12 @@
           margin: 0; } }
   .membership-app .btn.btn-next {
     padding: 15px 40px;
-    background: #92278F 0% 0% no-repeat padding-box;
+    background: #92278f 0% 0% no-repeat padding-box;
     border-radius: 5px;
     text-align: center;
     font: 24px/26px 'Cachet Medium', Verdana, sans-serif;
     letter-spacing: 0;
-    color: #FFFFFF;
+    color: #ffffff;
     text-transform: uppercase;
     margin: 10px; }
     @media screen and (max-width: 767px) {
@@ -82,26 +82,26 @@
         margin: 0;
         width: 100%; } }
   .membership-app h1.title {
-    color: #231F20;
+    color: #231f20;
     margin: 15px 0px;
     font: 36px/54px 'Cachet Medium', Verdana, sans-serif; }
     @media (min-width: 768px) {
       .membership-app h1.title {
         font: 48px/72px 'Cachet Medium', Verdana, sans-serif; } }
   .membership-app .description {
     margin-bottom: 30px;
-    color: #231F20;
+    color: #231f20;
     font: Regular 14px/21px Verdana; }
   .membership-app h3 {
     font: 24px/36px "Cachet Medium", Verdana, sans-serif;
     letter-spacing: 0px;
-    color: #231F20; }
+    color: #231f20; }
     .membership-app h3.regular {
       font-weight: normal !important; }
   .membership-app h2 {
     font: 24px/36px "Cachet Medium", Verdana, sans-serif;
     letter-spacing: 0px;
-    color: #231F20;
+    color: #231f20;
     padding: 10px 0px; }
     @media (min-width: 768px) {
       .membership-app h2 {
@@ -111,7 +111,7 @@
     align-items: center;
     font: Bold 14px/21px Verdana;
     letter-spacing: 0;
-    color: #0060AF; }
+    color: #0060af; }
     .membership-app a.view-loactions svg {
       margin: 5px; }
   .membership-app .description {
@@ -132,7 +132,7 @@
     .membership-app .income-wrapper h3 {
       font: Bold 14px/21px Verdana;
       letter-spacing: 0px;
-      color: #231F20; }
+      color: #231f20; }
   .membership-app .addon-wrapper {
     align-items: center;
     border: 1px solid #f2f2f2;
@@ -148,12 +148,12 @@
     .membership-app .addon-wrapper h3 {
       font: Bold 14px/21px Verdana;
       letter-spacing: 0px;
-      color: #231F20; }
+      color: #231f20; }
     .membership-app .addon-wrapper button {
       border: none;
       border-radius: 5px;
       background-color: #0060af;
-      color: #fff;
+      color: #ffffff;
       text-transform: uppercase;
       padding: 10px;
       margin-left: auto;
@@ -228,7 +228,7 @@
     height: 18px;
     width: 18px;
     border-radius: 2px;
-    background-color: #fff;
+    background-color: #ffffff;
     border: 2px solid #636466; }
     .membership-app .checkmark::after {
       content: "";
@@ -240,7 +240,7 @@
       padding: 0 15px;
       margin-top: 2px; }
     .membership-app .discount h3 {
-      color: #231F20;
+      color: #231f20;
       font: Bold 14px/21px Verdana;
       letter-spacing: 0px;
       margin-bottom: 15px; }
@@ -257,9 +257,9 @@
     .membership-app .adjustments h2 {
       font: 24px/36px "Cachet Medium", Verdana, sans-serif;
       letter-spacing: 0px;
-      color: #231F20;
+      color: #231f20;
       padding: 10px 0px;
-      border-top: 5px solid #00AEEF; }
+      border-top: 5px solid #00aeef; }
       @media (min-width: 768px) {
         .membership-app .adjustments h2 {
           font: 36px/36px "Cachet Medium", Verdana, sans-serif; } }
@@ -292,7 +292,7 @@
           border: none;
           border-radius: 5px;
           background-color: #0060af;
-          color: #fff;
+          color: #ffffff;
           text-transform: uppercase;
           padding: 10px;
           margin-left: auto;
@@ -323,7 +323,7 @@
           .membership-app .adjustments .addons .members {
             margin-bottom: 30px; } }
   .membership-app .family-wrapper {
-    border: 1px solid #F2F2F2;
+    border: 1px solid #f2f2f2;
     margin-bottom: 10px; }
   .membership-app .label-row {
     display: flex;
@@ -334,7 +334,7 @@
       text-align: left;
       font: Bold 14px/21px Verdana;
       letter-spacing: 0;
-      color: #231F20; }
+      color: #231f20; }
   .membership-app .int-pm {
     display: inline-flex !important;
     align-items: center; }
@@ -357,15 +357,15 @@
       font-weight: bold; }
       .membership-app .int-pm .int-pm-btn.int-pm-btn::before {
         content: '';
-        color: #0060AF;
+        color: #0060af;
         display: block;
         position: absolute;
         width: 18px;
         height: 18px;
         top: 8px;
         left: 8px;
         padding: 1px 2px;
-        border: 2px solid #0060AF;
+        border: 2px solid #0060af;
         border-radius: 50%; }
       .membership-app .int-pm .int-pm-btn.int-pm-btn.int-pm-decrement::before {
         content: '-'; }
@@ -380,9 +380,9 @@
           border: 2px solid rgba(0, 96, 175, 0.5);
           color: rgba(0, 96, 175, 0.8); }
   .membership-app .location {
-    background: #FFFFFF 0% 0% no-repeat padding-box;
+    background: #ffffff 0% 0% no-repeat padding-box;
     border-radius: 5px;
-    border: 2px solid #0060AF;
+    border: 2px solid #0060af;
     cursor: pointer;
     display: flex;
     margin: 5px 0;
@@ -407,22 +407,22 @@
         height: 12px;
         background-color: #636466; }
     .membership-app .location.active {
-      background: #0060AF; }
+      background: #0060af; }
       .membership-app .location.active .radio {
-        border: 1px solid #FFFFFF; }
+        border: 1px solid #ffffff; }
         .membership-app .location.active .radio.active::after {
-          background-color: #FFFFFF; }
+          background-color: #ffffff; }
       .membership-app .location.active .content .name {
-        color: #FFFFFF; }
+        color: #ffffff; }
       .membership-app .location.active .content .address {
-        color: #FFFFFF; }
+        color: #ffffff; }
     .membership-app .location .radio-wrap {
       min-width: 30px;
       margin-top: 6px; }
     .membership-app .location .content {
       min-width: 100%; }
       .membership-app .location .content .name {
-        color: #0060AF;
+        color: #0060af;
         font: Bold 12px/18px Verdana;
         letter-spacing: 0;
         margin-bottom: 5px;
@@ -433,7 +433,7 @@
             margin-bottom: 15px; } }
       .membership-app .location .content .address {
         font: 10px/15px Verdana;
-        color: #231F20;
+        color: #231f20;
         margin-bottom: 0; }
         @media screen and (min-width: 768px) {
           .membership-app .location .content .address {
@@ -450,7 +450,7 @@
         margin-right: -10px; } }
   .membership-app .location-wrapper {
     width: 50%;
-    padding: 0 5px; }
+    padding: 0 5px 10px; }
     @media screen and (min-width: 768px) {
       .membership-app .location-wrapper {
         padding: 10px;
@@ -574,7 +574,7 @@
     .membership-app .vs__dropdown-option:hover {
       cursor: pointer; }
   .membership-app .vs__dropdown-option--highlight {
-    background: #0060AF;
+    background: #0060af;
     color: #fff; }
   .membership-app .vs__dropdown-option--disabled {
     background: inherit;
@@ -590,7 +590,8 @@
     color: #333;
     line-height: 1.4;
     margin: 4px 2px 0px 2px;
-    padding: 0 0.25em; }
+    padding: 0 0.25em;
+    z-index: 0; }
   .membership-app .vs__deselect {
     display: inline-flex;
     appearance: none;
@@ -630,13 +631,14 @@
     box-shadow: none;
     width: 0;
     max-width: 100%;
-    flex-grow: 1; }
+    flex-grow: 1;
+    z-index: 1; }
   .membership-app .vs__search::placeholder {
     color: inherit; }
   .membership-app .vs--unsearchable .vs__search {
     opacity: 1; }
-    .membership-app .vs--unsearchable .vs__search:hover {
-      cursor: pointer; }
+  .membership-app .vs--unsearchable:not(.vs--disabled) .vs__search:hover {
+    cursor: pointer; }
   .membership-app .vs--single.vs--searching:not(.vs--open):not(.vs--loading) .vs__search {
     opacity: .2; }
   .membership-app .vs__spinner {
@@ -663,7 +665,7 @@
     padding: 10px 5px; }
   .membership-app .best-value {
     background: #006600;
-    color: #FFFFFF;
+    color: #ffffff;
     text-transform: uppercase;
     display: flex;
     height: 30px;
@@ -675,27 +677,27 @@
     .membership-app .best-value::after {
       content: '';
       display: block;
-      background-color: #FFFFFF;
+      background-color: #ffffff;
       width: 30px;
       height: 30px;
       transform: translate(20px, 0px) rotate(45deg); }
     .membership-app .best-value::before {
       transform: translate(-20px, 0px) rotate(45deg);
-      background-color: #FFFFFF;
+      background-color: #ffffff;
       content: '';
       display: block;
       width: 30px;
       height: 30px; }
   .membership-app .product {
     padding: 15px;
     border: 1px solid #636466;
-    border-top: 5px solid #0060AF;
+    border-top: 5px solid #0060af;
     margin-bottom: 30px; }
     .membership-app .product h2 {
       text-align: left;
       font: 24px/36px 'Cachet Medium', Verdana, sans-serif;
       letter-spacing: 0;
-      color: #231F20;
+      color: #231f20;
       margin: 0 0 5px;
       padding: 0; }
       @media (min-width: 768px) {
@@ -708,9 +710,9 @@
         .membership-app .product .product-description {
           margin-bottom: 15px; } }
     .membership-app .product .select {
-      background: #92278F 0% 0% no-repeat padding-box;
-      border: 2px solid #92278F;
-      color: #FFFFFF;
+      background: #92278f 0% 0% no-repeat padding-box;
+      border: 2px solid #92278f;
+      color: #ffffff;
       cursor: pointer;
       display: block;
       font: 18px/27px 'Cachet Medium', Verdana, sans-serif;
@@ -744,7 +746,7 @@
             margin-left: auto;
             white-space: nowrap; }
         .membership-app .product .product-columns .options .branch {
-          color: #231F20;
+          color: #231f20;
           font: Bold 14px/21px Verdana;
           letter-spacing: 0;
           padding: 0px 0px 5px; }
@@ -765,7 +767,7 @@
             margin: 0; }
       .membership-app .product .product-columns .title {
         background-color: #f2f2f2;
-        color: #231F20;
+        color: #231f20;
         font: 14px/21px 'Cachet Medium', Verdana, sans-serif;
         padding: 0 5px; }
         @media (min-width: 768px) {
@@ -838,33 +840,33 @@
     min-width: 50%; }
     .membership-app .billing .field.required label::after {
       content: '*';
-      color: #CC0000;
+      color: #cc0000;
       display: inline; }
     .membership-app .billing .field.error .error {
       display: block; }
     .membership-app .billing .field.error input {
-      border: 1px solid #CC0000; }
+      border: 1px solid #cc0000; }
     .membership-app .billing .field .error {
       display: none;
-      color: #CC0000; }
+      color: #cc0000; }
     .membership-app .billing .field label {
       margin-bottom: 10px;
       width: 100%;
       text-align: left;
       font: Bold 14px/21px Verdana;
       letter-spacing: 0px;
-      color: #231F20; }
+      color: #231f20; }
     @media (max-width: 960px) {
       .membership-app .billing .field {
         min-width: 100%; } }
     .membership-app .billing .field input {
-      background: #FFFFFF 0% 0% no-repeat padding-box;
+      background: #ffffff 0% 0% no-repeat padding-box;
       border: 1px solid #636466;
       opacity: 1;
       padding: 15px 10px;
       font: Regular 14px/21px Verdana;
       letter-spacing: 0px;
-      color: #231F20;
+      color: #231f20;
       opacity: 1;
       width: 100%; }
   .membership-app .print-wrapper {