// // Components Variables and Settings // —————————————-
// Naming Conventions: [optional:-[variant]]-[-[cssattrib-property]]
$version: '2.2.4';
$building-unit: 12px !default;
$compile-grid: true !default; $compile-grid-offsets: true !default; $compile-grid-hide-class: true !default; $compile-grid-show-class: true !default; $compile-grid-emphased-class: true !default;
////// Grid //////
$grid-number-of-columns: 12 !default; $grid-column-padding: building-units(1) !default; $grid-column-prefix: 'col-' !default; $grid-screen-sizes: (LARGE:l, EXTRA_LARGE:xl, MEDIUM:m, SMALL:s, EXTRA_SMALL:xs);
$grid-extra-small-min: false !default; $grid-extra-small-container-width: false !default;
$grid-small-min: 320 !default; $grid-small-container-width: false !default;
$grid-medium-min: 640 !default; $grid-medium-container-width: false !default;
$grid-large-min: 1024 !default; $grid-large-container-width: 1008 !default;
$grid-extra-large-min: 1500 !default; $grid-extra-large-container-width: 1296 !default;
// max values are calculated for gapless breakpoints without overlapping $grid-extra-small-max: ($grid-small-min - 1) !default; $grid-small-max: ($grid-medium-min - 1) !default; $grid-medium-max: ($grid-large-min - 1) !default; $grid-large-max: ($grid-extra-large-min - 1) !default; $grid-extra-large-max: false !default;
// 1 -> $grid-screen-sizes KEY // 2 -> min-width // 3 -> max-width // 4 -> fixed container width // 5 -> sizes that will be overriden $grid-settings: ((LARGE, false, false, $grid-large-container-width, (LARGE)), (EXTRA_LARGE, $grid-extra-large-min, false, $grid-extra-large-container-width, (LARGE, EXTRA_LARGE)), (MEDIUM, false, $grid-medium-max, $grid-medium-container-width, (LARGE, MEDIUM)), (SMALL, false, $grid-small-max, $grid-small-container-width, (LARGE, MEDIUM, SMALL)), (EXTRA_SMALL, false, $grid-extra-small-max, $grid-extra-small-container-width, (LARGE, MEDIUM, SMALL, EXTRA_SMALL))) !default; $grid-settings-size-exclusive: ((EXTRA_LARGE, $grid-extra-large-min, false), (MEDIUM, $grid-medium-min, $grid-medium-max), (SMALL, $grid-small-min, $grid-small-max), (EXTRA_SMALL, false, $grid-extra-small-max)) !default;
// default breakpoint for common elements $grid-float-breakpoint: $grid-medium-min; $grid-float-breakpoint-max: $grid-small-max;
////// Z-Stacking //////
////// 0 - 5k for non Componentens ////// For User Stuff
////// 5k - 6K Standard Componentes $z-index-totop: 5000 !default;
$z-index-header: 5500 !default;
////// 6K - 7K Modal Window $z-index-modal: 6000 !default;
////// 7K - 8K Notifications Windows && Errors
////// 9k - UI Elements $z-index-select-options: 9000 !default;
////// Colors //////
$color-bright: fff !default; $color-gray-light: ededed !default; $color-gray: #6b6b6b !default; $color-gray-dark: #383838 !default; $color-gray-darker: #262626 !default;
$color-positive: #6bb324 !default; $color-warning: dbad39 !default; $color-negative: d90000 !default; $color-brand: e20074 !default; $color-inactive: d0d0d0 !default; $color-function: #0ca1dc !default; $color-highlight: ff0 !default; $color-muted: #918984 !default;
$color-border: b2b2b2 !default; $color-border-bright: dcdcdc !default;
$color-element-background: $color-gray-light !default; $color-element-background-dark: hsv-darken($color-bright, 15%, true); // d9d9d9 $color-element-border: $color-border !default;
$color-element-divider: $color-border !default;
////// Animation ////// $transition-function: cubic-bezier(.445, .05, .55, .95) !default; $transition-time-out: 150ms !default; $transition-time-in: 100ms !default;
////// telekom animation easings ////// $telekom-ease-in-light: cubic-bezier(.7, 0, 1, 1) !default; $telekom-ease-in-medium: cubic-bezier(.6, 0, .7, .2) !default; $telekom-ease-in-strong: cubic-bezier(.9, .2, .8, .1) !default; $telekom-ease-out-light: cubic-bezier(0, 0, .55, 1) !default; $telekom-ease-out-medium: cubic-bezier(.2, .7, .3, 1) !default; $telekom-ease-out-strong: cubic-bezier(.2, 1, .2, 1) !default; $telekom-ease-in-out: cubic-bezier(.65, .045, .3, 1) !default; $telekom-ease-elastic: cubic-bezier(.5, .2, .2, 1.25) !default;
////// Scaffolding ////// $background-color-regular: fff !default; // used for transparency calculations
////// Typography ////// $font-family-dtag: 'TeleGroteskScreen', 'TeleGrotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif !default; $font-family-icons: 'Telekom-Icon' !default; $font-family-regular: $font-family-dtag !default;
$font-size-regular: 18px !default; // 100% $font-size-xsmall: ceil($font-size-regular * .75) !default; // ~14px $font-size-small: ceil($font-size-regular * .83) !default; // ~15px $font-size-large: ceil($font-size-regular * 1.16) !default; // ~21px $font-size-xlarge: ceil($font-size-regular * 1.33) !default; // ~24px $font-size-xxlarge: ceil($font-size-regular * 1.5) !default; // ~27px
$font-size-headline-h1: ceil($font-size-regular * 2) !default; // 36px $font-size-headline-h2: ceil($font-size-regular * 1.5) !default; // ~27px $font-size-headline-h3: ceil($font-size-regular * 1.33) !default; // ~24px $font-size-headline-h4: ceil($font-size-regular * 1.16) !default; // ~21px $font-size-headline-h5: $font-size-regular !default; // 100% $font-size-headline-h6: ceil($font-size-regular * .83) !default; // ~15px
$font-size-headline-marketing-elmt-l: ceil($font-size-regular * 2.66) !default;// 48px $font-size-headline-marketing-elmt-xl: ceil($font-size-regular * 3.33) !default;// 60px
$line-height-ratio: 1.2 !default; // jsfiddle.net/LkraY/1/ $line-height-regular: $line-height-ratio !default; $line-height-extracted: floor($font-size-regular * $line-height-ratio) !default; // ~21px $line-height-extracted-small: floor($font-size-xsmall * $line-height-ratio) !default; $line-height-extracted-large: floor($font-size-large * $line-height-ratio) !default;
$font-weight-semibold: 600 !default;
$font-color-regular: $color-gray-darker !default; $font-color-light: $color-gray !default; // hsv-lighten($font-color-regular, 24%, true) !default; $font-color-bright: $color-bright !default; // fff;
$font-color-positive: $color-positive !default; $font-color-warning: $color-warning !default; $font-color-negative: $color-negative !default; $font-color-brand: $color-brand !default; $font-color-inactive: hsv-darken($background-color-regular, 10%, true) !default;
$font-color-link: #00739f !default; $font-color-link-hover: hsv-darken($font-color-link, 7%, true) !default; // -7% $font-color-link-active: hsv-darken($font-color-link, 15%, true) !default; // -15% $font-color-link-focus: hsv-darken($font-color-link, 21%, true) !default; // -21%
////// Building Unit Calculations //////
// Margins and Paddings // __ // <– $font-capline-top-ratio // |__| // | | // __ <– $font-baseline-bottom-ratio
// Variables are used by functions: capline-pixels(), baseline-pixels() $font-base-size: 500px !default; // value based on font-size 500px with TeleGroteskScreen $font-capline-top-ratio: 100px / $font-base-size !default; // 100px = value based on vertical-align: baseline and font-base-size: 500px $font-baseline-bottom-ratio: 66px / $font-base-size !default; // 66px = value based on vertical-align: baseline and font-base-size: 500px
// Box Paddings $bu-padding-large: building-unit-box-padding($line-height-extracted-large, 4, 2) !default; // vertical: (4 BU - 1px Border) - Calculated Line Height, horizontal: 2BU - 1px font-padding $bu-padding-regular: building-unit-box-padding($line-height-extracted, 3, 2) !default; // vertical: (3 BU - 1px Border) - Calculated Line Height, horizontal: 2BU - 1px font-padding $bu-padding-small: building-unit-box-padding($line-height-extracted-small, 2.5, 2) !default; // vertical: (2.5 BU - 1px Border) - Calculated Line Height, horizontal: 2BU - 1px font-padding $bu-padding-minimal: building-unit-box-padding($line-height-extracted, 3, 1) !default; $bu-border-radius-regular: building-units(1 / 3) !default; $bu-border-radius-large: building-units(1 / 2) !default; $bu-border-radius-small: building-units(1 / 4) !default;
////// HRULE ////// $hr-border-color: $color-border-bright !default;
////// Headings ////// $heading-font-weight: normal !default; $heading-margin-top: building-units(2) !default; $heading-margin-bottom: building-units(1) !default;
$heading-border-color: $color-border !default;
////// Mark ////// $marked-padding: 0 .25em !default; $marked-font-color: $font-color-regular !default; $marked-bgr-color: $color-highlight !default;
////// Definitions and Abbrevations ////// $dfn-background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAAGElEQVQIW2O0O/DhPwMQHHIQYATRjOgCAKclCAMmY8YrAAAAAElFTkSuQmCC') !default;
// @see: www.patternify.com for more
////// (Un)oredered Lists ////// $list-unordered-margin: building-units(1) 0 0 0 !default; $list-unordered-padding: 0 0 0 18px !default; $list-unordered-indent: building-units(1) !default;
$list-ordered-margin: building-units(1) 0 0 0 !default; $list-ordered-padding: 0 0 0 20px !default; $list-ordered-indent: building-units(1) !default;
////// Description Lists ////// $description-list-breakpoint: 640px !default; $component-offset-horizontal: 160px !default;
////// Price Labels ////// $price-cent-factor: .666 !default; $price-font-size-regular: 27px !default; // 100% $price-font-size-large: ceil($price-font-size-regular * 1.11) !default; // ~30px $price-font-size-xlarge: ceil($price-font-size-regular * 1.33) !default; // ~36px
$price-font-size-expired: 28px !default; $price-font-middle-line: .6em !default;
////// Quotes ////// $quote-font-size: $font-size-regular !default; $quote-font-size-author: $font-size-small !default;
$quote-author-space: .25em !default;
$quote-figure-margin: building-units(1) 0 0 0 !default; $quote-figure-padding: 0 0 0 building-units(1) !default; $quote-figure-border-left: 1px solid $color-border-bright !default;
///// Address ////// $address-font-ratio: 84% !default; $address-section-space: .25em !default; $address-label-offset: 40px !default;
////// Tables ////// $table-padding: $bu-padding-minimal !default; // ~6px 12px $table-padding-small: $bu-padding-small !default; // ~5px 12px
$table-caption-font-size: $font-size-xlarge !default; // ~24px
$table-row-border-bottom: 1px solid $color-border-bright !default;
$table-header-border-bottom: 1px solid $color-border !default; $table-footer-border-top: 1px double $color-border !default; // double wins over solid from $table-row-border-bottom $table-footer-border-bottom: 1px solid $color-border !default;
$table-font-color-hover: hsv-darken($font-color-regular, 7%, true) !default;
$table-font-color-positive: hsv-darken($font-color-positive, 10%, true) !default; $table-font-color-warning: hsv-darken($font-color-warning , 10%, true) !default; $table-font-color-negative: hsv-darken($font-color-negative, 10%, true) !default; $table-font-color-brand: $color-bright !default; $table-font-color-inactive: $font-color-inactive !default;
$table-bgr-color-hover: hsv-darken($background-color-regular, 12%, true) !default;
$table-bgr-color-positive: $color-positive !default; $table-bgr-color-warning: $color-warning !default; $table-bgr-color-negative: $color-negative !default; $table-bgr-color-brand: $color-brand !default; // brand has no fallback $table-bgr-color-inactive: transparent !default; // inactive has no fallback
$table-bgr-color-alpha: .05 !default; $table-bgr-color-hover-alpha: .2 !default;
$table-gray-odd-bgr-color: hsv-darken($background-color-regular, 5%, true) !default; $table-gray-odd-font-color: $font-color-regular !default;
////// Forms ////// $input-padding: $bu-padding-minimal !default; // ~6px 12px $input-border-radius: $bu-border-radius-regular !default;
$input-min-height: $line-height-extracted + 6 + 6 + 1 !default; // = line-height + padding-top + padding-bottom + border
$input-font-color: $font-color-regular !default; $input-border-color: $color-element-border !default; $input-bgr-color: $color-bright !default; $input-font-color-placeholder: $font-color-light !default;
$input-border-color-focus: #66afe9 !default;
$input-disabled-font-color: hsv-lighten($input-font-color, 50%, true) !default; $input-disabled-border-color: hsv-lighten($input-border-color, 14%, true) !default; $input-disabled-bgr-color: $input-bgr-color !default; $input-disabled-font-color-placeholder: hsv-lighten($input-font-color-placeholder, 50%, true) !default;
////// Buttons ////// $button-padding: $bu-padding-regular !default; // ~6px 12px $button-padding-small: $bu-padding-small !default; $button-padding-large: $bu-padding-large !default; $button-padding-minimal: building-unit-box-padding($line-height-extracted, 3, 1.5) !default;
$button-icon-indent: building-units(1) !default;
$button-border-radius: $bu-border-radius-regular !default;
$button-border-color-default: $color-element-border !default; $button-border-color-positive: hsv-darken($color-positive, 15%, true) !default; $button-border-color-function: hsv-darken($color-function, 15%, true) !default; $button-border-color-negative: hsv-darken($color-negative, 15%, true) !default; $button-border-color-brand: b2005c !default; // new ui kit special case color
////// Checkboxes | JS ////// $checkbox-check-color: $color-positive !default; $checkbox-border-color: $color-element-border !default; $checkbox-bgr-color: $color-element-background !default;
$checkbox-disabled-check-color: hsv-lighten($font-color-regular, 50%, true) !default; $checkbox-disabled-border-color: hsv-lighten($checkbox-border-color, 14%, true) !default; $checkbox-disabled-bgr-color: hsv-lighten($checkbox-bgr-color, 5%, true) !default;
////// Radios | JS ////// $radio-check-color: $color-brand !default; $radio-border-color: $color-element-border !default; $radio-bgr-color: $color-element-background !default;
$radio-disabled-check-color: hsv-lighten($font-color-regular, 50%, true) !default; $radio-disabled-border-color: hsv-lighten($radio-border-color, 14%, true) !default; $radio-disabled-bgr-color: hsv-lighten($radio-bgr-color, 5%, true) !default;
////// Selects | JS ////// $select-font-color: $font-color-regular !default; $select-border-color: $color-element-border !default; $select-bgr-color: $color-element-background !default;
$select-disabled-font-color: hsv-lighten($select-font-color, 50%, true) !default; $select-disabled-border-color: hsv-lighten($select-border-color, 14%, true) !default; $select-disabled-bgr-color: hsv-lighten($select-bgr-color, 5%, true) !default;
$select-options-padding: building-unit-box-padding($line-height-extracted, 4, 1) !default;
$select-options-bgr-color: $color-bright; $select-options-active-bgr-color: hsv-darken($select-options-bgr-color, 15%, true);
////// Icons ////// $icon-frame-width: building-units(4) !default; $icon-frame-height: building-units(4) !default;
////// Images ////// $image-tn-border-color: $color-element-border !default; $image-frame-width: building-units(4) !default; $image-frame-height: building-units(4) !default;
$image-frame-width-small: 38px !default; $image-frame-height-small: 38px !default;
////// Content-Lists ////// $cl-border-color: $color-border-bright !default;
$cl-element-padding: 13px building-units(1) !default; $cl-element-bgr-color-focus: hsv-darken($color-bright, 21%, true) !default; $cl-element-bgr-color-hover: hsv-darken($color-bright, 7%, true) !default; $cl-element-bgr-color-active: hsv-darken($color-bright, 15%, true) !default;
$cl-element-font-color-brand: $color-bright !default; $cl-element-bgr-color-brand: $color-brand !default;
///// Media ////// $media-padding: 5px building-units(1) 4px !default; $media-min-height: 38px !default; $media-column-padding: building-units(1) !default; $media-body-padding: 5px 0 !default;
$media-hint-font-color: $font-color-light !default; $media-hint-font-size: $font-size-small !default;
////// Pager ////// $pager-background-color: $background-color-regular !default; $pager-border-color: $color-element-border !default; $pager-text-color: $font-color-regular !default;
$pager-disabled-bgr-color: hsv-lighten($color-element-background, 5%, true) !default; $pager-disabled-border-color: hsv-lighten($pager-border-color, 14%, true) !default; $pager-disabled-text-color: hsv-lighten($font-color-regular, 50%, true) !default;
$pager-small-padding: $button-padding-small !default; $pager-small-font-size: $font-size-small !default;
$pager-large-padding: $button-padding-large !default; $pager-large-font-size: $font-size-large !default;
$pager-padding-minimal: $bu-padding-minimal !default;
////// Breadcrumb ////// $breadcrumb-padding: 3px 0 !default; $breadcrumb-margin: 0 !default; $breadcrumb-color: $font-color-light !default; $breadcrumb-color-active: $color-brand !default; // $breadcrumb-separator: 'bb' !default; // wait for a bug in sass compiler to fix the conversion to utf-8 value
////// Pagination ////// $pagination-width: building-units(1) !default; $pagination-height: building-units(1) !default; $pagination-gutter: building-units(.5) !default;
$pagination-bgr-color: $color-element-background !default; $pagination-border-color: $color-element-border !default;
$pagination-active-bgr-color: $color-brand !default; $pagination-active-border-color: hsv-darken($pagination-active-bgr-color, 15%, true) !default;
$pagination-disabled-bgr-color: $pagination-bgr-color !default; $pagination-disabled-border-color: hsv-lighten($pagination-border-color, 15%, true) !default;
$pagination-width-small: 8px !default; // ~building-unit / 2 + 1px border on both sides $pagination-height-small: 8px !default; // ~building-unit / 2 + 1px border on both sides $pagination-gutter-small: building-units(1 / 3) !default;
////// Badges ////// $badges-bgr-color: $color-element-background !default; $badges-bgr-color-positive: $color-positive !default; $badges-bgr-color-warning: $color-warning !default; $badges-bgr-color-negative: $color-negative !default; $badges-bgr-color-function: $color-function !default; $badges-bgr-color-brand: $color-brand !default; $badges-bgr-color-dark: $color-gray-dark !default; $badges-font-color-normal: $font-color-regular !default; $badges-font-color-bright: $color-bright !default; $badges-border-radius: $bu-border-radius-small !default;
////// Notifications ////// $notification-bgr-color: eee !default; // todo? $notification-border-color: $color-element-border !default; $notification-border-radius: $bu-border-radius-large !default; $notification-padding: 16px building-units(2) 22px !default; $notification-margin-bottom: building-units(1.5) !default;
$notification-font-size: $font-size-small !default; $notification-heading-font-size: $font-size-headline-h3 !default;
$notification-close-button-color: $font-color-regular !default; $notification-close-button-hover: hsv-darken($notification-close-button-color, 7%, true) !default; // -7% $notification-close-button-active: hsv-darken($notification-close-button-color, 15%, true) !default; // -15% $notification-close-button-focus: hsv-darken($notification-close-button-color, 21%, true) !default; // -21%
////// Modal //////
$modal-margin: building-units(1) !default; $modal-regular-margin: building-units(2) auto !default;
$modal-padding: 0 !default; $modal-border-radius: $bu-border-radius-large !default;
$modal-content-bgr: $color-bright !default;
$modal-header-padding: building-units(1) !default; $modal-body-padding: building-units(1) !default; $modal-footer-padding: building-units(1) !default;
$modal-backdrop-bgr: #000 !default; $modal-backdrop-opacity: .8 !default; // ~80%
$modal-header-border-color: $color-element-border !default; $modal-footer-border-color: $color-element-border !default;
$modal-regular-width: 600px !default; // ~50 bu $modal-small-width: 480px !default; // ~40 bu $modal-large-width: 840px !default; // ~70 bu
////// Footer ////// $footer-border-color: $color-muted; $color-footer-legal-text: $color-muted; $footer-font-size: 16px; $footer-navigation-hover-color: #5e5e5e;