doc-msp-theme 0.1.0

data/_sass/_pagination.md

@@ -0,0 +1,49 @@
+<!--
+//
+//
+// Pagination
+-->
+
+Soll der Benutzer durch eine Reihe von Pages, Screens oder Bildern
+geführt werden hilft die `.pagination` weiter. Die Klasse `.active` auf
+einem Listenelement zeigt an, auf welcher Seite sich der Benutzer
+gerade befindet. Sind Seiten inaktiv kann dem Listenelement die Klasse
+`.disabled` zugeordnet werden:
+
+<div class="tc-note">
+  **Anmerkung:**
+  Das Beispliel verwendet die Zentrierhelfer Komponente für die horizontale Ausrichtung
+</div>
+
+
+<div class="tc-example">
+  <div class="h-center">
+    <ul class="pagination">
+      <li><a href="#"><span class="sr-only">Seite 1</span></a></li>
+      <li><a href="#"><span class="sr-only">Seite 2</span></a></li>
+      <li><a href="#"><span class="sr-only">Seite 3</span></a></li>
+      <li class="active"><a href="#"><span class="sr-only">Seite 4 aktiv</span></a></li>
+      <li><a href="#"><span class="sr-only">Seite 5</span></a></li>
+      <li><a href="#"><span class="sr-only">Seite 6</span></a></li>
+      <li><a href="#"><span class="sr-only">Seite 7</span></a></li>
+      <li class="disabled" role="presentation"><a href="#"><span class="sr-only">Seite 8 inaktiv</span></a></li>
+      <li class="disabled" role="presentation"><a href="#"><span class="sr-only">Seite 9 inaktiv</span></a></li>
+    </ul>
+  </div>
+</div>
+
+```html
+<div class="h-center">
+  <ul class="pagination">
+      <li><a href="#"><span class="sr-only">Seite 1</span></a></li>
+      <li><a href="#"><span class="sr-only">Seite 2</span></a></li>
+      <li><a href="#"><span class="sr-only">Seite 3</span></a></li>
+      <li class="active"><a href="#"><span class="sr-only">Seite 4 aktiv</span></a></li>
+      <li><a href="#"><span class="sr-only">Seite 5</span></a></li>
+      <li><a href="#"><span class="sr-only">Seite 6</span></a></li>
+      <li><a href="#"><span class="sr-only">Seite 7</span></a></li>
+      <li class="disabled" role="presentation"><a href="#"><span class="sr-only">Seite 8 inaktiv</span></a></li>
+      <li class="disabled" role="presentation"><a href="#"><span class="sr-only">Seite 9 inaktiv</span></a></li>
+  </ul>
+</div>
+```

data/_sass/_pagination.scss

@@ -0,0 +1,95 @@
+//
+// Pagination
+// ----------------------------------------
+
+.pagination {
+  display: inline-block;
+  padding-left: 0;
+  margin: 0 ($pagination-gutter / 2 * -1);
+
+  > li {
+    display: inline;
+
+    > a {
+      float: left;
+      display: block;
+      width: $pagination-width;
+      height: $pagination-height;
+      margin: 0 ($pagination-gutter / 2);
+      border-radius: 50%;
+      background-color: $pagination-bgr-color;
+      border: 1px solid $pagination-border-color;
+      @include transition(all $transition-time-out $transition-function);
+    }
+  }
+
+  > li > a {
+
+    &.focus,
+    &:focus {
+      background-color: hsv-darken($pagination-bgr-color, 21%, true);
+      border-color: hsv-darken($pagination-border-color, 21%, true);
+      outline: 0;
+    }
+
+    &.hover,
+    &:hover {
+      background-color: hsv-darken($pagination-bgr-color, 7%, true);
+      border-color: hsv-darken($pagination-border-color, 7%, true);
+      @include transition($transition-time-in, '-duration');
+    }
+
+    &.active,
+    &:active {
+      background-color: hsv-darken($pagination-bgr-color, 15%, true);
+      border-color: hsv-darken($pagination-border-color, 15%, true);
+    }
+
+  }
+
+  > .active > a {
+    background-color: $pagination-active-bgr-color;
+    border-color: $pagination-active-border-color;
+    overflow: hidden;
+
+    &:before {
+      content: url('data:image/gif;base64,R0lGODdhDAAMAKUiAOYgheYhhuYihuYih+Yjh+YjiOYkh+YkiOYliOYlieYmiOYmieYniecniecniuYoiucoiecoiuYpiucpiucqiucqi+cri+csjOctjOcujecvjecvjucwjugxj+gyj+g0kOg1kOg1kf///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////ywAAAAADAAMAAAGXUAE4lAYBACAAOFwEB4IRqSS6YQGroKls3gNZJsJptWrXSzEAnKT8XgQ3oOvgiGpVN54A4JuuVzwTXMPFhgaGwVMCQ0QERQYHB4eiQ0RExQWGR0fIIkOlRWYHiAhQQA7');
+      line-height: $pagination-height;
+      vertical-align: super;
+    }
+
+    &.focus,
+    &:focus {
+      background-color: hsv-darken($pagination-active-bgr-color, 21%, true);
+      border-color: hsv-darken($pagination-active-border-color, 21%, true);
+    }
+
+    &.hover,
+    &:hover {
+      background-color: hsv-darken($pagination-active-bgr-color, 7%, true);
+      border-color: hsv-darken($pagination-active-border-color, 7%, true);
+    }
+
+    &.active,
+    &:active {
+      background-color: hsv-darken($pagination-active-bgr-color, 15%, true);
+      border-color: hsv-darken($pagination-active-border-color, 15%, true);
+    }
+  }
+
+  > .disabled {
+    > a,
+    > a:hover,
+    > a:focus,
+    > a:active {
+      background-color: $pagination-disabled-bgr-color;
+      border-color: $pagination-disabled-border-color;
+      cursor: not-allowed;
+    }
+  }
+
+}
+
+.pagination-small {
+  @include pagination-variant($pagination-width-small, $pagination-height-small, $pagination-gutter-small);
+}

