jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CASH-79: merge Bryan's styling in

Browse source
This commit is contained in:
Adam Caouette 2025-01-13 14:23:06 -05:00
commit 6e17ba01cc
2 changed files with 82 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
src/digital-components/modal/modal.vue
View file

@ -25,17 +25,17 @@
</div> </div>
<div class="modal-body ps-5 pe-5 pb-4 pt-1"> <div class="modal-body ps-5 pe-5 pb-4 pt-1">
<slot></slot> <slot></slot>
</div> <div class="modal-footer px-5 py-4">
<div class="modal-footer px-5 py-4"> <modalButtonMain
<modalButtonMain isPrimary
isPrimary class="w-100"
class="w-100" id="modalbtn"
id="modalbtn" ref="modalButtonMain"
ref="modalButtonMain" loaderColor="white"
loaderColor="white" :buttonText="footerButtonText"
:buttonText="footerButtonText" @click-event="validateAndEmit"
@click-event="validateAndEmit" :class="isFooterButtonDisabled && 'form-test-invalid'" />
:class="isFooterButtonDisabled && 'form-test-invalid'" /> </div>
</div> </div>
</div> </div>
</div> </div>
@ -234,6 +234,29 @@ export default {
} }
} }
} }
.save-progress-modal-question {
p.modal-body {
padding: 0;
}
.modal-body {
display: flex;
flex-direction: column;
.textbox-question {
padding: .25rem 0;
label {
text-align: left;
font-weight: 600;
}
}
}
.modal-disclaimer {
font-size: .75rem;
order: 2;
}
.modal-footer {
padding: 1.5rem 0;
}
}
body { body {
.modal-backdrop { .modal-backdrop {
height: 100%; height: 100%;

48
src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
View file

@ -106,6 +106,54 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.save-progress-modal-question { .save-progress-modal-question {
order: 2; order: 2;
.btn-secondary {
position: relative;
background: $blue-100;
border: 1px solid transparent;
border-radius: $border-radius-lg;
color: $blue;
font-weight: 500;
font-size: .875rem;
transition: all 150ms linear;
height: 3.5rem;
width: 100%;
text-decoration: underline;
text-underline-offset: .5rem;
&:hover {
background: linear-gradient(270deg, $blue 0%, $blue-800 100%);
color: $white;
}
&:focus, // Mouse, touch, stylus focus
&:focus-visible {
// Keyboard focus for accessibility
outline: none;
box-shadow:
0 0 0 3px $white,
0 0 0 5.5px $blue-700;
color: $white;
background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
}
&:disabled {
background: transparent;
color: $gray-550 !important;
font-weight: 400;
height: 48px;
border: 1px solid $gray-550;
border-radius: $border-radius-lg;
cursor: pointer;
pointer-events: all;
}
&.has-loader {
color: $blue;
background-color: $blue;
pointer-events: none;
}
&.delay {
// fixes flicker while transitioning between states
transition: background 0s 0s ease-in-out;
}
}
} }
.applied-promo { .applied-promo {
font-size: 0.875rem; font-size: 0.875rem;