doc-msp-theme 0.1.0

data/_sass/_tables.md

@@ -0,0 +1,405 @@
+<!--
+//
+//
+// Tabellen
+-->
+
+Grundsätzlich wird in HTML zwischen Layout- und Inhaltstabellen unterschieden. Im Folgenden werden ausschließlich Inhaltstabellen beschriebenen.
+
+Die Wurzel einer vollständigen Tabelle wird dabei durch das `<table>`-Tag abgebildet und mit der CSS-Klasse `.table` versehen. Das erste Element ist die Tabellenüberschrift `<caption>` es sollte sinnvoll den Inhalt der Tabelle wiedergeben.
+Es wird unterstrichen über der Tabelle dargestellt. Das zweite Element ist der Tabellenkopf `<thead>`. Hier befinden sich die Titel der einzelnen Spalten. Im `<tbody>` wird der Tabelleninhalt festgelegt. Den Abschluss bildet das vierte Element  `<tfoot>`.
+Hier können Summen oder Zusammenfassungen fesgehalten werden. Wird eine längere Beschreibung benötigt, kann diese in Form eines Absatzes `<p>` unter die Tabelle geschrieben werden.
+
+<div class="tc-note">
+**Anmerkung Style und Barrierefreiheit:**
+Auf verbundene Tabellenzellen sollte verzichtet werden.
+Dies ist im Styleguide nicht vorgesehen und wird auch von vielen
+Unterstützungstechnologien nicht erkannt.
+Stattdessen sollten die Werte in jeder Zeile bzw. Spalte
+erneut aufgeführt werden.
+</div>
+
+<div class="tc-example">
+  <table class="table">
+    <caption>Tabellenüberschrift</caption>
+    <thead>
+        <tr>
+          <th><span class="sr-only">Index Spalte</span></th>
+          <th>Titel</th>
+          <th>Beschreibung</th>
+        </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>999</td>
+        <td>Lorem ipsum dolor sit amet</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+      <tr>
+        <td>999</td>
+        <td>Lorem ipsum dolor sit amet</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+      <tr>
+        <td>999</td>
+        <td>Lorem ipsum dolor sit amet</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td><span class="sr-only">Index Spalte</span></td>
+        <td class="text-semibold">Total</td>
+        <td class="text-semibold">Total</td>
+        </tr>
+    </tfoot>
+  </table>
+  <p class="text-small">
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
+    diam nonumy eirmod takimata sanctus est Lorem ipsum dolor sit amet.
+    Lorem ipsum dolor sit amet, consetetur sadipscing
+  </p>
+</div>
+
+```html
+<table class="table">
+  <caption>Tabellenüberschrift</caption>
+  <thead>...</thead>
+  <tbody>...</tbody>
+  <tfoot>...</tfoot>
+</table>
+<p class="text-small">
+  ...
+</p>
+```
+
+<div class="tc-note">
+**Anmerkung Barrierefreiheit:**
+Ist eine Index-Spalte vorgesehen sollte diese für Unterstützungstechnologien
+separat ausgezeichnet werden da der visuelle Kontext hier nicht gegeben ist.
+Beispiel: `<th><span class="sr-only">Index Spalte</span></th>`
+</div>
+
+##Variationen
+
+### Kleine Tabelle
+
+Bei Platzmangel empfliehlt sich die Verwendung der kleinen Tabellenvariante `.table-small`. Wird diese CSS-Klasse angewendet, erscheint die Tabelle komprimierter:
+
+<div class="tc-example">
+  <table class="table table-small">
+    <caption>Tabellenüberschrift</caption>
+    <thead>
+        <tr>
+          <th><span class="sr-only">Index Spalte</span></th>
+          <th>Titel</th>
+          <th>Beschreibung</th>
+        </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>999</td>
+        <td>Lorem ipsum dolor sit amet</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+      <tr>
+        <td>999</td>
+        <td>Lorem ipsum dolor sit amet</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+      <tr>
+        <td>999</td>
+        <td>Lorem ipsum dolor sit amet</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td><span class="sr-only">Index Spalte</span></td>
+        <td class="text-semibold">Total</td>
+        <td class="text-semibold">Total</td>
+      </tr>
+    </tfoot>
+  </table>
+</div>
+
+```html
+<table class="table table-small">
+...
+</table>
+```
+
+### Numerische Spalten
+
+Eine übersichtliche Darstellung von Summen ist wichtig. Hierfür ist die CSS-Klasse `.numeric` vorgesehen. Sie kann nur auf die Tags `<td>`-Tag und das `<th>`-Tag angewendet werden und sorgt dafür, dass die Zahlen rechtsbündig erscheinen. Aufgrund der HTML-Anatomie muss die Klasse auf jede einzelne Tabellenzelle mit numerischem Inhalt angewendet werden:
+
+<div class="tc-example">
+  <table class="table">
+    <thead>
+        <tr>
+          <th>#</th>
+          <th>Produkt</th>
+          <th>Beschreibung</th>
+          <th><span class="sr-only">Preis Spalte</span></th>
+        </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>12345</td>
+        <td>Lorem ipsum</td>
+        <td>Lorem ipsum dolor sit amet</td>
+        <td class="numeric">1,24 €</td>
+      </tr>
+      <tr>
+        <td>12345</td>
+        <td>Lorem ipsum</td>
+        <td>Lorem ipsum dolor sit amet</td>
+        <td class="numeric">1,24 €</td>
+      </tr>
+      <tr>
+        <td>12345</td>
+        <td>Lorem ipsum</td>
+        <td>Lorem ipsum dolor sit amet</td>
+        <td class="numeric">1,24 €</td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td colspan="4" class="numeric text-brand text-semibold">
+          Summe:&ensp;3,72 €
+        </td>
+      </tr>
+    </tfoot>
+  </table>
+</div>
+
+```html
+<table class="table">
+  <thead>...</thead>
+  <tbody>
+    ...
+    <tr>
+      <td>12345</td>
+      <td>Lorem ipsum</td>
+      <td>Lorem ipsum dolor sit amet</td>
+      <td class="numeric">1,24 €</td>
+    </tr>
+    ...
+  </tbody>
+  <tfoot>
+    <tr>
+      <td colspan="4" class="numeric text-brand text-semibold">
+        Summe:&ensp;3,72 €
+      </td>
+    </tr>
+  </tfoot>
+</table>
+```
+
+##Dekorationen
+
+###Alternierende Tabelle
+
+Um Tabellenzeilen besser voneinander zu unterscheiden und das Lesen zu erleichtern, gibt es die _Alternierende_-Variante. Er wird über die CSS-Klasse `.table-striped` angewendet und sorgt dafür, dass jede zweite Zeile eine andere Hintergrundfarbe bekommt:
+
+<div class="tc-example">
+  <table class="table table-striped">
+    <thead>
+        <tr>
+          <th><span class="sr-only">Index Spalte</span></th>
+          <th>Titel</th>
+          <th>Beschreibung</th>
+        </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>999</td>
+        <td>Lorem ipsum dolor sit amet</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+      <tr>
+        <td>999</td>
+        <td>Lorem ipsum dolor sit amet</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+      <tr>
+        <td>999</td>
+        <td>Lorem ipsum dolor sit amet</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+```html
+<table class="table table-striped">
+...
+</table>
+```
+
+###Hover
+
+Mit der CSS-Klasse `.hover` wird eine Interaktion mit der Maus sichtbar gemacht. Berührt man eine Zeile mit dem Mauszeiger, wird sie speziell hervorgehoben. Dieser Effekt wirkt sich nur auf Zeilen des `<tbody>` aus:
+
+<div class="tc-example">
+  <table class="table table-hover">
+    <thead>
+        <tr>
+          <th><span class="sr-only">Index Spalte</span></th>
+          <th>Titel</th>
+          <th>Beschreibung</th>
+        </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>999</td>
+        <td>Lorem ipsum dolor sit amet</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+      <tr>
+        <td>999</td>
+        <td>Lorem ipsum dolor sit amet</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+      <tr>
+        <td>999</td>
+        <td>Lorem ipsum dolor sit amet</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+```html
+<table class="table table-hover">
+...
+</table>
+```
+
+###Responsive Tabellen
+
+Da sich Tabellen nicht richtig responsive umbrechen lassen gibt es eine
+Hilfs-Klasse ´.table-responsive´ die um eine Tabelle herum angewendet
+werden kann.
+
+<div class="tc-example">
+  <div class="table-responsive">
+    <table class="table">
+      <thead>
+          <tr>
+            <th><span class="sr-only">Index Spalte</span></th>
+            <th>Titel</th>
+            <th>Beschreibung</th>
+          </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>999</td>
+          <td>Lorem ipsum dolor sit amet</td>
+          <td>Lorem ipsum dolor sit amet</td>
+        </tr>
+        <tr>
+          <td>999</td>
+          <td>Lorem ipsum dolor sit amet</td>
+          <td>Lorem ipsum dolor sit amet</td>
+        </tr>
+        <tr>
+          <td>999</td>
+          <td>Lorem ipsum dolor sit amet</td>
+          <td>Lorem ipsum dolor sit amet</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+```html
+<div class="table-responsive">
+  <table class="table">
+  ...
+  </table>
+</div>
+```
+
+<!-- // Enfallen bis eine Einigung über Farben erzielt wurde - 2015-03-19
+### Funktionale Betonungen
+
+Tabellenzellen oder Tabellenzeilen können farblich hervorgehoben werden, wenn sie eine bestimmte Bedeutung haben. Hierfür gibt es parallel zu den Textauszeichnungen spezielle CSS-Klassen, welche diesen Effekt ermöglichen und für eine einheitliche Darstellung sorgen:
+
+<div class="tc-example">
+  <table class="table">
+    <thead>
+        <tr>
+          <th>#</th>
+          <th>Beschreibung</th>
+          <th>Inhalt</th>
+        </tr>
+    </thead>
+    <tbody>
+      <tr class="positive">
+        <td>999</td>
+        <td>Erfolgreich</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+      <tr>
+        <td>999</td>
+        <td>&nbsp;</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+      <tr class="warning">
+        <td>999</td>
+        <td>Warnung</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+      <tr>
+        <td>999</td>
+        <td>&nbsp;</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+      <tr class="negative">
+        <td>999</td>
+        <td>Erfolglos</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+      <tr>
+        <td>999</td>
+        <td>&nbsp;</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+      <tr class="brand">
+        <td>999</td>
+        <td>Marke</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+      <tr>
+        <td>999</td>
+        <td>&nbsp;</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+      <tr class="inactive">
+        <td>999</td>
+        <td>Inaktiv</td>
+        <td>Lorem ipsum dolor sit amet</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+```html
+<tr class="positive">...</tr>
+<tr class="warning">...</tr>
+<tr class="negative">...</tr>
+<tr class="brand">...</tr>
+<tr class="inactive">...</tr>
+```
+
+<div class="tc-note">
+**Anmerkung Barrierefreiheit:**
+Die eingesetzten Farben haben meist eine Bedeutung. Um diese Bedeutung auch
+beim Einsatz von Unterstützungstechnologien zu untermauern sollte der Text
+in den Tabellenzellen auch entsprechende Aussage haben. Alternativ kann
+zusätzlicher versteckter Text mit entsprechender Aussage durch
+die CSS-Klasse `.sr-only´ hinterlegt werden.
+</div>
+
+-->

data/_sass/_tables.scss

@@ -0,0 +1,131 @@
+.table {
+  width: 100%;
+
+  > thead,
+  > tbody,
+  > tfoot {
+    > tr {
+
+      > th,
+      > td {
+        padding: $table-padding;
+        vertical-align: top;
+        border-bottom: $table-row-border-bottom;
+      }
+
+      > th.numeric,
+      > td.numeric {
+        text-align: right;
+      }
+
+      > th {
+        text-align: left;
+      }
+    }
+  }
+
+  // set header & footer font weight
+  > thead,
+  > tfoot {
+    > tr > th {
+      font-weight: $font-weight-semibold;
+    }
+  }
+
+  // align header text to bottom and header borders
+  > thead > tr > th {
+    border-bottom: $table-header-border-bottom;
+    border-top: 0;
+    vertical-align: bottom;
+  }
+
+  // set footer borders
+  > tfoot > tr > th {
+    border-top: $table-footer-border-top;
+    border-bottom: $table-footer-border-bottom;
+  }
+
+  // common table caption
+  > caption {
+    text-align: left;
+    font-size: $table-caption-font-size;
+    padding: $table-padding;
+    border-bottom: $table-header-border-bottom;
+    margin-bottom: building-units(1);
+  }
+}
+
+.table-hover {
+  > tbody > tr {
+    > th,
+    > td {
+      @include transition(all $transition-time-out $transition-function);
+    }
+  }
+
+  > tbody > tr:hover {
+    > th,
+    > td {
+      color: $table-font-color-hover;
+      background-color: $table-bgr-color-hover;
+      @include transition($transition-time-in, '-duration');
+    }
+  }
+}
+
+.table-striped {
+  @include table-striped-variant($table-gray-odd-font-color, $table-gray-odd-bgr-color);
+}
+
+@include table-row-variant('positive', $table-font-color-positive, $table-bgr-color-positive, $background-color-regular);
+@include table-row-variant('warning', $table-font-color-warning, $table-bgr-color-warning, $background-color-regular);
+@include table-row-variant('negative', $table-font-color-negative, $table-bgr-color-negative, $background-color-regular);
+@include table-row-variant('brand', $table-font-color-brand, $table-bgr-color-brand, $background-color-regular);
+@include table-row-variant('inactive', $table-font-color-inactive, $table-bgr-color-inactive, $background-color-regular);
+
+.table-small {
+  > thead,
+  > tbody,
+  > tfoot {
+    > tr {
+      > th,
+      > td {
+        font-size: $font-size-xsmall;
+        padding: $table-padding-small;
+      }
+    }
+  }
+
+  > caption {
+    font-size: $font-size-regular;
+  }
+}
+
+.table-responsive {
+  overflow-x: auto;
+  min-height: .01%; // Workaround for IE9 bug
+
+  @media (max-width: #{$grid-extra-small-max}px) {
+    width: 100%;
+    overflow-y: hidden;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    border: 1px solid $table-row-border-bottom;
+
+    .table {
+      margin-bottom: 0;
+
+      // Ensure the content doesn't wrap
+      > thead,
+      > tbody,
+      > tfoot {
+        > tr {
+          > th,
+          > td {
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+
+  }
+}