more styling fun
This commit is contained in:
US\katie.kroell
parent
706b3429f5
commit
2cdf15cb95
1 changed files with 73 additions and 43 deletions
|
|
@ -7,15 +7,24 @@
|
|||
:class="[buttonLabelSubCopy ? 'has-subheader' : '']"
|
||||
for="testradio">
|
||||
<div class="package-specs">
|
||||
<div>
|
||||
<p class="m-0">
|
||||
<span v-html="buttonLabel"></span>
|
||||
</p>
|
||||
<p
|
||||
v-if="buttonLabelSubCopy"
|
||||
class="sub-label m-0"
|
||||
v-html="buttonLabelSubCopy">
|
||||
</p>
|
||||
<div class="button-label">
|
||||
<div class="label-wrapper">
|
||||
<p class="m-0">
|
||||
<span
|
||||
class="mt-1"
|
||||
v-html="buttonLabel"></span>
|
||||
</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 class="hide-when-closed">
|
||||
<ul>
|
||||
|
|
@ -50,13 +59,14 @@
|
|||
<!--ms-n6-->
|
||||
<div
|
||||
v-if="buttonFooterCopy"
|
||||
class="package-footer fw-bold caption mt-4 ml-n4 mr-3"
|
||||
v-html="buttonFooterCopy"></div>
|
||||
class="package-footer fw-bold caption mt-4 mr-3"
|
||||
v-html="buttonFooterCopy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pricing-info">
|
||||
<div class="pricing-info-desktop">
|
||||
<span
|
||||
class="price float-right"
|
||||
class="price"
|
||||
v-html="buttonAuxiliaryCopy"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -123,6 +133,21 @@ export default {
|
|||
.package-wrapper {
|
||||
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 {
|
||||
display: block;
|
||||
height: 100%;
|
||||
|
|
@ -130,6 +155,8 @@ export default {
|
|||
|
||||
.package-label {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
|
|
@ -139,11 +166,12 @@ export default {
|
|||
|
||||
+ .package-label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
padding: 10px;
|
||||
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 0px 10px 0px rgba(0, 0, 0, 0.2);
|
||||
|
|
@ -159,23 +187,11 @@ export default {
|
|||
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 {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 19px;
|
||||
top: 24px;
|
||||
left: 13px;
|
||||
top: 18px;
|
||||
border-radius: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
|
@ -184,7 +200,7 @@ export default {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
+ .package-label {
|
||||
+ .button-label {
|
||||
&:before {
|
||||
border: 0.666667px solid #767676;
|
||||
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;
|
||||
}
|
||||
|
||||
+ .package-label {
|
||||
+ .button-label {
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 1px $heritage-blue-primary;
|
||||
border: none;
|
||||
|
|
@ -238,8 +254,8 @@ export default {
|
|||
}
|
||||
|
||||
.package-specs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
max-height: 0;
|
||||
transition: all 1s ease;
|
||||
|
|
@ -249,7 +265,7 @@ export default {
|
|||
p {
|
||||
color: #4d4e53;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
//display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&.sub-label {
|
||||
|
|
@ -261,7 +277,7 @@ export default {
|
|||
}
|
||||
|
||||
ul {
|
||||
margin:0.5rem 0 0 -.6rem;
|
||||
margin: 0.5rem 0 0 1.25rem;
|
||||
padding: 0;
|
||||
color: $darker-gray;
|
||||
|
||||
|
|
@ -293,19 +309,33 @@ export default {
|
|||
display: none;
|
||||
@include media-breakpoint-up(md) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-info {
|
||||
display: block;
|
||||
span {
|
||||
&.price {
|
||||
color: #075f35;
|
||||
font-size: 0.875rem;
|
||||
font-weight: $font-weight-bold;
|
||||
display: inline-block;
|
||||
.pricing-info-desktop {
|
||||
@include media-breakpoint-down(md) {
|
||||
display: none;
|
||||
span {
|
||||
&.price {
|
||||
color: #075f35;
|
||||
font-size: 0.875rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue