compiled.scss

@charset "utf-8";

//  Create a compiled.SCSS file for all sub-themes
//  which imports the respective parent theme's compiled.scss
//  in the cascade AND extends it. This way we ALWAYS have an UP-TO-DATE compiled.CSS imported
//  which includes all finc styles plus all subsequent customizations.
//  [I.e.: finc's compiled.scss imports bootstrap3/scss/compiled.scss and
//  the house-specific branches such as fid_adlr then import finc/scss/compiled.scss
// 0. NOTE TO DEVELOPERS
//    Do NOT EDIT compiled.CSS -- all CSS files should be generated from SCSS files
// 1. KEY VARIABLES and MIXINS
//    Define or re-define KEY VARIABLES and MIXINS in this file (see 1.1 ff below) OR import your own
@import 'customVariables';
@import 'customMixins';
// 1.1 FONTS
// ++ USE EITHER
// ++ ++ font-size: ($font-size-base * 1.5)
// ++ OR
// ++ ++ use the em-calculator function, like so: font-size: em(14)
// 1.2 DO NOT define site-specific colours in finc's SCSS files
//    - this must be done in your site-specific themes
// 2. For Media queries use:
//    Extra small screen / phone: '$screen-xs-max' (=767px);
//    Small screen / tablet: '$screen-sm-min' (=768px);
//    Medium screen / desktop: '$screen-md-min' (=992px) and
//    Large screen / wide desktop: '$screen-lg-min' (=1200px);
//    The MAXimum ranges are defined as the next higher element minus 1px, so:
//    '$screen-xs-max' = $screen-sm-min - 1 etc
//    you can use '$screen-xs-max', '$screen-sm-max' and '$screen-md-max'
// 3. Import finc's compiled.scss to have the variables and mixins defined above applied to it
@import '../../fid/scss/compiled';
@import 'lightbox';
@import 'getItBox';


// 4. Customize further -- pls. comment and explain
//    PLEASE ORGANIZE YOUR CSS ACCORDING TO THIS GENERAL RULE - keep exceptions to a minimum
//    *, html, body
//    h1, h2, h3, h4, h5, h6,
//    p,
//    address, blockquote, pre,
//    ul, ol, li, dl, dt, dd,
//    table, caption, tr, th, td,
//    form, fieldset, legend, label, select, input, textarea,
//    div,
//    img,
//    a,
//    strong, em, abbr, q, cite, code, kbd, var,
//    span,
//    #id,
//    .class
//    Frequently used classes
//    Custom areas of the theme

//    IDs and classes come last and should (if possible) be ordered according
//    to their appearance on the page, e.g. header, breadcrumbs, main ...

//    Please sort selectors alphabetically, like so
//    .foo {
//       border: 1px solid red;
//       margin-left: 1em;
//       padding: 0 ($grid-gutter-width / 2);
//       width: auto;
//    }
//

// HTML

// BODY
body {
  background-color: $white;
  // set default font to OPEN SANS
  font-family: $font-family-sans-serif;
  // give central position
  margin: 0 auto;
  // Make sure, outer container doesn't spill over max designed content width
  max-width: $max-designed-body-width;

  overflow: hidden;

  // override exception for finc adv. search home
  &.template-name-advanced {
    padding-top: 0;
  }

  // #17913 adjust BARF to adlr design
  :focus,
  :hover {
    outline: none;
  }

  // override finc 17720
  @media (max-width: $screen-xs-max) {
    padding-top: unset;
  }
}

// HEADINGS
h1,
h2,
h3,
h4,
h5 {
  color: $black;
  // set headings to UBUNTU MONO
  font-family: $font-family-monospace;
}

