Merge branch 'develop' into feature/Digital/SSR-122
This commit is contained in:
Jeremy Zimmerman
commit
c8d22dd61f
4 changed files with 185 additions and 134 deletions
|
|
@ -131,13 +131,15 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
getFieldSetClasses() {
|
||||
if (this.isOverflowScrollable) {
|
||||
return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
|
||||
} else if (this.buttonTypeString == "listCard") {
|
||||
return "w-100";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
if (this.isOverflowScrollable) {
|
||||
return "container-fluid overflow-scroll position-absolute px-5 pb-2";
|
||||
}
|
||||
else if (this.buttonType == "listCard") {
|
||||
return "w-100";
|
||||
}
|
||||
else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
getComponentLoopWrapperClasses() {
|
||||
let classes;
|
||||
|
|
|
|||
|
|
@ -71,5 +71,11 @@ import { globalEvents } from "@/constants/events";
|
|||
.site-header {
|
||||
padding: 0.97rem 0;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
max-width: 78px;
|
||||
}
|
||||
.alert {
|
||||
left: 0;
|
||||
top: 72px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
|
||||
<h5 class="text-center fw-normal mb-0" >
|
||||
<h5 class="text-center fw-normal mb-0" :class="headerColor">
|
||||
<span>
|
||||
{{ content }}
|
||||
</span>
|
||||
|
|
@ -44,7 +44,10 @@ import buttonBack from "@/common-components/site-sub-header/button-back/button-b
|
|||
backButtonAccessibleText()
|
||||
{
|
||||
return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
|
||||
}
|
||||
},
|
||||
headerColor() {
|
||||
return this.subText ? "dark-header" : "light-header";
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
clickEvent() {
|
||||
|
|
@ -57,6 +60,14 @@ import buttonBack from "@/common-components/site-sub-header/button-back/button-b
|
|||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dark-header {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.light-header {
|
||||
color: $gray-550;
|
||||
}
|
||||
|
||||
h5 {
|
||||
line-height: 32px;
|
||||
max-width: 300px;
|
||||
|
|
@ -65,4 +76,7 @@ h5 {
|
|||
color: inherit;
|
||||
}
|
||||
}
|
||||
p.small {
|
||||
color: $gray-550;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,151 +1,180 @@
|
|||
html {
|
||||
.has-error {
|
||||
.has-error {
|
||||
// START HOVER
|
||||
&.list-button-horizontal,
|
||||
&.list-button,
|
||||
&.list-card,
|
||||
&.list-card.list-button {
|
||||
border: none;
|
||||
color: $red;
|
||||
input[type=checkbox]:focus + label,
|
||||
input[type=radio]:focus + label {
|
||||
box-shadow: 0 0 0 2.5px $red;
|
||||
}
|
||||
input[type=checkbox]:checked + label {
|
||||
box-shadow: 0 0 0 1px $red;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 0px 4px $red-200;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
label {
|
||||
&.list-button.list-group,
|
||||
&.list-card {
|
||||
border: 1px solid $red;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
label:hover {
|
||||
box-shadow: 0px 0px 0px 4px $red-200;
|
||||
border-radius: 10px;
|
||||
border: 1px solid $red;
|
||||
}
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
|
||||
.button-content {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@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 {
|
||||
&:hover {
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
@include box-shadow-hover($red-200);
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-check-input {
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 2.5px $red;
|
||||
}
|
||||
}
|
||||
// END HOVER
|
||||
|
||||
&.list-button,
|
||||
&.list-card {
|
||||
color: $red;
|
||||
|
||||
input[type="checkbox"]:focus + label,
|
||||
input[type="radio"]:focus + label {
|
||||
box-shadow: 0 0 0 2.5px $red;
|
||||
}
|
||||
input[type="checkbox"]:checked + label {
|
||||
box-shadow: 0 0 0 1px $red;
|
||||
}
|
||||
&:hover {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
&.list-button-horizontal {
|
||||
color: $red;
|
||||
label {
|
||||
border: 1px solid $red;
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 0px 4px $red-200;
|
||||
color: $red;
|
||||
input[type="checkbox"]:focus + label,
|
||||
input[type="radio"]:focus + label {
|
||||
box-shadow: 0 0 1px $red;
|
||||
}
|
||||
}
|
||||
|
||||
&.grid-item {
|
||||
input[type="radio"] {
|
||||
+ label {
|
||||
border: 1px solid $red;
|
||||
&:hover {
|
||||
background-color: $blue-100;
|
||||
box-shadow: 0px 0px 0px 4px $red-200;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
input[type=checkbox]:focus + label,
|
||||
input[type=radio]:focus + label {
|
||||
box-shadow: 0 0 1px $red;
|
||||
}
|
||||
}
|
||||
&.ui-radio,
|
||||
&.ui-checkbox {
|
||||
input[type=checkbox],
|
||||
input[type=radio],
|
||||
input[type=radio]+label:before,
|
||||
input[type=checkbox]+label:before {
|
||||
border: 1px solid $red;
|
||||
background-color: initial;
|
||||
}
|
||||
input[type=checkbox]:checked + label:before {
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
input[type="checkbox"],
|
||||
input[type="radio"],
|
||||
input[type="radio"] + label:before,
|
||||
input[type="checkbox"] + label:before {
|
||||
border: 1px solid $red;
|
||||
background-color: initial;
|
||||
}
|
||||
input[type="checkbox"]:checked + label:before {
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
}
|
||||
&.textbox-question,
|
||||
&.dropdown-question {
|
||||
input:hover {
|
||||
box-shadow: 0px 0px 0px 4px $red-200;
|
||||
border-radius: .5rem;
|
||||
border: 1px solid $red;
|
||||
}
|
||||
input:focus {
|
||||
box-shadow: 0 0 0 2.5px $red;
|
||||
}
|
||||
p {
|
||||
color: $red;
|
||||
}
|
||||
input,
|
||||
select {
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 0 0 1px $red;
|
||||
&:focus {
|
||||
border: 1px solid transparent;
|
||||
p {
|
||||
color: $red;
|
||||
}
|
||||
input,
|
||||
select {
|
||||
border: 1px solid $red;
|
||||
&:focus {
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 0 0 2.5px $red;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 0px 4px $red-200;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid $red;
|
||||
}
|
||||
}
|
||||
select {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%23d4281c'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.75rem center;
|
||||
background-size: 16px 12px;
|
||||
}
|
||||
}
|
||||
select {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%23d4281c'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 0.75rem center;
|
||||
background-size: 16px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
//Restore to default style if alert box is present
|
||||
.alertError {
|
||||
}
|
||||
//Restore to default style if alert box is present
|
||||
.alertError {
|
||||
.has-error {
|
||||
&.list-button,
|
||||
&.list-card {
|
||||
border: 1px solid $gray-500;
|
||||
input:not(:focus) {
|
||||
+ label {
|
||||
border: none;
|
||||
box-shadow: 0 0 0 1px $gray-500;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
&.list-button,
|
||||
&.list-card {
|
||||
border: 1px solid $gray-500;
|
||||
input:not(:focus) {
|
||||
+ label {
|
||||
border: none;
|
||||
box-shadow: 0 0 0 1px $gray-500;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
input:checked:focus {
|
||||
+ label {
|
||||
border: none;
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
input:checked:not(:focus) {
|
||||
+ label {
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
}
|
||||
input:focus {
|
||||
border: 1px solid $gray-500;
|
||||
+ label {
|
||||
box-shadow: 0 0 0 2.5px transparent;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
+ label {
|
||||
box-shadow: 0 0 0 2.5px transparent;
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
input:checked:focus {
|
||||
+ label {
|
||||
border: none;
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
input:checked:not(:focus) {
|
||||
+ label {
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
border-radius: .5rem;
|
||||
}
|
||||
}
|
||||
input:focus {
|
||||
border: 1px solid $gray-500;
|
||||
+ label {
|
||||
box-shadow: 0 0 0 2.5px transparent;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 4px $blue-300;
|
||||
+ label {
|
||||
box-shadow: 0 0 0 2.5px transparent;
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-test-error {
|
||||
}
|
||||
|
||||
.form-test-error {
|
||||
color: $red;
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-test-invalid {
|
||||
}
|
||||
|
||||
.form-test-invalid {
|
||||
&.btn.btn-primary {
|
||||
color: $gray-600;
|
||||
background: $gray-200;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $gray-600;
|
||||
background: $gray-200;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
&.btn.btn-primary:hover {
|
||||
background: $gray-200;
|
||||
box-shadow: none;
|
||||
background: $gray-200;
|
||||
box-shadow: none;
|
||||
}
|
||||
&.btn.btn-primary:focus,
|
||||
&.btn.btn-primary:focus-visible {
|
||||
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
|
||||
box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue