doc-msp-theme 0.1.0

data/_sass/_font-faces.scss

@@ -0,0 +1,15 @@
+//
+// Font Faces
+// ----------------------------------------
+
+// UI Icons
+@include font-face('TeleIconUi', 'teleicon-ui', '../fonts/teleicon-ui', normal, normal);
+
+// Brand - new Screenfont
+@include font-face('TeleGroteskScreen', 'telegroteskscreen-thin', '../fonts/telegroteskscreen-thin', 200, normal);
+@include font-face('TeleGroteskScreen', 'telegroteskscreen-regular', '../fonts/telegroteskscreen-regular', 400, normal);
+@include font-face('TeleGroteskScreen', 'telegroteskscreen-regular-italic', '../fonts/telegroteskscreen-regular-italic', 400, italic);
+@include font-face('TeleGroteskScreen', 'telegroteskscreen-medium', '../fonts/telegroteskscreen-medium', 600, normal);
+@include font-face('TeleGroteskScreen', 'telegroteskscreen-medium-italic', '../fonts/telegroteskscreen-medium-italic', 600, italic);
+@include font-face('TeleGroteskScreen', 'telegroteskscreen-bold', '../fonts/telegroteskscreen-bold', 700, normal);
+@include font-face('TeleGroteskScreen', 'telegroteskscreen-ultra', '../fonts/telegroteskscreen-ultra', 800, normal);

data/_sass/_footer.md