// ++ h1
h1 {
  font-size: em($font-size-title);
  font-weight: 700;
  letter-spacing: em($letter-spacing-title);
  line-height: em(20px);
  padding-bottom: 5px;
  padding-top: 5px;

  @media (max-width: $screen-sm-max) {
    padding-top: $line-height-title-sm;
  }

  @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
    line-height: em($line-height-title-sm);
  }

  @media (min-width: $screen-lg-min) {
    font-size: em(30px);
    line-height: em($line-height-title-lg);
  }

  // overwrite finc margin-top of 0
  &:first-of-type {
    margin-top: $line-height-title-lg;
  }

  .home.container & {
    @media screen and (max-width: $screen-sm-max) {
      font-size: $font-size-menu-sm;
    }
  }
}

h1,
h3 {
  .home.container & {
    color: $azure;

    @media screen and (max-width: $screen-xs-max) {
      font-size: 26px;
      letter-spacing: 1.7px;
      line-height: 50px;
      padding-bottom: 10px;
    }

    // Fixme: This seems to duplicate content from the query above - CK
    @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
      letter-spacing: 1.7px;
      line-height: 50px;
      padding-bottom: 10px;
    }
  }
}

// ++ h2
h2 {
  font-size: em($font-size-title);
  font-weight: 700;
  letter-spacing: em($letter-spacing-title);
  line-height: em($line-height-title);

  @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
    line-height: em($line-height-title-sm);
  }

  @media (min-width: $screen-lg-min) {
    font-size: em($font-size-title-lg);
    line-height: em($line-height-title-lg);
  }

  .home.container .blog & {
    font-size: $font-size-menu-lg;
    line-height: 50px;
    padding-bottom: 30px;

    @media screen and (max-width: $screen-md-max) {
      font-size: 30px;
    }
  }
}

// ++ h3
h3 {
  font-size: em($font-size-title);
  font-weight: 700;
  line-height: em($font-size-title);

  @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
    font-size: em(28px);
    line-height: em(28px);
  }

  @media (min-width: $screen-lg-min) {
    font-size: em(32px);
    line-height: em(30px);
  }

  .title-toolbar & {
    font-size: $font-size-title;
  }

  .sub {
    font-size: $font-size-title-sub;
    line-height: 1.35em;
  }

  .home.container & {
    line-height: 34px;

    @media screen and (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
      font-size: 34px;
    }
  }

  .home.container .services & {
    font-size: 30px;
    line-height: 30px;
    margin-left: $home-services-sub-headline-offset;

    .icon-check-circle {
      margin-left: calc(-#{$home-services-sub-headline-offset});
    }

    @media screen and (max-width: $screen-md-max) {
      font-size: 26px;
      letter-spacing: normal;
    }
  }
}

// ++ h4
h4 {
  font-size: em(24px);
  font-weight: 700;
  letter-spacing: em(1px);
  text-transform: uppercase;
}

// ++ h5
h5 {
  font-size: em(18px);
  font-weight: 700;
  letter-spacing: em(2px);
  text-transform: uppercase;
}

// HEADINGS - END

// Paragraphs
// ++ p {}
// Paragraphs - END

// LISTS
// ++ ul,
ul {
  list-style-type: none;
  padding-left: 0;

  li {
    color: $asphalt;

    .openurls & {
      a,
      a:visited {
        color: $asphalt;

        &:hover {
          color: $database-link-hover-color;
        }
      }
    }
  }
}

// ++ ol {}
// ++ li {}
// ++ dl {}
// ++ dt {}
// ++ dd {}
// LISTS - END

// TABLES
table {
  border: 0;
  margin-top: 20px;
  width: 100%;
}

// ++ caption {}
// ++ tr {}
// ++ th {}
// ++ td {}
// TABLES - END

// FORMS
// ++ Fieldsets
// ++ Legend elements
// ++ label {}
// ++ input {}
// ++ Select {}
label {
  display: inline;
  padding-left: 5px;
}

select {
  height: 60px;
  min-width: 100px;
}

// ++ textarea {}
input,
textarea {
  //border-color: $silver;
  //border-radius: 5px;
}

form input:invalid,
form textarea:invalid {
  margin-right: 0;
}

