doc-msp-theme 0.1.0

data/_sass/_notifications.md

@@ -0,0 +1,211 @@
+<!--
+//
+//
+// Benachrichtigungen
+-->
+
+In Anwenungen sind Rückmeldungen an einen Benutzer unerlässlich.
+Zur Erstellung solcher Benachrichtigungen steht die CSS-Klasse `.notification`
+zur Verfügung. Die Nachricht sollte dabei in den Container
+`.notification-content` geschrieben werden. Überschriften haben
+die CSS-Klasse `.notification-heading`:
+
+<div class="tc-example">
+    <div class="notification">
+        <div class="notification-content">
+            <div class="notification-heading">Regular</div>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia.
+        </div>
+    </div>
+</div>
+
+```html
+<div class="notification">
+    <div class="notification-content">
+        <div class="notification-heading">Regular</div>
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia.
+    </div>
+</div>
+```
+
+## Funktionale Dekorationen
+
+Um die Bedeutungen von Benachrichtigungen zu unterstützen
+stehen verschiedene Farb-Varianten zur Verfügung:
+
+<div class="tc-example">
+    <div class="notification notification-positive">
+        <div class="notification-content">
+            <div class="notification-heading">Positive</div>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia.
+        </div>
+    </div>
+    <div class="notification notification-warning">
+        <div class="notification-content">
+            <div class="notification-heading">Warning</div>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia.
+        </div>
+    </div>
+    <div class="notification notification-negative">
+        <div class="notification-content">
+            <div class="notification-heading">Negative</div>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia.
+        </div>
+    </div>
+</div>
+
+```html
+<div class="notification notification-positive">...</div>
+<div class="notification notification-warning">...</div>
+<div class="notification notification-negative">...</div>
+```
+
+## Overlay Dekoration
+
+Werden Benachrichtigungen über anderem Inhalt angezeigt sollte dies auch
+visuell vermittelt werden. Hierfür ist die CSS-Klasse `.notification-overlay`
+zuständig:
+
+<div class="tc-example">
+    <div class="notification notification-overlay">
+        <div class="notification-content">
+            <div class="notification-heading">Overlay</div>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia.
+        </div>
+    </div>
+</div>
+
+```html
+<div class="notification">
+    <div class="notification-content notification-overlay">
+        <div class="notification-heading">Overlay</div>
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia.
+    </div>
+</div>
+```
+
+## Zusätzlicher Inhalt
+
+Um den Inhalt einer Benachrichtigungen nochmals zu verdeutlichen kann
+zusätzlicher Inhalt in Form eines Icons oder eines Bildes in die
+Benachrichtigung integriert werden. Der zusätzliche Inhalt kann mit der
+CSS-Klasse `.notification-left` vor und mit der CSS-Klasse `.notification-right`
+hinter dem Inhalt platziert werden:
+
+<div class="tc-example">
+    <div class="notification">
+        <div class="notification-left">
+            <div class="icon-frame"><i class="icon icon-comment icon-large"></i></div>
+        </div>
+        <div class="notification-content">
+            <div class="notification-heading">Icon</div>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia.
+        </div>
+    </div>
+    <div class="notification">
+        <div class="notification-left">
+            <div class="img-frame"><img class="img-thumbnail" src="assets/play.jpg" alt="spielende Kinder"/></div>
+        </div>
+        <div class="notification-content">
+            <div class="notification-heading">Image</div>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia.
+        </div>
+    </div>
+</div>
+
+```html
+<!-- Icon -->
+<div class="notification">
+    <div class="notification-left">
+        <div class="icon-frame"><i class="icon icon-comment icon-large"></i></div>
+    </div>
+    <div class="notification-content">
+      ...
+    </div>
+</div>
+
+<!-- Bild -->
+<div class="notification">
+    <div class="notification-left">
+        <div class="img-frame"><img class="img-thumbnail" src="assets/play.jpg" alt="spielende Kinder"/></div>
+    </div>
+    <div class="notification-content">
+      ...
+    </div>
+</div>
+```
+
+<div class="tc-note">
+**Anmerkung:**
+Besondere Beachtung sollte dabei den CSS-Klassen `.icon-frame` und
+`.img-frame` geschenkt werden in denen jeweils kein Zeilenumbruch
+und Leerzeichen enthalten sein sollten
+</div>
+
+## Schließbare Benachrichtigungen
+
+Die Schließen-Funktion benötigt das JavaScript `notification`-Plugin.
+
+<div class="tc-example">
+    <div class="notification notification-dismissible fade in">
+        <button type="button" class="close" data-dismiss="notification">
+            <span aria-hidden="true">x</span>
+            <span class="sr-only">Schließen</span>
+        </button>
+        <div class="notification-content">
+            <div class="notification-heading">Schließen</div>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia.
+        </div>
+    </div>
+</div>
+
+### Verwendung
+
+Zunächst wird natürlich ein Schließen-Button benötigt. Hierfür sollte
+das Mikro-Modul `.close` verwendet werden.
+Über das Attribut `data-dismiss="notification"` wird die Schließen-Funktionalität
+aktiviert:
+
+```html
+<div class="notification notification-dismissible">
+    <button type="button" class="close" data-dismiss="notification">
+        <span aria-hidden="true">x</span>
+        <span class="sr-only">Schließen</span>
+    </button>
+    <div class="notification-content">
+        <div class="notification-heading">Schließen</div>
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed dia.
+    </div>
+</div>
+```
+
+Um das Schließen zu Animieren müssen die CSS-Klassen `.fade` und `.in` bereits
+auf die Benachrichtigung angewendet sein.
+
+**Methoden**
+
+Schließen einer Benachrichtigung
+```js
+$().notification('close')
+```
+Die Benachrichtigung wird komplett aus dem DOM entfernt.
+
+<table class="table table-small">
+  <caption>Events</caption>
+  <thead>
+    <tr>
+      <th>Typ</th>
+      <th>Beschreibung</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>close.tc.modal</td>
+      <td>Dieses Event tritt noch vor dem eigentlichen Schließen des Modal-Dialogs auf.</td>
+    </tr>
+    <tr>
+      <td>closed.tc.modal</td>
+      <td>Dieses Event tritt auf, wenn der Modal-Dialog fertig geschlossen wurde.</td>
+    </tr>
+  </tbody>
+</table>