@@ -0,0 +1,392 @@
+
+## Einführung
+
+Um die Anatomie des Telekom Footers zu versthen ist es wichtig zu wissen,
+dass den Telekom Footer nicht als "eine Komponente" gibt.<br>
+Er besteht aus mehreren Einzel-Komponenten.
+
+## Übersicht
+
+Es sind zwei Versionen des Footers definiert, eine kurze Version und
+eine lange mit einem vollständigen Menü.
+
+### Footer kurz
+
+Die kurze Version besteht aus drei sichtbaren `.row .brand-footer-bar` Elementen für die Icons von
+sozialen Netzwerken, der Trennlinie und dem Footer Menü. Abhängig vom 'viewport'
+werden die Trennlinien an unterschiedlichen Stellen angezeigt. Dafür wurden unter anderem
+Helper-Klassen eingesetzt.
+
+</div>
+</div>
+
+
+<div class="tc-example tc-example-block" lang="en">
+  <footer class="brand-footer">
+    <div class="container-fixed">
+      <div class="row brand-footer-bar brand-footer-social">
+        <div class="col-l-12">
+          <ul class="nav nav-inline text-center">
+            <li>
+              <a href="#">
+                <img src="images/facebook.svg" alt="Facebook">
+                <span class="sr-only">Facebook</span>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img src="images/twitter.svg" alt="Twitter">
+                <span class="sr-only">Twitter</span>
+              </a>
+            </li>
+            <li>
+              <a href="#">
+                <img src="images/youtube-play.svg" alt="Youtube">
+                <span class="sr-only">Youtube</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="row brand-footer-bar hidden-xl hidden-l hidden-m">
+        <div class="col-l-3 col-m-2 col-s-12">
+          <div class="brand-logo">
+            <a href="#">
+              <img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
+              <span class="sr-only">Telekom Logo</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="brand-footer-separator hidden-xl hidden-l hidden-m"></div>
+    <div class="container-fixed">
+      <div class="row hidden-s hidden-xs">
+        <div class="col-l-12">
+          <div class="brand-footer-separator">
+          </div>
+        </div>
+      </div>
+      <div class="row brand-footer-bar">
+        <div class="col-l-3 col-m-2 hidden-s hidden-xs">
+          <div class="brand-logo">
+            <a href="#">
+              <img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
+              <span class="sr-only">Telekom Logo</span>
+            </a>
+          </div>
+        </div>
+        <div class="col-m-12 hidden-xl hidden-l hidden-m text-center text-muted">
+          <div class="brand-footer-bar-text">&copy; 2016 Deutsche Telekom AG</div>
+        </div>
+        <div class="col-l-6 col-m-8 col-s-12">
+          <ul class="nav brand-footer-nav brand-footer-nav-muted text-center">
+            <li><a href="#">Imprint</a></li>
+            <li><a href="#">Contact</a></li>
+            <li><a href="#">FAQ</a></li>
+            <li><a href="#">Privacy Policy</a></li>
+            <li><a href="#">Disclaimer</a></li>
+          </ul>
+        </div>
+        <div class="col-l-3 col-m-12 hidden-s hidden-xs text-l-right text-m-center text-muted">
+          <div class="brand-footer-bar-text">&copy; 2016 Deutsche Telekom AG</div>
+        </div>
+      </div>
+    </div>
+  </footer>
+</div>
+{% highlight html %}
+<footer class="brand-footer">
+  <div class="container-fixed">
+    <div class="row brand-footer-bar brand-footer-social">
+      <div class="col-l-12">
+        <ul class="nav nav-inline text-center">
+          <li>
+            <a href="#">
+              <img src="images/facebook.svg" alt="Facebook">
+              <span class="sr-only">Facebook</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <img src="images/twitter.svg" alt="Twitter">
+              <span class="sr-only">Twitter</span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <img src="images/youtube-play.svg" alt="Youtube">
+              <span class="sr-only">Youtube</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="row brand-footer-bar hidden-xl hidden-l hidden-m">
+      <div class="col-l-3 col-m-2 col-s-12">
+        <div class="brand-logo">
+          <a href="#">
+            <img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
+            <span class="sr-only">Telekom Logo</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="brand-footer-separator hidden-xl hidden-l hidden-m"></div>
+  <div class="container-fixed">
+    <div class="row hidden-s hidden-xs">
+      <div class="col-l-12">
+        <div class="brand-footer-separator">
+        </div>
+      </div>
+    </div>
+    <div class="row brand-footer-bar">
+      <div class="col-l-3 col-m-2 hidden-s hidden-xs">
+        <div class="brand-logo">
+          <a href="#">
+            <img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
+            <span class="sr-only">Telekom Logo</span>
+          </a>
+        </div>
+      </div>
+      <div class="col-m-12 hidden-xl hidden-l hidden-m text-center text-muted">
+        <div class="brand-footer-bar-text">&copy; 2016 Deutsche Telekom AG</div>
+      </div>
+      <div class="col-l-6 col-m-8 col-s-12">
+        <ul class="nav brand-footer-nav brand-footer-nav-muted text-center">
+          <li><a href="#">Imprint</a></li>
+          <li><a href="#">Contact</a></li>
+          <li><a href="#">FAQ</a></li>
+          <li><a href="#">Privacy Policy</a></li>
+          <li><a href="#">Disclaimer</a></li>
+        </ul>
+      </div>
+      <div class="col-l-3 col-m-12 hidden-s hidden-xs text-l-right text-m-center text-muted">
+        <div class="brand-footer-bar-text">&copy; 2016 Deutsche Telekom AG</div>
+      </div>
+    </div>
+  </div>
+</footer>
+{% endhighlight %}
+
+<hr class="offset-top-8"/>
+
+<div class="main">
+  <div class="container-fixed">
+
+    <h3>Footer Lang</h3>
+
+    <p>
+    Die lange Version hat ein Inline-Menü für Settings sowie eigenes vollständiges Menü.
+    Logo und Claim sind wie die Meta-Navigation und das Copyright in jeweils einer eigenen `.row` angeordnet.
+    </p>
+
+  </div>
+</div>
+
+<div class="tc-example tc-example-block" lang="en">
+  <footer class="brand-footer">
+    <div class="container-fixed">
+      <div class="row brand-footer-bar brand-footer-bar-condensed">
+        <div class="col-l-6 col-s-12">
+          <ul class="nav brand-footer-nav text-l-left text-s-center">
+            <li class="active"><a href="#">Privatkunden</a></li>
+            <li><a href="#">Geschäftskunden</a></li>
+          </ul>
+        </div>
+        <div class="col-l-6 col-s-12">
+          <ul class="nav brand-footer-nav text-l-right text-s-center">
+            <li class="active"><a href="#">Deutsch</a></li>
+            <li><a href="#">English</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="row brand-footer-bar">
+        <div class="col-l-3 col-s-12">
+          <div class="brand-footer-nav-caption">Lorem Ipsum Dolor</div>
+          <div class="content-list brand-footer-content-list">
+            <a class="content-list-item" href="#">At vero eos</a>
+            <a class="content-list-item" href="#">Dolor sit amet</a>
+            <a class="content-list-item" href="#">Conseteur sadipiscing</a>
+            <a class="content-list-item" href="#">Elitir eirmod</a>
+            <a class="content-list-item" href="#">Dolore magna</a>
+          </div>
+        </div>
+        <div class="col-l-3 col-s-12">
+          <div class="brand-footer-nav-caption">Lorem Ipsum Dolor</div>
+          <div class="content-list brand-footer-content-list">
+            <a class="content-list-item" href="#">At vero eos</a>
+            <a class="content-list-item" href="#">Dolor sit amet</a>
+            <a class="content-list-item" href="#">Conseteur sadipiscing</a>
+            <a class="content-list-item" href="#">Elitir eirmod</a>
+          </div>
+        </div>
+        <div class="col-l-3 col-s-12">
+          <div class="brand-footer-nav-caption">Lorem Ipsum Dolor</div>
+          <div class="content-list brand-footer-content-list">
+            <a class="content-list-item" href="#">At vero eos</a>
+            <a class="content-list-item" href="#">Dolor sit amet</a>
+            <a class="content-list-item" href="#">Conseteur sadipiscing</a>
+            <a class="content-list-item" href="#">Elitir eirmod</a>
+            <a class="content-list-item" href="#">Dolore magna</a>
+          </div>
+        </div>
+        <div class="col-l-3 col-s-12">
+          <div class="brand-footer-nav-caption">Social Media</div>
+          <div class="content-list brand-footer-content-list">
+            <a class="content-list-item" href="#">
+              <img src="images/facebook.svg" alt="Facebook">
+              facebook
+            </a>
+            <a class="content-list-item" href="#">
+              <img src="images/twitter.svg" alt="Twitter">
+              twitter
+            </a>
+            <a class="content-list-item" href="#">
+              <img src="images/youtube-play.svg" alt="Youtube">
+              youtube
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="row brand-footer-bar brand-footer-bar-brandbar">
+        <div class="col-l-12">
+          <a href="#" class="brand-logo pull-left">
+            <img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
+            <span class="sr-only">Telekom Logo</span>
+          </a>
+          <div class="brand-claim pull-right">
+            <img src="images/brand-claim.svg" alt="Brand Claim">
+            <span class="sr-only">Brand Claim</span>
+          </div>
+        </div>
+      </div>
+      <div class="row hidden-s hidden-xs">
+        <div class="col-l-12">
+          <div class="brand-footer-separator"></div>
+        </div>
+      </div>
+    </div>
+    <div class="brand-footer-separator hidden-xl hidden-l hidden-m"></div>
+    <div class="container-fixed">
+      <div class="row brand-footer-bar">
+        <div class="col-l-4 col-s-12 text-muted text-s-center">
+          <div class="brand-footer-bar-text">&copy; 2016 Deutsche Telekom AG</div>
+        </div>
+        <div class="col-l-8 col-s-12">
+          <ul class="nav brand-footer-nav brand-footer-nav-muted text-l-right text-s-center">
+            <li><a href="#">Imprint</a></li>
+            <li><a href="#">Contact</a></li>
+            <li><a href="#">FAQ</a></li>
+            <li><a href="#">Privacy Policy</a></li>
+            <li><a href="#">Disclaimer</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </footer>
+</div>
+{% highlight html %}
+<footer class="brand-footer">
+  <div class="container-fixed">
+    <div class="row brand-footer-bar brand-footer-bar-condensed">
+      <div class="col-l-6 col-s-12">
+        <ul class="nav brand-footer-nav text-l-left text-s-center">
+          <li class="active"><a href="#">Privatkunden</a></li>
+          <li><a href="#">Geschäftskunden</a></li>
+        </ul>
+      </div>
+      <div class="col-l-6 col-s-12">
+        <ul class="nav brand-footer-nav text-l-right text-s-center">
+          <li class="active"><a href="#">Deutsch</a></li>
+          <li><a href="#">English</a></li>
+        </ul>
+      </div>
+    </div>
+    <div class="row brand-footer-bar">
+      <div class="col-l-3 col-s-12">
+        <div class="brand-footer-nav-caption">Lorem Ipsum Dolor</div>
+        <div class="content-list brand-footer-content-list">
+          <a class="content-list-item" href="#">At vero eos</a>
+          <a class="content-list-item" href="#">Dolor sit amet</a>
+          <a class="content-list-item" href="#">Conseteur sadipiscing</a>
+          <a class="content-list-item" href="#">Elitir eirmod</a>
+          <a class="content-list-item" href="#">Dolore magna</a>
+        </div>
+      </div>
+      <div class="col-l-3 col-s-12">
+        <div class="brand-footer-nav-caption">Lorem Ipsum Dolor</div>
+        <div class="content-list brand-footer-content-list">
+          <a class="content-list-item" href="#">At vero eos</a>
+          <a class="content-list-item" href="#">Dolor sit amet</a>
+          <a class="content-list-item" href="#">Conseteur sadipiscing</a>
+          <a class="content-list-item" href="#">Elitir eirmod</a>
+        </div>
+      </div>
+      <div class="col-l-3 col-s-12">
+        <div class="brand-footer-nav-caption">Lorem Ipsum Dolor</div>
+        <div class="content-list brand-footer-content-list">
+          <a class="content-list-item" href="#">At vero eos</a>
+          <a class="content-list-item" href="#">Dolor sit amet</a>
+          <a class="content-list-item" href="#">Conseteur sadipiscing</a>
+          <a class="content-list-item" href="#">Elitir eirmod</a>
+          <a class="content-list-item" href="#">Dolore magna</a>
+        </div>
+      </div>
+      <div class="col-l-3 col-s-12">
+        <div class="brand-footer-nav-caption">Social Media</div>
+        <div class="content-list brand-footer-content-list">
+          <a class="content-list-item" href="#">
+            <img src="images/facebook.svg" alt="Facebook">
+            facebook
+          </a>
+          <a class="content-list-item" href="#">
+            <img src="images/twitter.svg" alt="Twitter">
+            twitter
+          </a>
+          <a class="content-list-item" href="#">
+            <img src="images/youtube-play.svg" alt="Youtube">
+            youtube
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="row brand-footer-bar brand-footer-bar-brandbar">
+      <div class="col-l-12">
+        <a href="#" class="brand-logo pull-left">
+          <img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
+          <span class="sr-only">Telekom Logo</span>
+        </a>
+        <div class="brand-claim pull-right">
+          <img src="images/brand-claim.svg" alt="Brand Claim">
+          <span class="sr-only">Brand Claim</span>
+        </div>
+      </div>
+    </div>
+    <div class="row hidden-s hidden-xs">
+      <div class="col-l-12">
+        <div class="brand-footer-separator"></div>
+      </div>
+    </div>
+  </div>
+  <div class="brand-footer-separator hidden-xl hidden-l hidden-m"></div>
+  <div class="container-fixed">
+    <div class="row brand-footer-bar">
+      <div class="col-l-4 col-s-12 text-muted text-s-center">
+        <div class="brand-footer-bar-text">&copy; 2016 Deutsche Telekom AG</div>
+      </div>
+      <div class="col-l-8 col-s-12">
+        <ul class="nav brand-footer-nav brand-footer-nav-muted text-l-right text-s-center">
+          <li><a href="#">Imprint</a></li>
+          <li><a href="#">Contact</a></li>
+          <li><a href="#">FAQ</a></li>
+          <li><a href="#">Privacy Policy</a></li>
+          <li><a href="#">Disclaimer</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</footer>
+{% endhighlight %}
+

