Bug 26189: Improve styling of datatables within fieldsets
[koha-ffzg.git] / koha-tmpl / intranet-tmpl / prog / css / src / staff-global.scss
index cef9e87..64f79cd 100644 (file)
@@ -1,32 +1,5 @@
-$font-main: Arial, Verdana, Helvetica, sans-serif;
-$font-monospace: "Courier New", Courier, monospace;
-$language-footer-min-height: 20px;
-
-@mixin default-button {
-    background-image: linear-gradient(to bottom, #FFF 0, #E0E0E0 100%);
-    border-color: #ADADAD #ADADAD #949494;
-    border-radius: 4px;
-    border-width: 1px;
-    color: #333333;
-    display: inline-block;
-    font-size: inherit;
-    line-height: 1.42857143;
-    padding: .3em .8em;
-    text-align: center;
-    text-shadow: 0 1px 0 #fff;
-    vertical-align: middle;
-    white-space: nowrap;
-
-    &:hover {
-        background: #E0E0E0 none;
-    }
-}
-
-@mixin disabled-button {
-    background: #EEE none;
-    border: 1px solid #C0C0C0;
-    color: #999;
-}
+@import "mixins";
+@import "tables";
 
 ::selection {
     background: #538200;
@@ -100,11 +73,6 @@ a {
         color: #666;
     }
 
-    &.popup {
-        background: transparent url("../img/pop-up-link.png") center right no-repeat;
-        padding-right: 15px;
-    }
-
     &.disabled {
         color: #999999;
     }
@@ -181,6 +149,7 @@ aside {
                 &.checkbox {
                     label {
                         display: inline;
+                        margin-left: 0;
                     }
                 }
 
@@ -224,6 +193,11 @@ aside {
             [type="text"] {
                 width: 100%;
             }
+
+            .hasDatepicker {
+                margin-right: 3px;
+                width: calc(100% - 20px);
+            }
         }
     }
 }
@@ -255,102 +229,6 @@ main {
     }
 }
 
-table {
-    border-collapse: collapse;
-    border-right: 1px solid #BCBCBC;
-    border-top: 1px solid #BCBCBC;
-
-    .btn-group {
-        white-space: nowrap;
-
-        .btn {
-            display: inline-block;
-            float: none;
-        }
-    }
-
-    &.indexes {
-        td {
-            vertical-align: middle;
-        }
-    }
-
-    > caption {
-        span {
-            &.actions {
-                font-size: 66%;
-                font-weight: normal;
-                margin: 0 .5em 0 0;
-            }
-        }
-    }
-
-    &.invis {
-        border: 0;
-
-        tr,
-        td {
-            border: 0;
-        }
-    }
-
-    + table {
-        margin-top: 1em;
-    }
-}
-
-td,
-th {
-    border-bottom: 1px solid #BCBCBC;
-    border-left: 1px solid #BCBCBC;
-    padding: .2em .3em;
-}
-
-td {
-    background-color: #FFFFFF;
-    vertical-align: top;
-
-    &.actions {
-        white-space: nowrap;
-    }
-
-    &.borderless {
-        border: 0 none;
-        border-collapse: separate;
-    }
-
-    &.data {
-        font-family: $font-monospace;
-        text-align: right;
-    }
-
-    &.total {
-        text-align: right;
-    }
-
-    input {
-        &.approve {
-            background-color: #FFC;
-        }
-    }
-}
-
-
-th {
-    background-color: #E8E8E8;
-    font-weight: bold;
-    text-align: center;
-
-    &[scope="row"] {
-        text-align: right;
-    }
-
-    &.data {
-        font-family: $font-monospace;
-        text-align: right;
-    }
-}
-
 body {
     font-family: $font-main;
     font-size: 13px;
@@ -371,7 +249,34 @@ form {
 
     &.confirm {
         display: block;
-        text-align: center;
+        font-size: 110%;
+        line-height: 130%;
+
+        ul {
+            padding: 1em 0;
+
+            li {
+                list-style-type: none;
+            }
+        }
+
+        .notification_method {
+            background-color: #FFE;
+            border: 1px solid #CCC;
+            border-radius: 5px;
+            display: inline-block;
+            margin: .5em 0;
+            padding: .1em .3em;
+
+            &.none {
+                background-color: #EEE;
+            }
+        }
+
+        .hold-found-barcode {
+            display: inline-block;
+            font-size: 90%;
+        }
     }
 }
 
@@ -486,16 +391,6 @@ input {
         }
     }
 
