Attachment 112347 Details for Bug 26706 – Bug 26706: Fix btn-default styling for better contrast

[patch] Bug 26706: Fix btn-default styling for better contrast

Bug-26706-Fix-btn-default-styling-for-better-contr.patch (text/plain), 6.93 KB, created by Nick Clemens (kidclamp) on 2020-10-24 00:48:05 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Nick Clemens (kidclamp)

Created: 2020-10-24 00:48:05 UTC

Size: 6.93 KB

patch

obsolete

>From 7bc0c7e11f3ed6161cecf0a631ae340643dda400 Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Wed, 21 Oct 2020 01:48:12 +0000
>Subject: [PATCH] Bug 26706: Fix btn-default styling for better contrast
>
>This patch makes some updates to the OPAC's CSS in order to make
>Bootstrap button styles more consistent. Some CSS has been simplified
>and some has been made more specific.
>
>To test, apply the patch and rebuild the OPAC CSS
>(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
>
>View a variety of pages in the OPAC to confirm that button styles look
>good. For example:
>
> - Advanced search.
> - Catalog search results.
> - Bibligraphic details (including sidebar menu links and menus).
>   - Subscription details, brief and full
> - "Your summary" page, various tabs.
> - Lists
>
>The more pages tested the better! Be sure to test the hover and active
>states of buttons as well.
>
>https://bugs.koha-community.org/show_bug.cgi?id=26707
>
>Signed off: Lisette Scheer <lisetteslatah@gmail.com>
>
>Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
>---
> koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss | 142 +++++++++++----------
> koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss    |  19 ++-
> 2 files changed, 83 insertions(+), 78 deletions(-)
>
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
>index 0d3500ee7d..5fdaaea52d 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
>+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
>@@ -95,18 +95,6 @@ a {
>     &:link,
>     &:visited {
>         color: $links;
>-
>-        &.btn {
>-            color: #FFF;
>-
>-            &.btn-link {
>-                color: $links;
>-
>-                &.disabled {
>-                    color: #333;
>-                }
>-            }
>-        }
>     }
> }
> 
>@@ -115,22 +103,6 @@ button {
>     &:hover,
>     &:active {
>         color: $links-hover;
>-
>-        &.btn {
>-            color: #FFF;
>-
>-            &.btn-link {}
>-        }
>-    }
>-
>-    &.btn-link {
>-
>-        &:focus,
>-        &:hover {
>-            // border: 1px solid $input-btn-focus-color;
>-            box-shadow: none;
>-            text-decoration: none;
>-        }
>     }
> }
> 
>@@ -222,43 +194,88 @@ h1 {
>     }
> }
> 
>-.btn-primary,
>-.btn-primary:link,
>-.btn-primary:visited {
>+.btn-primary {
>     $base-bg: #77b50f;
>+    background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg);
>     background-color: $base-bg;
>-    background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg );
>     background-position: 0;
>-    border: 1px solid darken( $base-bg, 5% );
>-    font-family: 'NotoSans';
>+    border: 1px solid darken($base-bg, 5%);
>+    color: #FFF;
>+
>+    &:link,
>+    &:visited {
>+        color: #FFF;
>+    }
> 
>     &:hover,
>-    &:active,
>-    &:focus {
>+    &:active {
>         $base-bg: darken( $base-bg, 2);
>         background-color: $base-bg;
>-        background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg );
>         border-color: darken($base-bg, 5%);
>         box-shadow: 0 0 0 1px lighten(saturate($base-bg, 0.5), 4);
>+        color: #FFF;
>+    }
>+
>+    &:focus {
>+        box-shadow: 0 0 0 2px lighten($base-bg, 10%);
>     }
> }
> 
>-.btn-danger,
>-.btn-danger:link,
>-.btn-danger:visited {
>+.btn-danger {
>     $base-bg: #B92020;
>     background-color: $base-bg;
>     background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg );
>     background-position: 0;
>     border: 1px solid darken( $base-bg, 5% );
>-    font-family: 'NotoSans';
>+    color: #FFF;
>+
>+    &:link,
>+    &:visited {
>+        color: #FFF;
>+    }
> 
>     &:hover,
>-    &:active,
>-    &:focus {
>+    &:active {
>         $base-bg: darken( $base-bg, 2);
>         background-color: $base-bg;
>         background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg );
>+        color: #FFF;
>+    }
>+
>+    &:focus {
>+        box-shadow: 0 0 0 2px lighten($base-bg, 10%);
>+    }
>+}
>+
>+.btn-default,
>+.btn-secondary {
>+    $base-bg: #e6e6e6;
>+    background-color: $base-bg;
>+    background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg);
>+    background-position: 0;
>+    border: 1px solid darken($base-bg, 20%);
>+    color: #000;
>+
>+    &:link,
>+    &:visited {
>+        color: #000;
>+    }
>+
>+    &:hover,
>+    &:active {
>+        $base-bg: darken($base-bg, 2);
>+        background-color: $base-bg;
>+        background-image: linear-gradient(to bottom, lighten(saturate($base-bg, 0.5), 4), $base-bg);
>+        color: #000;
>+    }
>+
>+    &:focus {
>+        box-shadow: 0 0 0 2px darken($base-bg, 10%);
>+    }
>+
>+    &:not(:disabled):not(.disabled):active,
>+    &:not(:disabled):not(.disabled).active {
>+        color: #000;
>     }
> }
> 
>@@ -539,15 +556,6 @@ ul {
>     background: #FFFFFF none;
>     border: 1px solid #AAA;
>     color: #222222;
>-
>-    a:link,
>-    a:visited {
>-        color: $links;
>-    }
>-    a:hover,
>-    a:active {
>-        color: $links-hover;
>-    }
> }
> 
> .ui-widget-header {
>@@ -650,15 +658,6 @@ ul {
> }
> 
> button {
>-    &.btn-link {
>-        color: $links;
>-        &:focus,
>-        &:hover {
>-            color: $links-hover;
>-            text-decoration: none;
>-        }
>-    }
>-
>     &.closebtn {
>         background: transparent;
>         border: 0;
>@@ -679,13 +678,18 @@ button {
>     }
> }
> 
>-.btn-default {
>-    color: #212529;
>-    background-color: #666666;
>-    border-color: #666666;
>-}
>-
> .btn-link {
>+    color: $links;
>+
>+    &:focus,
>+    &:hover {
>+        text-decoration: none;
>+    }
>+
>+    &:focus {
>+        box-shadow: 0 0 0 1px lighten($links, 20%);
>+    }
>+
>     &.btn-lg {
>         font-size: 100%;
>     }
>@@ -973,6 +977,10 @@ button {
>     }
> }
> 
>+.dropdown-item:active {
>+    background-color: $links;
>+}
>+
> #koha_url {
>     p {
>         color: #666666;
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>index c78024c9f5..24f095c819 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>@@ -47,15 +47,13 @@
> a {
>     &:link,
>     &:visited {
>-        &.btn-link {
>-            &.cartRemove {
>-                color: #900;
>-                font-size: 90%;
>-                padding-left: 0;
>+        &.cartRemove {
>+            color: #900;
>+            font-size: 90%;
>+            padding-left: 0;
> 
>-                &:hover {
>-                    color: #c60000;
>-                }
>+            &:hover {
>+                color: #c60000;
>             }
>         }
>     }
>@@ -1299,7 +1297,6 @@ nav {
>         clear: both;
>         text-align: inherit;
>         white-space: nowrap;
>-        background-color: transparent;
>         border: 0;
>      }
> }
>@@ -1343,8 +1340,8 @@ nav {
>     a {
>         &:link,
>         &:visited {
>-            &.btn {
>-                color: #FFF;
>+            &.btn-default,
>+            &.btn-secondary {
>             }
>         }
>     }
>-- 
>2.11.0

Actions: View | Diff | Splinter Review

Attachments on bug 26706: 112084 | 112333 | 112336 | 112347