Bug 28101: Update breadcrumb markup in the OPAC for consistency and accessibility
[srvgit] / koha-tmpl / opac-tmpl / bootstrap / css / src / opac.scss
index 24f095c..58acbc3 100644 (file)
@@ -10,7 +10,8 @@
         padding: 0;
     }
 
-    .selections-toolbar {
+    .selections-toolbar,
+    #renewall_js {
         display: none;
     }
 
         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;
     }
 }
@@ -163,6 +178,18 @@ td {
     .btn {
         white-space: nowrap;
     }
+
+    &.selectcol {
+        width: 1ch;
+    }
+
+    &.numcol {
+        width: 3ch;
+    }
+
+    &.hidden {
+        display: none;
+    }
 }
 
 th {
@@ -192,6 +219,10 @@ th {
     }
 }
 
+#booleansearch {
+    width: 80%;
+}
+
 #advsearch_limits,
 #subtypes {
     label {
@@ -284,7 +315,7 @@ th {
         }
 
         &.clearsh {
-            color: #E8583C;
+            color: #D43C00;
             font-size: 80%;
             font-weight: normal;
             padding-bottom: .6rem;
@@ -418,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;
 }
@@ -485,6 +493,8 @@ th {
         &.disabled,
         &[disabled] {
             color: #333;
+            filter: alpha(opacity=65);
+            opacity: 0.65;
 
             &:hover {
                 i {
@@ -542,7 +552,6 @@ th {
     }
 }
 
-
 .breadcrumb {
     background-color: #F0F3F3;
     font-size: 85%;
@@ -552,31 +561,17 @@ th {
     border-radius: 0px;
 }
 
-.buttons-print {
-    background-color: transparent;
-    border: 0;
-    color: #0088cc;
-    display: inline-block;
-    line-height: 20px;
-    padding: 4px 12px;
-    text-align: center;
-    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
-    vertical-align: middle;
-
-    &:hover {
-        color: #005580;
-        &::before {
-            color: #44AE89;
+.breadcrumb-item {
+    &.active {
+        a:link,
+        a:visited,
+        a:hover,
+        a:active {
+            color: #666;
+            cursor: text;
+            text-decoration: none;
         }
     }
-
-    &::before {
-        color: #4466AE;
-        content: "\f02f";
-        font-family: FontAwesome;
-        display: inline-block;
-        padding-right: .5em;
-    }
 }
 
 #opac-main-search {
@@ -585,7 +580,7 @@ th {
     padding: 15px;
 
     label {
-        color: #727272;
+        color: $high-contrast-grey;
         font-size: 115%;
         font-weight: bold;
         margin: 0;
@@ -635,10 +630,11 @@ th {
     width: 75px;
 }
 
-#bookcover {
+.bookcover {
     float: left;
     margin: 0;
     padding: 0;
+    text-align: center;
 
     .no-image {
         margin-bottom: 10px;
@@ -646,7 +642,7 @@ th {
     }
 
     img {
-        margin: 0 1em 1em 0;
+        margin: 1em;
     }
 }
 
@@ -656,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;
+    }
 }
 
 
@@ -714,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;
@@ -755,6 +849,7 @@ fieldset {
             }
         }
 
+
         li {
             clear: left;
             float: left;
@@ -763,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;
         }
     }
 
@@ -816,7 +913,7 @@ div {
                 font-weight: bold;
                 margin-right: 1em;
                 text-align: left;
-                width: 9em;
+                width: 9rem;
             }
         }
 
@@ -916,7 +1013,6 @@ div {
         display: inline;
         font-size: 100%;
         font-weight: bold;
-        margin-left: .5em;
     }
 
     select {
@@ -928,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;
         }
@@ -957,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 {
@@ -986,7 +1097,7 @@ div {
 }
 
 .results_summary {
-    color: #707070;
+    color: #202020;
     display: block;
     font-size: 85%;
     padding: 0 0 .5em;
@@ -1004,7 +1115,7 @@ div {
     }
 
     .label {
-        color: #202020;
+        color: $high-contrast-grey;
     }
 
     a {
@@ -1227,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 {
@@ -1306,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 {
@@ -1686,6 +1833,7 @@ nav {
 }
 
 #addto {
+    display: inline-block;
     max-width: 10em;
 }
 
@@ -1735,6 +1883,7 @@ nav {
 
 /* style for shelving location in catalogsearch */
 .shelvingloc {
+    display: block;
     font-style: italic;
 }
 
@@ -1932,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%;
@@ -2011,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;
@@ -2245,7 +2395,6 @@ nav {
     font-size: 95%;
     line-height: 135%;
     margin-left: 2em;
-    position: relative;
 
     :first-child::before {
         content: "→ ";
@@ -2263,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;
         }
 
@@ -2388,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;
@@ -2410,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;
@@ -2513,94 +2651,35 @@ $star-selected: #EDB867;
 }
 
 /*opac browse search*/
-#browse-search {
-
-    form {
-        label {
-            display: inline-block;
-            margin-right:5px;
-        }
-
-        [type=submit] {
-            margin-top: 10px;
-        }
-    }
-
-    #browse-resultswrapper {
-       margin-top: 4em;
-
-        @media (min-width: 768px) and (max-width: 984px) {
-            margin-top: 2em;
-        }
-
-        @media (max-width: 767px) {
-            margin-top: 1em;
-        }
-    }
-    #browse-searchresults, #browse-selectionsearch {
-        border: 1px solid #E3E3E3;
-        border-radius: 4px;
-        padding: 0;
-        overflow-y: auto;
-        max-height: 31em;
-        margin-bottom: 2em;
-    }
-    #browse-searchresults {
-        max-height: 31em;
-        list-style: none;
-        padding: 10px;
 
-        a {
-            display: block;
-            margin-bottom: 5px;
-
-            &.selected {
-                background-color:#EEE;
-            }
-        }
+#browse-resultswrapper {
+    margin-top: 15px;
+}
+#browse-searchfuzziness {
+    padding: 15px 0;
+}
 
-        li:last-child a {
-            margin-bottom: 0;
-        }
+#browse-searchresults, #browse-selectionsearch {
+    border: 1px solid #E3E3E3;
+    border-radius: 4px;
+    padding: 0;
+    margin-bottom: 2em;
+}
 
-        @media (max-width: 767px) {
-            max-height: 13em;
-        }
-    }
-    #browse-selection {
-        margin-top: -40px;
-        padding-top: 0;
+#browse-selectionsearch p.subjects {
+    font-size: 0.9em;
+    margin-bottom: 0;
+}
 
-        @media (max-width: 767px) {
-            margin-top: 0;
-        }
-    }
-    #browse-selectionsearch ol {
-        list-style: none;
-        margin: 0;
+#browse-selectionsearch h4 {
+    margin: 0;
+}
 
-        li {
-            padding: 1em;
+#browse-suggestionserror {
+    margin-top: 1rem;
+}
 
-            &:nth-child(odd) {
-                background-color: #F4F4F4;
-            }
-        }
-    }
-   #browse-selectionsearch p.subjects {
-        font-size: 0.9em;
-        margin-bottom: 0;
-    }
-    #browse-selectionsearch h4 {
-        margin: 0;
-    }
-    .error, .no-results {
-        background-color: #EEE;
-        border: 1px solid #E8E8E8;
-        text-align: left;
-        padding: 0.5em;
-        border-radius: 3px;
-    }
+#browse-search {
     .loading {
         text-align: center;
 
@@ -2611,6 +2690,15 @@ $star-selected: #EDB867;
         }
     }
 }
+
+#card_template {
+    display: none;
+}
+
+.result-title {
+    margin-bottom: .4rem;
+    margin-left: 1rem;
+}
 /*end browse search*/
 
 /* Skip to content link. CSS adapted from https://webaim.org/ */
@@ -2638,4 +2726,45 @@ $star-selected: #EDB867;
     }
 }
 
+.accordion {
+    .card-header {
+        padding: 0;
+
+        a {
+            display: block;
+            padding: .75rem 1.25rem;
+
+            &[aria-expanded="true"] { font-weight: bold; }
+            &[aria-expanded="false"] { font-weight: normal; }
+
+            &:hover {
+                background-color: rgba(255, 255, 204, 0.8);
+                text-decoration: none;
+            }
+        }
+    }
+
+    .collapse {
+        &.show {
+            border-top: 1px solid #888;
+        }
+    }
+}
+
+.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";