// 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 @import "../../finc/scss/compiled"; // 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; } } .top-bar-section { ul { &.right li a { color: $dk_header_font !important; } } #shard-selector-topbar { background-color: $topbar-bg-color; color: $dk_header_font; } #langmenu li > a { color: #fff !important; } .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; } } } .breadcrumbs { background-color: $crumb-bg !important; } #searchFormForm { margin-top: 1.5rem; }