data/_sass/_qtip.md

@@ -0,0 +1,74 @@
+<!--
+//
+//
+// Tooltip
+-->
+
+Tooltips sind immer dann nützlich, wenn zusätzliche Informationen vorliegen die beschreibend oder zweitrangig sind.
+Um diese Informationen im Kontext und bei Interaktion einzublenden kann das
+jQuery-Plugin `qtip()` verwendet werden.
+
+<div class="tc-note tc-note-info">
+**Info:**
+Es handelt sich dabei um das freie Plugin qTip2 (http://qtip2.com/).
+Alle Optionen, Events und andere Möglichkeiten können in der Dokumentation
+des Plugins nachgelesen werden.
+</div>
+
+Es wird direkt auf das Interaktionselement angewendet:
+
+```js
+$(document).ready(function() {
+  $('#my-tooltip').qtip()
+})
+```
+
+<div class="tc-example">
+  <p>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+    sed diam nonumy eirmod tempor invidunt ut labore et
+    dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet,
+    consetetur sadipscing elitr, sed diam nonumy eirmod
+    tempor invidunt ut <a href="#" id="my-tooltip" title="This is a tooltip">labore</a> et dolore magna aliquyam
+    erat, sed diam voluptua.
+  </p>
+</div>
+
+```html
+<a href="#" id="my-tooltip" title="This is a tooltip">labore</a>
+```
+
+### Info-Flags
+
+```js
+$(document).ready(function() {
+  $('#my-info-flag').qtip({
+      content: {
+          title: 'Info Flag',
+          text: 'Info Flags are plain text...'
+      }
+  })
+})
+```
+
+<div class="tc-example">
+  <p>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+    sed diam nonumy eirmod tempor invidunt ut labore et
+    dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet,
+    consetetur sadipscing elitr, sed diam nonumy eirmod
+    tempor invidunt ut <a href="#" id="my-info-flag" title="This is a tooltip">labore</a> et dolore magna aliquyam
+    erat, sed diam voluptua.
+  </p>
+</div>
+
+```html
+<a href="#" id="my-info-flag">labore</a>
+```
+
+<div class="tc-note">
+**Anmerkung Barrierefreiheit:**
+Da Tooltips meist nur über Maus-Interaktionen aktiv werden sollten darin
+nur unwichtige oder unterstützende Informationen hinterlegt sein.
+Tooltips sollten nicht Voraussetzung für die Benutzerführung sein.
+</div>

data/_sass/_qtip.scss

@@ -0,0 +1,175 @@
+//
+// QTip2 Vendor JavaScript - Styling
+// ----------------------------------------
+
+.qtip {
+  position: absolute;
+  left: -28000px;
+  top: -28000px;
+  display: none;
+
+  max-width: 280px;
+  min-width: 50px;
+
+//  font-size: 10.5px; // qtip defaults, not needed
+//  line-height: 12px; // qtip defaults, not needed
+
+  direction: ltr;
+
+  box-shadow: none;
+  padding: 0;
+}
+
+.qtip-content {
+  position: relative;
+//  padding: 5px 9px; // qtip defaults, not needed
+  overflow: hidden;
+
+  text-align: left;
+  word-wrap: break-word;
+}
+
+.qtip-titlebar {
+  position: relative;
+//  padding: 5px 35px 5px 10px; // qtip defaults, not needed
+  overflow: hidden;
+
+  border-width: 0 0 1px;
+//  font-weight: bold; // qtip defaults, not needed
+
+  + .qtip-content {
+    border-top-width: 0 !important;
+  }
+}
+
+// Default close button class
+.qtip-close {
+  position: absolute;
+  right: -9px;
+  top: -9px;
+  z-index: 11; // Overlap .qtip-tip
+
+  cursor: pointer;
+  outline: medium none;
+
+  border: 1px solid transparent;
+
+  .qtip-titlebar & {
+    right: 4px;
+    top: 50%;
+    margin-top: -9px;
+  }
+}
+
+* html .qtip-titlebar .qtip-close { top: 16px; } // IE fix
+
+.qtip-titlebar .ui-icon,
+.qtip-icon .ui-icon {
+  display: block;
+  text-indent: -1000em;
+  direction: ltr;
+}
+
+.qtip-icon,
+.qtip-icon .ui-icon {
+  border-radius: 3px;
+  text-decoration: none;
+}
+
+.qtip-icon .ui-icon {
+  width: 18px;
+  height: 14px;
+
+  line-height: 14px;
+  text-align: center;
+  text-indent: 0;
+  font: normal bold 10px/13px Tahoma,sans-serif;
+
+  color: inherit;
+  background: transparent none no-repeat -100em -100em;
+}
+
+// Applied to 'focused' tooltips e.g. most recently displayed/interacted with
+// .qtip-focus {}
+
+// Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively
+// .qtip-hover {}
+
+// Default tooltip style - Telekom Components style
+.qtip-default {
+  background-color: #262626;
+  background-color: rgba(0, 0, 0, .85);
+
+  color: #fff;
+  border: 0 solid transparent; // important for Tip-Extension
+  border-radius: 4px;
+
+  font-size: 15px;
+
+  .qtip-titlebar {
+    font-size: 18px;
+    font-weight: bold;
+    padding: 7px 12px 0;
+    background-color: transparent;
+
+    .qtip-close {
+      border-color: #aaa;
+      color: #111;
+    }
+
+    .ui-state-hover {
+      border-color: #303030;
+    }
+
+    + .qtip-content {
+      padding-top: 0;
+    }
+  }
+
+  .qtip-content {
+    padding: 9px 12px;
+  }
+
+  .qtip-icon {
+    background: #f1f1f1;
+    border-color: #222;
+    text-shadow: none;
+    color: #777;
+  }
+}
+
+
+// Tip-extension
+.qtip .qtip-tip {
+  margin: 0 auto;
+  overflow: hidden;
+  z-index: 10;
+}
+
+// Opera bug #357 - Incorrect tip position
+// https://github.com/Craga89/qTip2/issues/367
+x:-o-prefocus, .qtip .qtip-tip {
+  visibility: hidden;
+}
+
+.qtip .qtip-tip,
+.qtip .qtip-tip .qtip-vml,
+.qtip .qtip-tip canvas {
+  position: absolute;
+
+  color: #123456;
+  background: transparent;
+  border: 0 dashed transparent;
+}
+
+.qtip .qtip-tip canvas {
+  top: 0;
+  left: 0;
+}
+
+.qtip .qtip-tip .qtip-vml {
+  // scss-lint:disable UrlQuotes, PropertySpelling, UrlFormat, HexValidation
+  behavior: url(#default#VML);
+  display: inline-block;
+  visibility: visible;
+}

data/_sass/_radio.md

@@ -0,0 +1,53 @@
+# Radio
+
+Da Radiobuttons meist in Gruppen auftreten sollten diese nur innerhalb eines `<fieldset>`  vorkommen um so deren Zusammengehörigkeit zu visualisieren. Der `<legend>`-Tag beinhaltet dabei die Beschreibung der Gruppe.
+ 
+Ein einzelener Radio-Button wird mit dem `<input type="radio">`-Tag erzeugt. Die CSS-Klasse `.form-radio` verleiht ihm das Grundgerüst und die grundelegenden Eigenschaften die alle Browser gemeinsam abbilden können.
+
+Für eine optimale Darstellung gibt es auch für Radiobuttons ein jQuery-Plugin:
+
+```javascript
+$('.form-radio').radio()
+```
+
+<div class="tc-example" role="application">
+  <fieldset class="form-fieldset">
+    <legend>Gruppen Beschriftung</legend>
+      <div class="form-radio-set">
+        <label>
+          <input type="radio" name="rb" value="rb1" class="form-radio">foo
+        </label>
+      </div>
+      <div class="form-radio-set">
+        <label>
+          <input type="radio" name="rb" value="rb2" class="form-radio" checked>bar
+        </label>
+      </div>
+      <div class="form-radio-set">
+        <label>
+          <input type="radio" name="rb" value="rb3" class="form-radio" disabled>Inaktiv
+        </label>
+      </div>
+  </fieldset>
+</div>
+
+```html
+<fieldset class="form-fieldset">
+  <legend>Gruppen Beschriftung</legend>
+    <div class="form-radio-set">
+      <label>
+        <input type="radio" name="rb" value="rb1" class="form-radio">foo
+      </label>
+    </div>
+    <div class="form-radio-set">
+      <label>
+        <input type="radio" name="rb" value="rb2" class="form-radio" checked>bar
+      </label>
+    </div>
+    <div class="form-radio-set">
+      <label>
+        <input type="radio" name="rb" value="rb3" class="form-radio" disabled>Inaktiv
+      </label>
+    </div>
+</fieldset>
+```