koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss

   1 /* Bootstrap variable customizations */
   2 $headings-color: #727272;
   3 $headings-font-weight: 600;
   4 $enable-gradients: false;
   5 $info: #2679CC;
   6 $danger: rgb( 185, 32, 32 );
   7 $font-size-base: 1rem;
   8 $h1-font-size: $font-size-base * 1.5;
   9 $h2-font-size: $font-size-base * 1.4;
  10 $h3-font-size: $font-size-base * 1.3;
  11 $h4-font-size: $font-size-base * 1.2;
  12 $h5-font-size: $font-size-base * 1.1;
  13 $h6-font-size: $font-size-base;
  14 $base-theme-color: #548300;
  15 $color: #999999;
  16 $links: #0074AD;
  17 $links-hover: #005580;
  18 $footer-height: 45px;
  19 $sci-link-color: #0076B6;
  20 $sci-heading-color: #727272;
  21 $high-contrast-grey: #666666;
  22
  23 @mixin shadowed {
  24     box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, .2 );
  25 }
  26
  27 @mixin border-radius-all($radius: 3px) {
  28     border-radius: $radius;
  29 }
  30
  31 @mixin input-focus {
  32     border-color: $base-theme-color;
  33     box-shadow: inset 0 1px 1px rgba( 0, 0, 0, .075 ), 0 0 8px rgba( 194, 228, 136, .6 );
  34 }
  35
  36 /* Bootstrap imports */
  37 @import "bootstrap/scss/functions";
  38 @import "bootstrap/scss/variables";
  39 @import "bootstrap/scss/mixins";
  40 @import "bootstrap/scss/alert";
  41
  42 // @import "bootstrap/scss/badge";
  43 @import "bootstrap/scss/breadcrumb";
  44 @import "bootstrap/scss/button-group";
  45 @import "bootstrap/scss/buttons";
  46 @import "bootstrap/scss/card";
  47
  48 // @import "bootstrap/scss/carousel";
  49 @import "bootstrap/scss/close";
  50
  51 // @import "bootstrap/scss/code";
  52 @import "bootstrap/scss/custom-forms";
  53 @import "bootstrap/scss/dropdown";
  54 @import "bootstrap/scss/forms";
  55 @import "bootstrap/scss/grid";
  56
  57 // @import "bootstrap/scss/images";
  58 @import "bootstrap/scss/input-group";
  59
  60 // @import "bootstrap/scss/jumbotron";
  61 // @import "bootstrap/scss/list-group";
  62 // @import "bootstrap/scss/media";
  63 @import "bootstrap/scss/modal";
  64 @import "bootstrap/scss/navbar";
  65 @import "bootstrap/scss/nav";
  66 @import "bootstrap/scss/pagination";
  67
  68 // @import "bootstrap/scss/popover";
  69 @import "bootstrap/scss/print";
  70
  71 // @import "bootstrap/scss/progress";
  72 @import "bootstrap/scss/reboot";
  73 @import "bootstrap/scss/root";
  74
  75 // @import "bootstrap/scss/spinners";
  76 @import "bootstrap/scss/tables";
  77
  78 // @import "bootstrap/scss/toasts";
  79 @import "bootstrap/scss/tooltip";
  80 @import "bootstrap/scss/transitions";
  81 @import "bootstrap/scss/type";
  82 @import "bootstrap/scss/utilities";
  83 @import "flatpickr";
  84
  85 /* Koha imports */
  86 @import "fonts";
  87
  88 // Sticky footer styles
  89 html,
  90 body {
  91     height: 100%;
  92
  93     // The html and body elements cannot have any padding or margin.
  94 }
  95
  96 body {
  97     background: #FCF9FC none;
  98     display: flex;
  99     flex-direction: column;
 100     height: 100%;
 101 }
 102
 103 a {
 104     &:link,
 105     &:visited {
 106         color: $links;
 107     }
 108 }
 109
 110 a,
 111 button {
 112     &:hover,
 113     &:active {
 114         color: $links-hover;
 115     }
 116 }
 117
 118 caption {
 119     caption-side: top;
 120     color: #727272;
 121     font-size: 110%;
 122     font-weight: bold;
 123     margin: 0;
 124     text-align: left;
 125 }
 126
 127 .dropdown-menu-right {
 128     left: auto;
 129     right: 0;
 130 }
 131
 132 .fa {
 133     &.fa-icon-black,
 134     &.fa-icon-white {
 135         color: #000;
 136     }
 137
 138     &.danger {
 139         color: #C00;
 140     }
 141 }
 142
 143 .navbar-nav {
 144     margin-right: 0;
 145
 146     & > li {
 147         & > a {
 148             color: $high-contrast-grey;
 149             font-weight: bold;
 150         }
 151
 152         & > .dropdown-menu {
 153             &.dropdown-menu-right {
 154                 &::after {
 155                     left: unset;
 156                     right: 10px;
 157                 }
 158
 159                 &::before {
 160                     left: unset;
 161                     right: 9px;
 162                 }
 163             }
 164         }
 165     }
 166 }
 167
 168 .main {
 169     background-color: #FFF;
 170     border: 1px solid #F0F3F3;
 171     margin: 15px;
 172     padding: 1rem 0;
 173 }
 174
 175 .alert {
 176     &.alert-info,
 177     &.alert-warning {
 178         color: #000;
 179     }
 180
 181     &.alert-error {
 182         @extend .alert-warning;
 183     }
 184 }
 185
 186 .btn-primary {
 187     background-color: $base-theme-color;
 188     border: 1px solid darken( $base-theme-color, 10% );
 189     color: #FFF;
 190
 191     &:link,
 192     &:visited {
 193         color: #FFF;
 194     }
 195
 196     &:hover,
 197     &:active {
 198         background-color: $base-theme-color;
 199         border-color: lighten( $base-theme-color, 5% );
 200         box-shadow: 0 0 0 1px lighten( saturate( $base-theme-color, .5 ), 4 );
 201         color: #FFF;
 202     }
 203
 204     &:focus {
 205         box-shadow: 0 0 0 2px lighten( $base-theme-color, 10% );
 206     }
 207
 208     &.disabled,
 209     &:disabled {
 210         background-color: lighten( $base-theme-color, 5% );
 211         border-color: lighten( $base-theme-color, 5% );
 212         box-shadow: none;
 213         color: #FFF;
 214         cursor: not-allowed;
 215
 216         &:hover,
 217         &.hover {
 218             background-color: lighten( $base-theme-color, 5% );
 219             border-color: lighten( $base-theme-color, 5% );
 220             box-shadow: none;
 221             color: #FFF;
 222             cursor: not-allowed;
 223         }
 224     }
 225
 226     &:not( :disabled, .disabled ):active:focus,
 227     & &:not( :disabled, .disabled ).active:focus {
 228         box-shadow: 0 0 0 .2rem lighten( $base-theme-color, 10% );
 229     }
 230
 231     &:not( :disabled, .disabled ).active,
 232     &:not( :disabled, .disabled ):active,
 233     &:not( :disabled, .disabled ):focus,
 234     &:not( :disabled, .disabled ).focus {
 235         background-color: lighten( $base-theme-color, 5% );
 236         border-color: lighten( $base-theme-color, 10% );
 237     }
 238 }
 239
 240 .show > .btn-primary.dropdown-toggle {
 241     background-color: lighten( $base-theme-color, 5% );
 242     border-color: lighten( $base-theme-color, 10% );
 243
 244     &:focus {
 245         box-shadow: 0 0 0 .2rem lighten( $base-theme-color, 10% );
 246     }
 247 }
 248
 249 .btn-danger {
 250     $base-bg: #B92020;
 251
 252     background-color: $base-bg;
 253     background-image: linear-gradient( to bottom, lighten( saturate( $base-bg, .5 ), 4 ), $base-bg );
 254     background-position: 0;
 255     border: 1px solid darken( $base-bg, 5% );
 256     color: #FFF;
 257
 258     &:link,
 259     &:visited {
 260         color: #FFF;
 261     }
 262
 263     &:hover,
 264     &:active {
 265         $base-bg: darken( $base-bg, 2 );
 266
 267         background-color: $base-bg;
 268         background-image: linear-gradient( to bottom, lighten( saturate( $base-bg, .5 ), 4 ), $base-bg );
 269         color: #FFF;
 270     }
 271
 272     &:focus {
 273         box-shadow: 0 0 0 2px lighten( $base-bg, 10% );
 274     }
 275 }
 276
 277 .btn-default,
 278 .btn-secondary {
 279     $base-bg: #E6E6E6;
 280
 281     background-color: $base-bg;
 282     background-image: linear-gradient( to bottom, lighten( saturate( $base-bg, .5 ), 4 ), $base-bg );
 283     background-position: 0;
 284     border: 1px solid darken( $base-bg, 20% );
 285     color: #000;
 286
 287     &:link,
 288     &:visited {
 289         color: #000;
 290     }
 291
 292     &:hover,
 293     &:active {
 294         $base-bg: darken( $base-bg, 2 );
 295
 296         background-color: $base-bg;
 297         background-image: linear-gradient( to bottom, lighten( saturate( $base-bg, .5 ), 4 ), $base-bg );
 298         color: #000;
 299     }
 300
 301     &:focus {
 302         box-shadow: 0 0 0 2px darken( $base-bg, 10% );
 303     }
 304
 305     &:not( :disabled, .disabled ):active,
 306     &:not( :disabled, .disabled ).active {
 307         color: #000;
 308     }
 309 }
 310
 311 input[type="text"],
 312 input[type="password"],
 313 select,
 314 textarea,
 315 .form-control {
 316     &:focus {
 317         border-color: $base-theme-color;
 318         box-shadow: inset 0 1px 1px rgba( 0, 0, 0, .075 ), 0 0 8px rgba( 194, 228, 136, .6 );
 319     }
 320 }
 321
 322 .dt-buttons {
 323     display: flex;
 324     flex-wrap: wrap;
 325 }
 326
 327 .dt-button {
 328     background-color: transparent;
 329     border: 0;
 330     color: lighten( $links, 1.2 );
 331     line-height: 20px;
 332     padding: 4px 12px;
 333     text-align: center;
 334     text-shadow: 0 1px 1px rgba( 255, 255, 255, .75 );
 335     vertical-align: middle;
 336
 337     &:hover {
 338         color: $links-hover;
 339
 340         &::before {
 341             color: #338468;
 342         }
 343     }
 344
 345     &::before {
 346         color: #4466AE;
 347         display: inline-block;
 348         font-family: FontAwesome;
 349         padding-right: .5em;
 350     }
 351
 352     &.disabled {
 353         color: #333;
 354         opacity: .65;
 355         pointer-events: none;
 356
 357         &:hover {
 358             color: #333;
 359             filter: alpha( opacity=65 );
 360             opacity: .65;
 361         }
 362
 363         i {
 364             &.fa,
 365             &.fa:hover {
 366                 color: #333;
 367                 filter: alpha( opacity=65 );
 368                 opacity: .65;
 369             }
 370         }
 371     }
 372 }
 373
 374 div.dt-button-collection button.dt-button,
 375 div.dt-button-collection div.dt-button,
 376 div.dt-button-collection a.dt-button {
 377     display: block;
 378     float: none;
 379     left: 0;
 380     margin-bottom: 4px;
 381     margin-right: 0;
 382     position: relative;
 383     right: 0;
 384     width: 100%;
 385 }
 386
 387 div.dt-button-collection {
 388     width: auto;
 389 }
 390
 391 div.dt-button-collection button.dt-button {
 392     border-radius: 2px;
 393     text-align: left;
 394 }
 395
 396 div.dt-button-collection button.dt-button.buttons-collection {
 397     border: 0;
 398 }
 399
 400 div.dt-button-collection button.dt-button.buttons-columnVisibility {
 401     background: #FFF none;
 402     border: 1px solid #EEE;
 403     box-shadow: none;
 404     font-size: 1em;
 405     margin: 0 0 4px;
 406     padding: .3em .7em;
 407     text-shadow: none;
 408 }
 409
 410 div.dt-button-collection button.dt-button.buttons-columnVisibility::before {
 411     color: #C00;
 412     content: "\f00d";
 413     display: inline-block;
 414     font-family: FontAwesome;
 415     margin-right: .5em;
 416     width: 1em;
 417 }
 418
 419 div.dt-button-collection button.dt-button.buttons-columnVisibility:hover {
 420     background: #FFC none;
 421     border: 1px solid #999;
 422     box-shadow: none;
 423 }
 424
 425 div.dt-button-collection button.dt-button.buttons-columnVisibility:hover::before {
 426     color: #538200;
 427     content: "\f00c";
 428     display: inline-block;
 429     font-family: FontAwesome;
 430     margin-right: .5em;
 431     width: 1em;
 432 }
 433
 434 div.dt-button-collection button.dt-button.buttons-columnVisibility:active:not( .disabled ):hover:not( .disabled ) {
 435     background: transparent none;
 436     box-shadow: none;
 437 }
 438
 439 div.dt-button-collection button.dt-button.buttons-columnVisibility.active {
 440     background: #E6F0F2 none;
 441     border-color: #999;
 442     box-shadow: none;
 443 }
 444
 445 div.dt-button-collection button.dt-button.buttons-columnVisibility.active:hover {
 446     background: #FFC none;
 447 }
 448
 449 div.dt-button-collection button.dt-button.buttons-columnVisibility.active:hover::before {
 450     color: #C00;
 451     content: "\f00d";
 452     display: inline-block;
 453     font-family: FontAwesome;
 454     margin-right: .5em;
 455     width: 1em;
 456 }
 457
 458 div.dt-button-collection button.dt-button.buttons-columnVisibility.active:not( .disabled ):hover:not( .disabled ) {
 459     background: transparent none;
 460     box-shadow: none;
 461 }
 462
 463 div.dt-button-collection button.dt-button.buttons-columnVisibility.active::before {
 464     color: $base-theme-color;
 465     content: "\f00c";
 466     display: inline-block;
 467     font-family: FontAwesome;
 468     margin-right: .5em;
 469     width: 1em;
 470 }
 471
 472 div.dt-button-collection button.dt-button.buttons-html5,
 473 div.dt-button-collection button.dt-button.buttons-print {
 474     background: #FFF none;
 475     border: 1px solid #EEE;
 476     box-shadow: none;
 477     font-size: 1.2em;
 478     margin: 0 0 4px;
 479     padding: .3em .7em;
 480     text-shadow: none;
 481 }
 482
 483 div.dt-button-collection button.dt-button.buttons-html5:hover,
 484 div.dt-button-collection button.dt-button.buttons-print:hover {
 485     background: #FFC none;
 486 }
 487
 488 div.dt-button-collection button.dt-button.buttons-html5:not( .disabled )::before {
 489     color: #222BAC;
 490     display: inline-block;
 491     font-family: FontAwesome;
 492     margin-right: .5em;
 493     width: 1em;
 494 }
 495
 496 div.dt-button-collection button.dt-button.buttons-excel:not( .disabled )::before {
 497     content: "\f1c3";
 498 }
 499
 500 div.dt-button-collection button.dt-button.buttons-csv:not( .disabled )::before {
 501     content: "\f0ce";
 502 }
 503
 504 div.dt-button-collection button.dt-button.buttons-copy:not( .disabled )::before {
 505     content: "\f0c5";
 506 }
 507
 508 div.dt-button-collection button.dt-button.buttons-print:not( .disabled )::before {
 509     color: #222BAC;
 510     content: "\f02f";
 511     display: inline-block;
 512     font-family: FontAwesome;
 513     margin-right: .5em;
 514     width: 1em;
 515 }
 516
 517 .dt-button-info {
 518     background-color: #FFF;
 519     border: 2px solid $links-hover;
 520     border-radius: 3px;
 521     box-shadow: 3px 3px 8px rgba( 0, 0, 0, .3 );
 522     left: 50%;
 523     margin-left: -200px;
 524     margin-top: -100px;
 525     position: fixed;
 526     text-align: center;
 527     top: 50%;
 528     width: 400px;
 529     z-index: 21;
 530
 531     h2 {
 532         background-color: #F3F3F3;
 533         border-bottom: 1px solid #DDD;
 534         font-weight: normal;
 535         margin: 0;
 536         padding: .5em;
 537     }
 538
 539     & > div {
 540         padding: 1em;
 541     }
 542 }
 543
 544 .buttons-print {
 545     &::before {
 546         content: "\f02f";
 547     }
 548 }
 549
 550 .buttons-csv {
 551     &::before {
 552         content: "\f0ce";
 553     }
 554 }
 555
 556 .buttons-copy {
 557     &::before {
 558         content: "\f0c5";
 559     }
 560 }
 561
 562 .buttons-ical {
 563     &::before {
 564         content: "\f073";
 565     }
 566
 567     &:hover {
 568         text-decoration: none;
 569     }
 570 }
 571
 572 .buttons-renew,
 573 .buttons-renewall {
 574     &:hover {
 575         i.fa {
 576             color: #338468;
 577         }
 578     }
 579 }
 580
 581 .buttons-colvis {
 582     &::before {
 583         content: "\f013";
 584     }
 585 }
 586
 587 .table_controls {
 588     display: flex;
 589
 590     .dataTables_filter {
 591         label {
 592             input {
 593                 margin-left: 5px;
 594             }
 595         }
 596
 597         input {
 598             @extend .form-control;
 599             @extend .form-control-sm;
 600
 601             display: inline-block;
 602             width: auto;
 603
 604             &:focus {
 605                 @include input-focus;
 606             }
 607         }
 608     }
 609 }
 610
 611 .table_entries {
 612     color: #797979;
 613     font-size: 90%;
 614     margin-left: 5px;
 615     padding: 5px 0;
 616 }
 617
 618 [class^="icon-"] {
 619     vertical-align: 0;
 620 }
 621
 622 [class*=" icon-"] {
 623     vertical-align: 0;
 624 }
 625
 626 .table {
 627     .sorting_asc {
 628         background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1IDEuNzRoLTIuMUwzIC42NHoiLz48L2c+PC9zdmc+" ) no-repeat scroll 100% 80% #E2E8E8;
 629         padding-right: 19px;
 630     }
 631
 632     .sorting_desc {
 633         background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1LjY0aC0yLjFMMyAxLjc0eiIvPjwvZz48L3N2Zz4=" ) no-repeat scroll 100% 80% #E2E8E8;
 634         padding-right: 19px;
 635     }
 636
 637     .sorting {
 638         background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi41NTFtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMyAyLjU1MDY2MTQiPjxwYXRoIGZpbGw9IiNhY2FjYWMiIGQ9Ik00LjA1IDEuNDVoLTIuMUwzIDIuNTV6Ii8+PHBhdGggZmlsbD0iI2FjYWNhYyIgZD0iTTQuMDUgMS4xaC0yLjFMMyAweiIvPjwvc3ZnPg==" ) no-repeat scroll 100% 75% #E2E8E8;
 639         padding-right: 19px;
 640     }
 641
 642     &.dataTable{
 643         thead{
 644             .sorting_asc {
 645                 background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1IDEuNzRoLTIuMUwzIC42NHoiLz48L2c+PC9zdmc+" ) no-repeat scroll 100% 80% #E2E8E8;
 646                 padding-right: 19px;
 647             }
 648
 649             .sorting_desc {
 650                 background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi4zODRtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMiAyLjM4NDAzODkiPjxnPjxwYXRoIGZpbGw9IiMwMDZhY2MiIGQ9Ik00LjA1LjY0aC0yLjFMMyAxLjc0eiIvPjwvZz48L3N2Zz4=" ) no-repeat scroll 100% 80% #E2E8E8;
 651                 padding-right: 19px;
 652             }
 653
 654             .sorting {
 655                 background: url( "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2bW0iIGhlaWdodD0iMi41NTFtbSIgdmlld0JveD0iMCAwIDYuMDAwMDAwMyAyLjU1MDY2MTQiPjxwYXRoIGZpbGw9IiNhY2FjYWMiIGQ9Ik00LjA1IDEuNDVoLTIuMUwzIDIuNTV6Ii8+PHBhdGggZmlsbD0iI2FjYWNhYyIgZD0iTTQuMDUgMS4xaC0yLjFMMyAweiIvPjwvc3ZnPg==" ) no-repeat scroll 100% 75% #E2E8E8;
 656                 padding-right: 19px;
 657             }
 658         }
 659     }
 660
 661     .nosort,
 662     .nosort.sorting_asc,
 663     .nosort.sorting_desc,
 664     .nosort.sorting {
 665         background: #E2E8E8 none;
 666         padding-right: 19px;
 667     }
 668
 669     th,
 670     td {
 671         line-height: 135%;
 672     }
 673 }
 674
 675 /* Bootstrap Tabs */
 676
 677 .tab-content {
 678     background-color: #FFF;
 679     border: 1px solid #D8D8D8;
 680     border-top-width: 0;
 681     margin-bottom: 1em;
 682     padding: 1em;
 683 }
 684
 685 .nav-tabs {
 686     .nav-link {
 687         background-color: #F0F3F3;
 688         border: 1px solid #D8D8D8;
 689         border-radius: 0;
 690         margin-right: .4em;
 691
 692         &:hover,
 693         &:focus {
 694             border-color: #D8D8D8;
 695         }
 696
 697         &.active {
 698             background-color: #FFF;
 699             border: 1px solid #D8D8D8;
 700             border-bottom-color: transparent;
 701             color: #000;
 702             cursor: default;
 703         }
 704     }
 705 }
 706
 707 /* end Bootstrap Tabs */
 708
 709 .close {
 710     color: #0088CC;
 711     filter: none;
 712     float: none;
 713     font-size: inherit;
 714     font-weight: normal;
 715     opacity: inherit;
 716     position: inherit;
 717     right: auto;
 718     text-shadow: none;
 719     top: auto;
 720 }
 721
 722 .close:hover {
 723     color: $links-hover;
 724     filter: inherit;
 725     font-size: inherit;
 726     opacity: inherit;
 727 }
 728
 729 /* Redefine a new style for Bootstrap's class "close" since we use that already */
 730
 731 /* Use <a class="closebtn" href="#">&times;</a> */
 732
 733 .closebtn {
 734     background: transparent;
 735     border: 0;
 736     color: #000000;
 737     cursor: pointer;
 738     float: right;
 739     font-size: 1.5rem;
 740     font-weight: bold;
 741     line-height: 1;
 742     opacity: .5;
 743     padding: 1rem 1rem;
 744     margin: -1rem -1rem -1rem auto;
 745     text-shadow: 0 1px 0 #FFFFFF;
 746
 747     &:hover {
 748         color: #000000;
 749         cursor: pointer;
 750         opacity: .7;
 751         text-decoration: none;
 752     }
 753 }
 754
 755 button {
 756     &.remove {
 757         &:hover {
 758             color: #900;
 759
 760             i {
 761                 &.fa {
 762                     color: #C60000;
 763                 }
 764             }
 765         }
 766     }
 767 }
 768
 769 .btn-link {
 770     color: $links;
 771
 772     &:focus,
 773     &:hover {
 774         text-decoration: none;
 775     }
 776
 777     &:focus {
 778         box-shadow: 0 0 0 1px lighten( $links, 20% );
 779     }
 780
 781     &.btn-lg {
 782         font-size: 100%;
 783     }
 784 }
 785
 786 .btn.disabled,
 787 .btn[disabled] {
 788     &:hover {
 789         opacity: .65;
 790     }
 791
 792     i {
 793         &.fa,
 794         &.fa:hover {
 795             opacity: .65;
 796         }
 797     }
 798 }
 799
 800 .modal {
 801     form {
 802         margin: 0;
 803     }
 804 }
 805
 806 #logo {
 807     background: transparent url( "../images/koha-green-logo.svg" ) no-repeat scroll 0%;
 808     border: 0;
 809     float: left !important;
 810     margin: 0;
 811     padding: 0;
 812     width: 100px;
 813
 814     a {
 815         border: 0;
 816         cursor: pointer;
 817         display: block;
 818         height: 0 !important;
 819         margin: 0;
 820         overflow: hidden;
 821         padding: 40px 0 0;
 822         text-decoration: none;
 823         width: 100px;
 824
 825         &:focus {
 826             background-color: transparent;
 827         }
 828     }
 829 }
 830
 831 #changelanguage {
 832     background-color: #FFF;
 833     border-top: 1px solid #EEE;
 834     clear: both;
 835     flex-shrink: 0;
 836
 837     // Set the fixed height of the footer here
 838     min-height: $footer-height;
 839     padding: 0 1rem;
 840
 841     .nav {
 842         > .active {
 843             > p {
 844                 padding: 0 15px;
 845             }
 846         }
 847     }
 848
 849     .navbar-text {
 850         font-weight: bold;
 851     }
 852 }
 853
 854 .fonts-loaded {
 855     body,
 856     button,
 857     input,
 858     optgroup,
 859     option,
 860     select,
 861     textarea {
 862         font-family: NotoSans, sans-serif;
 863     }
 864 }
 865
 866 .navbar {
 867     .divider-vertical {
 868         border-left-color: #FCF9FC;
 869         border-right-color: #FCF9FC;
 870     }
 871
 872     .nav {
 873         li {
 874             &.dropdown {
 875                 > a {
 876                     &:focus {
 877                         .caret {
 878                             border-bottom-color: $base-theme-color;
 879                             border-top-color: $base-theme-color;
 880                         }
 881                     }
 882
 883                     &:hover {
 884                         .caret {
 885                             border-bottom-color: $base-theme-color;
 886                             border-top-color: $base-theme-color;
 887                         }
 888                     }
 889                 }
 890             }
 891         }
 892     }
 893 }
 894
 895 .navbar-inverse {
 896     .brand {
 897         color: #9FE1FF;
 898         font-weight: bold;
 899     }
 900
 901     .navbar-inner {
 902         background: #FCF9FC none;
 903         border-color: #FCF9FC;
 904         box-shadow: none;
 905
 906         ul {
 907             &.dropdown-menu {
 908                 a {
 909                     &:hover {
 910                         color: #FFF;
 911                     }
 912                 }
 913             }
 914         }
 915
 916         li {
 917             > a {
 918                 color: #727272;
 919                 font-weight: bold;
 920                 text-shadow: none;
 921
 922                 &:hover {
 923                     color: $base-theme-color;
 924                 }
 925
 926                 &:focus {
 927                     color: $base-theme-color;
 928                 }
 929             }
 930
 931             &.dropdown {
 932                 > a {
 933                     &:hover {
 934                         .caret {
 935                             border-bottom-color: $base-theme-color;
 936                             border-top-color: $base-theme-color;
 937                         }
 938                     }
 939
 940                     &:focus {
 941                         .caret {
 942                             border-bottom-color: $base-theme-color;
 943                             border-top-color: $base-theme-color;
 944                         }
 945                     }
 946                 }
 947
 948                 &.open {
 949                     > .dropdown-toggle {
 950                         background-color: transparent;
 951                         color: $base-theme-color;
 952
 953                         .caret {
 954                             border-bottom-color: $base-theme-color;
 955                             border-top-color: $base-theme-color;
 956
 957                             &:hover {
 958                                 border-bottom-color: $base-theme-color;
 959                                 border-top-color: $base-theme-color;
 960                             }
 961                         }
 962                     }
 963                 }
 964             }
 965         }
 966     }
 967 }
 968
 969 .navbar-inner {
 970     background: #FCF9FC none;
 971 }
 972
 973 .navbar-fixed-bottom {
 974     &.navbar-static-bottom {
 975         position: static;
 976     }
 977
 978     .navbar-inner {
 979         box-shadow: none;
 980         min-height: $footer-height;
 981     }
 982 }
 983
 984 // Wrapper for page content to push down footer
 985 #wrap {
 986     height: auto !important;
 987     height: 100%;
 988     margin: 0 auto -#{$footer-height + 1};
 989
 990     // Negative indent footer by its height
 991     min-height: 100%;
 992     padding-left: 40px;
 993     padding-right: 40px;
 994 }
 995
 996 #i18nMenu {
 997     margin-left: 1em;
 998
 999     li {
1000         font-size: 85%;
1001
1002         a {
1003             color: $links;
1004
1005             &:hover {
1006                 color: $base-theme-color;
1007             }
1008         }
1009
1010         li {
1011             font-size: 100%;
1012
1013             > a {
1014                 font-size: 100%;
1015
1016                 &:hover {
1017                     color: #FFF;
1018                 }
1019             }
1020         }
1021     }
1022
1023     .dropdown-menu {
1024         li {
1025             p {
1026                 clear: both;
1027                 display: block;
1028                 font-weight: normal;
1029                 line-height: 20px;
1030                 padding: 3px 20px;
1031                 white-space: nowrap;
1032             }
1033         }
1034     }
1035 }
1036
1037 .dropdown-menu {
1038     border-radius: 0;
1039
1040     > li {
1041         > a {
1042             font-size: 90%;
1043
1044             &:hover {
1045                 background: $base-theme-color none;
1046             }
1047
1048             &:focus {
1049                 background: $base-theme-color none;
1050             }
1051         }
1052     }
1053 }
1054
1055 .dropdown-item:active {
1056     background-color: $links;
1057 }
1058
1059 #koha_url {
1060     p {
1061         color: $high-contrast-grey;
1062         float: right;
1063         margin: 0;
1064     }
1065 }
1066
1067 #wrapper {
1068     flex: 1 0 auto;
1069     padding-left: 40px;
1070     padding-right: 40px;
1071 }