WIP

wp/wp-content/themes/medicalalert/src/scss/global.scss

@@ -20,7 +20,11 @@ body {
 }
 
 .overflow-hidden {
-    overflow: hidden
+    overflow: hidden;
+}
+
+.overflow-x-hidden {
+    overflow-x: hidden;
 }
 
 .z-0 {
@@ -130,31 +134,16 @@ input[type="submit"].gform_button,
 button[type="submit"].single_add_to_cart_button,
 #searchBtn {
     border: none;
-    padding: 14px;
+    padding: 10px 36px;
     background-color: $orange !important;
     color: $white !important;
-    font-size: 20px;
+    font-size: 16px;
     font-weight: 600;
     text-decoration: none;
     box-sizing: border-box;
     display: inline-block;
     line-height: 20.21px;
-    border-radius: 10px;
-}
-
-.button--primary {
-    border: none;
-    padding: 8px 20px;
-    background-color: $orange;
-    /* Define the actual color, not a variable */
-    color: $white;
-    /* Define the actual color, not a variable */
-    font-size: 25px;
-    font-weight: 600;
-    text-decoration: none;
-    display: inline-block;
-    line-height: 36px;
-    /* Add any additional styles you want here */
+    border-radius: 8px;
 }
 
 // Background Colors Configurations
@@ -359,34 +348,6 @@ button[type="submit"].single_add_to_cart_button,
     }
 }
 
-.padding-top-medium {
-    @include media-breakpoint-up(xs) {
-        padding-top: .75rem;
-    }
-
-    @include media-breakpoint-up(md) {
-        padding-top: 1rem;
-    }
-
-    @include media-breakpoint-up(md) {
-        padding-top: 2rem;
-    }
-}
-
-.padding-top-large {
-    @include media-breakpoint-up(xs) {
-        padding-top: 3rem;
-    }
-
-    @include media-breakpoint-up(md) {
-        padding-top: 4rem;
-    }
-
-    @include media-breakpoint-up(lg) {
-        padding-top: 6rem;
-    }
-}
-
 .padding-bottom-small {
     @include media-breakpoint-up(xs) {
         padding-bottom: 0.25rem;
@@ -401,18 +362,46 @@ button[type="submit"].single_add_to_cart_button,
     }
 }
 
-.padding-bottom-medium {
+.padding-top-medium {
     @include media-breakpoint-up(xs) {
-        padding-bottom: .75rem;
+        padding-top: 1rem;
     }
 
     @include media-breakpoint-up(md) {
-        padding-bottom: 1rem;
+        padding-top: 2rem;
     }
 
     @include media-breakpoint-up(lg) {
+        padding-top: 3rem;
+    }
+}
+
+.padding-bottom-medium {
+    @include media-breakpoint-up(xs) {
+        padding-bottom: 1rem;
+    }
+
+    @include media-breakpoint-up(md) {
         padding-bottom: 2rem;
     }
+
+    @include media-breakpoint-up(lg) {
+        padding-bottom: 3rem;
+    }
+}
+
+.padding-top-large {
+    @include media-breakpoint-up(xs) {
+        padding-top: 3rem;
+    }
+
+    @include media-breakpoint-up(md) {
+        padding-top: 4rem;
+    }
+
+    @include media-breakpoint-up(lg) {
+        padding-top: 6rem;
+    }
 }
 
 .padding-bottom-large {
@@ -516,31 +505,60 @@ button[type="submit"].single_add_to_cart_button,
     background: $ma-red;
 }
 
+.btn {
+    border-radius: 0.5rem;
+    padding: 0.4rem 2rem;
+    font-weight: bold;
+}
+
 .btn-red {
     background: $ma-red;
     color: white;
-    font-weight: bold;
-    padding: .5em 3em;
-    border-radius: 10px;
+    // font-weight: bold;
+    // padding: .5em 3em;
+    // border-radius: 10px;
 }
 
-.bg-sky {
+.btn-outline-primary {
     color: $ma-sky;
+    border-color: $ma-sky;
+    background: white;
+}
+
+.btn-check:checked+.btn-outline-primary,
+.btn-check:active+.btn-outline-primary,
+.btn-outline-primary:hover,
+.btn-outline-primary:active,
+.btn-outline-primary.active,
+.btn-outline-primary.dropdown-toggle.show {
+    color: $ma-sky;
+    border-color: $ma-sky;
+    background: #EBF5FF;
+}
+
+.btn-check:focus+.btn-outline-primary,
+.btn-outline-primary:focus {
+    box-shadow: 0 0 0 0.25rem rgba(153, 173, 237, 0.5);
+}
+
+
+.bg-sky {
+    background: $ma-sky;
 }
 
 .bg-purple {
-    color: $ma-purple;
+    background: $ma-purple;
 }
 
 .bg-yellow {
-    color: $ma-yellow;
+    background: $ma-yellow;
 }
 
 .bg-green {
-    color: $ma-green;
+    background: $ma-green;
 }
 
-.g-navy-sky {
+.bg-color-navy-sky {
     background: linear-gradient(90deg, rgba(0, 0, 102, 1) 0%, rgba(51, 153, 255, 1) 100%);
 }
 
@@ -584,6 +602,19 @@ button[type="submit"].single_add_to_cart_button,
 
 .bg-color-navy-purple {
     background: linear-gradient(90deg, rgba(0, 0, 102, 1) 0%, rgba(126, 91, 239, 1) 100%);
+    color: white;
+
+    li {
+        color: white;
+    }
+
+    p {
+        color: white;
+    }
+
+    a {
+        color: white;
+    }
 }
 
 .bg-color-red-yellow {
@@ -594,12 +625,22 @@ button[type="submit"].single_add_to_cart_button,
     border-radius: 20px;
     background: linear-gradient(to left top, rgba(51, 153, 255, .1) 0%, rgba(51, 153, 255, 0.5) 100%);
     padding: 5px;
+    color: white;
 
     img {
         border-radius: 17px;
     }
 }
 
+ul,
+ol {
+    line-height: 30px !important;
+
+    li {
+        margin-bottom: 6px;
+    }
+}
+
 .mw-250 {
     max-width: 250px;
 }
@@ -616,6 +657,14 @@ button[type="submit"].single_add_to_cart_button,
     }
 }
 
+.border-color-purple-gradient {
+    background: linear-gradient(to left top, rgba(0, 0, 102, 1) 0%, rgba(126, 91, 239, 1) 100%);
+    padding: 5px;
+    position: relative;
+    width: fit-content;
+    margin: 0 auto;
+}
+
 .fs-xs {
     font-size: 14px;
 
@@ -623,4 +672,13 @@ button[type="submit"].single_add_to_cart_button,
         font-size: 14px;
         line-height: 19px;
     }
+}
+
+.fs-sm {
+    font-size: 16px;
+
+    p {
+        font-size: 16px;
+        line-height: 26px;
+    }
 }