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