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