data/_sass/_footer.scss

@@ -0,0 +1,147 @@
+//
+// Header
+// ----------------------------------------
+
+.brand-footer {
+  background-color: $color-gray-darker;
+  color: $color-bright;
+  font-size: $footer-font-size;
+  line-height: $footer-font-size;
+  padding: 0 building-units(1);
+}
+
+.brand-footer-separator {
+  border-bottom: 1px solid $footer-border-color;
+
+  @media (max-width: #{$grid-small-max}px) {
+    margin-left: building-units(-1);
+    margin-right: building-units(-1);
+  }
+}
+
+.brand-footer-nav {
+  margin-left: -12px;
+  margin-right: -12px;
+
+  > li {
+    display: inline-block;
+    padding: building-units(1);
+
+    > a {
+      padding: 4px 0 3px;
+      border-bottom: 1px solid transparent;
+
+      &,
+      &:hover,
+        &:focus,
+        &:active {
+        color: $color-bright;
+      }
+
+      &.hover,
+      &:hover {
+        border-bottom-color: $color-bright;
+      }
+    }
+  }
+
+  .active > a {
+    border-bottom-color: $color-bright;
+  }
+}
+
+.brand-footer-nav-muted {
+  > li {
+    > a {
+      &,
+      &:hover,
+        &:focus,
+        &:active {
+        color: $color-footer-legal-text;
+      }
+
+      &.hover,
+      &:hover {
+        border-bottom-color: $color-footer-legal-text;
+      }
+    }
+
+    .active > a {
+      border-bottom-color: $color-footer-legal-text;
+    }
+  }
+}
+
+.brand-footer-nav-caption {
+  @extend .content-list-item;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+.brand-footer-content-list {
+  margin-bottom: building-units(1.5);
+
+  > .content-list-item {
+    border-bottom: 0;
+
+    > img {
+      height: $footer-font-size;
+      vertical-align: middle;
+      margin-right: building-units(1);
+    }
+
+    &.hover,
+    &:hover {
+      background-color: $footer-navigation-hover-color;
+    }
+
+
+    &.active,
+    &:active {
+      background-color: $footer-navigation-hover-color;
+    }
+  }
+}
+
+.brand-footer-bar {
+  padding-top: building-units(1.5);
+  padding-bottom: building-units(1.5);
+
+  .brand-logo {
+    padding-top: building-units(.5);
+    padding-bottom: building-units(.5);
+  }
+
+  .brand-claim {
+    margin-top: 20px;
+  }
+}
+
+.brand-footer-bar-text {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+.brand-footer-bar-condensed {
+  padding-top: building-units(1);
+  padding-bottom: building-units(1);
+}
+
+.brand-footer-bar-brandbar {
+  padding-top: building-units(1);
+  padding-bottom: 27px;
+}
+
+.brand-footer-social {
+  padding-bottom: building-units(3);
+  padding-top: building-units(1);
+
+  @media (min-width: #{$grid-medium-min}px) {
+    padding-bottom: building-units(.5);
+  }
+
+  .nav > li > a > img {
+    height: building-units(2.5);
+    vertical-align: middle;
+  }
+}