data/_sass/_notifications.scss

@@ -0,0 +1,110 @@
+//
+// Notifications
+// ----------------------------------------
+
+.notification {
+  background-color: fallback-rgba($notification-bgr-color, .05, $background-color-regular);
+  // background-color: rgba($notification-bgr-color, .05); since alpha is to low
+  border: 1px solid $notification-border-color;
+  border-radius: $notification-border-radius;
+  @include clearfix();
+  display: block;
+  margin-bottom: $notification-margin-bottom;
+  padding: $notification-padding;
+  text-align: left;
+  font-size: $notification-font-size;
+
+  &:empty {
+    display: none;
+  }
+
+}
+
+.notification-dismissible {
+  padding-right: building-units(4);
+
+  > .close {
+    margin-right: building-units(-3);
+    margin-top: -7px;
+    margin-left: building-units(1.5);
+
+    &.focus,
+    &:focus {
+      color: $notification-close-button-focus;
+      outline: 0;
+    }
+
+    &.hover,
+    &:hover {
+      color: $notification-close-button-hover;
+    }
+
+    &.active,
+    &:active {
+      color: $notification-close-button-active;
+    }
+
+  }
+}
+
+.notification-content,
+.notification-left,
+.notification-right {
+  overflow: hidden;
+  zoom: 1;
+}
+
+.notification-content > p {
+  padding: 0;
+  margin: 0;
+}
+
+.notification-left {
+  float: left;
+  margin-right: building-units(1);
+}
+
+.notification-right {
+  float: right;
+  margin-left: building-units(1);
+}
+
+.notification-heading {
+  font-size: $notification-heading-font-size;
+  font-weight: 400;
+  padding: 0;
+  margin: 0;
+}
+
+.notification-overlay {
+  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
+}
+
+.notification-positive {
+  @include notification-variant($color-positive, $color-positive);
+}
+
+.notification-warning {
+  @include notification-variant($color-warning, $color-warning);
+}
+
+.notification-negative {
+  @include notification-variant($color-negative, $color-negative);
+}
+
+.notification-badge {
+  float: right;
+  margin-top: building-units(-.5) + 1;
+  margin-right: building-units(-1);
+  background-color: $color-gray-dark;
+  color: #fff;
+}
+
+.notification .icon-frame {
+  padding: 7px 0 0;
+
+  .icon-large {
+    font-size: 42px;
+  }
+
+}

data/_sass/_pager.md

