Newer
Older
// Custom Variables for adlr -- inherits from finc, which inherits from BS, which inherits from root
// see variables.scss for default values
// Fixme bitte bereinigen, was nicht gebraucht wird, raus!
// *****************************************************************
// ************ Imports ********************************************
// *****************************************************************
//@import '../../bootstrap3/scss/bootstrap';
// Import parent theme variables to have them all available here
// @import '../../bootstrap3/scss/vendor/font-awesome/variables';
// @import '../../finc/scss/customVariables';
// ************ PLEASE NOTE ****************************************
// *** adlr never seems to have imported finc variables!! ***
// *** Therefore importing finc variables will cause issues here.***
// *** To avoid these we can either redefine variables in this ***
// *** stylesheet or import finc variables directly below ***
// *** OR remove all '!default' flags OR import finc variables ***
// *** below in the declarations. ***
// *****************************************************************
@import 'components/functions';
@import 'customFonts';
// *****************************************************************
// ************ Common colors referenced elsewhere in the code *****
// *****************************************************************
$amber: #f7c525; // rgb(247, 197, 37)
$black: #000; // rgb(0, 0, 0)
$azure: #004fe7; // rgb(0, 79, 231) // 'Azure'
$asphalt: #707071; // rgb(112, 112, 113)
$asphalt-dark: #d9d9d9; // rgb(112, 112, 113)
$midnight: #00205d; // rgb(0, 32, 93)
$midnight-light: #edf3ff; // rgb(237, 243, 255)
$midnight-medium: #dfe9fc; // rgb(223, 233, 252)
$seafoam: #2bedca; // rgb(43, 237, 202)
$violet: #a10df2; // rgb(161, 13, 242)
// *****************************************************************
// ************ Theme basic colors *********************************
// *****************************************************************
$brand-primary: $azure !default;
$brand-secondary: $seafoam !default;
$brand-danger: #e7006b !default; // rgb(231, 0, 107)
$brand-info: #f2f2f2 !default; // rgb(242, 242, 242)
$brand-success: #00c092 !default; // rgb(0, 192, 146)
$brand-warning: $amber !default; // rgb(247, 197, 37)
$state-warning-bg: $brand-warning !default;
$state-success-bg: $brand-info !default;
$state-info-bg: $brand-info !default;
$state-info-text: $asphalt !default;
$state-info-border: $asphalt !default;
$database-link-hover-color: #00359b;
$header-bg-color: $midnight;
$a-visited-color: $black !default;
$form-dropdown-focus-hover-color: #262626 !default;
//// ELEMENT COLORS
//$body-bg: $snow !default;
//// Main content are bg
//$main-bg: $white !default
// ;
//// ALERTS (see states, above, and compiled.scss - Code needs to go there to overwrite defaults)
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
// *****************************************************************
// ************ Re-define BS Screen Widths for use in adlr *********
// *****************************************************************
// copies from bootstrap3/scss/vendor/bootstrap/variables
$screen-sm-min: 768px !default;
$screen-md-min: 992px !default;
$screen-lg-min: 1200px !default;
// So media queries don't overlap when required, provide a maximum
$screen-xs-max: ($screen-sm-min - 1) !default;
$screen-sm-max: ($screen-md-min - 1) !default;
$screen-md-max: ($screen-lg-min - 1) !default;
// *****************************************************************
// ************ General dimensions *********************************
// *****************************************************************
$screen-xl: 1600px !default; // FIXME EXPERIMENTAL
$screen-xl-min: $screen-xl !default;
$screen-lg-max: $screen-xl - 1 !default;
//// The general gutter width (padding between columns) is calculated like so: '$grid-gutter-width / 2'
//// which gives you the left or right gutter width; this can be taken further by using '$grid-gutter-width / 1.5' etc
$grid-gutter-width: 30px !default;
//// define standard main content minimum width
$main-content-container-min-width-lg: 1170px;
//// increase main content width for really wide screens
$main-content-container-max-width-xl: 1250px;
//// Navbar gets a minimum-height of 50px by default, activate and change here!
// For fixed navbars ('navbar-fixed-top' in 'header.phtml'),
// the body requires a padding-bottom of the same height
// as the navbar because of postition.fixed
// When using 'affix' instead of 'navbar-fixed-top',
// set '$navbar-height', '$navbar-height-xs' and '$navbar-height-sm' to '=0'
// or set the paddings-top under 'body' in compiled.scss to '=0'; see also the comment in header.phtml
$navbar-height: 0 !default;
$navbar-height-sm: $navbar-height !default;
// Set navbar-height for small devices, USE px as rem will throw an error
// $navbar-height-xs: $navbar-height + 40px !default;
$navbar-height-xs: $navbar-height !default;
// $navbar-max-height-xs: $navbar-height + 40px !default;
$navbar-max-height-xs: $navbar-height !default;
//// Top-padding for #content -> .row first-of-type (and .sidebar) - change this value to change both;
//// sidebar gets an additional padding on half the content-top-padding for better horizontal alignment
$content-bottom-padding: $grid-gutter-width / 2 !default; // default = 30px / 2 = 15px
$content-top-padding: $grid-gutter-width / 2 !default; // default = 30px / 2 = 15px
$content-l-r-padding: $grid-gutter-width / 2 !default; // default = 30px / 2 = 15px
$logo-max-width: 220px !default;
// override breakpoint of collapsing navbar for tablets and mobile
// $grid-float-breakpoint: 992px;
$default-header-height-lg: 208px;
// ++ Height of textbox with adlr claim in header (home page)
$home-text-top-padding-xs: 90px;
$home-text-top-padding-sm: 0;
$home-text-top-padding-lg: 0;
$home-text-box-height-xs: 300px;
$home-text-box-height-sm: 330px;
$home-text-box-height-lg: 470px;
$home-text-bottom-padding-xs: 500px;
$home-text-bottom-padding-sm: 400px;
$home-text-bottom-padding-lg: 700px;
$home-text-left-margin-sm: 25px;
$home-text-left-margin-lg: 0;
$home-text-left-margin-xl: 100px;
$home-services-sub-headline-offset: 50px;
$screen-lg-wrapper-min: 1170px;
//// Maximum designed body width
$max-designed-body-width: 1926px;
$screen-xl: 1600px !default; // FIXME EXPERIMENTAL
$screen-xl-min: $screen-xl !default;
$screen-lg-max: $screen-xl - 1 !default;
$mobile-navigation-menu-breakpoint: $screen-md-max !default; // use mobile navigation below this width
$transition-delay: .1s;
$transition-duration: .1s;
// *****************************************************************
// ************ Radii **********************************************
// *****************************************************************
// GET RID of ALL ROUND CORNERS
//$border-radius-base: 0 !default;
//$border-radius-large: 0 !default;
//$border-radius-small: 0 !default;
//$pager-border-radius: 0 !default;
//$badge-border-radius: 0 !default;
//// labels.scss uses no variable! Therefore it will be necessary
//// to overwite in compiled.scss!!, Fixme when done more elegantly in BS
//$label-radius: 0 !default;
// GET RID of ALL ROUND CORNERS - END
// *****************************************************************
// ************ Border styles **************************************
// *****************************************************************
//$border-color: $iron !default;
//// Note that the nav-tabs have a different border color, use the following variable in your SCSS to change it
// $nav-tabs-border-color: $gainsboro !default; // defined in BS _variables.scss
$default-border-hover: 3px;
$default-outline-hover-offset: 5px;
$default-outline-hover-width: 3px;
// Default border styles
//$border-default-styles: 1px solid $border-color !default;
// *****************************************************************
// ************ Button styles **************************************
// *****************************************************************
////// Use darker text color when default-buttons are used on white BG (new class: bth-transparent
////// for updateCart in search results, date-range slider in sidebar and adv search
////// NOTE that the hover states use the default color too!
//$btn-primary-color: $white !default;
//$btn-primary-bg: $brand-primary !default;
// $btn-primary-color: $btn-primary-color !default; // already defined this way in BS _variables, use this variable to change it
// $btn-primary-bg: $brand-primary !default; // already defined this way in BS _variables, use this variable to change it
// $button-top-padding: 6px;
// *****************************************************************
// ************ Badge styles ***************************************
// *****************************************************************
//// BADGES (elements in sidebar that hold the hit numbers)
//$badge-bg: transparent !default;
//$badge-color: $jet !default;
//// Sidebar Badge/fa Colors
//$sidebar-badge-fa-color: darken($brand-secondary, 40%) !default;
// *****************************************************************
// ************ Form elements **************************************
// *****************************************************************
//// FORM ELEMENTS
//$select-bg-color: $ghost !default;
$form-group-margin-top: 50px;
// *****************************************************************
// ************ Accordions/Collapse elements ***********************
// *****************************************************************
//// Dropdown Background - this is used for ALL dropdowns, incl. the language selector;
//// originally defined under BS _variables.scss, and used in _dropdowns.scss; you could use a value such as
//// $dropdown-link-hover-color: lighten($brand-primary, 15%);
//// $dropdown-link-hover-bg: lighten($brand-primary, 50%);
//// Other variables include $dropdown-link-active-color; $dropdown-link-active-bg; $dropdown-link-color ...
// *****************************************************************
// ************ Tooltips colors ************************************
// *****************************************************************
//$tooltip-color: $snow !default;
//$tooltip-bg: lighten($brand-primary, 20%) !default;
//$tooltip-arrow-color: $tooltip-bg !default;
// *****************************************************************
// ************ Header and navbar *********************************
// *****************************************************************
//// Header and header elements colors
//$header-bg-color: $gainsboro !default;
//$navbar-bg-color: $header-bg-color !default;
//$navbar-fixed-bg-color: $header-bg-color !default;
//// NAVBAR
// ++ Margin of navbar
// ++ Height of navbar in header
$navbar-header-height: 85px;
$navbar-header-height-home-sm: 85px;
$navbar-header-height-affix-sm: 105px; // $data_offset_top_affix + 1 in header
$navbar-header-height-affix-lg: 105px; // $data_offset_top_affix + 1 in header
$navbar-default-padding: 20px;
$navbar-extended-padding: calc(2 * #{$navbar-default-padding});
// *****************************************************************
// ************ Search box ************************************
// *****************************************************************
$search-form-height-xs: 280px; // + 3px border
$search-form-height-sm: 250px; // + 3px border
$search-form-height-lg: 310px; // + 3px border
// ++ Height and width of the search box - SMALL DESKTOP
$search-form-width-sm: 100%;
$search-form-width-affix-sm: 100%;
// ++ Height and width of the search box - MEDIUM DESKTOP
$search-form-width-affix-md: 100%;
// ++ Height and width of the search box - LARGE DESKTOP
$search-form-width-affix-lg: 590px;
// ++ Height and width of the search box - EXTRA LARGE DESKTOP
$search-form-width-max: 1000px;
$search-form-width-xl: 690px;
$search-form-width-home-xl: $search-form-width-home-lg;
// ++ Height and width of the default search input field
$search-input-height-default: 92px;
$search-input-height-fixed: 65px;
$search-input-width-affix-xs: 75%;
$search-input-width-affix-sm: 75%;
$search-input-width-affix-md: 80%;
$search-input-width-affix-lg: 90%;
$search-input-width-sm: $search-input-width-affix-sm;
$search-input-width-md: $search-input-width-affix-md;
$search-input-width-lg: 710px;
$search-input-height-affix-sm: $search-input-height-fixed;
$search-input-height-affix-md: $search-input-height-fixed;
$search-input-height-affix-lg: $search-input-height-fixed;
$search-input-height-sm: $search-input-height-fixed;
$search-input-height-lg: $search-input-height-default;
$search-toggle-padding-bottom-top: 40px;
$seachbox-width-lg: 710px;
// *****************************************************************
// ************ Advanced Search ************************************
// *****************************************************************
$adv-search-form-X-top-margin: 31px;
// *****************************************************************
// ************ Breadcrumbs ****************************************
// *****************************************************************
//// Breadcrumbs
//$breadcrumb-bg: $brand-primary !default;
//$breadcrumb-color: $btn-primary-color !default;
//// Link color for breadcrumb .active
//$breadcrumb-active-color: $btn-primary-color !default;
//// Separator between breadcrumb elements, use this variable to change it
//// $breadcrumb-separator: '/' !default;
// *****************************************************************
// ************ Sidebar elements ***********************************
// *****************************************************************
//// Sidebar item hover effect (doesn't exist in VF out-of-the-box); active is for selected facets
$get-it-button-offset-left: 42px;
$get-it-link-offset-left: 10px;
//$sidebar-item-hover-bg: transparentize($brand-secondary, .9) !default;
//$sidebar-item-active-hover-bg: transparentize($brand-primary, .1) !default;
//// Sidebar item padding
//$sidebar-item-padding: .75em 1em !default;
//// Table cell padding - adjust in themes to avoid content jumps when switching tabs
// $table-cell-padding: 5px !default;
// JS Tree
// left padding on JSTree child icon elements
//$jstree-li-left-padding: 1.5em !default;
// *****************************************************************
// ************ Modal/lightbox *************************************
// *****************************************************************
//$modal-lg: 900px !default;
//$modal-md: 600px !default;
//$modal-sm: 300px !default;
// *****************************************************************
// ************ Pagination (results)/pager (records) ***************
// *****************************************************************
$pagination-flexbox-basis-20-percent: 20%;
// *****************************************************************
// ************ Z-Index ********************************************
// *****************************************************************
banner : 200,
menubar : 350,
search : 100,
search affix : 300,
sbox-dd-menu : 0,
filter-dropdown : 500,
navbar-brand : 500,
navbar-header-link : 150,
navigation-overlay : 400,
// *****************************************************************
// ************ Default anchor/link styles general *****************
// *****************************************************************
//$link-color: $brand-primary !default;
//$link-hover-color: darken($link-color, 15%) !default;
$link-text-decoration: none;
//$link-hover-decoration: underline !default;
//$link-on-dark-bg-color: invert($link-color) !default;
//// see also '$state-link-hover-color' below
//$mainbody-link-text-decoration: $link-text-decoration;