-    &.hasDatepicker {
-        background-image: url("../img/famfamfam/silk/calendar.png");
-        background-position-x: right;
-        background-position-y: center;
-        background-repeat: no-repeat;
-        border-style: inset outset outset inset;
-        border-width: 1px;
-        padding-right: 18px;
-    }
-
     &.submit {
         @include default-button;
 
@@ -507,11 +402,6 @@ input {
             @include disabled-button;
         }
     }
-
-    &.warning {
-        background: #FFF url("../img/famfamfam/silk/error.png") no-repeat 4px center;
-        padding: .25em .25em .25em 25px;
-    }
 }
 
 .input-warning {
@@ -539,8 +429,11 @@ label,
     }
 
     &.circ_barcode {
+        display: inline-block;
         font-size: 105%;
         font-weight: bold;
+        margin-bottom: 1rem;
+        max-width: 75%;
     }
 
     &.required {
@@ -692,29 +585,6 @@ ol {
     }
 }
 
-.highlighted-row,
-.highlighted-row td {
-    background-color: #FFD000 !important;
-}
-
-.warned-row,
-.warned-row td { background-color: #FF9000 !important }
-
-.high-warned-row,
-.high-warned-row td { background-color: #FF0000 !important }
-
-tbody {
-    tr {
-        &:nth-child(odd) {
-            td {
-                background-color: #F3F3F3;
-                border: 1px solid #BCBCBC;
-                border-right: 1px solid #BCBCBC;
-            }
-        }
-    }
-}
-
 .overdue,
 .debit {
     color: #CC0000;
@@ -725,121 +595,6 @@ tbody {
     font-weight: bold;
 }
 
-tr {
-    &.clickable {
-        cursor: pointer;
-    }
-
-    &.expired {
-        td {
-            color: #999999;
-        }
-    }
-
-    &.highlight {
-        td {
-            background-color: #F6F6F6;
-            border-color: #BCBCBC;
-        }
-
-        th {
-            &[scope="row"] {
-                background-color: #DDDDDD;
-                border-color: #BCBCBC;
-            }
-        }
-
-        table {
-            &.invis {
-                td {
-                    border: 0;
-                }
-            }
-        }
-    }
-
-    &.odd {
-        &.onissue {
-            td {
-                background-color: #FFFFE1;
-            }
-        }
-    }
-
-    &.ok {
-        td {
-            background-color: #FFFFCC;
-        }
-
-        &:nth-child(odd) {
-            td {
-                background-color: #FFFFCC;
-            }
-        }
-
-        &:nth-child(even) {
-            td {
-                background-color: #FFFFCC;
-            }
-        }
-    }
-
-    &.onissue {
-        td {
-            background-color: #FFFFCC;
-        }
-    }
-
-    &.reserved {
-        td {
-            background-color: #EEFFD4;
-        }
-    }
-
-    &.transfered {
-        td {
-            background-color: #E8F0F6;
-        }
-    }
-
-    &.warn {
-        td {
-            background-color: #FF9090;
-        }
-
-        &:nth-child(odd) {
-            td {
-                background-color: #FF9090;
-            }
-        }
-    }
-}
-
-.table_borrowers {
-    tr {
-        &:hover {
-            td {
-                background-color: #FFFF99;
-            }
-        }
-    }
-}
-
-tfoot {
-    td {
-        background-color: #F3F3F3;
-        font-weight: bold;
-        vertical-align: middle;
-    }
-}
-
-caption {
-    color: #000;
-    font-size: 133.9%;
-    font-weight: bold;
-    margin: .3em 0;
-}
-
 .problem {
     background-color: #FFFFCC;
     color: #990000;
@@ -865,6 +620,7 @@ fieldset {
         border-bottom-right-radius: 0;
         border-bottom-width: 0;
         margin-bottom: 0;
+        margin-right: 0;
     }
 
     .standard {
@@ -940,6 +696,10 @@ fieldset {
                 text-align: left;
             }
         }
+
+        .action {
+            margin-left: 1em;
+        }
     }
 
     &.rows {
@@ -1138,6 +898,10 @@ fieldset {
             font-size: 105%;
             margin: 1em 0 1em 1em;
 
+            &.dataTable {
+                margin: 0;
+            }
+
             &.mceListBox {
                 margin: 0;
             }
@@ -1161,6 +925,13 @@ fieldset {
             clear: both;
             padding-top: .5em;
         }
+
+        .dataTables_wrapper {
+            label {
+                font-weight: 400;
+                width: unset;
+            }
+        }
     }
 }
 
@@ -1224,7 +995,13 @@ details[open] {
     background-color: #E6F0F2;
     clear: both;
     margin: 0;
-    padding: .2em .5em .4em 10px;
+    padding: .8em .5em .8em 10px;
+    position: relative;
+
+    .title {
+        font-size: unset;
+        font-weight: normal;
+    }
 }
 
 #header {
@@ -1639,6 +1416,30 @@ dd {
     }
 }
 
+.patroninfo-section {
+    padding: .5em;
+    margin: .5em;
+
+    .rows {
+        padding: .5em;
+    }
+}
+
+.patroninfo-heading {
+    background-color: rgba(237, 244, 246, .4);
+    padding: .5em;
+    margin-bottom: .3em;
+    clear: both;
+
+    h3 {
+        display: inline-block;
+    }
+
+    .btn {
+        float: right;
+    }
+}
+
 /* Patron image */
 
 .patronimage-container {
@@ -1686,6 +1487,10 @@ dd {
     padding: 1em 2em;
  }
 
+#patronImageEdit input[type="file" ] {
+    display: inline-block;
+}
+
 .patronviews {
     border-right: 1px solid #000;
     border-top: 1px solid #000;
@@ -1750,6 +1555,10 @@ input[type='text']:read-only:focus {
     background-color: #FFFF99;
 }
 
+.important_subfield_not_filled {
+    background-color : #FFFFCC;
+}
+
 .content_hidden {
     display: none;
     visibility: hidden; // you propably don't need to change this one
@@ -1988,6 +1797,15 @@ i {
     }
 }
 
+.warning {
+    i {
+        &.fa-exclamation-triangle {
+            color: #FFD700;
+            text-shadow: 0 -1px 0 rgba( 0, 0, 0, .3);
+        }
+    }
+}
+
 .accesskey {
     text-decoration: underline;
 }
@@ -2173,24 +1991,24 @@ li {
                 margin: 3px 5px 3px -5px;
             }
         }
+    }
 
-        span {
-            &.status {
-                clear: left;
-                color: #900;
-                display: block;
-            }
+    span {
+        &.status {
+            clear: left;
+            color: #900;
+            display: block;
+        }
 
-            &.unavailable {
-                clear: left;
-                display: block;
-            }
+        &.unavailable {
+            clear: left;
+            display: block;
         }
+    }
 
-        table {
-            td {
-                vertical-align: top;
-            }
+    table {
+        td {
+            vertical-align: top;
         }
     }
 
@@ -2201,6 +2019,22 @@ li {
     }
 }
 
+#searchresults {
+    .address {
+        ul {
+            margin: 0;
+            padding-left: 0;
+            li {
+                clear: none;
+                float: left;
+                list-style: none;
+                margin-left: 1ch;
+                padding: 0;
+            }
+        }
+    }
+}
+
 #searchheader {
     background-color: #E6F0F2;
     border: 1px solid #B9D8D9;
@@ -2238,14 +2072,6 @@ li {
             padding: 5px 25em 0 0;
         }
     }
