entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 12 Releases Wiki Activity

css: improve styles of form field on error (#75382)

This commit is contained in:
Thomas Jund 2023-03-16 11:10:04 +01:00 committed by Frédéric Péters
parent 750d6f1f9d
commit 0faa09fada
1 changed files with 48 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
static/includes/_forms.scss
View File

@ -1,7 +1,7 @@
@import 'data_uris';
$form-accent-color: null !default;
$error-color: red !default;
$error-color: #DA0000 !default;
$button-background: #37a7da !default;
$button-color: text-color($button-background) !default;
$button-border: 1px solid transparent !default;
@ -37,6 +37,11 @@ $widget-unique-checkbox-position: bottom !default; // also possible: left
// light: light bottom border, no other border.
$form-style: classic !default;
// $field-on-error-style: possible values are:
// classic: default style.
// none || custom: use to remove style and write your own
$field-on-error-style: classic !default;
// buttons orders and alignment
// work only for wcs forms
// order :
@ -154,18 +159,6 @@ form div.widget {
margin-bottom: 1.5em;
}
div.error {
color: black;
font-weight: bold;
background: transparent url(/static/dialog-warning.png) top left no-repeat;
padding-left: 22px;
margin-left: 5px;
p {
margin: 0;
}
}
span.required {
margin-left: 0.3em;
position: relative;
@ -597,6 +590,40 @@ div.select2-search {
}
}
// Error
.error {
font-size: $font-size-small;
&::before {
content: "\f06a"; // exclamation-circle
font-family: FontAwesome;
margin-right: .33em;
vertical-align: baseline;
}
p {
margin: 0;
display: inline-block;
}
}
@if ($field-on-error-style == classic) {
.widget-with-error {
input, textarea, select {
border-left-color: $error-color;
border-left-width: 3px;
}
.title label {
color: mix($error-color, $font-color, $weight: 70%);
}
div.hint, .content label {
color: mix($error-color, $font-color, $weight: 30%);
}
div.error {
color: $error-color;
}
}
}
@if $form-style == light {
form p label,
label {
@ -614,23 +641,6 @@ div.select2-search {
border-bottom-color: $button-background;
}
}
div.widget-with-error {
input, input[type="text"], input[type="email"],
input[type="password"], input[type="url"], input[type="tel"],
input[type="number"], input[type="search"], input[type="file"],
input[type="date"], input[type="datetime-local"],
input[type="month"], input[type="time"], input[type="week"],
textarea, select {
border-bottom-color: $error-color;
}
}
div.error {
color: $error-color;
font-weight: normal;
padding-left: 0;
margin-left: 0;
background: none;
}
form div.widget {
// increase bottom margin as the single border pushes away the
// widget from the label and we have to compensate.
@ -654,6 +664,14 @@ div.select2-search {
}
}
}
@if ($field-on-error-style = classic) {
.widget-with-error {
input, textarea, select {
border-left-width: 0;
border-color: $error-color;
}
}
}
}
// Button with FontAwesome icon