Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 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
// 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;
}
color: $dk_header_font !important;
background-color: $topbar-bg-color;
.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;
background-color: $crumb-bg !important;
#searchFormForm {
margin-top: 1.5rem;
}