_customVariables.scss

// Custom Variables for adlr -- inherits from finc, which inherits from BS, which inherits from root
// see Bootstrap's _variables.scss for default values

// FONTS
// ubuntu-mono-regular - latin
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/ubuntu-mono-v8-latin-regular.eot'); // IE9 Compat Modes
  src: local('Ubuntu Mono'), local('UbuntuMono-Regular'),
  url('fonts/ubuntu-mono-v8-latin-regular.eot?#iefix') format('embedded-opentype'), // IE6-IE8
  url('fonts/ubuntu-mono-v8-latin-regular.woff2') format('woff2'), // Super Modern Browsers
  url('fonts/ubuntu-mono-v8-latin-regular.woff') format('woff'), // Modern Browsers
  url('fonts/ubuntu-mono-v8-latin-regular.ttf') format('truetype'), // Safari, Android, iOS
  url('fonts/ubuntu-mono-v8-latin-regular.svg#UbuntuMono') format('svg'); // Legacy iOS
}

// ubuntu-mono-italic - latin
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/ubuntu-mono-v8-latin-italic.eot'); // IE9 Compat Modes
  src: local('Ubuntu Mono Italic'), local('UbuntuMono-Italic'),
  url('fonts/ubuntu-mono-v8-latin-italic.eot?#iefix') format('embedded-opentype'), // IE6-IE8
  url('fonts/ubuntu-mono-v8-latin-italic.woff2') format('woff2'), // Super Modern Browsers
  url('fonts/ubuntu-mono-v8-latin-italic.woff') format('woff'), // Modern Browsers
  url('fonts/ubuntu-mono-v8-latin-italic.ttf') format('truetype'), // Safari, Android, iOS
  url('fonts/ubuntu-mono-v8-latin-italic.svg#UbuntuMono') format('svg'); // Legacy iOS
}

// ubuntu-mono-700 - latin
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/ubuntu-mono-v8-latin-700.eot'); // IE9 Compat Modes
  src: local('Ubuntu Mono Bold'), local('UbuntuMono-Bold'),
  url('fonts/ubuntu-mono-v8-latin-700.eot?#iefix') format('embedded-opentype'), // IE6-IE8
  url('fonts/ubuntu-mono-v8-latin-700.woff2') format('woff2'), // Super Modern Browsers
  url('fonts/ubuntu-mono-v8-latin-700.woff') format('woff'), // Modern Browsers
  url('fonts/ubuntu-mono-v8-latin-700.ttf') format('truetype'), // Safari, Android, iOS
  url('fonts/ubuntu-mono-v8-latin-700.svg#UbuntuMono') format('svg'); // Legacy iOS
}

// ubuntu-mono-700italic - latin
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/ubuntu-mono-v8-latin-700italic.eot'); // IE9 Compat Modes
  src: local('Ubuntu Mono Bold Italic'), local('UbuntuMono-BoldItalic'),
  url('fonts/ubuntu-mono-v8-latin-700italic.eot?#iefix') format('embedded-opentype'), // IE6-IE8
  url('fonts/ubuntu-mono-v8-latin-700italic.woff2') format('woff2'), // Super Modern Browsers
  url('fonts/ubuntu-mono-v8-latin-700italic.woff') format('woff'), // Modern Browsers
  url('fonts/ubuntu-mono-v8-latin-700italic.ttf') format('truetype'), // Safari, Android, iOS
  url('fonts/ubuntu-mono-v8-latin-700italic.svg#UbuntuMono') format('svg'); // Legacy iOS
}

// open-sans-regular - latin
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v16-latin-regular.eot'); // IE9 Compat Modes
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
  url('fonts/open-sans-v16-latin-regular.eot?#iefix') format('embedded-opentype'), // IE6-IE8
  url('fonts/open-sans-v16-latin-regular.woff2') format('woff2'), // Super Modern Browsers
  url('fonts/open-sans-v16-latin-regular.woff') format('woff'), // Modern Browsers
  url('fonts/open-sans-v16-latin-regular.ttf') format('truetype'), // Safari, Android, iOS
  url('fonts/open-sans-v16-latin-regular.svg#OpenSans') format('svg'); // Legacy iOS
}

// open-sans-italic - latin
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/open-sans-v16-latin-italic.eot'); // IE9 Compat Modes
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
  url('fonts/open-sans-v16-latin-italic.eot?#iefix') format('embedded-opentype'), // IE6-IE8
  url('fonts/open-sans-v16-latin-italic.woff2') format('woff2'), // Super Modern Browsers
  url('fonts/open-sans-v16-latin-italic.woff') format('woff'), // Modern Browsers
  url('fonts/open-sans-v16-latin-italic.ttf') format('truetype'), // Safari, Android, iOS
  url('fonts/open-sans-v16-latin-italic.svg#OpenSans') format('svg'); // Legacy iOS
}