// FIXME -- ggf. UEBERFLUESSIGE HELPER-Klassen ENTFERNEN -- auch phtml-Templates prüfen
.hidden-lg-only {
  @media (min-width: $screen-lg-min) and (max-width: $screen-lg-max) {
    display: none !important;
  }
}

.hidden-sm-lg {
  @media (min-width: $screen-sm-min) and (max-width: $screen-lg-max) {
    display: none !important;
  }
}

.hidden-xl {
  @media (min-width: $screen-xl-min) {
    display: none !important;
  }
}

.margin-btm-xl {
  margin-bottom: 85px;
}

// IMAGES
// img {}
// IMAGES - END

// LINKS
a {
  color: $black;
  outline: none;
  text-decoration: none;

  &:focus {
    outline: none;
    text-decoration: underline;
  }

  &:hover {
    text-decoration: none;
  }

  // #17913 adjust BARF to adlr design
  &.exclude {
    &:hover,
    &:focus {
      outline: none;
    }
  }


  &:not(.btn):not(.search-filter-toggle):not(.text):visited {
    .home-links &,
    .navbar-header &,
    .header-menu-collapse &,
    .language & {
      color: $white;
    }

    .dbis_content & {
      color: $asphalt;
    }
  }
}

// LINKS - END

// TEXT DECORATION
// strong {}
// em {}
// TEXT DECORATION - END

// Sizing
.flex-box-20 {
  flex-basis: $pagination-flexbox-basis-20-percent;
}

