Skip to content
Snippets Groups Projects
compiled.scss 2.74 KiB
Newer Older
André Lahmann's avatar
André Lahmann committed
// Create a default.SCSS file for all sub-themes which imports the respective parent theme's default.scss
// in the cascade plus extend it - this way we always have an up-to-date default.CSS imported
// which includes foundation plus all subsequent customizations
//  i.e. de_15 imports finc/scss/default and finc's default.scss imports foundation5/scss/default

// 1.   Define or re-define key variables
// 1.1 Re-define site colours first because primary-color is used in our own variables
// $primary-color: #404d6d !default; // UBL lighter blue - rgb(64,77,109)
// $secondary-color: #e7e7e7 !default;  // white-lilac
// $alert-color: #f04124;  // cinnabar
// $success-color: #43AC6A; // sea-green
// $warning-color: #f08a24; // carrot
// $info-color: #a0d3e8; // cornflower

// 1.2. Define site-specific colours
// Dark UBL blue
// $color_ubl_dk: #02133D; //rgb(2,19,61)
// Light UBL blue
// $color_ubl_lgt: $primary-color;
// Action-button orange
// $color_action: #EC7602; // rgb(236,118,2)
// Font color for all dark elements in Header
$dk_header_font: #444;
// Breadcumb BG
$crumb-bg:#16A1E7 !default;


// 2.   Re-define variables for key styles
// 2.1 Re-define top-bar background and top-bar dropdown background (also used in .top-bar-section ul li) - these are identical
$topbar-bg-color: #F3F3F3;
$topbar-dropdown-bg: #999999;
// 2.2 Re-define top-bar link bg on hover
$topbar-link-bg-hover: #E3E3E3;
// 2.3 Re-define top-bar dropdown colours
$topbar-dropdown-link-bg: darken(#b9b9b9, 20%);
$topbar-dropdown-link-bg-hover: lighten(#999999, 5%);
// 2.4 Re-define the breadcrumbs bg
// default is: $crumb-bg: scale-color($secondary-color, $lightness: 55%) !default;
// Crumbs defined AFTER import to avoid $crumb-bg:  $steel;

// 3. import entire FOUNDATION-FOLDER default.scss VIA the FINC-FOLDER default.scss to have the variables and mixins above applied
Frank Morgner's avatar
Frank Morgner committed
@import "../../finc/scss/compiled";
André Lahmann's avatar
André Lahmann committed

// 4. Customize further
// header.fixed {left:auto;max-width: 1152px;}
.top-bar {
  .name h1 a {
    color: $dk_header_font;
  }
  
  .toggle-topbar.menu-icon a span:after {
    box-shadow: 0px 0px 0px 1px $dk_header_font, 0px 7px 0px 1px #333, 0px 14px 0px 1px $dk_header_font;
  }
André Lahmann's avatar
André Lahmann committed
}
André Lahmann's avatar
André Lahmann committed
.top-bar-section {
  ul {
    &.right li a {
      color: $dk_header_font !important;
André Lahmann's avatar
André Lahmann committed
    }
  }
André Lahmann's avatar
André Lahmann committed
  #shard-selector-topbar {
    background-color: $topbar-bg-color;
André Lahmann's avatar
André Lahmann committed
    color: $dk_header_font;
  }
André Lahmann's avatar
André Lahmann committed
  #langmenu li > a  {
    color: #fff !important;
André Lahmann's avatar
André Lahmann committed
  }
André Lahmann's avatar
André Lahmann committed
  .has-dropdown > a:after {
    border-color: $dk_header_font transparent transparent;
  }
}

// Dark BG for search box when located directly under header
.nav {
  .searchbox {
    .hide-for-large-up {
      background-color: $topbar-bg-color;
André Lahmann's avatar
André Lahmann committed
    }
  }
}

.breadcrumbs {
  background-color: $crumb-bg !important;
André Lahmann's avatar
André Lahmann committed
}

#searchFormForm {
  margin-top: 1.5rem;
}
André Lahmann's avatar
André Lahmann committed