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": {
"white": "White",
"pink": "Pink",
"red": "Red",
"light-blue": "Light Blue"
"light-blue": "Light Blue",
"sky-red": "Blue Red Gradient"
},
"default_value": "white",
"allow_null": 0,
"multiple": 0,
"ui": 0,
"return_format": "value",
"multiple": 0,
"allow_null": 0,
"allow_in_bindings": 1,
"ui": 0,
"ajax": 0,
"placeholder": ""
},
@@ -8380,5 +8380,5 @@
"active": true,
"description": "",
"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 {
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 {
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 {
color: white !important;
}
@@ -11837,25 +11846,25 @@ button[type=submit].single_add_to_cart_button,
color: #00447C;
}
.radial-container-col3-card .sonar {
.col3-card-slice-container .radial {
left: 0;
width: 250px;
top: -646px;
}
.radial-container-col3-card .sonar svg {
.col3-card-slice-container .radial svg {
width: 100%;
max-width: 250px;
}
@media (min-width: 768px) {
.radial-container-col3-card .sonar {
top: -705px;
.col3-card-slice-container .radial {
top: -666px;
}
}
@media (min-width: 992px) {
.radial-container-col3-card .sonar {
top: -745px;
.col3-card-slice-container .radial {
top: -706px;
}
}
.col3-card-slice-container .col3-card-wrapper {
z-index: 1;
}
@@ -12306,13 +12315,11 @@ h6, .h6 {
.products-list-slice-container .products-list-item .bg-white {
border-radius: 16px;
}
.products-list-slice-container .products-list-item .products-list-img {
max-width: 50%;
}
@media (min-width: 992px) {
.products-list-slice-container .products-list-item .products-list-img {
max-width: 70%;
}
.products-list-slice-container .products-list-item .img-container {
height: 250px;
display: flex;
align-items: center;
justify-content: center;
}
.products-list-slice-container .products-list-item .line-sm {
width: 57px;
@@ -12325,6 +12332,7 @@ h6, .h6 {
.products-list-slice-container .products-list-item .products-list-item-inner-wrapper .products-list-title {
color: #000066;
}
.simple-content-slice-container {
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.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 {
.sonar {
.col3-card-slice-container {
.radial {
left: 0;
width: 250px;
svg {
width: 100%;
max-width: 250px;
}
@include media-breakpoint-up(xs) {
width: 250px;
top: -646px;
}
@include media-breakpoint-up(md) {
top: -705px;
top: -666px;
}
@include media-breakpoint-up(lg) {
top: -745px;
top: -706px;
}
}
}
.col3-card-slice-container {
.col3-card-wrapper {
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 {
background: linear-gradient(90deg, rgba(51, 153, 255, 1) 0%, rgba(204, 1, 51, 1) 100%);
h1 {
color: white !important;
}
h2 {
color: white !important;
}
h3 {
color: white !important;
}
strong {
color: white !important;
}
p {
color: white !important;
}

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

@@ -20,12 +20,11 @@
// min-height: 42em;
}
.products-list-img {
max-width: 50%;
@include media-breakpoint-up(lg) {
max-width: 70%;
}
.img-container {
height: 250px;
display: flex;
align-items: center;
justify-content: center;
}
.line-sm {
@@ -36,17 +35,11 @@
.products-list-item-inner-wrapper {
background-color: $white;
// padding: 20px;
// @include media-breakpoint-up(lg) {
// padding: 33px 25px 16px;
// }
.products-list-title {
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 -->
<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}}
<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">
<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)">
@@ -54,8 +57,6 @@
</div>
{{/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">
{{#each image_card}}
<div class="col-lg-4 col3-card-wrapper">
@@ -75,6 +76,6 @@
{{/each}}
</div>
</div>
</section>
</div>
</section>
<!-- 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="bg-white w-100 h-100 d-flex justify-content-between flex-column p-3">
<div>
<div class="text-center">
<img class="products-list-img" src="{{image.url}}" alt="{{image.alt}}" />
<div class="img-container">
<img class="w-100" src="{{image.url}}" alt="{{image.alt}}" />
</div>
<div class="products-list-item-inner-wrapper align-self-stretch">
<div class="line-sm pt-1"></div>

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

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