375 lines
No EOL
9 KiB
SCSS
375 lines
No EOL
9 KiB
SCSS
@import "@/styles/ux-variables-svg-strings.scss";
|
|
|
|
html {
|
|
.has-error {
|
|
|
|
// START HOVER
|
|
&.list-button-horizontal,
|
|
&.list-button,
|
|
&.list-button.list-group,
|
|
&.list-card &.option-label {
|
|
border: 1px solid $red;
|
|
position: relative;
|
|
z-index: 4;
|
|
border-radius: 60px;
|
|
|
|
.button-content {
|
|
border: 1px solid $red;
|
|
}
|
|
|
|
input[type="radio"]:focus+.list-button-content {
|
|
box-shadow: 0 0 0 2.5px $red;
|
|
}
|
|
&:not(.selected):not(.no-hover):hover {
|
|
position: relative;
|
|
@include box-shadow-hover($red-200);
|
|
z-index: 5;
|
|
}
|
|
}
|
|
|
|
&.list-card {
|
|
border: 1px solid $red;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
&.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 {
|
|
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: 60px;
|
|
}
|
|
}
|
|
|
|
&.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;
|
|
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.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;
|
|
}
|
|
}
|
|
|
|
&.textbox-question,
|
|
&.dropdown-question {
|
|
p {
|
|
color: $red;
|
|
}
|
|
|
|
input,
|
|
input.form-control,
|
|
select,
|
|
select.form-select,
|
|
input:focus,
|
|
input.form-control:focus,
|
|
input.form-control:focus-within,
|
|
select:focus,
|
|
select.form-select:focus {
|
|
border-color: $red;
|
|
}
|
|
|
|
select,
|
|
select.form-select,
|
|
select:focus,
|
|
select.form-select:focus {
|
|
background-image: url(~@/assets/img/icons/select-error.png);
|
|
}
|
|
}
|
|
}
|
|
|
|
.has-success {
|
|
|
|
// START HOVER
|
|
&.list-button-horizontal,
|
|
&.list-button,
|
|
&.list-button.list-group,
|
|
&.list-card &.option-label {
|
|
border: 1px solid $success;
|
|
position: relative;
|
|
z-index: 4;
|
|
border-radius: 60px;
|
|
|
|
.button-content {
|
|
border: none;
|
|
}
|
|
|
|
&:hover {
|
|
@include box-shadow-hover($green-200);
|
|
z-index: 5;
|
|
}
|
|
|
|
input[type="radio"]:focus+.list-button-content {
|
|
box-shadow: 0 0 0 2.5px $success;
|
|
}
|
|
}
|
|
|
|
&.list-card {
|
|
border: 1px solid $success;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
&.ui-radio {
|
|
&:hover {
|
|
|
|
input[type="radio"],
|
|
input[type="checkbox"] {
|
|
@include box-shadow-hover($green-200);
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-check-input {
|
|
&:focus {
|
|
box-shadow: 0 0 0 2.5px $success;
|
|
}
|
|
}
|
|
|
|
// END HOVER
|
|
|
|
&.list-button {
|
|
color: $success;
|
|
|
|
input[type="checkbox"]:focus+label,
|
|
input[type="radio"]:focus+label {
|
|
box-shadow: 0 0 0 2.5px $success;
|
|
}
|
|
|
|
input[type="checkbox"]:checked+label {
|
|
box-shadow: 0 0 0 1px $success;
|
|
}
|
|
|
|
&:hover {
|
|
border-radius: 60px;
|
|
}
|
|
}
|
|
|
|
&.list-card {
|
|
color: $success;
|
|
|
|
input[type="checkbox"]:focus+label,
|
|
input[type="radio"]:focus+label {
|
|
box-shadow: 0 0 0 2.5px $success;
|
|
}
|
|
|
|
input[type="checkbox"]:checked+label {
|
|
box-shadow: 0 0 0 1px $success;
|
|
}
|
|
|
|
&:hover {
|
|
border-radius: 0.5rem;
|
|
}
|
|
}
|
|
|
|
&.list-button-horizontal {
|
|
color: $success;
|
|
|
|
input[type="checkbox"]:focus+label,
|
|
input[type="radio"]:focus+label {
|
|
box-shadow: 0 0 1px $success;
|
|
}
|
|
}
|
|
|
|
&.grid-item {
|
|
input[type="radio"] {
|
|
+label {
|
|
border: 1px solid $success;
|
|
|
|
&:hover {
|
|
background-color: $blue-100;
|
|
box-shadow: 0px 0px 0px 4px $green-200;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.ui-radio,
|
|
&.ui-checkbox {
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"],
|
|
input[type="radio"]+label:before,
|
|
input[type="checkbox"]+label:before {
|
|
border: 1px solid $success;
|
|
background-color: initial;
|
|
}
|
|
|
|
input[type="checkbox"]:checked+label:before {
|
|
border: 1px solid $blue;
|
|
}
|
|
}
|
|
|
|
&.textbox-question,
|
|
&.dropdown-question {
|
|
p {
|
|
color: $success;
|
|
}
|
|
|
|
input,
|
|
input.form-control,
|
|
select,
|
|
select.form-select,
|
|
input:focus,
|
|
input.form-control:focus,
|
|
input.form-control:focus-within,
|
|
select:focus,
|
|
select.form-select:focus {
|
|
border-color: $success;
|
|
}
|
|
|
|
select,
|
|
select.form-select,
|
|
select:focus,
|
|
select.form-select:focus {
|
|
background-image: url(~@/assets/img/icons/select-success.png);
|
|
}
|
|
}
|
|
}
|
|
|
|
//Quote page radio button group
|
|
.package-main {
|
|
.package-wrapper {
|
|
.has-error {
|
|
input[type="radio"] {
|
|
+.package-label {
|
|
border: 1px solid $red;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//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: 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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-test-error {
|
|
color: $red;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.form-test-invalid {
|
|
&.btn.btn-primary {
|
|
cursor: pointer;
|
|
pointer-events: all;
|
|
}
|
|
}
|
|
} |