css: improve styles of form field on error (#75382) #202
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue