From 11a346b15119f61146ddbdad8369df3d233eed86 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Thu, 27 Oct 2022 16:25:05 +0000 Subject: [PATCH] Bug 31943: Date inputs wider than other inputs This patch sets a width on Flatpickr instances so that they better match the typical width of a text input field. The patch also corrects the "X" ("clear date") link color to return it to the original red color. In doing this I've defined a new $warning-text-color variable and replaced other instances of #CC0000 with this variable. I've also tweaked the appearance of the Flatpickr shortcut links ("Today," "Tomorrow," etc) so that they match other links in Koha. To test, apply the patch and rebuild the staff interface CSS. - Go to patrons and locate a patron record. - Edit the patron. - In the patron entry form, confirm that the "Date of birth" field matches the width of the text fields around it. - The "X" should be red. - Click the date of birth field to trigger the calendar popup. - The "Yesterday" and "Today" links should be colored the default green seen elsewhere in the staff interface. Signed-off-by: Katrin Fischer --- .../prog/css/src/_flatpickr.scss | 9 +++++-- .../prog/css/src/_variables.scss | 1 + .../prog/css/src/staff-global.scss | 26 +++++++++---------- 3 files changed, 21 insertions(+), 15 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss index 34d1ce6ffe..1c2357c406 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_flatpickr.scss @@ -946,6 +946,7 @@ span.flatpickr-weekday { border-style: inset; border-width: 1px; padding: 3px 3px 3px 20px; + width: calc( 100% - 40px ); &:focus { border-radius: 0; @@ -986,10 +987,14 @@ span.flatpickr-weekday { .shortcut-buttons-flatpickr-button { background: transparent none; border: 0; - color: #004D99; + color: #006100; font-size: 90%; margin: 2px; + &:active { + box-shadow: none; + } + &:disabled { color: #999; @@ -999,7 +1004,7 @@ span.flatpickr-weekday { } &:hover { - color: #538200; + text-decoration: underline; } } } diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss index 72a8aa17ba..fa21f5052f 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss @@ -1,4 +1,5 @@ $green-text-color: #006100; +$warning-text-color: #CC0000; $background-color-primary: #408540; $background-color-secondary: lighten(saturate(adjust-hue($background-color-primary, -24), 9), 9); $background-color-modal: lighten( saturate( $background-color-secondary, 5 ), 40 ); diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss index 115128e8bb..7b92537f75 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -67,12 +67,12 @@ a { } &.clear_date { - color: $green-text-color; + color: $warning-text-color; font-size: 130%; vertical-align: middle; &:hover { - color: $green-text-color; + color: lighten( $warning-text-color, 35% ); text-decoration: none; } } @@ -633,7 +633,7 @@ label, } &.required { - color: #C00; + color: $warning-text-color; } } @@ -765,7 +765,7 @@ ol { .overdue, .debit { - color: #CC0000; + color: $warning-text-color; font-weight: bold; } @@ -1019,7 +1019,7 @@ div { i { &.fa-exclamation { - color: #CC0000; + color: $warning-text-color; font-style: italic; padding: 0 .3em; } @@ -1443,13 +1443,13 @@ input[type='text']:read-only:focus { } .error { - color: #CC0000; + color: $warning-text-color; } // Font Awesome icons i { &.error { - color: #CC0000; + color: $warning-text-color; } &.success { @@ -1727,7 +1727,7 @@ i { .deny { i { &.fa { - color: #CC0000; + color: $warning-text-color; } } } @@ -2506,7 +2506,7 @@ td.bundle { text-shadow: 0 -1px 0 #666; &:hover { - color: #CC0000; + color: $warning-text-color; } } } @@ -2529,7 +2529,7 @@ td.bundle { text-shadow: 0 -1px 0 #666; &:hover { - color: #CC0000; + color: $warning-text-color; } } } @@ -3591,7 +3591,7 @@ span { } &.circ-hlt { - color: #CC0000; + color: $warning-text-color; font-weight: bold; } @@ -3606,7 +3606,7 @@ span { } &.required { - color: #C00; + color: $warning-text-color; font-style: italic; margin-left: .5em; } @@ -3746,7 +3746,7 @@ input.renew { } .onsite_checkout { - color: #CC0000; + color: $warning-text-color; } .onsite-checkout-only { -- 2.30.2