Bug 28101: Update breadcrumb markup in the OPAC for consistency and accessibility

[srvgit] / koha-tmpl / opac-tmpl / bootstrap / css / src / opac.scss

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index 47bf906..58acbc3 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -20,12 +20,26 @@
         padding-left: 0;
         padding-right: 0;
     }
+    .dropdown-toggle::after {
+        border: 0;
+    }
+
+    #listsmenu,
+    #user-menu,
+    .nav-item .login-link {
+        color: $links;
+
+        &:hover {
+            color: $links-hover;
+        }
+    }
 }
 
 .js {
     .dateformat,
     #sortsubmit,
-    #sorting-form {
+    #sorting-form,
+    .js-hide {
         display: none;
     }
 }
@@ -172,6 +186,10 @@ td {
     &.numcol {
         width: 3ch;
     }
+
+    &.hidden {
+        display: none;
+    }
 }
 
 th {
@@ -201,6 +219,10 @@ th {
     }
 }
 
+#booleansearch {
+    width: 80%;
+}
+
 #advsearch_limits,
 #subtypes {
     label {
@@ -293,7 +315,7 @@ th {
         }
 
         &.clearsh {
-            color: #E8583C;
+            color: #D43C00;
             font-size: 80%;
             font-weight: normal;
             padding-bottom: .6rem;
@@ -427,33 +449,10 @@ th {
     }
 }
 
-#opacheader {
-    background-color: #fcf9fc;
-}
-
 #numresults {
     color: #727272;
 }
 
-#selections {
-    color: #727272;
-    font-weight: bold;
-}
-
-#selections-toolbar {
-    background: #e2e8e8 none;
-    border-bottom: none;
-    margin-top: 3px;
-}
-
-.selections {
-    font-weight: bold;
-}
-
-.selections-toolbar.toolbar {
-    background: #e2e8e8 none;
-}
-
 .actions-menu {
     padding-top: 5px;
 }