.flex-box-40 {
  flex-basis: calc(2 * #{$pagination-flexbox-basis-20-percent});
}

.flex-box-60 {
  flex-basis: calc(3 * #{$pagination-flexbox-basis-20-percent});
}

.flex-box-80 {
  flex-basis: calc(4 * #{$pagination-flexbox-basis-20-percent});
}

.flex-column-default {
  display: -webkit-flex;
  -webkit-flex-direction: column;
  display: flex;
  flex-direction: column;
}

.flex-column-reverse {
  display: -webkit-flex;
  -webkit-flex-direction: column-reverse;
  display: flex;
  flex-direction: column-reverse;
}

// Sizing - END


// CLASSES (Elements that are used in several places)
// ++ HELPER Classes
.large-text {
  font-size: em(24px);
  line-height: em(45px);

  &.light {
    color: $asphalt;
  }
}

.small-text {
  color: $asphalt;
  font-size: em(16px);
}

// FIXME: Check for more elegant way to apply colors
// FIXME -- UEBERFLUESSIGE HELPER-Klassen ENTFERNEN -- auch phtml-Templates prüfen -- die meisten Farben sollten korrekt ueber BS definierbar sein (primary, secondary ...) -- siehe customVariables.scss
.error-color {
  color: $brand-danger;
}

.highlighter-color {
  color: $violet;
}

.primary {
  color: $azure;
}

.secondary {
  color: $seafoam;
}

.warning-color {
  color: $amber;
}

.white {
  color: $white;
}

// ++ HELPER Classes - END

// ++ ALERTS
.alert-danger {
  background: $amber;
  border: $amber;
  color: $black;

  &:hover {
    color: $black;
  }
}

.alert-info,
.savedLists.alert.alert-info,
.alert-success {
  border: 3px solid $asphalt-dark;
  border-radius: 0;
  color: $state-info-text;

  &:hover,
  &:focus {
    color: $state-info-text;
  }

  a {
    color: $state-info-text;
  }
}

// ++ ALERTS - END

@import 'buttons';

// ICONS
.icon {
  min-width: 30px;
  vertical-align: bottom;

  @media screen and (max-width: $screen-md-max) {
    font-size: $font-size-h3;
    font-weight: 500;
    min-width: 35px;
  }

  .btn-primary {
    float: right;
    font-size: calc(#{$font-size-base} * 1.5);
  }

  &.disabled {
    color: $asphalt-dark;
  }
}

// ICONS - END

// ++ BRANDING (branding for origin source ids / specific facets and mega_collections etc.)
// see SID103 in finc compiled.scss
.branding {
  color: transparent;
  display: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  margin-left: .5em;
  margin-top: 4px;
  vertical-align: middle;

  &.SID51 {
    // #16177 adapt the path to get the new releases logo
    // background: url('../../fid_adlr/images/branding/new-item-vub3.png') 0 0 no-repeat;
    background: $midnight-light;
    color: $azure;
    display: inline-block;
  }

  &.SID76,
  &.collection-UBL-FID-EBC {
    // #16177 adapt the path to get the 'adlr ebooks' logo
    // FIXME set correct logo
    background: $midnight-light;
    color: $azure;
    display: inline-block;
  }

  &.SID78 {
    // #16177 adapt the path to get the IZI database logo
    background: url('../../fid_adlr/images/branding/izi-database.png') 0 0 no-repeat;
    background-size: 100%;
    display: inline-block;
    height: em(40px);
    margin-top: 12px;
    width: em(150px);
  }

  &.SID103 {
    // #16177 adapt the path to get the Margaret-Herrick-Library logo
    background: url('../../fid_adlr/images/branding/herrick-library.png') 0 0 no-repeat;
    background-size: 100%;
    display: inline-block;
    height: 27px;
    margin-top: 7px;
    width: 230px;
  }

  &.facet-free {
    // #16177 adapt the path to get the Open Access logo
    // background: url('../../fid_adlr/images/branding/open-access-logo.svg') 0 0 no-repeat;
    background: $midnight-light;
    color: $azure;
    display: inline-block;
  }

  &.collection-verbundkatalog-film {
    // #16177 adapt the path to get the verbundkatalog film logo
    // background: url('../../fid_adlr/images/branding/verbundkatalog-film.png') 0 0 no-repeat;
    background: $midnight-light;
    color: $azure;
    display: inline-block;
  }
}

// ++ BRANDING - END

// ++ DROPDOWNS
.dropdown-menu {
  @include basic-dropdown-menu;
}

.dropdown-menu-parent {
  // needed for nested dropdown - hack for js of bootstrap 3
  @extend .dropdown-menu;

  @media screen and (max-width: $screen-xs-max) {
    width: 100%;

    // FIXME; Pruefen, ob form-control einfach aus dem phtml-Template entfernt werden könnte
    .searchForm,
    .searchForm .form-control {
      max-width: $screen-md-max;
      width: 100%;
    }
  }
}

// fix bug of clicking twice in quickfilter for mobile
#searchbox .dropdown-backdrop {
  display: none;
}

// ++ DROPDOWNS - END

// ++ MODALS
// ++ MODALS - END

// PAGE ELEMENTS (Top --> Down) ++
// ++ HEADER
// ++++ Header width reset.
header {
  background-position: right top;
  background-repeat: no-repeat;

  &.collapse:not(.in),
  &.collapsing {
    display: block;
  }

  @media screen and (max-width: $screen-xs-max) {
    margin-bottom: $content-bottom-padding;
  }

  @media screen and (max-width: $screen-md-max) {
    &.collapse:not(.in),
    &.collapsing {
      min-height: $navbar-header-height;
    }
  }

  @media screen and (min-width: $screen-lg-min) {
    background-image: url('../images/header-bg-lg.png');
  }
}

header,
.navbar,
.breadcrumbs {
  background-color: transparent;
  border: 0;
  // FIXME: REMOVE, when 15639 has been merged to finc
  width: auto;

  // override finc display block
  // Fixme: Bitte in den 'allgemeinen' Block verschieben, also, wo body, dropdown usw. definiert werden
  .collapse.in {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: -webkit-box;
    display: inline-flex;
  }

  .collapsing,
  &.collapsing {
    transition: unset !important;
    transition-duration: $transition-duration !important;
  }

  // overwrite finc border definitions input[type='text']
  #searchForm input[type='text'] {
    @include default-border($white);
  }

  // overwrite finc changes of #17720
  #searchForm input {
    float: left;
  }
}

// #17913 adjust BARF to adlr design
input[type='email']:focus,
input[type='email']:hover,
input[type='password']:focus,
input[type='password']:hover {
  border-color: $black;
  border-width: 3px;
  cursor: pointer;
  outline: 2px solid $black;
  outline-offset: 0;
}

.adv-term-remove:focus,
.adv-term-remove:hover,
.close:focus,
.close:hover {
  outline: none;
}

input[type='radio']:focus,
input[type='radio']:hover {
  cursor: pointer;
  outline: 0;
}

input[type='checkbox']:focus,
input[type='checkbox']:hover,
#searchForm input[type='checkbox'] {
  &:hover,
  &:focus {
    border-color: $azure !important; // override invalid form unset
    cursor: pointer;
    outline: none;
  }
}

