entrouvert
/
publik-base-theme
16
1
Fork 1
Code Issues Pull Requests 10 Releases Wiki Activity

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

Merged
fpeters merged 22 commits from wip/75382-form-field-on-error into main 2023-04-20 18:36:46 +02:00
Conversation 3 Commits 22 Files Changed 34 +183 -160
34 changed files with 183 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
static/ac-versailles/_custom.scss
View File

@ -37,9 +37,11 @@ div.errornotice {
}
form.quixote {
div.error {
color: #A06718;
font-weight: bold;
@if ($field-on-error-style == custom) {
div.error {
color: #A06718;
font-weight: bold;
}
}
div.comment-field {

2
static/ac-versailles/_vars.scss
View File

@ -28,6 +28,8 @@ $button-background: #6978ba;
$button-color: white;
$buttons-order: previous, cancel, submit;
$field-on-error-style: custom;
$widget-border: 1px solid #cecac4;
$widget-focus-border: 1px solid #6978ba;
$widget-border-radius: 2px;

5
static/cnil/_custom.scss
View File

@ -376,11 +376,6 @@ div.widget label {
}
}
div.error {
background-image: url(img/alerte-saisie.png);
background-size: 16px;
}
#profile span.label {
color: $font-color;
font-weight: bold;

19
static/dsfr/_custom.scss
View File

@ -493,13 +493,18 @@ a.add-more-items--button {
margin-top: 0;
}
.widget div.error {
color: $error-525;
margin-left: 0;
font-weight: normal;
padding-left: 1.5rem;
background: url(error-fill-red.svg) left 0.4rem no-repeat;
background-size: 1rem;
@if ($field-on-error-style == custom) {
.widget div.error {
color: $error-525;
margin-left: 0;
font-weight: normal;
padding-left: 1.5rem;
background: url(error-fill-red.svg) left 0.25rem no-repeat;
background-size: 1rem;
&::before {
content: none;
}
}
}
#footer {

1
static/dsfr/_vars.scss
View File

@ -60,6 +60,7 @@ $widget-custom-radio-checkbox: true;
$widget-custom-radio-checkbox-color: $blue-france-500;
$widget-custom-radio-checkbox-border-color: $grey-800;
$widget-custom-radio-checkbox-marker-color: $blue-france-500;
$field-on-error-style: custom;
$footer-background: white;
$footer-color: $font-color;

14
static/grandlyon-glc/_custom.scss
View File

@ -84,12 +84,14 @@ form ul.errorlist {
}
}
div.error {
color: $primary-color;
font-size: 0.9em;
margin: 5px 0 0 0;
~ input {
border: 1px solid $primary-color;
@if ($field-on-error-style == custom) {
.widget-with-error {
input, textarea, select {
border: 1px solid $primary-color;
}
div.error {
color: $primary-color;
}
}
}

1
static/grandlyon-glc/_vars.scss
View File

@ -33,3 +33,4 @@ $or-separator: true;
$widget-unique-checkbox-position: left;
$widget-custom-radio-checkbox: true;
$field-on-error-style: custom;

18
static/hautes-alpes-cd05-2020/_custom.scss
View File

@ -377,14 +377,16 @@ div#rub_service {
font-weight: normal;
}
div.error {
@extend .errornotice;
font-weight: normal;
min-height: 1.5em;
margin-bottom: 0;
&::before {
font-size: 30px;
top: 0;
@if ($field-on-error-style == custom) {
div.error {
@extend .errornotice;
font-weight: normal;
min-height: 1.5em;
margin-bottom: 0;
&::before {
font-size: 30px;
top: 0;
}
}
}
.previous-button button {

1
static/hautes-alpes-cd05-2020/_vars.scss
View File

@ -54,6 +54,7 @@ $buttons-alignment: flex-end;
$widget-border: 1px solid transparent;
$widget-border-radius: 5px;
$widget-focus-border: 1px solid;
$field-on-error-style: custom;
$wcs-step-color: $blue-light;
// $wcs-step-border-bottom: 1px solid $blue-light;

19
static/hautes-alpes-territoire/_custom.scss
View File

@ -222,15 +222,16 @@ div#rub_service {
font-size: 1.5em;
font-weight: normal;
}
div.error {
@extend .errornotice;
font-weight: normal;
min-height: 1.5em;
margin-bottom: 0;
&::before {
font-size: 30px;
top: 0;
@if ($field-on-error-style == custom) {
div.error {
@extend .errornotice;
font-weight: normal;
min-height: 1.5em;
margin-bottom: 0;
&::before {
font-size: 30px;
top: 0;
}
}
}
.previous-button button {

2
static/hautes-alpes-territoire/_vars.scss
View File

@ -38,6 +38,8 @@ $button-border-radius: 8px;
$buttons-order: cancel, previous, submit;
$buttons-alignment: flex-end;
$field-on-error-style: custom;
$or-separator: false;
$footer-background: $font-color;

80
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;
@ -281,7 +274,7 @@ input, input[type="search"], textarea, select {
margin: 0.2em 0px;
padding: $widget-padding;
max-width: 100%;
transition: background 0.5s ease, color 0.5s ease, border 0.5s ease;
transition: background 0.5s ease, color 0.5s ease;
box-shadow: $widget-box-shadow;
&:focus:not([readonly]) {
background-color: $widget-focus-background;
@ -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

4
static/izi-ici/_custom.scss
View File

@ -474,7 +474,3 @@ button.form-discard-draft {
.a2-block {
padding-bottom: 0.1em;
}
div.error {
margin-left: 0;
}

24
static/lille-metropole-2022/_custom.scss
View File

@ -402,16 +402,22 @@ div.file-upload-widget div.file-button div.widget-message.upload-done::after {
color: green;
}
div.error {
color: $primary-color;
background: url('img/error.svg') center left no-repeat;
}
@if ($field-on-error-style == custom) {
div.error {
color: $primary-color;
background: url('img/error.svg') center left no-repeat;
padding-left: 22px;
&::before {
content: none;
}
}
div.widget-with-error .content {
input, select, textarea, .select2, .file-button {
border: 1px solid $primary-color;
&:focus {
border: $widget-focus-border;
div.widget-with-error .content {
input, select, textarea, .select2, .file-button {
border: 1px solid $primary-color;
&:focus {
border: $widget-focus-border;
}
}
}
}

1
static/lille-metropole-2022/_vars.scss
View File

@ -59,6 +59,7 @@ $cancel-button-style: '%inverted-button';
$widget-focus-border: 1px solid black;
$widget-focus-outline: none;
$field-on-error-style: custom;
$wcs-steps-spacing: 1.25em;
$wcs-steps-background: transparent;

13
static/lille/_custom.scss
View File

@ -782,19 +782,6 @@ div.datetimepicker {
font-size: 0.8rem;
}
form.quixote {
div.error {
padding-left: 0;
background-image: none;
font-weight: normal;
&::before {
content: "\f06a";
font-family: FontAwesome;
padding-right: 1ex;
}
}
}
div.textcell h1 {
@extend %title;
font-size: 2rem;

5
static/loire-atlantique-cd44/_custom.scss
View File

@ -191,11 +191,6 @@ h1.maintitle, h1.form-content--title {
border-bottom: solid 1px #ccc !important;
}
div.error {
margin: 15px;
color: red;
}
.demarches-brouillon, .demarches-encours, .demarches-terminees {
border: solid 2px $ds44-LA !important;
div {

5
static/ma-cnil/_custom.scss
View File

@ -377,11 +377,6 @@ div.widget label {
}
}
div.error {
background-image: url(img/alerte-saisie.png);
background-size: 16px;
}
#profile span.label {
color: $font-color;
font-weight: bold;

21
static/metz-metropole-2019/_custom.scss
View File

@ -897,16 +897,17 @@ div.datetimepicker {
}
form.quixote {
div.error {
padding-left: 0;
margin-left: 0;
background-image: none;
font-weight: normal;
color: #e95f5c;
}
div.widget-with-error {
input[type=text], input[type=email], textarea {
border-color: #e95f5c;
@if ($field-on-error-style == custom) {
div.error {
padding-left: 0;
margin-left: 0;
font-weight: normal;
color: #e95f5c;
}
div.widget-with-error {
input[type=text], input[type=email], textarea {
border-color: #e95f5c;
}
}
}
}

1
static/metz-metropole-2019/_vars.scss
View File

@ -49,6 +49,7 @@ $title-color: $darkblue;
$title-background: transparent;
$title-transform: uppercase;
$field-on-error-style: custom;
$button-background: $darkblue;
$button-border-radius: 0px;
$widget-background: white;

5
static/miribel/_custom.scss
View File

@ -493,11 +493,6 @@ div#rub_service {
}
}
.widget-with-error .error {
color: $red;
background-position: center left;
}
.form-content--body .form-previous{
@extend %blue-button;
}

1
static/miribel/_vars.scss
View File

@ -88,6 +88,7 @@ $cell-image-position: top;
$cell-image-padding: 0;
$cell-border-radius: 5px;
$error-color: $red;
$form-sidebar-width: 25%;
$form-sidebar-gutter: 2rem;
$widget-border: 1px solid $gray-blue-fade;

8
static/nantes/_custom.scss
View File

@ -560,9 +560,11 @@ label {
font-weight: 600;
}
.widget .error {
font-weight: normal;
color: $red-dark;
@if ($field-on-error-style == custom) {
.widget .error {
font-weight: normal;
color: $red-dark;
}
}

2
static/nantes/_vars.scss
View File

@ -112,6 +112,8 @@ $cancel-button-style: '%inverted-button';
$buttons-order: cancel (grow), previous, submit;
$form-accent-color: $primary-color;
$error-color: $red-dark;
$field-on-error-style: custom;
$widget-unique-checkbox-position: left;
$widget-background: white;
$widget-border-radius: $radius-l;

6
static/orleans/_custom.scss
View File

@ -298,7 +298,9 @@ div.buttons {
&[class*=grid-] .content.with-padding {
display: block;
}
&.widget-with-error .content {
background-color: $notification_error_color;
@if ($field-on-error-style == custom) {
&.widget-with-error .content {
background-color: $notification_error_color;
}
}
}

1
static/orleans/_vars.scss
View File

@ -32,3 +32,4 @@ $dashboard-badge-color: lighten($primary-color, 10%);
$widget-focus-border: 1px solid #66afe9;
$widget-focus-outline: none;
$widget-focus-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
$field-on-error-style: custom;

18
static/sables-d-olonne-2022/_custom.scss
View File

@ -506,14 +506,16 @@ label {
color: $orange;
}
div.widget-with-error {
label {
color: $red;
}
div.content {
input, select, textarea {
border: 1px solid $red;
background: rgba(255, 0, 0, 0.2);
@if ($field-on-error-style == custom) {
div.widget-with-error {
label {
color: $red;
}
div.content {
input, select, textarea {
border: 1px solid $red;
background: rgba(255, 0, 0, 0.2);
}
}
}
}

1
static/sables-d-olonne-2022/_vars.scss
View File

@ -71,6 +71,7 @@ $widget-focus-outline: none;
$widget-focus-box-shadow: #999 1px 1px 12px;
$widget-custom-radio-checkbox: true;
$widget-unique-checkbox-position: left;
$field-on-error-style: custom;
$buttons-order: cancel, previous, submit;
$buttons-alignment: space-between;

33
static/toulouse-2022/_custom.scss
View File

@ -521,22 +521,23 @@ div#rub_service {
h4 {
@extend .h3;
}
div.error {
font-weight: normal;
font-size: $fz-small;
color: $error-color;
background: none;
padding-left: 0;
&::before {
pointer-events: none;
content: "\f071"; // triangle-exclamation
font-family: FontAwesome;
font-size: 20px;
color: $salmon-dark;
}
p {
display: inline;
padding-left: 0.5rem;
@if ($field-on-error-style == custom) {
div.error {
font-weight: normal;
font-size: $fz-small;
color: $error-color;
background: none;
padding-left: 0;
&::before {
pointer-events: none;
content: "\f071"; // triangle-exclamation
font-family: FontAwesome;
font-size: 20px;
color: $salmon-dark;
}
p {
padding-left: 0.5rem;
}
}
}
.submit-button button::after {

1
static/toulouse-2022/_vars.scss
View File

@ -93,6 +93,7 @@ $button-hover-background: $salmon;
$title-background: transparent;
$error-color: #D00000;
$field-on-error-style: custom;
$form-sidebar-position: top;
$wcs-step-color: $font-color;
$wcs-step-current-color: $wcs-step-color;

18
static/villejuif/_custom.scss
View File

@ -176,16 +176,20 @@ div#rub_service .drafts-recall, div#rub_service form {
}
div.infonotice::before, div.warningnotice::before, div.errornotice::before {
content: url(/static/dialog-warning.png);
content: url(dialog-warning.png);
fpeters commented 2023-04-18 16:35:20 +02:00
Review
Copy Link

Comme dialog-warning.png n'est plus utilisé de manière globale je le déplace dans l'intégration villejuif où il est encore référencé.

Comme dialog-warning.png n'est plus utilisé de manière globale je le déplace dans l'intégration villejuif où il est encore référencé.
}
div.error{
font-size: 0.95em;
color:red;
}
@if ($field-on-error-style == custom) {
div.error{
font-size: 0.95em;
color:red;
}
div.error + textarea, div.error + input,div.error + ul input {
border: 1px solid red;
.widget-with-error {
textarea, input, ul input {
border: 1px solid red;
}
}
}
div.widget div.title {

1
static/villejuif/_vars.scss
View File

@ -27,3 +27,4 @@ $button-border-radius: 5px;
$buttons-order: previous, cancel, submit;
$widget-unique-checkbox-position: left;
$field-on-error-style: custom;

0
static/dialog-warning.png → static/villejuif/dialog-warning.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 683 B

After

Width:  |  Height:  |  Size: 683 B

4
static/villeurbanne-2018/_custom.scss
View File

@ -211,10 +211,6 @@ div.cell {
}
}
div.error {
font-size: 90%;
}
ul.account-management li {
padding: 0;
a {