doc-msp-theme 0.1.0

data/_sass/_forms.md

@@ -0,0 +1,139 @@
+<!--
+//
+//
+// Formulare
+-->
+
+Der HTML-Standard bietet verschiedenste Eingabefelder. Aufgrund dieser Vielfalt können Elemente nur sinnvoll gestaltet werden, wenn sie individuell behandelt werden. Daher werden im folgenden Abschnitt die Eingabefelder der Komponenten im Detail betrachtet.
+
+## Texteingaben
+
+### Einfache Eingabefelder
+
+Die einfachste Form des Eingabefelds ist das `<input>`-Feld. HTML5 sieht hierfür verschiedenste Typen vor. Im einfachsten Fall handelt es sich dabei um den Typ `<input type="text">`. Durch die CSS-Klasse `.form-input` kann das gewünschte Aussehen und Verhalten angewendet werden.
+
+Da Eingabefelder immer in Kombination mit einer Beschriftung erscheinen sollten, werden sie mit einem `<div>`-Tag mit der CSS-Klasse `.form-input-set`
+ummantelt. Es schafft die Anordnung von Eingabefeld und Beschriftung:
+
+<div class="tc-example">
+  <div class="form-input-set">
+    <label for="text1">Standard Eingabefeld</label>
+    <input type="text" class="form-input" name="text1" id="text1" placeholder="Placeholder">
+  </div>
+</div>
+
+```html
+<div class="form-input-set"> 
+  <label for="text1">Standard Eingabefeld</label> 
+  <input type="text" class="form-input" name="text1" id="text1" placeholder="..."> 
+</div> 
+```
+
+<div class="tc-note tc-note-info">
+**Tipp:**
+Das Attribut <code>placehoder="Placeholder"</code> sorgt für das Erscheinen eines Platzhaltertextes, wenn das Element leer ist. So kann der Benutzer gezeigt werden, was dort einzutragen ist.
+Hinweis: Das Placeholder-Attribut ist im Internet-Explorer kleiner
+Version 9 nicht verfügbar.
+</div>
+
+### Mehrzeilige Eingabefelder
+
+Für lange Texte ist in HTML der `<textarea>`-Tag vorgesehen.
+Da die Eingabe dem einfachen Eingabefeld sehr ähnelt, kann ebenfalls die CSS-Klasse `.form-input` angewendet werden:
+
+<div class="tc-example">
+  <div class="form-input-set">
+    <label for="text2">Lange Texteingabe</label>
+    <textarea class="form-input" name="text2" id="text2">Lorem ipsum...
+    </textarea>
+  </div>
+</div>
+
+```html
+<div class="form-input-set">
+  <label for="text2">Lange Texteingabe</label>
+  <textarea class="form-input" name="text2" id="text2">Lorem ipsum...</textarea>
+</div>
+```
+
+### Funktionale Dekorationen
+
+Um dem Benutzer ein angemessenes Eingabe-Feedback zu bieten, werden verschiedene Dekorationen für Formularfelder angeboten. Die CSS-Klassen `.decoration-positive`,
+`.decoration-warning` und `.decoration-negative` werden dabei auf das umgebene `<div>`-Tag angewendet um auch das `<label>` beeinflussen zu können:
+
+<div class="tc-example">
+  <div class="form-input-set decoration-positive">
+    <label for="text3">Erfolgreich Eingabefeld</label>
+    <input type="text" class="form-input" name="text3" id="text3" placeholder="Placeholder">
+  </div>
+  <div class="form-input-set decoration-warning">
+    <label for="text4">Warnung Eingabefeld</label>
+    <input type="text" class="form-input" name="text4" id="text4" placeholder="Placeholder">
+  </div>
+  <div class="form-input-set decoration-negative">
+    <label for="text5">Erfolglos Eingabefeld</label>
+    <input type="text" class="form-input" name="text5" id="text5" placeholder="Placeholder">
+  </div>
+  <div class="form-input-set">
+    <label for="text6">Inaktives Eingabefeld</label>
+    <input type="text" class="form-input" name="text6" id="text6" placeholder="Placeholder" disabled="disabled">
+  </div>
+</div>
+
+```html
+<!-- Erfolgreich Eingabefeld --> 
+<div class="form-input-set decoration-positive">...</div> 
+ 
+<!-- Warnung Eingabefeld --> 
+<div class="form-input-set decoration-warning">...</div> 
+ 
+<!-- Erfolglos Eingabefeld --> 
+<div class="form-input-set decoration-negative">...</div> 
+ 
+<!-- Inaktiv Eingabefeld --> 
+<input type="text" class="form-input" name="text6" id="text6" disabled="disabled"> 
+```
+
+<div class="tc-note">
+**Anmerkung Barrierefreiheit:**
+Die eingesetzen Farben haben im Zusammenhang mit Eingabefeldern meist die 
+Funktion der visuellen Rückmeldung über eine getätigte Eingabe. Diese wird
+von Unterstützungstechnologien in der Regel nicht erkannt. Deshlab sollte zur
+visuellen Rückmeldung auch unbedingt eine textuelle Rückmeldung wie:
+"Dies ist ein Pflichtfeld, bitte geben Sie ihren Vornamen ein" oder ähnliches
+erfolgen.
+</div>
+
+### Fieldsets
+
+Um Eingabefelder logisch zusammenfassen ist das `<fieldset>`-Tag vorgesehen.
+Der `<legend>`-Tag sorgt dabei für die nötige Beschriftung der Gruppe:
+
+<div class="tc-example">
+  <fieldset class="form-fieldset">
+    <legend>Benutzerdaten</legend>
+    <div class="form-input-set">
+      <label for="text7">Login</label>
+      <input type="text" class="form-input" name="text7" id="text7" placeholder="Login">
+    </div>
+    <div class="form-input-set">
+      <label for="text8">Password</label>
+      <input type="password" class="form-input" name="text8" id="text8" placeholder="Password">
+    </div>
+  </fieldset>
+</div>
+
+```html
+<fieldset class="form-fieldset">
+  <legend>Benutzerdaten</legend>
+  ...
+</fieldset>
+```
+
+<div class="tc-note">
+**Anmerkung:**
+Das <code>fieldset</code> hat im Bezug auf die Größenberechnung je nach Browser unterschiedliche Verhalten.
+Ziel ist es meist, dass das Formular unabhängig von der umliegenden Seite in jedem Fall komplett und nicht
+bschnitten angezeigt wird. Das hat aber auch zur Folge, dass die CSS-Klasse `.text-ellipsed` innerhalb
+des <code>fieldset</code> nicht greift.
+</div>