@@ -494,6 +493,8 @@ th {
         &.disabled,
         &[disabled] {
             color: #333;
+            filter: alpha(opacity=65);
+            opacity: 0.65;
 
             &:hover {
                 i {
@@ -560,13 +561,26 @@ th {
     border-radius: 0px;
 }
 
+.breadcrumb-item {
+    &.active {
+        a:link,
+        a:visited,
+        a:hover,
+        a:active {
+            color: #666;
+            cursor: text;
+            text-decoration: none;
+        }
+    }
+}
+
 #opac-main-search {
     background: #f0f3f3;
     margin: 7px 0;
     padding: 15px;
 
     label {
-        color: #727272;
+        color: $high-contrast-grey;
         font-size: 115%;
         font-weight: bold;
         margin: 0;
@@ -616,10 +630,11 @@ th {
     width: 75px;
 }
 
-#bookcover {
+.bookcover {
     float: left;
     margin: 0;
     padding: 0;
+    text-align: center;
 
     .no-image {
         margin-bottom: 10px;
@@ -627,7 +642,7 @@ th {
     }
 
     img {
-        margin: 0 1em 1em 0;
+        margin: 1em;
     }
 }
 
@@ -637,8 +652,81 @@ th {
     }
 }
 
+#biblio-cover-slider {
+    background-color: #fff;
+    border: 1px solid #b9d8d9;
+    border-radius: 3px;
+    margin: 0 1em .5em 0;
+    padding: 10px 5px 5px 5px;
+    min-height: 175px;
+}
+
+.cover-slides {
+    background: #FFF url("../img/spinner-small.gif") center center no-repeat;
+
+    .hint {
+        font-size: 80%;
+        padding: .5em 0;
+    }
+
+    a {
+        &.nav-active {
+            &:link,
+            &:visited {
+                color: #85ca11;
+            }
+        }
+    }
+}
+
+td {
+    &.bookcover {
+        background: #FFF url("../img/spinner-small.gif") center center no-repeat;
+        min-width: 120px;
+        text-align: center;
+    }
+
+    .cover-slides {
+        background: transparent none;
+        border: 0;
+        margin: 0;
+        min-height: unset;
+        padding: 0;
+    }
+}
+
+.cover-image {
+    display: none;
+
+    img {
+        height: auto;
+        max-width: 100%;
+    }
+}
+
+.cover-nav {
+    display: inline-block;
+    padding: 3px 4px;
+}
+
+div {
+    &.required_label {
+        display: none;
+
+        &.required {
+            color: #C00;
+            display: block;
+            font-size: 95%;
+            margin-left: 10rem;
+            margin-top: 3px;
+        }
+    }
+}
+
 .required {
-    color: #C00;
+    &.valid {
+        color: #000;
+    }
 }
 
 
@@ -695,16 +783,41 @@ fieldset {
             font-weight: bold;
         }
 
+        div.label {
+            display: inline-block;
+            width: 9rem;
+            margin-right: 1rem;
+            float: none;
+        }
+
         label,
         .label {
             float: left;
             font-weight: bold;
-            margin-right: 1em;
+            margin-right: 1rem;
             text-align: right;
-            width: 9em;
+            width: 9rem;
+        }
+
+        label.checkbox-label {
+            float: none;
+            margin-right: 0;
+            font-weight: normal;
+            text-align: left;
+            width: auto;
         }
 
         label {
+            &.error {
+                color: #C00;
+                float: none;
+                display: inline;
+                font-style: italic;
+                font-weight: normal;
+                margin-left: 1rem;
+                text-align: left;
+                width: auto;
+            }
             &.lradio {
                 float: none;
                 margin: inherit;
@@ -736,6 +849,7 @@ fieldset {
             }
         }
 
+
         li {
             clear: left;
             float: left;
@@ -744,20 +858,22 @@ fieldset {
             width: 100%;
 
             &.lradio {
-                padding-left: 8.5em;
                 width: auto;
 
                 label {
                     float: none;
-                    margin: 0 0 0 1em;
+                    margin: 0;
                     width: auto;
                 }
+                input {
+                    margin-right: 1rem;
+                }
             }
         }
 
         .hint {
             display: block;
-            margin-left: 11em;
+            margin-left: 10rem;
         }
     }
 
@@ -797,7 +913,7 @@ div {
                 font-weight: bold;
                 margin-right: 1em;
                 text-align: left;
-                width: 9em;
+                width: 9rem;
             }
         }
 
@@ -897,7 +1013,6 @@ div {
         display: inline;
         font-size: 100%;
         font-weight: bold;
-        margin-left: .5em;
     }
 
     select {
@@ -909,19 +1024,6 @@ div {
     }
 
     li {
-        // display: inline;
-        // list-style: none;
-
-        // a {
-        //     border-left: 1px solid #E8E8E8;
-        // }
-
-        // &:first-child {
-        //     a {
-        //         border-left: 0;
-        //     }
-        // }
-
         &.dropdown-header {
             display: block;
         }
@@ -938,22 +1040,50 @@ div {
     }
 }
 
-#selections-toolbar,
+.selections {
+    color: #727272;
+    font-weight: bold;
+
+    &::before {
+        color: #6c757d;
+        content: "|";
+        display: inline-block;
+        font-weight: normal;
+        padding: 0 .5rem;
+        text-shadow: 1px 1px 0 #fff;
+    }
+}
+
+.check_control {
+    &::before {
+        color: #6c757d;
+        content: "|";
+        display: inline-block;
+        font-weight: normal;
+        padding: 0 .5rem;
+        text-shadow: 1px 1px 0 #fff;
+    }
+}
+
 .selections-toolbar {
-    background: linear-gradient( #B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100% );
+    background: linear-gradient(#B2B2B2 0%, #E0E0E0 14%, #E8E8E8 100%);
+    border-bottom: none;
+    margin-top: 3px;
+    display: flex;
     margin: 0;
     padding-left: 10px;
     padding-top: .5em;
 
+    > div:first-child::before {
+        content: "";
+        padding: 0;
+    }
+
     a,
     button,
     input {
         font-size: .9rem;
     }
-
-    .btn-sm {
-        padding: 0.1rem 0.5rem;
-    }
 }
 
 .list-actions {
@@ -967,7 +1097,7 @@ div {
 }
 
 .results_summary {
-    color: #707070;
+    color: #202020;
     display: block;
     font-size: 85%;
     padding: 0 0 .5em;
@@ -985,7 +1115,7 @@ div {
     }
 
     .label {
-        color: #202020;
+        color: $high-contrast-grey;
     }
 
     a {
@@ -1208,6 +1338,43 @@ nav {
             top:  unset;
         }
     }
+
+    background: transparent none;
+    border: 0;
+
+    &.breadcrumb {
+        background-color: #F0F3F3;
+        font-size: 85%;
+        list-style: none outside none;
+        margin: 15px;
+        padding: 5px 10px;
+        border-radius: 0px;
+
+        ol {
+            margin: 0;
+            padding-left: 0;
+            list-style: none;
+        }
+
+                                                                                             li {
+            display: inline;
+
+            &+li::before {
+                background: transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iY3VycmVudENvbG9yIiBjbGFzcz0iYmkgYmktY2hldnJvbi1yaWdodCI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNy4zNyAwbDUuMzUgNy4zYy4yLjIuMi41MSAwIC43bC01LjM4IDhoLTQuMmw1LjY0LTguMzVMMy4xMy4wMXoiLz48L3N2Zz4=") 50% 50% no-repeat;
+                background-size: 8px;
+                content: '';
+                display: inline-block;
+                height: .8em;
+                width: .8em;
+            }
+        }
+
+        [aria-current="page"] {
+            color: #000;
+            font-weight: 700;
+            text-decoration: none;
+        }
+    }
 }
 
 .nav_pages {
@@ -1287,13 +1454,12 @@ nav {
     font-size: 90%;
 }
 
-.highlight_controls {
-    float: left;
-    margin-top: 3px;
-}
+.links {
+    flex-grow: 1;
 
-.links a {
-    font-weight: bold;
+    a {
+        font-weight: bold;
+    }
 }
 
 #tagslist {
@@ -1667,6 +1833,7 @@ nav {
 }
 
 #addto {
+    display: inline-block;
     max-width: 10em;
 }
 
@@ -1914,7 +2081,7 @@ nav {
 .suggestion {
     background-color: #F0F3F3;
     border: 1px solid #F0F3F3;
-    color: #727272;
+    color: $high-contrast-grey;
     margin: 1em auto;
     padding: .5em;
     width: 35%;
@@ -1993,9 +2160,10 @@ nav {
 .tags,
 .shelves {
     ul {
-        display: inline;
+        display: inline-block;
         list-style: none;
-        margin-left: 0;
+        margin: 0;
+        padding: 0;
 
         li {
             display: inline;
@@ -2227,7 +2395,6 @@ nav {
     font-size: 95%;
     line-height: 135%;
     margin-left: 2em;
-    position: relative;
 
     :first-child::before {
         content: "→ ";
@@ -2245,14 +2412,11 @@ nav {
 #memberentry-form {
     input.error {
         border-color: #C00;
-        box-shadow: 0 1px 1px #C00 inset, 0 0 8px #C00;
-        color: #F00;
         outline: 0 none;
 
         &:focus {
             border-color: #C00;
-            box-shadow: 0 1px 1px #C00 inset, 0 0 8px #C00;
-            color: #F00;
+            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(204, 0, 0, .6);
             outline: 0 none;
         }
 
@@ -2370,9 +2534,9 @@ nav {
     margin-bottom: 1em;
     padding-bottom: .5em;
 
-    h3 {
+    h2 {
         background-color: #E2E8E8;
-        color: #727272;
+        color: $high-contrast-grey;
         font-size: 1.1rem;
         margin-top: 0;
         padding: 5px;
@@ -2392,14 +2556,6 @@ nav {
     }
 }
 
-.adlibris-cover {
-    max-height: 120px;
-}
-
-.adlibris-cover-big {
-    max-height: 200px;
-}
-
 /* jQuery Bar Rating plugin for star ratings */
 
 $star-default: #D2D2D2;
@@ -2595,4 +2751,20 @@ $star-selected: #EDB867;
     }
 }
 
+.branchaddress {
+    margin-bottom: 1rem;
+}
+
+#openid_connect {
+    background-color: #fff;
+    border: 1px solid #AAA;
+    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
+    margin: .5em 0;
+
+    i {
+        color: #b53329;
+        margin: 0 .5em;
+    }
+}
+
 @import "responsive";