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

Merge branch 'develop' into feature/Digital/SSR-122

Browse source
This commit is contained in:
Jeremy Zimmerman 2022-11-18 09:25:10 -05:00
commit c8d22dd61f
4 changed files with 185 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/common-components/button-question/button-question.vue
View file

@ -131,13 +131,15 @@ export default {
}, },
computed: { computed: {
getFieldSetClasses() { getFieldSetClasses() {
if (this.isOverflowScrollable) { if (this.isOverflowScrollable) {
return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0"; return "container-fluid overflow-scroll position-absolute px-5 pb-2";
} else if (this.buttonTypeString == "listCard") { }
return "w-100"; else if (this.buttonType == "listCard") {
} else { return "w-100";
return ""; }
} else {
return "";
}
}, },
getComponentLoopWrapperClasses() { getComponentLoopWrapperClasses() {
let classes; let classes;

8
src/common-components/site-header/site-header.vue
View file

@ -71,5 +71,11 @@ import { globalEvents } from "@/constants/events";
.site-header { .site-header {
padding: 0.97rem 0; padding: 0.97rem 0;
} }
.logo-image {
max-width: 78px;
}
.alert {
left: 0;
top: 72px;
}
</style> </style>

18
src/common-components/site-sub-header/site-sub-header.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden"> <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> <span>
{{ content }} {{ content }}
</span> </span>
@ -44,7 +44,10 @@ import buttonBack from "@/common-components/site-sub-header/button-back/button-b
backButtonAccessibleText() backButtonAccessibleText()
{ {
return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText") return this.getCmsContent(this.cmsWidgetName, "BackButtonAccessibleText")
} },
headerColor() {
return this.subText ? "dark-header" : "light-header";
},
}, },
methods: { methods: {
clickEvent() { clickEvent() {
@ -57,6 +60,14 @@ import buttonBack from "@/common-components/site-sub-header/button-back/button-b
<style lang="scss" scoped> <style lang="scss" scoped>
.dark-header {
color: $black;
}
.light-header {
color: $gray-550;
}
h5 { h5 {
line-height: 32px; line-height: 32px;
max-width: 300px; max-width: 300px;
@ -65,4 +76,7 @@ h5 {
color: inherit; color: inherit;
} }
} }
p.small {
color: $gray-550;
}
</style> </style>

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

@ -1,151 +1,180 @@
html { html {
.has-error { .has-error {
// START HOVER
&.list-button-horizontal,
&.list-button, &.list-button,
&.list-card, &.list-button.list-group,
&.list-card.list-button { &.list-card {
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 {
border: 1px solid $red; border: 1px solid $red;
border-radius: .5rem; position: relative;
} z-index: 4;
label:hover {
box-shadow: 0px 0px 0px 4px $red-200; .button-content {
border-radius: 10px; border: none;
border: 1px solid $red; }
}
&: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 { &.list-button-horizontal {
color: $red; color: $red;
label { input[type="checkbox"]:focus + label,
border: 1px solid $red; input[type="radio"]:focus + label {
&:hover { box-shadow: 0 0 1px $red;
box-shadow: 0px 0px 0px 4px $red-200; }
}
&.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-radio,
&.ui-checkbox { &.ui-checkbox {
input[type=checkbox], input[type="checkbox"],
input[type=radio], input[type="radio"],
input[type=radio]+label:before, input[type="radio"] + label:before,
input[type=checkbox]+label:before { input[type="checkbox"] + label:before {
border: 1px solid $red; border: 1px solid $red;
background-color: initial; background-color: initial;
} }
input[type=checkbox]:checked + label:before { input[type="checkbox"]:checked + label:before {
border: 1px solid $blue; border: 1px solid $blue;
} }
} }
&.textbox-question, &.textbox-question,
&.dropdown-question { &.dropdown-question {
input:hover { p {
box-shadow: 0px 0px 0px 4px $red-200; color: $red;
border-radius: .5rem; }
border: 1px solid $red; input,
} select {
input:focus { border: 1px solid $red;
box-shadow: 0 0 0 2.5px $red; &:focus {
} border: 1px solid transparent;
p { box-shadow: 0 0 0 2.5px $red;
color: $red; }
}
input, &:hover {
select { box-shadow: 0px 0px 0px 4px $red-200;
border: 1px solid transparent; border-radius: 0.5rem;
box-shadow: 0 0 0 1px $red; border: 1px solid $red;
&:focus { }
border: 1px solid transparent; }
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 //Restore to default style if alert box is present
.alertError { .alertError {
.has-error { .has-error {
&.list-button, &.list-button,
&.list-card { &.list-card {
border: 1px solid $gray-500; border: 1px solid $gray-500;
input:not(:focus) { input:not(:focus) {
+ label { + label {
border: none; border: none;
box-shadow: 0 0 0 1px $gray-500; box-shadow: 0 0 0 1px $gray-500;
border-radius: .5rem; 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; color: $red;
font-size: .875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
} }
.form-test-invalid { .form-test-invalid {
&.btn.btn-primary { &.btn.btn-primary {
color: $gray-600; color: $gray-600;
background: $gray-200; background: $gray-200;
cursor: pointer; cursor: pointer;
pointer-events: all; pointer-events: all;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
} }
&.btn.btn-primary:hover { &.btn.btn-primary:hover {
background: $gray-200; background: $gray-200;
box-shadow: none; box-shadow: none;
} }
&.btn.btn-primary:focus, &.btn.btn-primary:focus,
&.btn.btn-primary:focus-visible { &.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;
} }
}
} }
}