styling updates
This commit is contained in:
Katie Kroell
parent
2ba0b4f070
commit
2fa950f32f
1 changed files with 36 additions and 23 deletions
|
|
@ -10,9 +10,6 @@
|
|||
<div>
|
||||
<p class="m-0">
|
||||
<span v-html="buttonLabel"></span>
|
||||
<span
|
||||
class="pricing-info"
|
||||
v-html="buttonAuxiliaryCopy"></span>
|
||||
</p>
|
||||
<p
|
||||
v-if="buttonLabelSubCopy"
|
||||
|
|
@ -57,6 +54,11 @@
|
|||
v-html="buttonFooterCopy"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pricing-info">
|
||||
<span
|
||||
class="price float-right"
|
||||
v-html="buttonAuxiliaryCopy"></span>
|
||||
</div>
|
||||
</div>
|
||||
</baseInputButton>
|
||||
</template>
|
||||
|
|
@ -142,7 +144,7 @@ export default {
|
|||
cursor: pointer;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
border: 1px solid $gray-300;
|
||||
border: 0.666667px solid $gray-300;
|
||||
//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);
|
||||
border-radius: 0.5rem;
|
||||
|
|
@ -163,7 +165,7 @@ export default {
|
|||
top: 5px;
|
||||
margin-right: 1rem;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $gray-500;
|
||||
border: 0.666667px solid $gray-500;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
min-width: 16px;
|
||||
|
|
@ -184,7 +186,7 @@ export default {
|
|||
&:hover {
|
||||
+ .package-label {
|
||||
&:before {
|
||||
border: 1px solid #8e9292;
|
||||
border: 0.666667px solid #8e9292;
|
||||
box-shadow: 0px 0px 0px 4px #9fcee6, 0px 1px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
|
@ -206,20 +208,20 @@ export default {
|
|||
}
|
||||
|
||||
+ .package-label {
|
||||
background-color: $blue-100;
|
||||
border: 1px solid $blue;
|
||||
background-color: $background-color-selected;
|
||||
border: 0.666667px solid $heritage-blue-secondary;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
+ .package-label {
|
||||
&:before {
|
||||
box-shadow: 0px 0px 0px 1px $blue;
|
||||
box-shadow: 0px 0px 0px 1px $heritage-blue-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
+ .package-label {
|
||||
&:after {
|
||||
background: $blue;
|
||||
background: $heritage-blue-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -227,16 +229,18 @@ export default {
|
|||
&:focus {
|
||||
+ .package-label {
|
||||
&:before {
|
||||
border: 2px solid $blue;
|
||||
border: 2px solid $heritage-blue-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.package-footer {
|
||||
color: $red;
|
||||
font-weight: $font-weight-bold; // 600 in fmg
|
||||
margin-top: 0.5rem; // not in fmg
|
||||
color: #af2117;
|
||||
font-weight: $font-weight-bold;
|
||||
margin-top: 20px;
|
||||
font-size: 0.875rem;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
.package-specs {
|
||||
|
|
@ -249,32 +253,29 @@ export default {
|
|||
max-height: 500px;
|
||||
}
|
||||
p {
|
||||
font-weight: $font-weight-bold; // 600 in fmg
|
||||
color: #4d4e53;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
span {
|
||||
&.pricing-info {
|
||||
color: $green;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.sub-label {
|
||||
color: $green;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.75rem;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 1rem 0 0 -.6rem; // .9375rem in fmg
|
||||
margin:0.5rem 0 0 -.6rem; // .9375rem in fmg
|
||||
padding: 0;
|
||||
color: $darker-gray;
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5rem;
|
||||
color: $darker-gray;
|
||||
|
||||
a {
|
||||
line-height: 1.5rem;
|
||||
|
|
@ -302,6 +303,18 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-info {
|
||||
display: block;
|
||||
span {
|
||||
&.price {
|
||||
color: #075f35;
|
||||
font-size: 0.875rem;
|
||||
font-weight: $font-weight-bold;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue