Bug 31753: Dialog boxes inside of modals don't seem wide enough

[koha-ffzg.git] / koha-tmpl / intranet-tmpl / prog / css / src / staff-global.scss

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 ca4eecd..68a21d5 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -5,29 +5,34 @@
 @import "fonts";
 
 ::selection {
-    background: #418940;
+    background: $background-color-primary;
     color: #FFFFFF;
 }
 
-a {
-    &:link,
-    &:visited {
-        color: $green-text-color;
-        border: 0;
-        background-color: transparent;
-        box-shadow: none;
-        font-size: 100%;
+.btn-default,
+.btn-primary,
+.btn-success,
+.btn-info,
+.btn-warning,
+.btn-danger {
+    text-shadow: unset;
+}
+
+.page-section {
+    @include card;
+
+    padding: .5em 1em;
+
+    & + .page-section {
+        margin-top: 1em;
     }
+}
 
+a {
     &:hover,
     &:active,
     &:focus {
         text-decoration: underline;
-        color: $green-text-color;
-        border: 0;
-        background-color: transparent;
-        box-shadow: none;
-        font-size: 100%;
     }
 
     &:hover {
@@ -44,21 +49,6 @@ a {
         padding: 2px 4px;
     }
 
-    &.btn {
-        &.btn-link {
-            &:link,
-            &:visited {
-                color: $green-text-color;
-            }
-
-            &:hover {
-                text-decoration: underline;
-                font-weight: bold;
-            }
-        }
-
-    }
-
     &.edit-patronimage {
         color: #333;
         background-color: #e6e6e6;
@@ -79,7 +69,7 @@ a {
     }
 
     &.clear_date {
-        color: #418940;
+        color: $green-text-color;
         font-size: 130%;
         vertical-align: middle;
 
@@ -93,7 +83,7 @@ a {
         i, img {
             text-align: center;
             color: $green-text-color;
-            border: solid 3px #71B443;
+            border: solid 3px $background-color-secondary;
             border-radius: 50%;
             background-color: transparent;
             width: 40px;
@@ -110,14 +100,14 @@ a {
         }
 
         &:hover {
-            color: #418940;
+            color: $green-text-color;
             text-decoration: none;
             font-weight: bold;
 
             i, img {
-                border-color: #418940;
+                border-color: $background-color-primary;
                 background-color: transparent;
-                color: #418940;
+                color: $green-text-color;
             }
 
         }
@@ -387,15 +377,14 @@ aside {
 #menu, #navmenulist {
     background-color: #e6e6e6;
     display: block;
+    padding: 1em 0 1em 0;
 
     h5 {
-        margin: .5em 0;
         padding-left: .5em;
-        padding-bottom: .2em;
-        color: #696969;
-        border-bottom: 1px solid #696969;
-        font-weight: normal;
-        font-size: 1.2em;
+        color: #666;
+        font-weight: bold;
+        font-size: 1.3em;
+        margin-top: 0;
     }
 
     ul {
@@ -410,17 +399,30 @@ aside {
             list-style: none;
 
             a {
+                border-left: 5px solid #E6E6E6;
                 color: #000;
                 display: block;
                 text-decoration: none;
                 padding: .7em .3em .7em 1.2em;
             }
 
-            &.active > a, a:hover, a.current {
+            &.active > a,
+            a:hover,
+            a.current {
                 background-color: #F3F4F4;
                 text-decoration: none;
-                color: #418940;
-                border-left: solid 5px #418940;
+                color: $green-text-color;
+                border-left: solid 5px $background-color-primary;
+                font-weight: bold;
+            }
+
+            a:hover {
+                border-left: solid 5px $background-color-secondary;
+                font-weight: normal;
+            }
+
+            &.active > a:hover {
+                border-left: solid 5px $background-color-primary;
                 font-weight: bold;
             }
         }
@@ -467,11 +469,6 @@ div {
 button {
     @include default-button;
 
-    &:active,
-    &:hover {
-        border: 1px inset #999999;
-    }
-
     &:disabled {
         @include disabled-button;
     }
@@ -501,7 +498,7 @@ main {
 }
 
 body {
-    font-family: "poppins", "Arial", "sans-serif";
+    font-family: $font-family-sans-serif;
     font-size: 13px;
     line-height: 1.22;
     padding: 0 0 4em;
@@ -596,10 +593,6 @@ h4,
 h5,
 h6 {
     margin: .5em 0;
-
-    a, a:link, a:visited {
-        color: #000;
-    }
 }
 
 hr {
@@ -639,7 +632,7 @@ cite {
 input,
 textarea {
     &:focus {
-        border-color: #418940;
+        border-color: $background-color-primary;
         border-radius: 4px;
     }
 }
@@ -731,13 +724,7 @@ label,
 }
 
 #area-news, #area-userblock {
-    background-color: #FFF;
-    border: 0;
     color: #696969;
-    margin: 0 0 1em 0;
-    box-shadow: 8px 8px 12px rgba(170, 170, 170, .356);
-    display: block;
-    padding: 1em;
 
     h3{
         background-color: #FFFFFF;
@@ -765,7 +752,7 @@ ul {
     padding-left: 1.1em;
 
     li {
-        list-style-type: none;
+        list-style-type: disc;
 
         input {
             &.submit {
@@ -864,32 +851,12 @@ ol {
 }
 
 fieldset {
-    @include card;
-    width: 100%;
-    color: $green-text-color;
-    position: relative;
-    color: #696969;
-    left: 0;
-    top: 0;
-    margin: 0 1em 1em 0;
-    padding: 1em;
-
     + fieldset {
         &.action {
             padding-top: 20px;
         }
     }
 
-    legend {
-        position: relative;
-        top: 1.5em;
-        margin: .5em 0;
-        font-size: 131%;
-        font-weight: bold;
-        color: #696969;
-        border-bottom: none;
-    }
-
     &.lastchecked {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
@@ -987,10 +954,6 @@ fieldset {
             padding: .3em 0;
         }
     }
-
-    fieldset {
-        box-shadow: none;
-    }
 }
 
 details {
@@ -1278,11 +1241,6 @@ div {
     }
 }
 
-#reserves,
-#checkouts {
-    padding: 1em;
-}
-
 #sales {
     display: none;
 }
@@ -1375,7 +1333,7 @@ dd {
 
 .patroninfo-section {
     padding: .5em;
-    margin: .5em;
+    margin: .5em 0;
     @include card;
 }
 
@@ -1563,7 +1521,7 @@ i {
     }
 
     &.success {
-        color: #418940;
+        color: $green-text-color;
     }
 
     &.warn {
@@ -1665,7 +1623,6 @@ i {
     margin: 1em auto;
     padding: .5em;
     text-align: center;
-    display: table;
     width: 65%;
     max-width: 600px;
 
@@ -1716,7 +1673,6 @@ i {
             &.approve {
                 background-color: #FEC32C;
                 color: #000;
-                text-shadow: 0 1px 0 #FFFFFF;
                 border: 0;
                 background-image: none;
                 margin-top: 5px;
@@ -1832,7 +1788,7 @@ i {
     background-color: #FEC32C;
     i {
         &.fa {
-            color: #418940;
+            color: $green-text-color;
         }
     }
 }
@@ -2000,27 +1956,6 @@ li {
     }
 
     td {
-        border: 0;
-
-
-        button, a {
-            &.btn-default {
-                color: $green-text-color;
-                padding: .3em;
-                border: 0;
-                background-color: transparent;
-                border: 0;
-                box-shadow: none;
-                font-size: 100%;
-
-                &:hover, &:active, &:focus, &:active:hover, &:active:focus {
-                    background-color: transparent;
-                    color: $green-text-color;
-                    text-decoration: underline;
-                }
-            }
-        }
-
         ul {
             li {
                 clear: left;
@@ -2109,8 +2044,7 @@ li {
 
 .searchheader {
     background-color: #f3f4f4;
-    border: 1px solid #696969;
-    border-radius: 5px 5px 5px 5px;
+    box-shadow: 0 0 2px 1px rgba(0,0,0,.2);
     font-size: 80%;
     margin-top: .5em;
     margin-bottom: .5em;
@@ -2121,7 +2055,10 @@ li {
 
     &.floating {
         border-radius: 0;
+        box-shadow: 0 0 2px 1px rgba(0,0,0,.4);
         margin-top: 0;
+        margin-bottom: 0;
+        z-index: 100;
     }
 
     .btn-group {
@@ -2178,12 +2115,13 @@ li {
 
 
 #search-facets {
+    background-color: #e6e6e6;
+
     h4 {
-        background-color: #71B443;
-        border-bottom: 1px solid #71B443;
-        border-radius: 4px 4px 0 0;
-        font-size: 90%;
+        background-color: $background-color-primary;
+        border-radius: 0 4px 0 0;
         color: #FFFFFF;
+        font-size: 100%;
         margin: 0;
         padding: .4em .2em;
         text-align: center;
@@ -2191,7 +2129,7 @@ li {
 
     ul {
         margin: 0;
-        padding: .3em;
+        padding: 6px 12px;
 
         li {
             font-weight: bold;
@@ -2605,6 +2543,10 @@ td.bundle {
     }
 }
 
+#advsearches {
+    margin-bottom: 1em;
+}
+
 #circ_circulation_issue {
     position: relative;
 }
@@ -2711,7 +2653,7 @@ td.bundle {
 .ui-widget-content {
     background: #FFFFFF none;
     border-radius: 4px;
-    border: 3px solid #418940;
+    border: 3px solid $background-color-primary;
     color: #222222;
 }
 
@@ -2825,7 +2767,7 @@ td.bundle {
     .ui-tabs-panel {
         background: #FFF none;
         border-radius: 4px;
-        border: 3px solid #418940;
+        border: 2px solid $background-color-primary;
 
         fieldset {
             box-shadow: none;
@@ -2833,23 +2775,21 @@ td.bundle {
     }
     .ui-tabs-nav {
         li {
-            background: #71B443;
+            background: $background-color-secondary;
             border: 0;
             margin-right: .4em;
             border-radius: 4px 4px 0 0;
 
+            a {
+                color: #111;
+            }
+
             &.ui-tabs-active, &.ui-state-hover {
-                background-color: #418940;
-                border-radius: 4px 4px 0 0;
-                border: 0;
-                border-bottom-width: 0;
-                padding-bottom: 0;
+                background-color: $background-color-primary;
 
                 a {
-                    color: #FFF;
+                    color: #fff;
                 }
-
-
             }
         }
     }
@@ -2859,24 +2799,14 @@ td.bundle {
         border: 0;
     }
 
-    .ui-state-default {
-        a {
-            color: #FFFFFF;
-
-            &:link,
-            &:visited {
-                color: #FFFFFF;
-            }
-        }
-    }
 
     .ui-state-hover {
         a {
-            color: #418940;
+            color: $green-text-color;
 
             &:link,
             &:visited {
-                color: #418940;
+                color: $green-text-color;
             }
         }
     }
@@ -2945,80 +2875,41 @@ td.bundle {
 
 
     > ul {
-        background: none repeat scroll 0 0 transparent;
-        border: 0 none;
-        color: #222222;
-        font-size: 100%;
-        font-weight: bold;
         line-height: 1.3;
-        list-style: none outside none;
         margin: 0;
         outline: 0 none;
         padding: .2em .2em 0;
         text-decoration: none;
-
-        &::after {
-            clear: both;
-        }
-
-        &::before,
-        &::after {
-            content: "";
-            display: table;
-        }
+        display: flex;
 
         li {
-            border-top-left-radius: 4px;
-            border-top-right-radius: 4px;
-            border-bottom-right-radius: 0;
-            border-bottom-left-radius: 0;
-            float: left;
-            font-weight: normal;
-            list-style: none outside none;
-            margin-bottom: 0;
+            list-style-type: none;
             margin-right: .4em;
-            padding: 0;
-            position: relative;
-            top: 1px;
-            white-space: nowrap;
-            background: #71B443;
-
-            &.active, &:hover {
-                font-weight: normal;
-                padding-bottom: 1px;
-
-                background-color: #418940;
-                border: 0;
-                border-bottom-width: 0;
-
-                a {
-                    background: none repeat scroll 0 0 transparent;
-                    color: #FFFFFF;
-                    outline: 0 none;
-                    top: 1px;
-                }
-            }
 
             a {
-                color: #FFFFFF;
-                cursor: pointer;
-                float: left;
+                background-color: $background-color-secondary;
+                border-radius: 4px 4px 0 0;
+                color: #111;
+                display: inline-block;
                 padding: .5em 1em;
                 text-decoration: none;
+                white-space: nowrap;
+            }
 
-                &:hover {
-                    border-top-left-radius: 4px;
-                    border-top-right-radius: 4px;
+            &.active,
+            &:hover {
+                a {
+                    background-color: $background-color-primary;
+                    color: #fff;
                 }
             }
+
         }
     }
 
     .tabs-container {
-        background: none repeat scroll 0 0 transparent;
-        border: 3px solid #418940;
+        border: 2px solid $background-color-primary;
         border-radius: 4px;
-        color: #222222;
         display: block;
         padding: 1em 1.4em;
     }
@@ -3026,15 +2917,11 @@ td.bundle {
 
 .toptabs {
     margin-top: 5px;
-        .ui-tabs-panel {
-            background: #FFF none;
-            border-radius: 4px;
-            border: 3px solid #418940;
-
-            fieldset {
-                box-shadow: none;
-            }
+    .ui-tabs-panel {
+        fieldset {
+            box-shadow: none;
         }
+    }
 }
 
 .authref {
@@ -3201,7 +3088,7 @@ nav {
 
             li {
                 display: inline;
-                color : #418940;
+                color : $green-text-color;
                 font-style: italic;
 
                 &+li::before {
@@ -3226,6 +3113,7 @@ nav {
 
 .navbar {
     background-color: #352C2E;
+    border: 0;
 }
 
 .nav .open > a,
@@ -3244,31 +3132,7 @@ nav {
 }
 
 .pagination {
-    margin:.5em .8em;
-
-    .active {
-        a {
-            background-color: #6daa5a;
-            border-color: #6daa5a;
-
-            &:hover,
-            &:focus {
-                background-color: #6daa5a;
-                border-color: #6daa5a;
-            }
-        }
-
-        span {
-            background-color: #6daa5a;
-            border-color: #6daa5a;
-
-            &:hover,
-            &:focus {
-                background-color: #6daa5a;
-                border-color: #6daa5a;
-            }
-        }
-    }
+    margin: .5em 0;
 }
 
 button,
@@ -3524,29 +3388,33 @@ label {
     }
 }
 
-.modal-header {
-    .closebtn {
-        margin-top: 4px;
-    }
-}
-
 .closebtn {
     color: #000;
-    filter: alpha(opacity = 20);
+    cursor: pointer;
     float: right;
     font-size: 21px;
     font-weight: bold;
     line-height: 1;
-    opacity: .2;
-    text-shadow: 0 1px 0 #FFFFFF;
+    margin-top: 4px;
+    text-decoration: none;
+    text-shadow: 0 1px 0 rgba( 255, 255, 255, .4 );
 
-    &:hover,
-    &:focus {
+    &:focus,
+    &:hover {
+        text-shadow: 0 1px 0 rgba( 255, 255, 255, .6 );
+    }
+
+    &:active {
+        box-shadow: none;
+        text-shadow: 0 1px 0 rgba( 255, 255, 255, .9 );
+    }
+}
+
+.modal-header {
+    border-bottom: 1px solid $background-color-secondary;
+
+    h3 {
         color: #000;
-        cursor: pointer;
-        filter: alpha(opacity = 50);
-        opacity: .5;
-        text-decoration: none;
     }
 }
 
@@ -3564,13 +3432,17 @@ label {
 }
 
 .modal-content {
-    background-color: rgb(211, 223, 204);
+    background-color: $background-color-modal;
 
     fieldset {
         box-shadow: none;
     }
 }
 
+.modal-footer {
+    border-top: 1px solid $background-color-secondary;
+}
+
 .btn-group {
     label,
     select {
@@ -3610,7 +3482,8 @@ code {
 }
 
 .tab-content {
-    border: 3px solid #418940;
+    background-color: #fff;
+    border: 2px solid $background-color-primary;
     border-radius: 4px;
     padding: 1em;
 }
@@ -3618,16 +3491,17 @@ code {
 .nav-tabs {
     > li {
         > a {
-            background-color: #71B443;
-            color: #FFFFFF;
-            line-height: 1.42857143;
+            background-color: $background-color-secondary;
+            border-radius: 4px 4px 0 0;
+            border-color: $background-color-secondary;
+            color: #111;
+            line-height: 1.3;
             margin-right: .4em;
             padding: .5em 1em;
 
             &:hover, &:focus, &:active {
-                background-color: #418940;
-                border-radius: 4px 4px 0 0;
-                border: 1px solid #418940;
+                background-color: $background-color-primary;
+                border-color: $background-color-primary;
                 padding: .5em 1em;
                 text-decoration: none;
                 color: #FFFFFF;
@@ -3638,11 +3512,9 @@ code {
             a,
             a:hover,
             a:focus {
-                background-color: #418940;
-                border-radius: 4px 4px 0 0;
+                background-color: $background-color-primary;
                 color: #FFFFFF;
                 cursor: default;
-                font-weight: bold;
             }
         }
     }
@@ -3757,8 +3629,8 @@ progress {
 }
 
 #browse-return-to-results {
-    background-color: #E8F0F6;
-    border: 1px solid #bfd9b9;
+    background-color: #e6e6e6;
+    border: 1px solid lighten($background-color-primary, 30%);
     border-bottom-width: 0;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
@@ -3768,25 +3640,27 @@ progress {
 }
 
 .browse-button {
-    background-color: #FFF;
-    border: 1px solid #bfd9b9;
-    color: #004D99;
+    background-color: transparent;
+    border: 1px solid lighten($background-color-primary, 30%);
     display: block;
     overflow: hidden;
     padding: .4em .6em;
     text-align: center;
     white-space: nowrap;
     width: 100%;
+}
+
+a.browse-button {
+    color: $green-text-color;
 
     &:hover {
-        background: #FAFAFA;
+        background: #fff;
     }
 }
 
 span {
     &.browse-button {
-        background: #FAFAFA;
-        color: #222;
+        color: #999;
     }
 
     &.circ-hlt {
@@ -4345,7 +4219,7 @@ input.renew {
             font-weight: bold;
 
             &:hover {
-                background-color: #418940;
+                background-color: $background-color-primary;
                 color: white;
                 text-decoration: none;
             }
@@ -4376,12 +4250,26 @@ input.renew {
 
 /* ==== MODULE LINKS - End ==== */
 
-#catalog-search-link a {
-    padding-right: .2em;
+#catalog-search-link {
+    border-right: 1px solid $background-color-primary;
+    padding-right: .3em;
 }
 
-#catalog-search-dropdown a.dropdown-toggle {
-    padding-left: .2em;
+
+#catalog-search-dropdown {
+    padding: 0;
+
+    & > a {
+        border-left: 1px solid darken( $green-text-color, 5% );
+        margin-right: .6em;
+        padding: .4em .6em;
+
+        &:hover,
+        &.catalog-search-dropdown-hover {
+            background-color: darken( $background-color-primary, 5% );
+            border-left: 1px solid lighten( $green-text-color, 15% );
+        }
+    }
 }
 
 #tools_holidays {