From e50352c7c4ec04d30538e64646b0a2c75b01ea77 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: Jonathan Druart --- .../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 34d1ce6ffe0..1c2357c4065 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 72a8aa17ba7..fa21f5052f2 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 a6d30023b63..4fb655ef227 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -69,12 +69,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; } } @@ -635,7 +635,7 @@ label, } &.required { - color: #C00; + color: $warning-text-color; } } @@ -767,7 +767,7 @@ ol { .overdue, .debit { - color: #CC0000; + color: $warning-text-color; font-weight: bold; } @@ -1016,7 +1016,7 @@ div { i { &.fa-exclamation { - color: #CC0000; + color: $warning-text-color; font-style: italic; padding: 0 .3em; } @@ -1442,13 +1442,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 { @@ -1726,7 +1726,7 @@ i { .deny { i { &.fa { - color: #CC0000; + color: $warning-text-color; } } } @@ -2505,7 +2505,7 @@ td.bundle { text-shadow: 0 -1px 0 #666; &:hover { - color: #CC0000; + color: $warning-text-color; } } } @@ -2528,7 +2528,7 @@ td.bundle { text-shadow: 0 -1px 0 #666; &:hover { - color: #CC0000; + color: $warning-text-color; } } } @@ -3593,7 +3593,7 @@ span { } &.circ-hlt { - color: #CC0000; + color: $warning-text-color; font-weight: bold; } @@ -3608,7 +3608,7 @@ span { } &.required { - color: #C00; + color: $warning-text-color; font-style: italic; margin-left: .5em; } @@ -3748,7 +3748,7 @@ input.renew { } .onsite_checkout { - color: #CC0000; + color: $warning-text-color; } .onsite-checkout-only { -- 2.25.1