// open-sans-700 - latin
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/open-sans-v16-latin-700.eot'); // IE9 Compat Modes
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
  url('fonts/open-sans-v16-latin-700.eot?#iefix') format('embedded-opentype'), // IE6-IE8
  url('fonts/open-sans-v16-latin-700.woff2') format('woff2'), // Super Modern Browsers
  url('fonts/open-sans-v16-latin-700.woff') format('woff'), // Modern Browsers
  url('fonts/open-sans-v16-latin-700.ttf') format('truetype'), // Safari, Android, iOS
  url('fonts/open-sans-v16-latin-700.svg#OpenSans') format('svg'); // Legacy iOS
}

// open-sans-700italic - latin
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/open-sans-v16-latin-700italic.eot'); // IE9 Compat Modes
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
  url('fonts/open-sans-v16-latin-700italic.eot?#iefix') format('embedded-opentype'), // IE6-IE8
  url('fonts/open-sans-v16-latin-700italic.woff2') format('woff2'), // Super Modern Browsers
  url('fonts/open-sans-v16-latin-700italic.woff') format('woff'), // Modern Browsers
  url('fonts/open-sans-v16-latin-700italic.ttf') format('truetype'), // Safari, Android, iOS
  url('fonts/open-sans-v16-latin-700italic.svg#OpenSans') format('svg'); // Legacy iOS
}

// IcoMoon Custom Icons Font
// for crisp results, use font sizes that are a multiple of 16px
$imo-css-prefix: 'icon' !default;
$imo-version: '3z7emw' !default;
$imo-font-path: 'fonts/icomoon' !default;
$imo-font-size-base: 18px !default;
$imo-v-align: 0% !default; //-14.28571429%

