doc-msp-theme 0.1.0

data/_sass/_brandcolor.scss

@@ -0,0 +1,24 @@
+//
+// Brand Colors
+// ----------------------------------------
+
+// Brand
+@include color-variant('brand', $color-brand);
+
+// Gray
+@include color-variant('gray-38', #262626);
+@include color-variant('gray-1', #a4a4a4);
+@include color-variant('gray-2', #7c7c7c);
+@include color-variant('gray-3', #6c6c6c);
+@include color-variant('gray-4', #ededed);
+@include color-variant('gray-5', #4b4b4b);
+@include color-variant('gray-6', #d0d0d0);
+
+// Screen Colors
+@include color-variant('yellow', #ffd329, true);
+@include color-variant('orange', #ff9a1e, true);
+@include color-variant('violet', #992c99, true);
+@include color-variant('dark-blue', #1063ad, true);
+@include color-variant('light-blue', #53baf2, true);
+@include color-variant('petrol', #1bada2, true);
+@include color-variant('green', #bfcb44, true);

data/_sass/_brandheader.scss

@@ -0,0 +1,35 @@
+//
+// Brand Header
+// ----------------------------------------
+
+.brand-header {
+  width: 100%;
+  position: relative;
+  z-index: $z-index-header;
+
+  .brandbar {
+    min-height: building-units(7) - 4px;
+  }
+
+  .brandbar-minimized {
+    height: 0;
+  }
+
+  .navbar {
+    border-top: 4px solid $color-brand;
+    min-height: building-units(6.5) + 4px;
+  }
+
+  @media (min-width: #{$grid-float-breakpoint}px) {
+    &.fixed {
+      .brandbar {
+        margin-bottom: building-units(6.5);
+      }
+
+      .navbar {
+        position: fixed;
+        width: 100%;
+      }
+    }
+  }
+}

data/_sass/_brandnav.scss

@@ -0,0 +1,224 @@
+//
+// Brandnav
+// ----------------------------------------
+
+@media (max-width: #{$grid-float-breakpoint-max}px) {
+  .brandnav {
+    position: absolute;
+    width: 100%;
+    overflow: visible;
+    top: 100%;
+    left: 0;
+    margin-left: 0;
+    margin-right: 0;
+    z-index: 1;
+    display: none;
+    transition: margin-left .3s ease-in-out;
+
+    .brandnav {
+      top: 0;
+    }
+
+    .active > & {
+      display: block;
+      left: 100%;
+    }
+
+    &.brandnav-lvl-1 {
+      left: 0;
+      margin-top: 1px;
+    }
+
+    &.has-active {
+      margin-left: -100%;
+    }
+
+    @media all and (transform-3d), (-webkit-transform-3d) {
+      transition: transform .3s ease-in-out;
+      perspective: 1000px;
+
+      &.has-active {
+        margin-left: 0;
+        transform: translate3d(-100%, 0, 0);
+      }
+    }
+
+    > ul > li {
+      padding-left: 0;
+      padding-right: 0;
+      width: 100%;
+      position: static;
+    }
+
+    > ul > li > a {
+      font-size: 21px;
+      @include button-variant($font-color-regular, #fff, transparent);
+      padding: capline-bu(2.25, 21px) 24px baseline-bu(2.25, 21px);
+
+      &:not(:only-child):after {
+        content: '\a7';
+        font-family: 'Telekom-Icon';
+        float: right;
+      }
+    }
+  }
+}
+
+@media (min-width: #{$grid-float-breakpoint}px) {
+  .brandnav-lvl-1 {
+    float: left;
+
+    > ul {
+      padding-top: 19px;
+      padding-bottom: 22px;
+
+      > li {
+        float: left;
+        position: static;
+        margin-right: 24px;
+
+        > a {
+          border-radius: 3px;
+          font-size: 21px;
+          @include button-variant($font-color-regular, #fff, transparent);
+          padding-top: capline-bu(.75, 21px) + 1px;
+          padding-bottom: baseline-bu(.75, 21px) - 1px;
+        }
+
+      }
+
+      > .active > a {
+        &,
+        &:focus {
+          color: $color-brand;
+        }
+      }
+    }
+  }
+
+  .brandnav-lvl-2 {
+    position: absolute;
+    width: 100%;
+    top: 100%;
+    left: 0;
+    background-color: #fff;
+    margin-top: 1px;
+    padding-top: 0;
+    padding-bottom: 0;
+    height: 0;
+    overflow: hidden;
+
+    > ul {
+      margin-left: auto;
+      margin-right: auto;
+      @include container-fixed(24px);
+      @include clearfix();
+      opacity: 0;
+      transition: opacity .25s $telekom-ease-out-medium;
+
+      > li > a {
+        text-transform: uppercase;
+        color: $font-color-regular;
+        cursor: default;
+        font-weight: bold;
+        font-size: $font-size-regular;
+        padding-top: capline-bu(1.5, $font-size-regular) - 2px;
+        padding-bottom: baseline-bu(1.5, $font-size-regular) - 1px;
+      }
+    }
+
+    .active > & {
+      height: auto;
+      padding-top: 10px;
+      padding-bottom: 18px;
+      z-index: 1;
+
+      > ul {
+        opacity: 1;
+      }
+    }
+
+    @media all and (transform-3d), (-webkit-transform-3d) {
+      transition: transform .25s $telekom-ease-in-medium;
+      perspective: 1000px;
+      transform: scaleY(0);
+      transform-origin: top;
+      height: auto;
+      transition-delay: .25s;
+      padding-top: 10px;
+      padding-bottom: 18px;
+
+      .cancel {
+        opacity: 0;
+        transition: opacity .25s $telekom-ease-out-medium;
+        transition-delay: 0s;
+      }
+
+      > ul {
+        transition-delay: 0s;
+      }
+
+      .active > & {
+        transform: scaleY(1);
+        transition-delay: 0s;
+
+        > ul {
+          transition-delay: .25s;
+        }
+
+        .cancel {
+          opacity: 1;
+          transition-delay: .25s;
+        }
+      }
+    }
+  }
+
+  .brandnav-lvl-3 > ul  > li   > a {
+    @include button-variant($font-color-regular, #fff, transparent);
+    font-size: $font-size-regular;
+    padding-top: capline-bu(1.5, $font-size-regular) - 2px;
+    padding-bottom: baseline-bu(1.5, $font-size-regular) - 1px;
+  }
+
+}
+
+.brandnav-lvl-2-head {
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  min-height: building-units(2.5);
+  @include clearfix();
+  @include container-fixed();
+  display: none;
+  padding-left: 12px;
+  padding-right: 12px;
+
+  @media (min-width: #{$grid-float-breakpoint}px) {
+    display: block;
+  }
+}
+
+.brandnav-control-up {
+  display: none;
+
+  &.in {
+    display: block;
+  }
+}
+
+.brandnavhead {
+  min-height: building-units(6.5) - 1px;
+  background-color: #fff;
+  padding-left: 12px;
+  padding-right: 12px;
+  display: none;
+
+  .active & {
+    display: block;
+  }
+
+  @media (min-width: #{$grid-float-breakpoint}px) {
+    display: none !important;
+  }
+}

data/_sass/_breadcrumb.md

@@ -0,0 +1,39 @@
+<!--
+//
+//
+// Breadcrumb
+-->
+
+Breadcrumbs sollen dem Benutzer veranschaulichen wo er sich derzeit
+innerhalb der Seite aufhält.
+Die CSS-Klasse `.breadcrumb` sorgt dabei für die nötige Formatierung
+und fügt auch die Trennzeichen ein:
+
+<div class="tc-example" lang="en">
+  <span class="sr-only">You are here:</span>
+  <ol class="breadcrumb">
+      <li class="active">Home</li>
+  </ol>
+
+  <span class="sr-only">You are here:</span>
+  <ol class="breadcrumb">
+      <li><a href="javascript: void(0);">Home</a></li>
+      <li class="active">Library</li>
+  </ol>
+
+  <span class="sr-only">You are here:</span>
+  <ol class="breadcrumb">
+      <li><a href="javascript: void(0);">Home</a></li>
+      <li><a href="javascript: void(0);">Library</a></li>
+      <li class="active">Site</li>
+  </ol>
+</div>
+
+```html
+<span class="sr-only">You are here:</span>
+<ol class="breadcrumb">
+    <li><a href="#">Home</a></li>
+    <li><a href="#">Library</a></li>
+    <li class="active">Site</li>
+</ol>
+```

data/_sass/_breadcrumb.scss

@@ -0,0 +1,44 @@
+//
+// Breadcrumb
+// ----------------------------------------
+
+.breadcrumbbar {
+  padding-top: building-units(.5);
+  padding-bottom: building-units(.5);
+}
+
+.breadcrumb {
+  padding: $breadcrumb-padding;
+  margin: $breadcrumb-margin;
+  list-style: none;
+
+  > li {
+    display: inline-block;
+
+    > a {
+      color: $breadcrumb-color;
+    }
+
+    + li:before {
+      font-family: 'Telekom-Icon';
+      padding: 0 12px 0 8px;
+      content: '\a7'; // \00a0 is the opposite to the space from html code after </li>
+      color: $breadcrumb-color;
+      vertical-align: middle;
+    }
+  }
+
+  > .active {
+    color: $breadcrumb-color-active;
+  }
+}
+
+.breadcrumb-small {
+  font-size: 15px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+
+  > li + li:before {
+    padding: 0 10px 0 6px;
+  }
+}

data/_sass/_button.md

@@ -0,0 +1,218 @@
+<!--
+//
+//
+// Buttons
+-->
+
+Zur Erstellung von Buttons bietet HTML eine Vielzahl von Möglichkeiten.
+Buttons sollten je nach Einsatzzweck durch die Tags
+`<button>`, `<input type="submit">` oder `<input type="reset">` erzeugt werden.
+Die CSS-Klasse `.btn` sorgt anschließend für das Grundgerüst.
+Über eine zweite CSS-Klasse wird dann das Aussehen des Buttons bestimmt.
+
+Je nach Einsatzgebiet stehen auch hier unterschiedliche Farben für verschiedene
+Bedeutungen bereit. Soll ein Button inaktiv geschaltet werden, wird das
+Attribut `disabled` angewendet:
+
+<div class="tc-example">
+  <button type="button" class="btn btn-default">Standard</button>
+  <button type="button" class="btn btn-brand">Marke</button>
+  <button type="button" class="btn btn-default" disabled>Inaktiv</button>
+  <button type="button" class="btn btn-clean">Clean</button>
+</div>
+
+```html
+<!-- Standard Button -->
+<button type="button" class="btn btn-default">Standard</button>
+
+<!-- Marke Button -->
+<button type="button" class="btn btn-brand">Marke</button>
+
+<!-- Inaktiv Button -->
+<button type="button" class="btn btn-clean">Inaktiv</button>
+
+<!-- Inaktiv Button -->
+<button type="button" class="btn btn-default" disabled>Inaktiv</button>
+```
+
+<div class="tc-note tc-note-warning">
+**Achtung:**
+Die CSS-Klasse `.btn` darf nie alleine stehen.
+</div>
+
+<div class="tc-note">
+**Anmerkung:**
+Das Anwenden der CSS-Klasse `.btn` auf einen `<a>` Link ist zwar möglich,
+sollte  aufgrund der Konsistenz jedoch vermieden werden. Falls dies nicht möglich ist, muss das `<a>`-Tag mit dem Attribut
+`role="button"` versehen werden.
+</div>
+
+<div class="tc-note tc-note-info">
+**Tipp:**
+Das Button-Verhalten kann auf viele Elemente angewendet werden.
+So natürlich auch auf die unterschiedlichen Button-Typen wie
+`type="submit"` oder `type="reset"`.
+</div>
+
+<div class="tc-example">
+  <button type="submit" class="btn btn-default">Absenden</button>
+  <button type="reset" class="btn btn-default">Zurücksetzen</button>
+</div>
+
+```html
+<!-- Absenden Button -->
+<button type="submit" class="btn btn-default">Absenden</button>
+
+<!-- Zurücksetzen Button -->
+<button type="reset" class="btn btn-default">Zurücksetzen</button>
+```
+
+<div class="tc-note">
+**Anmerkung:**
+Der grüne und rote Button werden primär für die Kernfunktionalitäten „Anrufen“ bzw. „Anruf beenden“ verwendet.
+</div>
+
+<div class="tc-example">
+  <button type="button" class="btn btn-positive">Anrufen</button>
+  <button type="button" class="btn btn-negative">Anruf beenden</button>
+</div>
+
+```html
+<!-- Anrufen Button -->
+<button type="button" class="btn btn-positive">Anrufen</button>
+
+<!-- Anruf beenden Button -->
+<button type="button" class="btn btn-negative">Anruf beenden</button>
+```
+
+
+## Größen
+
+Für Buttons stehen drei verschiedene Größen zur Verfügung.
+Die CSS-Klasse `.btn-small` lässt den Button kleiner,
+die CSS-Klasse `.btn-large` größer erscheinen:
+
+<div class="tc-example">
+  <button type="button" class="btn btn-default btn-small">Klein</button>
+  <button type="button" class="btn btn-default">Normal</button>
+  <button type="button" class="btn btn-default btn-large">Groß</button>
+</div>
+
+```html
+<button type="button" class="btn btn-default btn-small">Klein</button>
+<button type="button" class="btn btn-default">Normal</button>
+<button type="button" class="btn btn-default btn-large">Groß</button>
+```
+
+## Breiten
+
+Je nach Layout kann es sinnvoll sein, Buttons schmal oder extrem weit darzustellen. Hierfür sind die CSS-Klassen `.btn-minimal` und `.btn-block` vorgesehen.
+
+Ein Button mit der Klasse `.btn-block` passt sich zu 100% in sein Elternelement ein:
+
+<div class="tc-example">
+  <button type="button" class="btn btn-default btn-minimal">Minimal</button>
+  <button type="button" class="btn btn-default">Normal</button><br>
+  <br>
+  <button type="button" class="btn btn-default btn-block">Block</button>
+</div>
+
+```html
+<button type="button" class="btn btn-default btn-minimal">Minimal</button>
+<button type="button" class="btn btn-default">Normal</button>
+<button type="button" class="btn btn-default btn-block">Block</button>
+```
+
+## Icon Buttons
+
+Für Buttons, die nur ein Icon enthalten, ist die CSS-Klasse
+`.btn-icon` vorgesehen. Sie lässt den Button schmaler erscheinen. Buttons, die aus Icon und Text bestehen, benötigen __keine__ zusätzliche Auszeichnung:
+
+<div class="tc-example">
+  <button class="btn btn-default btn-icon" title="Synchronisieren">
+    <i class="icon icon-synchronize" aria-hidden="true"></i>
+  </button>
+  <button class="btn btn-default">
+    <i class="icon icon-synchronize" aria-hidden="true"></i>Synchronisieren
+  </button>
+  <button class="btn btn-default">
+    Synchronisieren<i class="icon icon-right icon-synchronize" aria-hidden="true"></i>
+  </button>
+</div>
+
+```html
+<!-- Icon-Button - benötigt unbedingt ein Title-Attribut -->
+<button class="btn btn-default btn-icon" title="Synchronisieren">
+  <i class="icon icon-synchronize" aria-hidden="true"></i>
+</button>
+<button class="btn btn-default">
+  <i class="icon icon-synchronize" aria-hidden="true"></i>Synchronisieren
+</button>
+<button class="btn btn-default">
+  Synchronisieren<i class="icon icon-right icon-synchronize" aria-hidden="true"></i>
+</button>
+```
+
+<div class="tc-note">
+**Anmerkung Barrierefreiheit:**
+Da das Icon des Icon-Buttons mit dem `aria-hidden`-Attribute vor
+Unterstützungstechnologien versteckt wird sollte der Button dringen
+durch das Anwenden des `title`-Attributes beschrieben werden.
+</div>
+
+<h2>Button-Sectioned</h2>
+
+Buttons und Pager lassen sich mit Hilfe der CSS-Klasse `btn-sectioned` zu einer Leiste von
+Benutzerelementen zusammenfassen.
+
+<div class="tc-example">
+    <div class="row">
+        <div class="col-l-12">
+            <div class="btn-sectioned">
+                <button class="btn btn-default">Regular</button>
+                <button class="btn btn-default">Regular</button>
+                <button class="btn btn-default">Regular</button>
+            </div>
+<br>&nbsp;
+        </div>
+        <div class="col-l-12">
+            <div class="btn-sectioned">
+                <button class="btn btn-default btn-icon" title="Anhänge"><i class="icon icon-attachment" aria-hidden="true"></i></button>
+                <button class="btn btn-default btn-icon" title="Einstellungen"><i class="icon icon-settings" aria-hidden="true"></i></button>
+                <button class="btn btn-default btn-icon" title="Kontextmenü"><i class="icon icon-context-menu" aria-hidden="true"></i></button>
+            </div>
+<br>&nbsp;
+        </div>
+        <div class="col-l-12">
+            <div class="btn-sectioned">
+                <button class="btn btn-default" title="Anhänge"><i class="icon icon-attachment" aria-hidden="true"></i>Icon</button>
+                <button class="btn btn-default" title="Einstellungen"><i class="icon icon-settings" aria-hidden="true"></i>Icon</button>
+                <button class="btn btn-default" title="Kontextmenü"><i class="icon icon-context-menu" aria-hidden="true"></i>Icon</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+```html
+<div class="btn-sectioned">
+    <button class="btn btn-default">Regular</button>
+    <button class="btn btn-default">Regular</button>
+    <button class="btn btn-default">Regular</button>
+</div>
+
+...
+
+<div class="btn-sectioned">
+    <button class="btn btn-default" title="Anhänge"><i class="icon icon-attachment" aria-hidden="true"></i>Icon</button>
+    <button class="btn btn-default" title="Einstellungen"><i class="icon icon-settings" aria-hidden="true"></i>Icon</button>
+    <button class="btn btn-default" title="Kontextmenü"><i class="icon icon-context-menu" aria-hidden="true"></i>Icon</button>
+</div>
+
+...
+
+<div class="btn-sectioned">
+    <button class="btn btn-default"><i class="icon icon-attachment" aria-hidden="true"></i>Icon</button>
+    <button class="btn btn-default"><i class="icon icon-bookmark" aria-hidden="true"></i>Icon</button>
+    <button class="btn btn-default"><i class="icon icon-context-menu" aria-hidden="true"></i>Icon</button>
+</div>
+```