.menubar {
  @include noselect;
  box-sizing: border-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: -webkit-box;
  display: inline-flex;
  justify-content: flex-end;
  padding-right: 10px;
  width: 100%;
  z-index: z-index(menubar, 0);

  @media screen and (max-width: $screen-xs-max) {
    padding-right: 0;
  }

  @media screen and (max-width: $screen-md-max) {
    background: $white;
  }

  // ++++++  disable transitions for menu
  .collapsed,
  &.collapsed {
    transition: none !important;
    transition-delay: $transition-delay !important;
    transition-duration: $transition-duration !important;
  }

  .collapsing,
  &.collapsing {
    background: transparent;
    height: auto !important;
    transition: none !important;
    transition-delay: $transition-delay !important;
    transition-duration: $transition-duration !important;
  }

  .collapse,
  &.collapse {
    transition: none !important;
    transition-delay: $transition-delay !important;
    transition-duration: $transition-duration !important;
  }

  .collapse.in,
  &.collapse.in {
    transition: none !important;
    transition-delay: $transition-delay !important;
    transition-duration: $transition-duration !important;
  }

  .fill-flex {
    flex-grow: 2;
    flex-shrink: 1;
  }
}

#language-dropdown {

  .language.dropdown {
    margin: 0;
  }

  .dropdown-menu {
    @include basic-dropdown-menu;
    left: 10px;
    min-width: 100px;

    @media (max-width: $mobile-navigation-menu-breakpoint) {
      @include shift-main-menu-entries-to-navigation-overlay;
    }

    @media (max-width: $screen-xs-max) {
      top: calc(#{$navbar-header-height} + 7 * #{$line-height-submenu} + #{$content-top-padding});
    }

    @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
      left: calc(#{$logo-max-width} / 2 + #{$navbar-margin-left});
      top: calc(#{$navbar-header-height} + 8 * #{$line-height-submenu} + 9 * #{$navbar-default-padding});

      .btn {
        font-size: calc(#{$font-size-menu-sm} - 15px);
      }
    }

    @media screen and (max-width: $screen-xs-max) and (orientation: landscape) {
      left: 375px;
      top: calc(#{$navbar-header-height} + 10px);
    }

    @media screen and (min-width: $screen-sm-min) and (max-width: $mobile-navigation-menu-breakpoint) and (orientation: landscape) {
      left: 750px;
      top: calc(#{$navbar-header-height} + 2 * #{$navbar-default-padding} + 15px);
    }

    @media (min-width: $mobile-navigation-menu-breakpoint + 1px) {
      border: 2px solid $asphalt;
      left: 0;
      letter-spacing: 2.87px;
      top: 64px;
    }

    li > a {
      line-height: $line-height-submenu;
      padding: 3px 5px;
      text-align: left;

      &:focus,
      &:hover {
        background: initial;
        color: $azure;
      }

      @media (max-width: $mobile-navigation-menu-breakpoint) {
        padding: 0;
      }

      @media (min-width: $mobile-navigation-menu-breakpoint + 1px) {
        font-family: $font-family-monospace;
        font-size: $font-size-menu-lg;
        padding: 0 $navbar-extended-padding;
      }
    }
  }
}

#register-menu .navbar-header-link {
  @media (max-width: $mobile-navigation-menu-breakpoint) {
    @include shift-main-menu-entries-to-navigation-overlay;
  }

  @media (max-width: $screen-xs-max) {
    top: calc(#{$navbar-header-height} + 8 * #{$line-height-submenu} + #{$content-top-padding});
  }

  @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
    font-size: calc(#{$font-size-menu-sm} - 15px);
    left: calc(#{$logo-max-width} / 2 + #{$navbar-margin-left});
    top: calc(#{$navbar-header-height} + 9 * #{$line-height-submenu} + 10 * #{$navbar-default-padding});
  }

  @media screen and (max-width: $screen-xs-max) and (orientation: landscape) {
    left: 375px;
    top: calc(2 * #{$navbar-header-height} - 25px);
  }

  @media screen and (min-width: $screen-sm-min) and (max-width: $mobile-navigation-menu-breakpoint) and (orientation: landscape) {
    left: 750px;
    top: calc(#{$navbar-header-height} + 5 * #{$navbar-default-padding} + 5px);
  }
}

.header-menu-collapse {
  @extend .navbar-header;

  @media (min-width: $screen-lg-min) {
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: -webkit-box;
    display: inline-flex;

    &.collapse.in {
      &#submenu {
        position: absolute;
        z-index: z-index(navigation-overlay, 0);
      }

      .submenu-collapse-wrapper {
        position: absolute;
        top: $navbar-header-height-home-sm;
      }
    }
  }

  &.collapse:not(.in) {
    .submenu-collapse-wrapper {
      background: $white;
      height: 0;
      padding: 0;
      visibility: hidden;
      width: 0;
    }
  }

  &.collapse.in,
  &.collapsing {
    .submenu-collapse-wrapper {
      @include navigation-overlay;

      @media (min-width: $mobile-navigation-menu-breakpoint + 1px) {
        position: absolute;
      }
    }
  }

  //// Define header navbar on mobile
  &.collapsing {
    padding: 0;

    .submenu-collapse-wrapper {
      @media (max-width: $screen-sm-max) {
        background-color: $white;
        padding: 0;
      }
    }
  }
}

//// Display different icons after open or close of submenues
header.collapse.in .menubar .text-close,
.dropdown.sbox-dd:not(.open) .text-close,
.language:not(.open) .icon.icon-chevron-up {
  display: none;
}

header.collapse:not(.in) .menubar .text-open,
header.collapsing .text-open,
.dropdown.sbox-dd.open .text-open,
.language.open .icon.icon-chevron-down {
  display: none;
}

#submenuToggler {
  @media (min-width: $mobile-navigation-menu-breakpoint + 1px) {
    min-width: 125px;
  }
}

.navbar-header {
  flex-shrink: 0;

  // position of navbar-brand Logo on top left
  .navbar-brand {
    border: 0;
    left: 0;
    outline: none;
    position: absolute;
    top: 31px; // Fixme: mglst Variable nutzen
    z-index: z-index(navbar-brand, 1);
  }

  @media screen and (max-width: $screen-md-max) {
    background-color: $white;
    height: $navbar-header-height;
    padding: 30px 0 20px;

    .navbar-toggle {
      color: $brand-primary;
      // for middle-alignment
      padding: 0;
    }

    &:not(.collapse) {
      display: -webkit-inline-flex;
      display: -ms-inline-flexbox;
      display: -webkit-box;
      display: inline-flex;
    }
  }
}

.navbar-header-link {
  @extend .navbar-toggle;
  display: inherit;
  margin-right: 0;
  z-index: z-index(navbar-header-link, 0);