Merge branch 'develop' into feature/CSR-803-refactoring-2
This commit is contained in:
Adam Caouette
commit
76109e0e9e
4 changed files with 70 additions and 52 deletions
|
|
@ -16,16 +16,19 @@
|
|||
aria-label="Close"></button>
|
||||
</div>
|
||||
<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>
|
||||
<p class="fw-bold mb-2 subheader-text" v-html="this.ModalSubheadertext"></p>
|
||||
<p class="mb-0" v-html="this.ModalBodyText"></p>
|
||||
</div>
|
||||
<div class="modal-footer px-5 py-4">
|
||||
<button
|
||||
class="btn btn-primary w-100"
|
||||
data-bs-dismiss="modal"
|
||||
buttonText="ModalCloseButtonText"></button>
|
||||
<buttonMain
|
||||
class="w-100"
|
||||
ref="buttonMain"
|
||||
isPrimary
|
||||
:buttonText="ModalCloseButtonText"
|
||||
@click-event="buttonClick"
|
||||
data-bs-dismiss="modal" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -33,6 +36,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import buttonMain from "@/ux-components/button-main/button-main";
|
||||
|
||||
export default {
|
||||
name: "modal",
|
||||
props: {
|
||||
|
|
@ -55,6 +60,9 @@ export default {
|
|||
return this.getCmsContent(this.cmsWidgetName, "FooterText");
|
||||
},
|
||||
},
|
||||
components: {
|
||||
buttonMain,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -104,7 +112,6 @@ export default {
|
|||
box-shadow: 0px -1px 0px rgba(179, 180, 181, 0.3);
|
||||
button {
|
||||
margin: 0;
|
||||
height: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,11 @@
|
|||
<div class="fade-on-route-transition sub-container make-tall">
|
||||
<div class="row mt-2">
|
||||
<div class="col">
|
||||
<!-- includeSearchIcon and questionAlignment, placeholderText for testing only. Remove after testing. -->
|
||||
<textboxQuestion
|
||||
includeSearchIcon
|
||||
questionAlignment="center"
|
||||
placeholderText="Styled for testing only"
|
||||
cmsWidgetName="VinNumberQuestionWidget"
|
||||
v-model="vin"
|
||||
inputId="vin"
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ html {
|
|||
// START HOVER
|
||||
&.list-button-horizontal,
|
||||
&.list-button,
|
||||
&.list-button.list-group,
|
||||
&.list-card {
|
||||
border: 1px solid $red;
|
||||
position: relative;
|
||||
|
|
@ -16,6 +17,9 @@ html {
|
|||
@include box-shadow-hover($red-200);
|
||||
z-index: 5;
|
||||
}
|
||||
input[type="radio"]:focus + .list-button-content {
|
||||
box-shadow: 0 0 0 2.5px $red;
|
||||
}
|
||||
}
|
||||
|
||||
&.ui-radio {
|
||||
|
|
@ -26,6 +30,11 @@ html {
|
|||
}
|
||||
}
|
||||
}
|
||||
.form-check-input {
|
||||
&:focus {
|
||||
@include box-shadow-hover($red-200);
|
||||
}
|
||||
}
|
||||
// END HOVER
|
||||
|
||||
&.list-button,
|
||||
|
|
|
|||
|
|
@ -60,56 +60,54 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-group {
|
||||
.loader {
|
||||
position: absolute;
|
||||
}
|
||||
&.list-button {
|
||||
outline: none;
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
position: static; //override bootstrap
|
||||
.loader {
|
||||
position: absolute;
|
||||
}
|
||||
.list-button {
|
||||
outline: none;
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
position: static; //override bootstrap
|
||||
|
||||
&:focus-visible + .list-button-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:focus + .list-button-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:checked + .list-button-content {
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
background: $blue-100;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
}
|
||||
&:checked:focus + .list-button-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:checked + .list-button-content p,
|
||||
&:checked + .list-button-content span {
|
||||
font-weight: 500;
|
||||
}
|
||||
&:checked + .list-button-content span:nth-child(2) {
|
||||
font-weight: 400;
|
||||
color: $gray-600;
|
||||
}
|
||||
&:focus-visible + .list-button-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:focus + .list-button-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:checked + .list-button-content {
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
background: $blue-100;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
}
|
||||
&:checked:focus + .list-button-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:checked + .list-button-content p,
|
||||
&:checked + .list-button-content span {
|
||||
font-weight: 500;
|
||||
}
|
||||
&:checked + .list-button-content span:nth-child(2) {
|
||||
font-weight: 400;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
.list-button-content {
|
||||
color: $gray-600;
|
||||
position: relative;
|
||||
background: $white;
|
||||
transition: all 150ms linear;
|
||||
border-radius: $border-radius-lg;
|
||||
border: 1px solid $gray-500;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
.list-button-content {
|
||||
color: $gray-600;
|
||||
position: relative;
|
||||
background: $white;
|
||||
transition: all 150ms linear;
|
||||
border-radius: $border-radius-lg;
|
||||
border: 1px solid $gray-500;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
|
||||
span {
|
||||
&.small {
|
||||
font-size: 0.75rem;
|
||||
color: $gray-550;
|
||||
}
|
||||
span {
|
||||
&.small {
|
||||
font-size: 0.75rem;
|
||||
color: $gray-550;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue