ofco/medicalalert-web-reloaded
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

radial styles

Browse Source
This commit is contained in:
Haley Bristol
2024-12-19 09:01:15 -08:00
parent 3119c67f8d
commit e64e4b1b28
9 changed files with 130 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
wp/wp-content/themes/medicalalert/acf-json/group_625dc5c18c6d5.json
View File

@@ -6468,15 +6468,15 @@
}, },
"choices": { "choices": {
"white": "White", "white": "White",
"pink": "Pink", "light-blue": "Light Blue",
"red": "Red", "sky-red": "Blue Red Gradient"
"light-blue": "Light Blue"
}, },
"default_value": "white", "default_value": "white",
"allow_null": 0,
"multiple": 0,
"ui": 0,
"return_format": "value", "return_format": "value",
"multiple": 0,
"allow_null": 0,
"allow_in_bindings": 1,
"ui": 0,
"ajax": 0, "ajax": 0,
"placeholder": "" "placeholder": ""
}, },
@@ -8380,5 +8380,5 @@
"active": true, "active": true,
"description": "", "description": "",
"show_in_rest": 0, "show_in_rest": 0,
"modified": 1734566269 "modified": 1734570550
} }

36
wp/wp-content/themes/medicalalert/dist/app.css vendored
View File

@@ -11700,9 +11700,18 @@ button[type=submit].single_add_to_cart_button,
.bg-color-sky-red { .bg-color-sky-red {
background: linear-gradient(90deg, #3399ff 0%, #cc0133 100%); background: linear-gradient(90deg, #3399ff 0%, #cc0133 100%);
} }
.bg-color-sky-red h1, .bg-color-sky-red .headline-largest, .bg-color-sky-red .h1 {
color: white !important;
}
.bg-color-sky-red h2, .bg-color-sky-red .headline-large, .bg-color-sky-red .h2 { .bg-color-sky-red h2, .bg-color-sky-red .headline-large, .bg-color-sky-red .h2 {
color: white !important; color: white !important;
} }
.bg-color-sky-red h3, .bg-color-sky-red .headline-standard, .bg-color-sky-red .h3 {
color: white !important;
}
.bg-color-sky-red strong {
color: white !important;
}
.bg-color-sky-red p { .bg-color-sky-red p {
color: white !important; color: white !important;
} }
@@ -11837,25 +11846,25 @@ button[type=submit].single_add_to_cart_button,
color: #00447C; color: #00447C;
} }
.radial-container-col3-card .sonar { .col3-card-slice-container .radial {
left: 0;
width: 250px; width: 250px;
top: -646px; top: -646px;
} }
.radial-container-col3-card .sonar svg { .col3-card-slice-container .radial svg {
width: 100%; width: 100%;
max-width: 250px; max-width: 250px;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.radial-container-col3-card .sonar { .col3-card-slice-container .radial {
top: -705px; top: -666px;
} }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.radial-container-col3-card .sonar { .col3-card-slice-container .radial {
top: -745px; top: -706px;
} }
} }
.col3-card-slice-container .col3-card-wrapper { .col3-card-slice-container .col3-card-wrapper {
z-index: 1; z-index: 1;
} }
@@ -12306,13 +12315,11 @@ h6, .h6 {
.products-list-slice-container .products-list-item .bg-white { .products-list-slice-container .products-list-item .bg-white {
border-radius: 16px; border-radius: 16px;
} }
.products-list-slice-container .products-list-item .products-list-img { .products-list-slice-container .products-list-item .img-container {
max-width: 50%; height: 250px;
} display: flex;
@media (min-width: 992px) { align-items: center;
.products-list-slice-container .products-list-item .products-list-img { justify-content: center;
max-width: 70%;
}
} }
.products-list-slice-container .products-list-item .line-sm { .products-list-slice-container .products-list-item .line-sm {
width: 57px; width: 57px;
@@ -12325,6 +12332,7 @@ h6, .h6 {
.products-list-slice-container .products-list-item .products-list-item-inner-wrapper .products-list-title { .products-list-slice-container .products-list-item .products-list-item-inner-wrapper .products-list-title {
color: #000066; color: #000066;
} }
.simple-content-slice-container { .simple-content-slice-container {
overflow: hidden; overflow: hidden;
} }

2
wp/wp-content/themes/medicalalert/dist/mix-manifest.json vendored
View File

@@ -1,4 +1,4 @@
{ {
"/app.js": "/app.js?id=def087bfee86b3ced20472c4fd21ee05", "/app.js": "/app.js?id=def087bfee86b3ced20472c4fd21ee05",
"/app.css": "/app.css?id=f939fc4646ec2c4f5fa616ca656f10f2" "/app.css": "/app.css?id=7aa0119c41bf190070a47379bae56e5e"
} }

16
wp/wp-content/themes/medicalalert/src/scss/col3-card.scss
View File

@@ -1,27 +1,25 @@
.radial-container-col3-card { .col3-card-slice-container {
.sonar { .radial {
left: 0;
width: 250px;
svg { svg {
width: 100%; width: 100%;
max-width: 250px; max-width: 250px;
} }
@include media-breakpoint-up(xs) { @include media-breakpoint-up(xs) {
width: 250px;
top: -646px; top: -646px;
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
top: -705px; top: -666px;
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
top: -745px; top: -706px;
} }
} }
}
.col3-card-slice-container {
.col3-card-wrapper { .col3-card-wrapper {
z-index: 1; z-index: 1;

12
wp/wp-content/themes/medicalalert/src/scss/global.scss
View File

@@ -561,10 +561,22 @@ button[type="submit"].single_add_to_cart_button,
.bg-color-sky-red { .bg-color-sky-red {
background: linear-gradient(90deg, rgba(51, 153, 255, 1) 0%, rgba(204, 1, 51, 1) 100%); background: linear-gradient(90deg, rgba(51, 153, 255, 1) 0%, rgba(204, 1, 51, 1) 100%);
h1 {
color: white !important;
}
h2 { h2 {
color: white !important; color: white !important;
} }
h3 {
color: white !important;
}
strong {
color: white !important;
}
p { p {
color: white !important; color: white !important;
} }

17
wp/wp-content/themes/medicalalert/src/scss/products-list.scss
View File

@@ -20,12 +20,11 @@
// min-height: 42em; // min-height: 42em;
} }
.products-list-img { .img-container {
max-width: 50%; height: 250px;
display: flex;
@include media-breakpoint-up(lg) { align-items: center;
max-width: 70%; justify-content: center;
}
} }
.line-sm { .line-sm {
@@ -36,17 +35,11 @@
.products-list-item-inner-wrapper { .products-list-item-inner-wrapper {
background-color: $white; background-color: $white;
// padding: 20px;
// @include media-breakpoint-up(lg) {
// padding: 33px 25px 16px;
// }
.products-list-title { .products-list-title {
color: $consumer-primary; color: $consumer-primary;
} }
.products-list-link {}
} }
} }
} }

13
wp/wp-content/themes/medicalalert/tpl/col3_card.tpl
View File

@@ -1,7 +1,10 @@
<!-- Col3 Card BEGIN --> <!-- Col3 Card BEGIN -->
<div class="radial-container-col3-card p-relative overflow-hidden">
<section class="container-fluid col3-card-slice-container p-relative z-0 bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="container">
{{#if radial_graphic}} {{#if radial_graphic}}
<div class="p-absolute sonar"> <div class="p-absolute radial z-1">
<svg class="w-100" width="645" height="1023" viewBox="0 0 645 1023" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg class="w-100" width="645" height="1023" viewBox="0 0 645 1023" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_293_290" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-378" y="0" width="1023" height="1023"> <mask id="mask0_293_290" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-378" y="0" width="1023" height="1023">
<g opacity="0.4" clip-path="url(#clip0_293_290)"> <g opacity="0.4" clip-path="url(#clip0_293_290)">
@@ -54,8 +57,6 @@
</div> </div>
{{/if}} {{/if}}
<section class="container-fluid col3-card-slice-container bg-color-{{background_color}} padding-top-{{padding_top}} padding-bottom-{{padding_bottom}}">
<div class="container">
<div class="row"> <div class="row">
{{#each image_card}} {{#each image_card}}
<div class="col-lg-4 col3-card-wrapper"> <div class="col-lg-4 col3-card-wrapper">
@@ -75,6 +76,6 @@
{{/each}} {{/each}}
</div> </div>
</div> </div>
</section>
</div> </section>
<!-- Col3 Card END --> <!-- Col3 Card END -->

4
wp/wp-content/themes/medicalalert/tpl/products_list.tpl
View File

@@ -7,8 +7,8 @@
<div class="products-list-item h-100"> <div class="products-list-item h-100">
<div class="bg-white w-100 h-100 d-flex justify-content-between flex-column p-3"> <div class="bg-white w-100 h-100 d-flex justify-content-between flex-column p-3">
<div> <div>
<div class="text-center"> <div class="img-container">
<img class="products-list-img" src="{{image.url}}" alt="{{image.alt}}" /> <img class="w-100" src="{{image.url}}" alt="{{image.alt}}" />
</div> </div>
<div class="products-list-item-inner-wrapper align-self-stretch"> <div class="products-list-item-inner-wrapper align-self-stretch">
<div class="line-sm pt-1"></div> <div class="line-sm pt-1"></div>

1
wp/wp-content/themes/medicalalert/tpl/video_copy.tpl
View File

@@ -18,7 +18,6 @@
</clipPath> </clipPath>
</defs> </defs>
</svg> </svg>
</div> </div>
<div class="container py-5"> <div class="container py-5">