Skip to content
Snippets Groups Projects
Select Git revision
20 results
Blame History Permalink
  • Robert Lange's avatar
    refs #17913 [fid_adlr] handle BARF for adlr · 89cf3cab
    Robert Lange authored 
    * consolidate h1 and h2 headlines and adapt h1 to h2
* increase border on hover by adding inner outline of 2px in sum
* hover / focus: use underline for most links and change color of icons:
** save favorite
** mail
** download
** search history
* change border for hover and focus but keep together mostly, avoid :active settings
* replace dotted lines on hover
* extract buttons and get-It-Box into own files
* improve several format warnings
* add tabindex for main menu
* fix notice for unavailable shard solr4entwickler: set unchecked
* make main menu and main submenu navigable by tab
* emphasize button hover
* handle BARF leading whitespaces in links
* differentiate focus by keyboard and mouse
** example seen in search submit button
** eventually transfer this solution to buttons / dropdowns / selects
* make checkbox mark black
* use custom mixin for border of get-it-boxes
* use azure hover for language menu
* no bold font on hover of buttons
* set focus in language menu, main submenu and searchtabs filter by javascript when hitting enter or space bar
    89cf3cab
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
_customVariables.scss 18.86 KiB 
// Custom Variables for adlr -- inherits from finc, which inherits from BS, which inherits from root
// see Bootstrap's _variables.scss for default values

// Fixme bitte bereinigen, was nicht gebraucht wird, raus!

// 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%
$icon-arrow-font-size: 30px;

@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: 25px !default;
$font-size-title: 24px !default;
$font-size-title-lg: 30px !default;
$font-size-title-sub: calc(#{$font-size-title} * 0.85);
$letter-spacing-title: 2.87px;
$line-height-title: 20px;
$line-height-title-sm: 25px;
$line-height-title-lg: 25px;
//// 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)
$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)


$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-danger-bg: $brand-danger !default;
$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;

$header-bg-color: $midnight;

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

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

//// FORM ELEMENTS
//$select-bg-color: $ghost !default;
$form-group-margin-top:     50px;

//// 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-hover: 3px;
$default-outline-hover-offset: 5px;
$default-outline-hover-width: 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-default-padding: 20px;
$navbar-extended-padding: calc(2 * #{$navbar-default-padding});
//// NAVBAR - END

// ++ Search Form
$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;
$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: 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-filter-padding-top: 25px;
$search-filter-width-lg: 100px;
$search-panel-width-xs-md: 100%;
$search-toggle-padding-bottom-top: 40px;
$search-padding-sm-md: 40px;
$seachbox-width-lg: 710px;

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

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

//// 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,
    menubar           : 350,
    search            : 100,
    search affix      : 300,
    sbox-dd-menu      :   0,
  filter-dropdown     : 500,
  navbar-brand        : 500,
  navbar-header-link  : 150,
  navigation-overlay  : 400,
);
//// 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:       1600px !default; // FIXME EXPERIMENTAL
$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