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 #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: $background-color-primary;
  48     border-radius: 0;
  49     border: 1px solid $background-color-primary;
  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: $background-color-primary;
  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: $background-color-primary;
 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 $background-color-primary;
 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         background-color: transparent;
 176
 177         &:hover {
 178             opacity: 1;
 179         }
 180     }
 181
 182     input[type="submit"], button[type="submit"] {
 183         height: 31px;
 184         background-color: $background-color-secondary;
 185         color: white;
 186         border: 0;
 187         text-shadow: unset;
 188         border-radius: 0 16px 16px 0;
 189         margin-left: -16px;
 190         padding-left: calc(16px + .5em);
 191     }
 192
 193     input[type="button"], button {
 194         height: 31px;
 195         border: 0;
 196         text-shadow: unset;
 197
 198         &:active {
 199             box-shadow: unset;
 200         }
 201     }
 202 }
 203
 204 #logged-in-menu {
 205     &:hover, &:active, &:focus {
 206         text-decoration: none;
 207     }
 208 }
 209
 210 #lastborrower-window {
 211     display: none;
 212     background-color: $background-color-primary;
 213     box-shadow: 1px 1px 1px 0 #999;
 214     color: #FFFFFF;
 215     padding: .2em;
 216     border-radius: 5px 5px 5px 5px;
 217
 218     > * {
 219         padding: 0 .4em;
 220     }
 221 }
 222
 223 #lastborrower-remove {
 224     cursor: pointer;
 225     border-left: 1px solid #fff;
 226 }
 227
 228 #lastborrowerlink {
 229     color: #FFFFFF;
 230 }
 231
 232 @media (max-width: 768px) {
 233     #header_search {
 234         .form-title {
 235             display: none;
 236         }
 237     }
 238 }
 239
 240 @media (max-width: 992px) {
 241     #header_search {
 242         .residentsearch {
 243             flex-grow: 1;
 244         }
 245
 246         .tab-title {
 247             display: none;
 248         }
 249
 250         > ul {
 251             flex-grow: 0;
 252         }
 253     }
 254 }