CASH-404 desktop updates.
This commit is contained in:
parent
a3a6944d55
commit
c539fc6a0b
7 changed files with 15 additions and 9 deletions
|
|
@ -325,8 +325,11 @@ export default {
|
|||
border: 1px solid $gray-500;
|
||||
border-radius: 0.5rem;
|
||||
min-height: 3rem;
|
||||
max-height: 48px;
|
||||
padding: 12px 16px;
|
||||
padding: 0.75rem 1rem;
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 1rem;
|
||||
min-height: 3.5rem;
|
||||
}
|
||||
&::placeholder {
|
||||
color: $gray-500;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ p.small {
|
|||
}
|
||||
.sub-text {
|
||||
margin: 0;
|
||||
@include responsive-heading-md(0.875rem, 1rem);
|
||||
@include responsive-font-size-md(0.875rem, 1rem);
|
||||
}
|
||||
|
||||
.justify-content-start {
|
||||
|
|
|
|||
|
|
@ -794,6 +794,6 @@ export default {
|
|||
display: block;
|
||||
}
|
||||
:deep(.promo-modal-question a) {
|
||||
@include responsive-heading-md(0.875rem, 1rem);
|
||||
@include responsive-font-size-md(0.875rem, 1rem);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
v-model="selectedValue">
|
||||
<div
|
||||
:aria-label="buttonLabel"
|
||||
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
|
||||
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4 p-md-4">
|
||||
<div class="row-one">
|
||||
<span class="m-0 button-label-copy text-truncate" :class="textPosition">
|
||||
{{ buttonLabel }}
|
||||
|
|
|
|||
|
|
@ -272,7 +272,7 @@ export default {
|
|||
text-align: center;
|
||||
|
||||
a {
|
||||
@include responsive-heading-md(0.875rem, 1rem);
|
||||
@include responsive-font-size-md(0.875rem, 1rem);
|
||||
}
|
||||
|
||||
.button-question {
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ h5,
|
|||
.h5 {
|
||||
line-height: 1.325;
|
||||
font-weight: 400;
|
||||
@include responsive-heading-md(1.25rem, 1.625rem);
|
||||
@include responsive-font-size-md(1.25rem, 1.625rem);
|
||||
}
|
||||
|
||||
h6,
|
||||
|
|
|
|||
|
|
@ -9,11 +9,14 @@
|
|||
box-shadow: 0 0 0 4px $color;
|
||||
}
|
||||
|
||||
//Define heading sizes for medium breakpoints
|
||||
@mixin responsive-heading-md($font-size, $md-font-size) {
|
||||
// Typography size mixin for medium breakpoints
|
||||
// Use this to adjust font size for medium breakpoint
|
||||
@mixin responsive-font-size-md($font-size, $md-font-size) {
|
||||
font-size: $font-size;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
font-size: $md-font-size;
|
||||
}
|
||||
}
|
||||
// Usage: @include responsive-font-size-md(mobile-font-size-in-rem, desktop-font-size-in-rem);
|
||||
// Example: @include responsive-font-size-md(0.875rem, 1rem);
|
||||
Loading…
Reference in a new issue