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

fixing error styles

Browse source
This commit is contained in:
Kulbhushan Kaushik 2022-11-18 08:51:31 -05:00
parent 63bf5d4b77
commit 85327288a7
1 changed files with 153 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,76 +1,106 @@
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: 1px solid $red;
position: relative;
z-index: 4;
.button-content {
border: none; border: none;
color: $red; }
input[type=checkbox]:focus + label,
input[type=radio]:focus + label { &: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; box-shadow: 0 0 0 2.5px $red;
} }
input[type=checkbox]:checked + label { }
&.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; box-shadow: 0 0 0 1px $red;
} }
&:hover { &:hover {
box-shadow: 0px 0px 0px 4px $red-200; border-radius: 0.5rem;
border-radius: .5rem;
}
label {
border: 1px solid $red;
border-radius: .5rem;
}
label:hover {
box-shadow: 0px 0px 0px 4px $red-200;
border-radius: 10px;
border: 1px solid $red;
} }
} }
&.list-button-horizontal { &.list-button-horizontal {
color: $red; color: $red;
label { 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; border: 1px solid $red;
&:hover { &:hover {
background-color: $blue-100;
box-shadow: 0px 0px 0px 4px $red-200; 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 {
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 { p {
color: $red; color: $red;
} }
input, input,
select { select {
border: 1px solid transparent; border: 1px solid $red;
box-shadow: 0 0 0 1px $red;
&:focus { &:focus {
border: 1px solid transparent; 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 { select {
@ -91,20 +121,20 @@ html {
+ 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 { input:checked:focus {
+ label { + label {
border: none; border: none;
box-shadow: 0 0 0 2.5px $blue; box-shadow: 0 0 0 2.5px $blue;
border-radius: .5rem; border-radius: 0.5rem;
} }
} }
input:checked:not(:focus) { input:checked:not(:focus) {
+ label { + label {
box-shadow: 0 0 0 1px $blue; box-shadow: 0 0 0 1px $blue;
border-radius: .5rem; border-radius: 0.5rem;
} }
} }
input:focus { input:focus {
@ -126,7 +156,7 @@ html {
.form-test-error { .form-test-error {
color: $red; color: $red;
font-size: .875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
} }
@ -147,5 +177,4 @@ html {
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;
} }
} }
} }