CASH-404 desktop updates.

This commit is contained in:
Bryan Mauger 2025-03-24 13:24:59 -04:00
parent a3a6944d55
commit c539fc6a0b
7 changed files with 15 additions and 9 deletions

View file

@ -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;
}

View file

@ -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 {

View file

@ -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>

View file

@ -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 }}

View file

@ -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 {

View file

@ -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,

View file

@ -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);