-
-    .dropdown-header {
-        border-top: 1px solid #EEE;
-        color: #000;
-        font-weight: bold;
-        padding-left: 10px;
-    }
-
 }
 
 #search-facets {
@@ -2295,6 +2121,49 @@ li {
     text-align: center;
 }
 
+.custom_cover_image {
+    img {
+        max-width: 140px;
+    }
+}
+
+.cover-slides {
+    background: #FFF url("[% interface | html %]/[% theme | html %]/img/spinner-small.gif") center center no-repeat;
+    border: 1px solid #b9d8d9;
+    border-radius: 3px;
+    margin: 5px;
+    padding: 10px 5px 5px 5px;
+    min-height: 175px;
+
+    .hint {
+        font-size: 90%;
+        padding: .5em 0;
+    }
+
+    a {
+        &.nav-active {
+            &:link,
+            &:visited {
+                color: #85ca11;
+            }
+        }
+    }
+}
+
+.cover-image {
+    display: none;
+
+    img {
+        height: auto;
+        max-width: 100%;
+    }
+}
+
+.cover-nav {
+    display: inline-block;
+    padding: 3px 4px;
+}
+
 .searchhighlightblob {
     font-size: 75%;
     font-style: italic;
@@ -2393,6 +2262,38 @@ li {
 }
 
 .modal-dialog {
+    .dialog {
+        border-radius: 0;
+        border-width: 1px 0 0 0;
+        margin: 15px -15px -15px -15px;
+        padding: 15px;
+        text-align: left;
+        width: unset;
+
+        h3 {
+            margin: unset;
+            text-align: left;
+        }
+
+        &.alert {
+            background: #FFFADE none;
+            border-color: #E0C726;
+
+            .problem {
+                background-color: transparent;
+            }
+        }
+
+        &.message {
+            background: #E8EDF6 none;
+            border-color: #A4BEDD;
+
+            .problem {
+                background-color: transparent;
+            }
+        }
+    }
+
     &.modal-wide {
         width: 80%;
     }
@@ -2412,8 +2313,11 @@ li {
 }
 
 #cartmenulink {
-    background: transparent url("../img/cart-small.gif") left center no-repeat;
     padding-left: 15px;
+
+    i.fa.fa-shopping-cart {
+        padding-right: 7px;
+    }
 }
 
 #basketcount {
@@ -2621,36 +2525,6 @@ li {
         }
     }
 }