@font-face {
  font-family: 'icomoon';
  src: url('#{$imo-font-path}/icomoon.eot?v=#{$imo-version}');
  src: url('#{$imo-font-path}/icomoon.eot?#iefix&v=#{$imo-version}') format('embedded-opentype'),
  url('#{$imo-font-path}/icomoon.woff2?v=#{$imo-version}') format('woff2'),
  url('#{$imo-font-path}/icomoon.woff?v=#{$imo-version}') format('woff'),
  url('#{$imo-font-path}/icomoon.ttf?v=#{$imo-version}') format('truetype'),
  url('#{$imo-font-path}/icomoon.svg?v=#{$imo-version}#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

@import 'iconfont';
// IcoMoon Custom Icons Font - END

// category icons
@import "iconcategory";
// category icons - END

//// Base font size
$font-size-base: 18px !default;
//// Submenu font size for xs, sm and lg
$font-size-menu-default: 23px;
$font-size-menu-xs: $font-size-menu-default !default;
$font-size-menu-sm: 40px !default;
$font-size-menu-lg: 43px !default;
//// We use these to define default font stacks
$font-family-sans-serif: 'Open Sans', Helvetica, Roboto, Arial, sans-serif !default;
// $font-family-serif: Georgia, Cambria, 'Times New Roman', Times, serif !default;
$font-family-monospace: 'Ubuntu Mono', Consolas, 'Liberation Mono', Courier, monospace !default;

//// SET FONT SIZES using the following pattern!
// !! This is the only way, font sizes will be adapted proportionally !!
//// font-size: ($font-size-base * 1.5)
//// OR us the em-calculator function below, like so: font-size: em(14)
//// There are also the variables $font-size-large and $...small which are calculated
//// $font-size-base * 1.25 --> ~18px and $font-size-base * 0.85 --> ~12px

//$font-size-breadcrumbs: ($font-size-base * .85) !default;

// Default line height
//$line-height-base: 1.5 !default;
$line-height-submenu: 60px;

// COLORS
$amber:           #f7c525; // rgb(247, 197, 37)
$black:           #000000; // rgb(0, 0, 0)
$azure:           #004fe7; // rgb(0, 79, 231) // 'Azure'
$asphalt:         #707071; // 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)


$brand-primary:   $azure !default;
$brand-secondary: $seafoam !default;
$brand-danger:    #e7006b !default; // rgb(231, 0, 107)
//$brand-info:    #008cba !default; // FIXME: Which color will info boxes have?
$brand-success:   #00c092 !default; // rgb(0, 192, 146)
$brand-warning:   $amber !default; // rgb(247, 197, 37)
$state-danger-bg: $brand-danger !default;
$state-warning-bg:$brand-warning !default;
$state-success-bg:$brand-success !default;

$header-bg-color: $midnight;

//// ALERTS (see states, above, and compiled.scss - Code needs to go there to overwrite defaults)

//// ANIMATIONS
$transition-delay: .5s;
$transition-duration: .5s;
//// ANIMATIONS - END

//// FORM ELEMENTS
//$select-bg-color: $ghost !default;

//// BORDERS
//$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: 3px;
// Default border styles
//$border-default-styles: 1px solid $border-color !default;

//// BUTTONS
////// 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
$search-button-clip-width-sm: 75px;
//// BUTTONS - END


//// 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;


//// Accordion/Collapse Toggler

//// 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 (default bg is black)
//$tooltip-color: $snow !default;
//$tooltip-bg: lighten($brand-primary, 20%) !default;
//$tooltip-arrow-color: $tooltip-bg !default;

//// ELEMENT COLORS
//$body-bg: $snow !default;
//// Main content are bg
//$main-bg: $white !default;

//// 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;

$logo-max-width: 220px !default;

// override breakpoint of collapsing navbar for tablets and mobile
// $grid-float-breakpoint: 992px;

$default-header-height-lg: 208px;

//// NAVBAR
// ++ Margin of navbar
$navbar-margin-left: 25px;

// ++ 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 - END

// ++ Search Form
$search-form-height-xs: 330px; // + 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: 600px;
$search-form-width-home-lg: 1000px;

// ++ Height and width of the search box - EXTRA LARGE DESKTOP
$search-form-width-max: 1000px;
$search-form-width-xl: 99%;
$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-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-filter-padding-top: 24px;
$search-filter-width-lg: 100px;
$search-panel-width-xs-md: 100%;
$search-toggle-padding-bottom-top: 40px;
$search-padding-sm-md: 40px;

// ++ Height of textbox with adlr claim in header (home page)
$home-text-top-padding-xs: 100px;
$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-lg: 150px;


//// Breadcrumbs
//$breadcrumb-bg: $brand-primary !default;
//$breadcrumb-color: $btn-primary-color !default;
//// Link color for breadcrumb .active
//$breadcrumb-active-color: $btn-primary-color !default;

//// Sidebar item hover effect (doesn't exist in VF out-of-the-box); active is for selected facets
//$sidebar-item-hover-bg: transparentize($brand-secondary, .9) !default;
//$sidebar-item-active-hover-bg: transparentize($brand-primary, .1) !default;

//// ELEMENT COLORS - END
// COLORS - END

// DIMENSIONS
//// 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

//// 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 dimensions
//$modal-lg: 900px !default;
//$modal-md: 600px !default;
//$modal-sm: 300px !default;


// BREADCRUMBS
//// Separator between breadcrumb elements, use this variable to change it
//// $breadcrumb-separator: '/' !default;


// 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

// ALIGNMENTS
//// Align tops of elements to transparent button-content in same row (e.g. header: searchbox content + navigation on right-hand side)

// $button-top-padding: 6px;

//// Text alignment 'more'-toggles in sidebar;
//// default is center. If center alignment is desired, comment out this next line
//// and the '.narrow-toggle ...' in compiled.scss
//$narrow-toggle-text-alignment: left !default;

//// Pagination (Search results) AND searchtools (Search results)
//// Default is left, we use centered alignment. If left is desired,
//// comment out next mixing and '.pagination ...'  and 'searchtools ...' in compiled.scss
$pagination-flexbox-basis-20-percent: 20%;
// ALIGNMENTS - END

//// Z-Index
$z-index: (
  banner              : 200,
    navbar-brand      :  10, // => 210
  filter-dropdown     : 500,
  navigation-overlay  : 400,
  search              : 100,
  search affix        : 300,
    sbox-dd-menu      :   0, // => 100
);
//// Z-Index - END

// FUNCTIONS
@function z-index($key, $add) {
  $z: map-get($z-index, $key);
  @if ($z != null) {
    @return $z + $add;
  }
  @error 'key `#{$key}` for z-index not found:';
}
// FUNCTIONS - END

$screen-xl:       1450px !default;
$screen-xl-min:   $screen-xl !default;
$screen-lg-max:   $screen-xl - 1 !default;

@import '../../bootstrap3/scss/vendor/bootstrap/variables';
$mobile-navigation-menu-breakpoint: $screen-md-max !default; // use mobile navigation until this width