@@ -0,0 +1,67 @@
+<!--
+//
+//
+// Pager
+-->
+
+Eine komfortable Navigation zu angrenzenden Seiten, lässt sich mit Pager-Buttons
+umsetzen. Die `.pager`-Klasse lässt sich auf Buttons wie Links, gleichermaßen
+anwenden, um den jeweiligen Umständen semantisch gerecht werden zu können:
+
+
+<div class="tc-example">
+    <button class="pager">Pager</button>
+    <button class="pager pager-icon" title="next"><i class="icon icon-navigation-right" aria-hidden="true"></i></button>
+    <button class="pager"><i class="icon icon-navigation-left" aria-hidden="true"></i>Left</button>
+    <button class="pager">Right<i class="icon icon-navigation-right right" aria-hidden="true"></i></button>
+    <button class="pager pager-clean">Right<i class="icon icon-navigation-right right" aria-hidden="true"></i></button>
+</div>
+
+```html
+<button class="pager">Pager</button>
+<button class="pager pager-icon" title="next"><i class="icon icon-navigation-right" aria-hidden="true"></i></button>
+<button class="pager"><i class="icon icon-navigation-left" aria-hidden="true"></i>Icon Left</button>
+<button class="pager">Icon Right<i class="icon icon-navigation-right right" aria-hidden="true"></i></button>
+<button class="pager pager-clean">Right<i class="icon icon-navigation-right right" aria-hidden="true"></i></button>
+```
+
+### Size
+
+<div class="tc-example">
+    <button class="pager pager-small">Small</button>
+    <button class="pager">Regular</button>
+    <button class="pager pager-large">Large</button>
+</div>
+
+```html
+<button class="pager pager-small">Small</button>
+<button class="pager">Regular</button>
+<button class="pager pager-large">Large</button>
+```
+
+### Width
+
+<div class="tc-example">
+    <button class="pager pager-block">Grid Based</button>
+</div>
+
+```html
+<button class="pager pager-block">Grid Based</button>
+```
+
+
+### Aligned & Clean
+
+<div class="tc-example">
+<div class="clearfix">
+    <button class="pager pager-clean clean left"><i class="icon icon-navigation-left" aria-hidden="true"></i>Previous</button>
+    <button class="pager pager-clean right">Next<i class="icon icon-navigation-right right" aria-hidden="true"></i></button>
+</div>
+</div>
+
+```html
+<div class="clearfix">
+    <button class="pager pager-clean left"><i class="icon icon-navigation-left" aria-hidden="true"></i>Previous</button>
+    <button class="pager pager-clean right">Next<i class="icon icon-navigation-right right" aria-hidden="true"></i></button>
+</div>
+```

data/_sass/_pager.scss

@@ -0,0 +1,138 @@
+//
+// Pager
+// ----------------------------------------
+
+.pager {
+  border-radius: 3em;
+  @include transition(all $transition-time-out $transition-function);
+  background: $pager-background-color;
+  background-image: none;
+  border: 1px solid $pager-border-color;
+  color: $pager-text-color;
+  cursor: pointer;
+  display: inline-block;
+  font-weight: normal;
+  font-size: $font-size-regular; // prevent font-size inherit in other modules / scopes
+  line-height: $line-height-regular; // prevent line-height inherit in other modules / scopes
+  padding: $button-padding;
+  text-align: center;
+  vertical-align: bottom;
+  white-space: nowrap;
+  text-decoration: none;
+
+  &.right {
+    float: right;
+  }
+
+  &.left {
+    float: left;
+  }
+
+  > .icon {
+    padding-right: $button-icon-indent;
+    margin-left: -$button-icon-indent / 2;
+
+    &.right {
+      padding-left: $button-icon-indent;
+      padding-right: 0;
+      margin-left: 0;
+      margin-right: -$button-icon-indent / 2;
+    }
+  }
+
+  &.focus,
+  &:focus {
+    text-decoration: none;
+    @include tab-focus();
+  }
+
+  &.hover,
+  &:hover {
+    text-decoration: none;
+    background-color: hsv-darken($pager-background-color, 7%, true);
+    border-color: hsv-darken($pager-border-color, 7%, true);
+    @include transition($transition-time-in, '-duration');
+  }
+
+  &.active,
+  &:active {
+    text-decoration: none;
+    background-color: hsv-darken($pager-background-color, 15%, true);
+    border-color: hsv-darken($pager-border-color, 15%, true);
+  }
+
+  &.disabled,
+  &[disabled] {
+    cursor: not-allowed;
+    background: $pager-disabled-bgr-color;
+    border-color: $pager-disabled-border-color;
+    color: $pager-disabled-text-color;
+  }
+}
+
+.pager-small {
+  font-size: $pager-small-font-size;
+  padding: $pager-small-padding;
+}
+
+.pager-large {
+  font-size: $pager-large-font-size;
+  padding: $pager-large-padding;
+}
+
+.pager-icon {
+  padding: $pager-padding-minimal;
+  padding-left: 0;
+  padding-right: 0;
+  width: 36px;
+
+  &.pager-small {
+    width: 32px;
+  }
+
+  &.pager-large {
+    width: 48px;
+    height: 48px;
+
+    .icon {
+      font-size: 36px;
+      padding: 1px 0 0 2px;
+    }
+
+  }
+
+  .icon {
+    padding: 0;
+    margin-left: 0;
+    margin-right: 0;
+
+  }
+}
+
+.pager + .pager {
+  margin-left: building-units(2);
+}
+
+.pager-minimal {
+  padding: $pager-padding-minimal;
+}
+
+.pager-block {
+  width: 100%;
+}
+
+.pager-clean {
+  border-color: transparent;
+
+  &.hover,
+  &:hover {
+    text-decoration: none;
+    border-color: transparent;
+  }
+
+  &.active,
+  &:active {
+    text-decoration: none;
+    border-color: transparent;
+  }
+}