Bug 21943: (follow-up) Fix float error with sidebar menu
[koha-equinox.git] / koha-tmpl / intranet-tmpl / prog / css / src / staff-global.scss
index ab2a422..2844424 100644 (file)
@@ -239,6 +239,12 @@ button {
 }
 
 main {
+    &::after {
+        clear: both;
+        content: " ";
+        display: table;
+    }
+
     .yui-b {
         fieldset {
             &.brief {
@@ -671,22 +677,6 @@ ol {
     &.bibliodetails {
         float: left;
         margin: 0 0 1em 1em;
-
-        li {
-            border-bottom: 1px solid #E8E8E8;
-            list-style-type: none;
-            padding: .1em;
-        }
-
-        span {
-            &.label {
-                border-right: 1px solid #E8E8E8;
-                float: left;
-                font-weight: bold;
-                margin-right: 1em;
-                width: 12em;
-            }
-        }
     }
 }
 
@@ -1285,16 +1275,6 @@ details[open] {
 }
 
 #header {
-    &.navbar {
-        margin-bottom: 0;
-    }
-
-    &.navbar-default {
-        background: #E6F0F2;
-        border: 0;
-        box-shadow: none;
-    }
-
     + #breadcrumbs {
         margin-top: 1em;
     }
@@ -1889,6 +1869,12 @@ dd {
     }
 }
 
+.dropdown-menu {
+    li {
+        list-style-type: none;
+    }
+}
+
 .btn-toolbar {
     fieldset {
         &.action {
@@ -2288,10 +2274,28 @@ li {
 .thumbnail {
     display: block;
     margin: auto;
+}
 
-    > li {
+.thumbnails {
+    li {
+        display: inline-block;
         list-style-type: none;
     }
+
+    .remove {
+        border-top: 1px solid #EEE;
+        display: block;
+        font-size: 90%;
+        margin: 4px -4px 2px -4px;
+        padding-top: .5em;
+        text-align: center;
+    }
+
+    & + p {
+        border-top: 1px solid #eee;
+        margin-top: 1em;
+        padding-top: 1em;
+    }
 }
 
 #searchresults {
@@ -2444,10 +2448,6 @@ li {
     vertical-align: top;
 }
 
-#toplevelmenu {
-    padding: 0;
-}
-
 #CheckAll,
 #CheckNone,
 #CheckPending {
@@ -2542,13 +2542,6 @@ li {
     }
 }
 
-@media (max-width: 767px) {
-    #marcPreview {
-        margin: 0;
-        width: auto;
-    }
-}
-
 #cartDetails {
     background-color: #FFFFFF;
     border: 1px solid #739ACF;
@@ -3306,6 +3299,50 @@ video {
 }
 
 // Bootstrap overrides
+
+nav {
+    background: #E6F0F2 none;
+    border: 0;
+}
+
+.navbar-collapse {
+    background: #E6F0F2 none;
+    box-shadow: none;
+}
+
+.navbar-nav {
+    li {
+        list-style: none;
+
+        &.open {
+            li {
+                a {
+                    font-weight: normal;
+                }
+            }
+        }
+
+        a {
+            font-weight: bold;
+            padding-bottom: .4em;
+            padding-top: .4em;
+        }
+    }
+}
+
+.nav .open > a,
+.nav .open > a:hover,
+.nav .open > a:focus {
+    background-color: transparent;
+    border: 0;
+}
+
+.nav > li > a:hover,
+.nav > li > a:focus {
+    background-color: transparent;
+    text-decoration: none;
+}
+
 button,
 .btn {
     border-color: #ADADAD #ADADAD #949494;
@@ -3322,67 +3359,21 @@ button,
     padding: 3px 5px;
 }
 
-.dropdown-menu {
-    border-color: rgba(0, 0, 0, .2);
-    border-top: 0;
-    font-size: 12px;
-
-    li {
-        list-style: none outside none;
-
-        > a,
-        &.nav-header {
-            padding: 4px 20px;
-            cursor: pointer;
-
-            &:hover,
-            &:focus {
-                background-image: linear-gradient(to bottom, #0088CC, #0077B3);
-                background-repeat: repeat-x;
-                color: #FFFFFF;
-                text-decoration: none;
-            }
-        }
+#toolbar {
+    .dropdown-menu {
+        border-top-width: 1px;
+        font-size: 13px;
     }
-}
 
-.navbar {
-    color: #333;
-    min-height: 20px;
-
-    .nav {
-        > li {
-            list-style: none outside none;
-            padding: 0 .6em;
-
-            > a {
-                color: #004D99;
-                font-weight: bold;
-                padding: .4em .2em;
-
-                &:focus,
-                &:hover {
-                    color: #538200;
-                }
-            }
-        }
-
-        li {
-            .dropdown {
-                &.open > .dropdown-toggle:focus,
-                &.active > .dropdown-toggle:focus,
-                &.open.active > .dropdown-toggle:focus {
-                    background: #E6F0F2 none;
-                    box-shadow: none;
-                }
-            }
-        }
+    &.floating {
+        border-radius: 0;
+        margin-top: 0;
     }
-
-
 }
 
 #changelanguage {
+    background: #FFF none;
+    border-top: 1px solid #EEE;
     min-height: $language-footer-min-height;
 
     .dropdown-menu {
@@ -3402,6 +3393,14 @@ button,
             line-height: 20px;
         }
     }
+
+    .navbar-nav {
+        li {
+            a {
+                line-height: 20px;
+            }
+        }
+    }
 }
 
 .loggedout {
@@ -3410,16 +3409,6 @@ button,
     padding: .4em .2em;
 }
 
-.navbar-static-top {
-    .navbar-inner {
-        background: #E6F0F2 none;
-        border: 0;
-        box-shadow: none;
-        min-height: 0;
-        padding-left: 0;
-    }
-}
-
 .navbar-fixed-bottom {
     .navbar-inner {
         min-height: 0;
@@ -3701,16 +3690,26 @@ progress {
 }
 
 #browse-return-to-results {
-    border-top-left-radius: 3px;
-    border-top-right-radius: 3px;
+    background-color: #E8F0F6;
+    border: 1px solid #B9D8D9;
+    border-bottom-width: 0;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
     display: block;
+    padding: .5em;
     text-align: center;
 }
 
 .browse-button {
+    background-color: #FFF;
+    border: 1px solid #B9D8D9;
     color: #004D99;
-    display: inline-block;
+    display: block;
+    overflow: hidden;
     padding: .4em .6em;
+    text-align: center;
+    white-space: nowrap;
+    width: 100%;
 
     &:hover {
         background: #FAFAFA;
@@ -3760,34 +3759,13 @@ span {
     }
 }
 
-.browse-label,
-.browse-prev-next {
-    border: 1px solid #B9D8D9;
-}
-
-.browse-label {
-    background-color: #E8F0F6;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-}
-
-.browse-prev-next {
-    border-bottom-left-radius: 5px;
-    border-bottom-right-radius: 5px;
-    border-top-width: 0;
-}
-
 #browse-previous {
-    border-bottom-left-radius: 5px;
-    border-right: 1px solid #B9D8D9;
-    padding-right: 1em;
+    border-bottom-width: 0;
 }
 
 #browse-next {
     border-bottom-right-radius: 5px;
-    border-top-width: 0;
-    float: right;
-    padding-right: 1em;
+    border-bottom-left-radius: 5px;
 }
 
 .loading-overlay {
@@ -3990,34 +3968,6 @@ span {
     width: 12%;
 }
 
-.navbar-default {
-    .navbar-nav {
-        > .open {
-            > a {
-                &:hover,
-                &:focus {
-                    background: #E6F0F2 none;
-                    box-shadow: none;
-                }
-            }
-        }
-    }
-
-    &.navbar-fixed-bottom {
-        .navbar-nav {
-            > .open {
-                > a {
-                    &:hover,
-                    &:focus {
-                        background: transparent none;
-                        box-shadow: none;
-                    }
-                }
-            }
-        }
-    }
-}
-
 #interlibraryloans {
     #dataPreviewLabel {
         margin: .3em 0;
@@ -4459,64 +4409,166 @@ span {
     }
 }
 
+.header-menu-link {
+    display: none;
+    font-weight: bold;
+    padding: .4em .6em;
+}
+
+#user-menu {
+    position: absolute;
+    right: 5px;
+    top: 0;
+}
+
 @media (min-width: 200px) {
-    .navbar-nav > li {
-        float: left;
+
+}
+
+@media (max-width: 767px) {
+    .header-menu-link {
+        display: inline-block;
     }
 
-    .navbar-right {
-        float: right !important;
-        margin-right: -15px;
+    #catalog-search-link {
+        display: none;
+        padding: 0;
     }
 
-    .navbar-nav {
-        float: left;
-        margin: 0;
+    #cartmenulink {
+        background: transparent none;
+        padding-left: 1.5em;
+    }
+
+    #changelanguage {
+        li {
+            float: left;
+
+            li {
+                float: none;
+            }
+        }
 
         .open {
             .dropdown-menu {
                 background-color: #FFF;
-                border: 1px solid rgba(0, 0, 0, .15);
-                box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
-                float: left;
+                border: 1px solid #ccc;
                 position: absolute;
-                width: auto;
+            }
+        }
+    }
 
-                &.dropdown-menu-left {
-                    left: auto;
-                    right: 0;
-                }
+    #header {
+        background-color: #FFF;
+        border: 1px solid #CCC;
+        margin-bottom: 1em;
 
-                &.dropdown-menu-right {
-                    right: auto;
-                }
+        a {
+            font-weight: normal;
+            padding-left: 1.5em;
+
+            &:hover {
+                background-color: #0070A9;
+                color: #FFF;
             }
         }
-    }
 
-    .navbar-default {
-        .navbar-nav {
-            .open {
-                .dropdown-menu {
-                    > li {
-                        > a {
-                            &:hover,
-                            &:focus {
-                                background-color: #0081C2;
-                                background-image: linear-gradient(to bottom, #0088CC, #0077B3);
-                                background-repeat: repeat-x;
-                                color: #FFFFFF;
-                                text-decoration: none;
-                            }
-                        }
+        ul {
+            border: 0;
+            box-shadow: unset;
+            float: none;
+            left: auto;
+            position: relative;
+            right: auto;
+
+            &.dropdown-menu {
+                display: block;
+            }
+        }
+
+        .dropdown-menu {
+            li {
+                a {
+                    color: #004D99;
+
+                    &:hover {
+                        color: #FFF;
                     }
                 }
             }
         }
+
+        .dropdown-toggle {
+            display: none;
+        }
+    }
+
+    h1#logo {
+        float: none;
+        margin: auto;
+    }
+
+    #marcPreview {
+        margin: 0;
+        width: auto;
+    }
+
+    .navbar-fixed-bottom .nav > li {
+        border-right: 0;
+    }
+
+    #user-menu {
+        .open {
+            .dropdown-menu {
+                background-color: #FFF;
+                border: 1px solid #ccc;
+                position: absolute;
+            }
+        }
+
+        li {
+            float: left;
+
+            li {
+                float: none;
+            }
+        }
+    }
+}
+
+@media (max-width: 768px) {
+    .navbar-nav {
+        li {
+
+            a {
+                padding: .4em .6em;
+            }
+        }
+    }
+}
+
+@media only screen and ( max-width: 768px ) {
+    .browse-button {
+        display: inline-block;
+        width: 50%;
+    }
+
+    #browse-previous {
+        border-bottom-left-radius: 5px;
+        border-bottom-width: 1px;
+        border-right-width: 0;
+    }
+
+    #browse-next {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 5px;
     }
 }
 
 @media (min-width: 800px) {
+
+
+
     #helper {
         i {
             display: none;
@@ -4543,3 +4595,22 @@ span {
 div#makechart ol li {
     list-style: none;
 }
+
+@media only screen and ( min-width: 1200px ) {
+    .browse-button {
+        display: inline-block;
+        width: 50%;
+    }
+
+    #browse-previous {
+        border-bottom-left-radius: 5px;
+        border-bottom-width: 1px;
+        border-right-width: 0;
+    }
+
+    #browse-next {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 5px;
+        text-align: right;
+    }
+}