jason/DigitalConsumer.ISS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

more styling fun

Browse source
This commit is contained in:
US\katie.kroell 2026-02-11 15:48:49 -05:00
parent 706b3429f5
commit 2cdf15cb95
1 changed files with 73 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
src/layouts/service-packages/service-package-question/service-package-radio/service-package-radio.vue
View file

@ -7,15 +7,24 @@
:class="[buttonLabelSubCopy ? 'has-subheader' : '']" :class="[buttonLabelSubCopy ? 'has-subheader' : '']"
for="testradio"> for="testradio">
<div class="package-specs"> <div class="package-specs">
<div> <div class="button-label">
<p class="m-0"> <div class="label-wrapper">
<span v-html="buttonLabel"></span> <p class="m-0">
</p> <span
<p class="mt-1"
v-if="buttonLabelSubCopy" v-html="buttonLabel"></span>
class="sub-label m-0" </p>
v-html="buttonLabelSubCopy"> <p
</p> v-if="buttonLabelSubCopy"
class="sub-label m-0"
v-html="buttonLabelSubCopy">
</p>
</div>
<div class="pricing-info-mobile">
<span
class="price"
v-html="buttonAuxiliaryCopy"></span>
</div>
</div> </div>
<div class="hide-when-closed"> <div class="hide-when-closed">
<ul> <ul>
@ -50,13 +59,14 @@
<!--ms-n6--> <!--ms-n6-->
<div <div
v-if="buttonFooterCopy" v-if="buttonFooterCopy"
class="package-footer fw-bold caption mt-4 ml-n4 mr-3" class="package-footer fw-bold caption mt-4 mr-3"
v-html="buttonFooterCopy"></div> v-html="buttonFooterCopy">
</div>
</div> </div>
</div> </div>
<div class="pricing-info"> <div class="pricing-info-desktop">
<span <span
class="price float-right" class="price"
v-html="buttonAuxiliaryCopy"></span> v-html="buttonAuxiliaryCopy"></span>
</div> </div>
</div> </div>
@ -123,6 +133,21 @@ export default {
.package-wrapper { .package-wrapper {
margin: 0.5rem 0; margin: 0.5rem 0;
.button-label {
display: flex;
&:before {
content: "";
position: relative;
top: 5px;
margin-right: 1rem;
border-radius: 50%;
border: 0.666667px solid #767676;
width: 16px;
height: 16px;
min-width: 16px;
}
}
label { label {
display: block; display: block;
height: 100%; height: 100%;
@ -130,6 +155,8 @@ export default {
.package-label { .package-label {
height: 100%; height: 100%;
display: flex;
flex-direction: column;
} }
input[type="radio"] { input[type="radio"] {
@ -139,11 +166,12 @@ export default {
+ .package-label { + .package-label {
display: flex; display: flex;
flex-direction: column;
align-items: flex-start; align-items: flex-start;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
padding: 1rem; padding: 10px;
border: 0.666667px solid #dddddd; border: 0.666667px solid #dddddd;
//box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15), 0px 4px 24px -8px rgba(0, 0, 0, 0.2); //box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.15), 0px 4px 24px -8px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
@ -159,23 +187,11 @@ export default {
min-height: 86px; min-height: 86px;
} }
&:before {
content: "";
position: relative;
top: 5px;
margin-right: 1rem;
border-radius: 50%;
border: 0.666667px solid #767676;
width: 16px;
height: 16px;
min-width: 16px;
}
&:after { &:after {
content: ""; content: "";
position: absolute; position: absolute;
left: 19px; left: 13px;
top: 24px; top: 18px;
border-radius: 50%; border-radius: 50%;
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -184,7 +200,7 @@ export default {
} }
&:hover { &:hover {
+ .package-label { + .button-label {
&:before { &:before {
border: 0.666667px solid #767676; border: 0.666667px solid #767676;
box-shadow: 0px 0px 0px 4px #9fcee6, 0px 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 0px 4px #9fcee6, 0px 1px 4px rgba(0, 0, 0, 0.2);
@ -213,7 +229,7 @@ export default {
max-height: 500px; max-height: 500px;
} }
+ .package-label { + .button-label {
&:before { &:before {
box-shadow: 0px 0px 0px 1px $heritage-blue-primary; box-shadow: 0px 0px 0px 1px $heritage-blue-primary;
border: none; border: none;
@ -238,8 +254,8 @@ export default {
} }
.package-specs { .package-specs {
display: flex; //display: flex;
flex-direction: column; flex-direction: row;
width: 100%; width: 100%;
max-height: 0; max-height: 0;
transition: all 1s ease; transition: all 1s ease;
@ -249,7 +265,7 @@ export default {
p { p {
color: #4d4e53; color: #4d4e53;
font-weight: 600; font-weight: 600;
display: flex; //display: flex;
justify-content: space-between; justify-content: space-between;
&.sub-label { &.sub-label {
@ -261,7 +277,7 @@ export default {
} }
ul { ul {
margin:0.5rem 0 0 -.6rem; margin: 0.5rem 0 0 1.25rem;
padding: 0; padding: 0;
color: $darker-gray; color: $darker-gray;
@ -293,19 +309,33 @@ export default {
display: none; display: none;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
} }
} }
} }
.pricing-info { .pricing-info-desktop {
display: block; @include media-breakpoint-down(md) {
span { display: none;
&.price { span {
color: #075f35; &.price {
font-size: 0.875rem; color: #075f35;
font-weight: $font-weight-bold; font-size: 0.875rem;
display: inline-block; font-weight: $font-weight-bold;
}
}
}
}
.pricing-info-mobile {
@include media-breakpoint-up(md) {
display: none;
span {
&.price {
color: #075f35;
font-size: 0.875rem;
font-weight: $font-weight-bold;
}
} }
} }
} }