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

CASH-79-bm Styles and modal update for order of items.

Browse source
This commit is contained in:
Bryan Mauger 2025-01-13 13:35:20 -05:00
parent 7a7ed5a17a
commit 6d8e1dfd47
2 changed files with 83 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 class="modal-body ps-5 pe-5 pb-4 pt-1">
<slot></slot>
</div>
<div class="modal-footer px-5 py-4">
<modalButtonMain
isPrimary
class="w-100"
id="modalbtn"
ref="modalButtonMain"
loaderColor="white"
:buttonText="footerButtonText"
@click-event="validateAndEmit"
:class="isFooterButtonDisabled && 'form-test-invalid'" />
<div class="modal-footer px-5 py-4">
<modalButtonMain
isPrimary
class="w-100"
id="modalbtn"
ref="modalButtonMain"
loaderColor="white"
:buttonText="footerButtonText"
@click-event="validateAndEmit"
:class="isFooterButtonDisabled && 'form-test-invalid'" />
</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 {
.modal-backdrop {
height: 100%;

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

@ -102,6 +102,55 @@ export default {
</script>
<style lang="scss" scoped>
.save-progress-modal-question {
.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 {
font-size: 0.875rem;
font-weight: 500;