-.pager {
-    background-color: #E8E8E8;
-    border: 1px solid #BCBCBC;
-    border-radius: 5px;
-    display: inline-block;
-    font-size: 85%;
-    margin: .4em 0;
-    padding: .3em .5em;
-
-    img {
-        vertical-align: middle;
-
-        &.last {
-            padding-right: 5px;
-        }
-    }
-
-    input {
-        &.pagedisplay {
-            background-color: transparent;
-            border: 0;
-            font-weight: bold;
-            text-align: center;
-        }
-    }
-
-    p {
-        margin: 0;
-    }
-}
 
 .no-image {
     background-color: #FFFFFF;
@@ -2881,7 +2755,7 @@ li {
 }
 
 .statictabs {
-    ul {
+    ul {
         background: none repeat scroll 0 0 transparent;
         border: 0 none;
         border-bottom-left-radius: 4px;
@@ -2969,6 +2843,12 @@ li {
     }
 }
 
+.toptabs {
+        .ui-tabs-panel {
+            background: #FFF none;
+        }
+}
+
 .authref {
     font-style: normal;
     text-indent: 4em;
@@ -3102,7 +2982,6 @@ li {
 }
 
 .ui-datepicker-trigger {
-    margin: 0 3px;
     vertical-align: middle;
 }
 
@@ -3156,6 +3035,18 @@ video {
 
 // Bootstrap overrides
 
+.dropdown-header {
+    border-top: 1px solid #EEE;
+    color: #000;
+    font-weight: bold;
+    margin-top: 5px;
+    padding-left: 10px;
+
+    &:first-child {
+        border-top: 0;
+    }
+}
+
 nav {
     background: #E6F0F2 none;
     border: 0;
@@ -3627,6 +3518,12 @@ span {
         margin-left: .5em;
     }
 
+    &.important {
+        color: #EAC117;
+        font-style: italic;
+        margin-left: .5em;
+    }
+
     &[class*=" label-"] {
         color: #FFF;
         display: inline;
@@ -3935,6 +3832,25 @@ input.renew {
         top: 50%;
         transform: translateY(-50%);
     }
+
+    #generic_confirm_search_count {
+        margin: 1em 0 1em 10em;
+    }
+
+    #generic_confirm_search {
+        display: block;
+        visibility: hidden;
+        margin: 1em 0 1em 10em;
+    }
+
+    #partnerSearch {
+        .modal-dialog {
+            width: 50vw;
+        }
+        .modal-body {
+            max-height: 70vh;
+        }
+    }
 }
 
 .ill-view-panel {
@@ -3961,6 +3877,20 @@ input.renew {
     width: 100% !important;
 }
 
+.ar-title, .hq-title {
+    .biblio-title {
+        font-weight: bold;
+    }
+}
+
+#ill-issue-title {
+    margin: 20px 0 30px 0;
+}
+
+.ill_availability_sourcename {
+    margin-top: 20px;
+}
+
 #stockrotation {
     h3 {
         margin: 30px 0 10px 0;
@@ -4083,6 +4013,15 @@ input.renew {
     }
 }
 
+#payForm {
+    fieldset {
+        &.rows {
+            padding-left: 1em;
+            padding-right: 2em;
+        }
+    }
+}
+
 #helper {
     span {
         display: none;
@@ -4134,7 +4073,7 @@ input.renew {
     display: none;
     position: absolute;
     right: 5px;
-    top: 100px;
+    top: 0px;
 }
 
 /* ==== MODULE LINKS - Start ==== */
@@ -4181,6 +4120,11 @@ input.renew {
     margin:  .5em 0;
 }
 
+.columns-2 {
+    columns: 2 auto;
+    column-gap: 2.5em;
+}
+
 .columns-3 {
     columns: 3 auto;
     column-gap: 2.5em;
@@ -4336,6 +4280,18 @@ div#makechart ol li {
     list-style: none;
 }
 
+div .suggestion_note {
+    background: transparent none;
+    border-style: dotted;
+    border-width: 1px 0 0 0;
+    font-size: 90%;
+    padding: 2px 0 0 0;
+
+    i {
+        color: #CCC;
+    }
+}
+
 @media (min-width: 200px) {
 
 }
@@ -4522,6 +4478,5 @@ div#makechart ol li {
     #browse-next {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 5px;
-        text-align: right;
     }
 }