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

Merge branch 'develop' into feature/CSR-803-refactoring-2

Browse source
This commit is contained in:
Adam Caouette 2022-11-11 10:42:08 -05:00
commit 76109e0e9e
4 changed files with 70 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/common-components/modal/modal.vue
View file

@ -16,16 +16,19 @@
aria-label="Close"></button> aria-label="Close"></button>
</div> </div>
<div class="modal-body ps-4 pe-4 pt-5 pb-4"> <div class="modal-body ps-4 pe-4 pt-5 pb-4">
<img :src="this.ModalImage" class="w-100 mb-4" alt="" /> <img :src="this.ModalImage" class="mw-100 d-flex mx-auto mb-4" alt="" />
<h5 class="mb-4" v-html="this.ModalHeadline"></h5> <h5 class="mb-4" v-html="this.ModalHeadline"></h5>
<p class="fw-bold mb-2 subheader-text" v-html="this.ModalSubheadertext"></p> <p class="fw-bold mb-2 subheader-text" v-html="this.ModalSubheadertext"></p>
<p class="mb-0" v-html="this.ModalBodyText"></p> <p class="mb-0" v-html="this.ModalBodyText"></p>
</div> </div>
<div class="modal-footer px-5 py-4"> <div class="modal-footer px-5 py-4">
<button <buttonMain
class="btn btn-primary w-100" class="w-100"
data-bs-dismiss="modal" ref="buttonMain"
buttonText="ModalCloseButtonText"></button> isPrimary
:buttonText="ModalCloseButtonText"
@click-event="buttonClick"
data-bs-dismiss="modal" />
</div> </div>
</div> </div>
</div> </div>
@ -33,6 +36,8 @@
</template> </template>
<script> <script>
import buttonMain from "@/ux-components/button-main/button-main";
export default { export default {
name: "modal", name: "modal",
props: { props: {
@ -55,6 +60,9 @@ export default {
return this.getCmsContent(this.cmsWidgetName, "FooterText"); return this.getCmsContent(this.cmsWidgetName, "FooterText");
}, },
}, },
components: {
buttonMain,
},
}; };
</script> </script>
@ -104,7 +112,6 @@ export default {
box-shadow: 0px -1px 0px rgba(179, 180, 181, 0.3); box-shadow: 0px -1px 0px rgba(179, 180, 181, 0.3);
button { button {
margin: 0; margin: 0;
height: 3rem;
} }
} }
} }

4
src/layouts/vin-lookup/vin-lookup.vue
View file

@ -10,7 +10,11 @@
<div class="fade-on-route-transition sub-container make-tall"> <div class="fade-on-route-transition sub-container make-tall">
<div class="row mt-2"> <div class="row mt-2">
<div class="col"> <div class="col">
<!-- includeSearchIcon and questionAlignment, placeholderText for testing only. Remove after testing. -->
<textboxQuestion <textboxQuestion
includeSearchIcon
questionAlignment="center"
placeholderText="Styled for testing only"
cmsWidgetName="VinNumberQuestionWidget" cmsWidgetName="VinNumberQuestionWidget"
v-model="vin" v-model="vin"
inputId="vin" inputId="vin"

9
src/styles/common-error-styles.scss
View file

@ -3,6 +3,7 @@ html {
// START HOVER // START HOVER
&.list-button-horizontal, &.list-button-horizontal,
&.list-button, &.list-button,
&.list-button.list-group,
&.list-card { &.list-card {
border: 1px solid $red; border: 1px solid $red;
position: relative; position: relative;
@ -16,6 +17,9 @@ html {
@include box-shadow-hover($red-200); @include box-shadow-hover($red-200);
z-index: 5; z-index: 5;
} }
input[type="radio"]:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $red;
}
} }
&.ui-radio { &.ui-radio {
@ -26,6 +30,11 @@ html {
} }
} }
} }
.form-check-input {
&:focus {
@include box-shadow-hover($red-200);
}
}
// END HOVER // END HOVER
&.list-button, &.list-button,

90
src/ux-components/list-button/list-button.vue
View file

@ -60,56 +60,54 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.list-group { .loader {
.loader { position: absolute;
position: absolute; }
} .list-button {
&.list-button { outline: none;
outline: none; input[type="radio"],
input[type="radio"], input[type="checkbox"] {
input[type="checkbox"] { position: static; //override bootstrap
position: static; //override bootstrap
&:focus-visible + .list-button-content { &:focus-visible + .list-button-content {
box-shadow: 0 0 0 2.5px $blue; box-shadow: 0 0 0 2.5px $blue;
} }
&:focus + .list-button-content { &:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $blue; box-shadow: 0 0 0 2.5px $blue;
} }
&:checked + .list-button-content { &:checked + .list-button-content {
color: $black; color: $black;
font-weight: 500; font-weight: 500;
background: $blue-100; background: $blue-100;
box-shadow: 0 0 0 1px $blue; box-shadow: 0 0 0 1px $blue;
} }
&:checked:focus + .list-button-content { &:checked:focus + .list-button-content {
box-shadow: 0 0 0 2.5px $blue; box-shadow: 0 0 0 2.5px $blue;
} }
&:checked + .list-button-content p, &:checked + .list-button-content p,
&:checked + .list-button-content span { &:checked + .list-button-content span {
font-weight: 500; font-weight: 500;
} }
&:checked + .list-button-content span:nth-child(2) { &:checked + .list-button-content span:nth-child(2) {
font-weight: 400; font-weight: 400;
color: $gray-600; color: $gray-600;
}
} }
} }
.list-button-content { }
color: $gray-600; .list-button-content {
position: relative; color: $gray-600;
background: $white; position: relative;
transition: all 150ms linear; background: $white;
border-radius: $border-radius-lg; transition: all 150ms linear;
border: 1px solid $gray-500; border-radius: $border-radius-lg;
width: 100%; border: 1px solid $gray-500;
outline: none; width: 100%;
outline: none;
span { span {
&.small { &.small {
font-size: 0.75rem; font-size: 0.75rem;
color: $gray-550; color: $gray-550;
}
} }
} }
} }