data/_sass/_forms.scss

@@ -0,0 +1,199 @@
+//
+// Default Form Elements
+// ----------------------------------------
+
+label {
+  display: inline-block;
+}
+
+.form-input {
+  background-color: $input-bgr-color;
+  border: 1px solid $input-border-color;
+  border-radius: $input-border-radius;
+  color: $input-font-color;
+  display: block;
+  font-size: $font-size-regular; // prevent font-size inherit in other modules / scopes
+  line-height: $line-height-regular; // set line height since it was resetted by normalize
+  padding: $input-padding;
+  width: 100%;
+  @include placeholder($input-font-color-placeholder);
+  -webkit-appearance: none;
+  @include transition(all $transition-time-out $transition-function);
+
+  &.hover,
+  &:hover { // on input fields the cursor indicates focus, so we need no hover on focuesed states
+    background-color: hsv-darken($input-bgr-color, 7%, true);
+    @include transition($transition-time-in, '-duration');
+  }
+
+  @include form-control-focus($input-bgr-color);
+
+  &.active,
+  &:active {
+    background-color: hsv-darken($input-bgr-color, 15%, true);
+  }
+
+  &.disabled,
+  &.readonly,
+  &[disabled],
+  &[readonly] {
+    background-color: $input-disabled-bgr-color;
+    border-color: $input-disabled-border-color;
+    color: $input-disabled-font-color;
+    cursor: not-allowed;
+    resize: none;
+    @include placeholder($input-disabled-font-color-placeholder);
+  }
+}
+
+// firefox fix to prevent textareas < one line
+textarea.form-input { min-height: $input-min-height; }
+
+.decoration-positive { @include input-decoration-variant($color-positive, $color-positive, $background-color-regular); }
+.decoration-warning { @include input-decoration-variant($color-warning, $color-warning, $background-color-regular); }
+.decoration-negative { @include input-decoration-variant($color-negative, $color-negative, $background-color-regular); }
+
+.form-input-set {
+  display: block;
+  margin-bottom: building-units(1);
+
+  > label {
+    display: block;
+    font-size: $font-size-small;
+    @include margin-top-bu(1, $font-size-small);
+    @include margin-bottom-bu(.5, $font-size-small);
+  }
+}
+
+
+// default checkbox/radio style
+.form-radio,
+.form-checkbox {
+  width: 24px;
+  height: 24px;
+}
+
+.form-radio-set,
+.form-checkbox-set {
+  display: block;
+  margin-bottom: 12px;
+
+  label {
+    display: block;
+    padding-left: 36px; // reset label to left align on small screens = width + margin of radio/checkbox
+    cursor: pointer;
+    line-height: 24px;
+  }
+
+  &.disabled label {
+    cursor: not-allowed;
+    color: $input-disabled-font-color;
+  }
+}
+
+.form-radio-set .form-radio,
+.form-checkbox-set .form-checkbox {
+  vertical-align: middle;
+  float: left;
+  margin-left: -36px; // reset label to left align on small screens = width + margin of radio/checkbox
+  margin-right: 12px;
+}
+
+.form-fieldset {
+  border: 0;
+  padding: 0 12px;
+  margin: 0;
+  min-width: 0;
+
+  > legend {
+    color: $color-gray;
+    display: block;
+    width: 100%;
+    box-sizing: content-box;
+    padding: 0 12px;
+    margin: 0 -12px;
+    padding-bottom: baseline-bu(1, $font-size-regular, $line-height-regular);
+    border-bottom: 1px solid #b2b2b2;
+  }
+
+  > legend + * {
+    -webkit-margin-top-collapse: separate;
+    margin-top: 12px;
+  }
+}
+
+// fieldset width fix for ff
+// @-moz-document url-prefix() {
+//  .form-fieldset {
+//    display: table-cell;
+//  }
+// }
+
+.form-select {
+  background-color: #ededed;
+  border: 1px solid $input-border-color;
+  border-radius: $input-border-radius;
+  color: $input-font-color;
+  display: block;
+  font-size: $font-size-regular; // prevent font-size inherit in other modules / scopes
+  line-height: $line-height-regular; // set line height since it was resetted by normalize
+  padding: $input-padding;
+  width: 100%;
+
+  option {
+    background-color: #fff; // reset background color
+  }
+
+  &.focus,
+  &:focus {
+    background-color: #ededed;
+    outline: 0;
+  }
+
+  &.hover,
+  &:hover {
+    background-color: hsv-darken(#ededed, 7%, true);
+  }
+
+  &.active,
+  &:active {
+    background-color: hsv-darken(#ededed, 15%, true);
+  }
+
+  &.disabled,
+  &.readonly,
+  &[disabled],
+  &[readonly] {
+    background-color: #f7f7f7;
+    border-color: $input-disabled-border-color;
+    color: $input-disabled-font-color;
+    cursor: not-allowed;
+    resize: none;
+    @include placeholder($input-disabled-font-color-placeholder);
+  }
+}
+
+.has-icon {
+  position: relative;
+
+  .form-input {
+    padding-left: 36px;
+
+    .input-group-large & {
+      padding-left: 52px;
+    }
+  }
+}
+
+.form-icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  display: block;
+  text-align: center;
+  pointer-events: none;
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
+}

data/_sass/_functions.md

@@ -0,0 +1,251 @@
+<!--
+//
+//
+// SCSS
+-->
+
+Im Folgenden werden Funktionen der Komponenten erklärt,
+die die SCSS Bibliothek erweitern:
+
+## Mathematische Funktionen
+
+#### max
+```
+max(a, b):Number
+```
+
+Vergleicht a und b; gibt den höheren Wert zurück
+
+#### min
+```
+min(a, b):Number
+```
+
+Vergleicht a und b; gibt den kleineren Wert zurück
+
+
+
+
+## Layout
+
+### building units
+
+#### building-unit-box-padding
+```
+building-unit-box-padding($line-height, $height, $padding-horizontal)
+```
+Erstellt Padding-Werte pasierend auf den Building-Units.
+
+#### fallback-rgba
+```
+fallback-rgba($color, $alpha, $background-color: #fff):color
+```
+Gibt eine transparente Farbe als Farbe ohne Transparenz zur Grundfarbe Weiß zurück. Die Farbe gegen die gerechnet wird, kann optional übergeben werden.
+
+#### capline-pixels
+```
+capline-pixels($font-size):Number
+```
+Ermittelt die Anzahl der Pixel zwischen Versalhöhe und border einer Schrift bei gegebener Größe und der standardmäßigen Zeilenhöhe.
+
+#### baseline-pixels
+```
+baseline-pixels($font-size):Number
+```
+Ermittelt die Anzahl der Pixel zwischen Grundline und border einer Schrift bei gegebener Größe und der standardmäßigen Zeilenhöhe.
+
+
+## Farbfunktionen
+
+### HSV-Farbraum
+
+Funktionen für Farben im HSV-Farbraum, wie bspw. in Adobes Photoshop. Farben werden dort mittels Farbton (hue), saturation (Sättigung), Hellwert (value) definiert.
+
+#### hsv
+```
+hsv(hue: 0, saturation: 100%, value: 100%):(hue, saturation, value, 1)
+```
+
+Ein HSV-Farbraum Farb-Objekt (Alpha=1)
+
+#### hsva
+```
+hsva(hue: 0, saturation: 100%, value: 100%, alpha: 1):(hue, saturation, value, alpha);
+```
+
+Ein HSV-Farbraum Farb-Objekt mit Alphawert
+
+
+#### color-to-hsv
+```
+color-to-hsv(color/red, green: 0, b: 0, a: 1):hsva
+```
+
+Erwartet eine RGB(A)-Farbe (color) oder vier Farbkomponenten (Rot, Grün, Blau, Alpha) und gibt die Farbe im HSV-Farbraum (hsv) zurück.
+
+#### hsv-to-color
+```
+hsv-to-color(hsv(a)/hue, saturation: 100%, value: 100%, alpha: 1):color
+```
+
+Erwartet eine HSV(A)-Farbe (hsv(a)) oder vier Farbkomponenten (hue, saturation, value, alpha) und gibt die Farbe im RGB-Farbraum (rgb(a)) zurück.
+
+
+#### hsv-hue
+```
+hsv-hue(hsv/color):Number
+```
+
+Gibt den Farbton (hue) einer Farbe (hsv/color) zurück.
+
+#### hsv-set-hue
+```
+hsv-set-hue(color/hsv, hue, return-rgb-color: false):hsv/color
+```
+
+Setzt den Farbton einer Farbe im HSV-Farbraum und gibt sie zurück.
+
+Erwartet eine Farbe (color/hsv) und den zu setzenden Wert.
+Der dritte Parameter bestimmt ob die zurückgegebene Farbe im RGB oder HSV Farbraum definiert sein soll
+@default: hsv
+
+
+#### hsv-saturation
+```
+hsv-saturation(color/hsv):Number
+```
+Gibt den Sättigungswert einer Farbe im HSV-Farbraum zurück.
+Erwartet eine Farbe im rgb oder hsv Farbraum (color/hsv)
+
+#### hsv-set-saturation
+```
+hsv-set-saturation(hsv, saturation, return-rgb-color: false):hsv/color
+```
+
+Setzt den Sättigungswert einer Farbe im HSV-Farbraum und gibt sie zurück.
+
+Erwartet eine Farbe (color/hsv) und den zu setzenden Wert.
+Der dritte Parameter bestimmt ob die zurückgegebene Farbe im RGB oder HSV Farbraum definiert sein soll
+@default: hsv
+
+
+#### hsv-value
+```
+hsv-value(color/hsv):Number
+```
+Gibt den Helligkeitswert einer Farbe im HSV-Farbraum zurück.
+Erwartet eine Farbe im rgb oder hsv Farbraum (color/hsv)
+
+#### hsv-set-value
+```
+hsv-set-value(hsv, value, return-rgb-color: false):hsv/color
+```
+
+Setzt den Helligkeitswert einer Farbe im HSV-Farbraum und gibt sie zurück.
+
+Erwartet eine Farbe (color/hsv) und den zu setzenden Wert.
+Der dritte Parameter bestimmt ob die zurückgegebene Farbe im RGB oder HSV Farbraum definiert sein soll
+@default: hsv
+
+
+#### hsv-alpha
+```
+hsv-alpha(color/hsv):Number
+```
+Gibt den Opazitätswert einer Farbe im HSV-Farbraum zurück.
+Erwartet eine Farbe im rgb oder hsv Farbraum (color/hsv)
+
+#### hsv-set-alpha
+```
+hsv-set-alpha(hsv, alpha, return-rgb-color: false):hsv/color
+```
+
+Setzt den Opazitätswert einer Farbe im HSV-Farbraum und gibt sie zurück.
+
+Erwartet eine Farbe (color/hsv) und den zu setzenden Wert.
+Der dritte Parameter bestimmt ob die zurückgegebene Farbe im RGB oder HSV Farbraum definiert sein soll
+@default: hsv
+
+
+
+
+
+### HSV modifikations Funktionen
+
+#### hsv-invert
+```
+hsv-invert($hsv-color, $return-rgb-color: false):hsv/color
+```
+Invertiert alle Werte einer Farbe im HSV-Farbraum mit Ausnahme des Alphawertes.
+
+Der zweite Parameter bestimmt ob die zurückgegebene Farbe im RGB oder HSV Farbraum definiert sein soll
+@default: hsv
+
+
+#### hsv-adjust-brightness
+```
+hsv-adjust-brightness(hsv, brightness-shift, return-rgb-color: false):hsv/color
+```
+Ändert den Helligkeitswert einer Farbe im HSV-Farbraum, ausgehend vom *ursprünglichen* Wert
+Der dritte Parameter bestimmt ob die zurückgegebene Farbe im RGB oder HSV Farbraum definiert sein soll
+@default: hsv
+
+
+#### hsv-adjust-hue
+```
+hsv-adjust-hue(hsv, hue-shift, return-rgb-color: false):hsv/color
+```
+Ändert den Farbton einer Farbe im HSV-Farbraum, ausgehend vom *ursprünglichen* Wert um die angegebenen Grad°.
+Der dritte Parameter bestimmt ob die zurückgegebene Farbe im RGB oder HSV Farbraum definiert sein soll
+@default: hsv
+
+
+#### hsv-adjust-saturation
+```
+hsv-adjust-saturation(hsv, saturation-shift, return-rgb-color: false):hsv/color
+```
+Ändert den Farbton einer Farbe im HSV-Farbraum, ausgehend vom *ursprünglichen* Wert um die angegebenen Grad°.
+Der dritte Parameter bestimmt ob die zurückgegebene Farbe im RGB oder HSV Farbraum definiert sein soll
+@default: hsv
+
+
+
+
+
+### Weitere Funktionen
+
+#### hsv-lighten
+```
+hsv-lighten($hsv-color, $value, $return-rgb-color: false):hsv/color
+```
+Erhöht die Helligkeit der Farbe.
+
+#### hsv-darken
+```
+hsv-darken($hsv-color, $value, $return-rgb-color: false):hsv/color
+```
+Verringert die Helligkeit der Farbe.
+
+
+#### hsv-saturate
+```
+hsv-saturate($hsv-color, $value, $return-rgb-color: false):hsv/color
+```
+
+#### hsv-adjust-desaturate
+```
+hsv-desaturate(hsv-color, value, return-rgb-color: false):hsv/color
+```
+Verringert die Sättigung der Farbe um den angegebenen Wert.
+
+#### hsv-adjust-grayscale
+```
+hsv-grayscale($hsv-color, $return-rgb-color: false):hsv/color
+```
+Gibt die als reinen Grauwert zurück.
+
+#### hsv-adjust-complement
+```
+hsv-complement($hsv-color, $return-rgb-color: false):hsv/color
+```
+Gibt die Komplementärfarbe zurück.