doc-msp-theme 0.1.0

data/_sass/_type.scss

@@ -0,0 +1,450 @@
+//
+// Headlines
+// ----------------------------------------
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+  font-weight: $heading-font-weight;
+  margin: 0;
+
+  &.brand {
+    font-weight: 800;
+    text-transform: uppercase;
+  }
+
+  &.underline, &.cluster {
+    padding-left: 12px;
+    padding-right: 12px;
+    border-bottom: 1px solid $heading-border-color;
+  }
+
+  &.underline {
+    text-align: center;
+  }
+
+  &.cluster {
+    color: $font-color-light;
+  }
+
+  &.thin {
+    font-weight: 200;
+  }
+
+  &.marketing-l {
+    @include headline-variant($font-size-headline-marketing-elmt-l);
+    font-weight: 200;
+  }
+
+  &.marketing-xl {
+    @include headline-variant($font-size-headline-marketing-elmt-xl);
+    font-weight: 200;
+  }
+
+  small,
+  .small {
+    color: $font-color-light;
+    font-size: 84%; // -16%
+  }
+}
+
+h1, .h1 { @include headline-variant($font-size-headline-h1); }
+h2, .h2 { @include headline-variant($font-size-headline-h2); }
+h3, .h3 { @include headline-variant($font-size-headline-h3); }
+h4, .h4 { @include headline-variant($font-size-headline-h4); }
+h5, .h5 { @include headline-variant($font-size-headline-h5); }
+h6, .h6 { @include headline-variant($font-size-headline-h6); }
+
+//
+// Copytext
+// ----------------------------------------
+p {
+  margin: 0;
+  padding-top: capline-bu(1, $font-size-regular, $line-height-regular); // depends on body
+  padding-bottom: baseline-bu(1, $font-size-regular, $line-height-regular); // depends on body
+
+  &.text-xsmall {
+    padding-top: capline-bu(1, $font-size-xsmall, $line-height-regular); // depends on .text-small
+    padding-bottom: baseline-bu(1, $font-size-xsmall, $line-height-regular); // depends on .text-small
+  }
+
+  &.text-small {
+    padding-top: capline-bu(1, $font-size-small, $line-height-regular); // depends on .text-small
+    padding-bottom: baseline-bu(1, $font-size-small, $line-height-regular); // depends on .text-small
+  }
+
+  &.text-large {
+    padding-top: capline-bu(1, $font-size-large, $line-height-regular); // depends on .text-large
+    padding-bottom: baseline-bu(1, $font-size-large, $line-height-regular); // depends on .text-large
+  }
+
+  &.text-xlarge {
+    padding-top: capline-bu(1, $font-size-xlarge, $line-height-regular); // depends on .text-xlarge
+    padding-bottom: baseline-bu(1, $font-size-xlarge, $line-height-regular); // depends on .text-xlarge
+  }
+}
+
+//
+// Emphases
+// ----------------------------------------
+small,
+.text-xsmall {
+  font-size: $font-size-xsmall;
+}
+
+.text-small {
+  font-size: $font-size-small;
+}
+
+.text-large {
+  font-size: $font-size-large;
+}
+
+.text-xlarge {
+  font-size: $font-size-xlarge;
+}
+
+.text-xxlarge {
+  font-size: $font-size-headline-h2;
+}
+
+.text-xxxlarge {
+  font-size: $font-size-headline-h2;
+}
+
+.text-marketing-l {
+  @include headline-variant($font-size-headline-marketing-elmt-l);
+  font-weight: 200;
+}
+
+.text-marketing-xl {
+  @include headline-variant($font-size-headline-marketing-elmt-xl);
+  font-weight: 200;
+}
+
+.text-thin {
+  font-weight: 200 !important;
+}
+
+.text-semibold {
+  font-weight: $font-weight-semibold !important;
+}
+
+.text-strong,
+.text-bold {
+  font-weight: bold !important;
+}
+
+.text-emphased,
+.text-italic {
+  font-style: italic !important;
+}
+
+.text-uppercase {
+  text-transform: uppercase !important;
+}
+
+.text-muted {
+  color: $color-muted !important;
+}
+
+dfn,
+abbr,
+abbr[title] {
+  background-image: $dfn-background-image;
+  background-position: 0 1em;
+  background-repeat: repeat-x;
+  background-size: 2px 1px;
+  border-bottom: 0; // reset normalize
+  font-style: inherit;
+  cursor: help;
+}
+
+mark {
+  background-color: $marked-bgr-color;
+  color: $marked-font-color;
+  padding: $marked-padding;
+}
+
+.text-positive { @include emphasis-variant($font-color-positive); }
+.text-warning  { @include emphasis-variant($font-color-warning); }
+.text-negative { @include emphasis-variant($font-color-negative); }
+.text-brand    { @include emphasis-variant($font-color-brand); }
+.text-inactive { @include emphasis-variant($font-color-inactive, true); }
+
+//
+// Lists
+// ----------------------------------------
+.list-unordered,
+.list-unordered-plain {
+  list-style: none;
+  margin: $list-unordered-margin;
+  padding: $list-unordered-padding;
+
+  > li:before {
+    content: '\2013'; // endash + enspace
+    padding-right: $list-unordered-indent;
+  }
+
+  .list-ordered,
+  .list-unordered,
+  .list-unordered-plain {
+    margin-top: 0;
+  }
+}
+
+.list-unordered-bullet > li:before {
+  content: '\25AA'; // black small square + enspace
+}
+
+.list-unordered-plain {
+  > li:before {
+    content: none;
+    padding-right: 0;
+  }
+}
+
+.list-ordered {
+  list-style: none;
+  margin: $list-ordered-margin;
+  padding: $list-ordered-padding;
+  counter-reset: list-index;
+
+  > li {
+    counter-increment: list-index;
+  }
+
+  &[reversed] > li {
+    counter-increment: list-index - 1;
+  }
+
+  > li:before {
+    content: counters(list-index, '.') '';
+    padding-right: $list-ordered-indent;
+  }
+
+  .list-ordered,
+  .list-unordered {
+    margin-top: 0;
+  }
+}
+
+.list-ordered-semibold > li:before {
+  font-weight: $font-weight-semibold;
+}
+
+//
+// Description Lists
+// ----------------------------------------
+
+.list-desc {
+  margin-top: 0; // Remove browser default
+  //margin-bottom: @line-height-computed;
+
+  > dd {
+    margin-left: 0; // Undo browser default
+    padding-bottom: baseline-bu(1, $font-size-regular, $line-height-regular);
+  }
+}
+
+.list-desc-horizontal {
+
+  @include clearfix();
+
+  > dt {
+    text-align: left;
+    font-weight: 600;
+  }
+
+  > dd {
+    margin: 0;
+    padding-bottom: baseline-bu(1, $font-size-regular, $line-height-regular);
+  }
+
+  @media (min-width: $description-list-breakpoint) {
+
+    > dt {
+      clear: left;
+      float: left;
+      text-align: right;
+      width: ($component-offset-horizontal - building-units(1));
+      font-weight: normal;
+    }
+
+    > dd {
+      margin-left: $component-offset-horizontal;
+      padding-bottom: 0;
+    }
+
+  }
+}
+
+.list-desc-semibold {
+  > dt {
+    font-weight: $font-weight-semibold;
+  }
+}
+
+//
+// Price Labels
+// ----------------------------------------
+
+.price {
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+  display: inline-block;
+
+  > sup {
+    line-height: $line-height-ratio; // override normalize
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  @include price-variant($price-font-size-regular);
+}
+
+.price-large  { @include price-variant($price-font-size-large); }
+.price-xlarge { @include price-variant($price-font-size-xlarge); }
+
+.price-expired {
+  font-size: $price-font-size-expired;
+
+  > sup {
+    font-size: $price-font-size-expired;
+  }
+}
+
+//
+// Blockquote
+// ----------------------------------------
+
+.quote {
+  font-size: $quote-font-size;
+  font-style: italic;
+
+  margin: 0;
+  padding: 0;
+}
+
+.quote-author {
+  font-size: $quote-font-size-author;
+  font-style: normal;
+  font-weight: bold;
+  margin: 0;
+  margin-top: $quote-author-space;
+  padding: 0;
+
+  cite {
+    font-style: normal;
+  }
+}
+
+.figure {
+  font-size: $quote-font-size;
+  margin: $quote-figure-margin;
+  padding: $quote-figure-padding;
+  border-left: $quote-figure-border-left;
+}
+
+.quote-list {
+
+  list-style: none;
+  padding-left: building-units(2);
+
+  .quote-list-item {
+    border-left: $quote-figure-border-left;
+    padding: $quote-figure-padding;
+
+    .figure {
+      border-left: 0;
+      padding-left: 0;
+    }
+
+    *.quote-list {
+      padding-left: building-units(1);
+
+    }
+
+  }
+}
+
+//
+// Adresses
+// ----------------------------------------
+
+address {
+  font-style: normal;
+}
+
+.address-header small,
+.address-body,
+.address-footer {
+  font-size: $address-font-ratio;
+}
+
+.address-header,
+.address-body,
+.address-footer {
+  margin: 0;
+  padding: 0;
+}
+
+.address-header + .address-body,
+.address-body + .address-footer {
+  margin-top: $address-section-space;
+}
+
+.address-header {
+  font-weight: bold;
+}
+
+.address-footer label {
+  min-width: $address-label-offset;
+}
+
+//
+// Helpers
+// ----------------------------------------
+
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+@mixin text-alignement($size) {
+  .text-#{$size}-left   { text-align: left; }
+  .text-#{$size}-center { text-align: center; }
+  .text-#{$size}-right  { text-align: right; }
+}
+
+// default
+@include text-alignement('l');
+
+// down-sizing
+@media screen and (max-width: #{$grid-medium-max}px) {
+  @include text-alignement('m');
+}
+
+@media screen and (max-width: #{$grid-small-max}px) {
+  @include text-alignement('s');
+}
+
+// up-sizing
+@media screen and (min-width: #{$grid-extra-large-min}px) {
+  @include text-alignement('xl');
+}
+
+.text-nowrap {
+  white-space: nowrap;
+}
+
+.text-ellipsis {
+  @include ellipsis();
+}

data/_sass/_variables.scss

@@ -0,0 +1,480 @@
+//
+// Components Variables and Settings
+// ----------------------------------------
+
+// Naming Conventions: [optional:[component]-[variant]]-[[cssattib-base]-[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; // http://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;