koha-tmpl/intranet-tmpl/prog/css/src/_header.scss

   1 a.navbar-toggle {
   2     color: #fff;
   3 }
   4
   5 #header {
   6     .navbar-nav > li > a {
   7         overflow: hidden;
   8         color: #FFFFFF;
   9
  10         &:hover, &:active {
  11             border-bottom: 1px 5px #FFFFFF;
  12         }
  13     }
  14
  15     .dropdown-menu {
  16         background-color: rgb(53, 44, 46);
  17
  18         li a {
  19             color: #FFFFFF;
  20             &:hover, &:focus {
  21                 background-color: transparent;
  22                 text-decoration: underline;
  23             }
  24         }
  25     }
  26
  27 }
  28
  29 #logo {
  30     display: flex;
  31     align-items: center;
  32
  33     img {
  34         height: 80%;
  35     }
  36 }
  37
  38 #toplevelmenu {
  39     background-color: transparent;
  40     box-shadow: none;
  41     position: relative;
  42     left: 0;
  43     top: 0;
  44 }
  45
  46 #header_search {
  47     background-color: #418940;
  48     border-radius: 0;
  49     border: 1px solid #418940;
  50     display: flex;
  51     padding: 0 .8em;
  52
  53     .residentsearch {
  54         padding: 0;
  55         border: 0;
  56         background-color: transparent;
  57         display: none;
  58         flex-basis: 50%;
  59
  60         &:first-of-type {
  61             display: block;
  62         }
  63     }
  64
  65     > ul {
  66         padding: 0;
  67         margin: 0;
  68         border-radius: 0 16px 16px 0;
  69         display: flex;
  70         align-items: center;
  71         color: white;
  72         background-color: #418940;
  73         z-index: 2;
  74         flex-grow: 1;
  75
  76         li {
  77             background: transparent;
  78             border: 0;
  79             border-radius: 0;
  80
  81             border: 0;
  82             border-bottom-width: 0;
  83             padding-bottom: 0;
  84             margin: 0;
  85
  86             a {
  87                 color: #FFF;
  88                 font-size: .9em;
  89                 padding: 0 .25em;
  90                 margin: 0 .25em;
  91                 border: 2px solid transparent;
  92             }
  93         }
  94     }
  95     .ui-state-hover, .ui-state-active {
  96         a {
  97             border-bottom: 2px solid #FFFFFF;
  98         }
  99     }
 100
 101     form {
 102         display: flex;
 103         position: relative;
 104     }
 105
 106     .form-title {
 107         padding: 0 16px 0 0;
 108         background-color: #418940;
 109         border-radius: 0 16px 16px 0;
 110         display: flex;
 111         align-items: center;
 112         justify-content: flex-end;
 113         z-index: 2;
 114         white-space: nowrap;
 115         flex-basis: 15%;
 116
 117         label {
 118             color: white;
 119             font-weight: bold;
 120             margin: 0;
 121         }
 122     }
 123
 124     .form-content {
 125         background-color: white;
 126         margin-left: -16px;
 127         padding-left: 16px;
 128         border-radius: 0 16px 16px 0;
 129         white-space: nowrap;
 130         z-index: 1;
 131         display: flex;
 132         flex-grow: 1;
 133
 134         input[type="text"],
 135         select {
 136             background-color: transparent;
 137             border: 0;
 138             border-radius: 0;
 139             box-shadow: unset;
 140             margin: 0;
 141
 142             &:not(:first-child) {
 143                 border-left: 1px solid #e0e0e0;
 144             }
 145         }
 146     }
 147
 148     .form-extra-content {
 149         right: 60px;
 150         position: absolute;
 151         top: 31px;
 152         background-color: #f3f4f4;
 153         background-color: white;
 154         padding: 1em;
 155         border-radius: 0 0 8px 8px;
 156         border: 1px solid #418940;
 157         border-top: 0 none;
 158         box-shadow: 0 2px 2px 1px #00000030;
 159         z-index: 1;
 160         display: none;
 161
 162         .form-control {
 163             display: block;
 164             width: 100%;
 165         }
 166
 167         label {
 168             display: block;
 169             margin-bottom: 0;
 170         }
 171     }
 172
 173     .form-extra-content-toggle {
 174         opacity: .5;
 175
 176         &:hover {
 177             opacity: 1;
 178         }
 179     }
 180
 181     input[type="submit"], button[type="submit"] {
 182         height: 31px;
 183         background-color: #71B443;
 184         color: white;
 185         border: 0;
 186         text-shadow: unset;
 187         border-radius: 0 16px 16px 0;
 188         margin-left: -16px;
 189         padding-left: calc(16px + .5em);
 190     }
 191
 192     input[type="button"], button {
 193         height: 31px;
 194         border: 0;
 195         text-shadow: unset;
 196
 197         &:active {
 198             box-shadow: unset;
 199         }
 200     }
 201 }
 202
 203 #logged-in-menu {
 204     &:hover, &:active, &:focus {
 205         text-decoration: none;
 206     }
 207 }
 208
 209 #lastborrower-window {
 210     display: none;
 211     background-image: linear-gradient(to left, #418940, #71B443);
 212     box-shadow: 1px 1px 1px 0 #999;
 213     color: #FFFFFF;
 214     padding: .2em;
 215     border-radius: 5px 5px 5px 5px;
 216
 217     > * {
 218         padding: 0 .4em;
 219     }
 220 }
 221
 222 #lastborrower-remove {
 223     cursor: pointer;
 224     border-left: 1px solid #fff;
 225 }
 226
 227 #lastborrowerlink {
 228     color: #FFFFFF;
 229 }
 230
 231 @media (max-width: 768px) {
 232     #header_search {
 233         .form-title {
 234             display: none;
 235         }
 236     }
 237 }
 238
 239 @media (max-width: 992px) {
 240     #header_search {
 241         .residentsearch {
 242             flex-grow: 1;
 243         }
 244
 245         .tab-title {
 246             display: none;
 247         }
 248
 249         > ul {
 250             flex-grow: 0;
 251         }
 252     }
 253 }