doc-msp-theme 0.1.0

data/_sass/_mixins.scss

@@ -0,0 +1,430 @@
+// Clearfix
+// Source: http://nicolasgallagher.com/micro-clearfix-hack/
+//
+// For modern browsers
+// 1. The space content is one way to avoid an Opera bug when the
+//    contenteditable attribute is included anywhere else in the document.
+//    Otherwise it causes space to appear at the top and bottom of elements
+//    that are clearfixed.
+// 2. The use of `table` rather than `block` is only necessary if using
+//    `:before` to contain the top-margins of child elements.
+@mixin clearfix {
+  &:before,
+    &:after {
+    content: ' '; // 1
+    display: table; // 2
+  }
+
+  &:after {
+    clear: both;
+  }
+}
+
+@mixin vendor-prefix($name, $argument) {
+  -webkit-#{$name}: #{$argument};
+  -ms-#{$name}: #{$argument};
+  -moz-#{$name}: #{$argument};
+  -o-#{$name}: #{$argument};
+  #{$name}: #{$argument};
+}
+
+@mixin margin-top-bu ($bu, $font-size: $font-size-regular, $line-height: $line-height-ratio) {
+  margin-top: capline-bu($bu, $font-size, $line-height);
+}
+
+@mixin margin-bottom-bu ($bu, $font-size: $font-size-regular, $line-height: $line-height-ratio) {
+  margin-bottom: baseline-bu($bu, $font-size, $line-height);
+}
+
+@mixin padding-top-bu ($bu, $font-size: $font-size-regular, $line-height: $line-height-ratio) {
+  padding-top: capline-bu($bu, $font-size, $line-height);
+}
+
+@mixin padding-bottom-bu ($bu, $font-size: $font-size-regular, $line-height: $line-height-ratio) {
+  padding-bottom: baseline-bu($bu, $font-size, $line-height);
+}
+
+@mixin box-shadow($shadow) {
+  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
+  box-shadow: $shadow;
+}
+
+@mixin font-face($font-family, $svg-font-id, $filepath, $weight: normal, $style: normal) {
+  @font-face {
+    font-family: $font-family;
+    font-style: $style;
+    font-weight: $weight;
+    src: url('#{$filepath}.eot');
+    src: url('#{$filepath}.eot?#iefix') format('embedded-opentype'), // alternative replace this line with: src: local('\263A'), // for smileyface syntax
+      url('#{$filepath}.woff') format('woff'),
+      url('#{$filepath}.ttf') format('truetype'),
+      url('#{$filepath}.svg##{$svg-font-id}') format('svg');
+  }
+}
+
+@mixin linear-gradient($color1, $color2) {
+  background: $color1;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, $color1), color-stop(1, $color2));
+  background: -webkit-linear-gradient(top, $color1, $color2);
+  background: -moz-linear-gradient(top, $color1, $color2);
+  background: -o-linear-gradient(top, $color1, $color2);
+  background: -ms-linear-gradient(top, $color1, $color2);
+  background: linear-gradient(top, $color1, $color2);
+  filter: unquote('"progid:DXImageTransform.Microsoft.gradient(startColorstr="#{$color1}", endColorstr="#{$color2}",GradientType=0)"');
+}
+
+@mixin headline-variant($size) {
+  font-size: $size;
+  margin-top: $heading-margin-top - capline-pixels($size, $line-height-regular);
+  padding-bottom: $heading-margin-bottom - baseline-pixels($size, $line-height-regular);
+
+  &.underline, &.cluster {
+    margin-top: 55px - capline-pixels($size, $line-height-regular);
+  }
+}
+
+@mixin price-variant($size) {
+  font-size: $size;
+  $font-size-cent: ceil($size * $price-cent-factor);
+
+  > sup {
+    font-size: $font-size-cent;
+    top: floor(capline-pixels($size, $line-height-regular)) - ceil(capline-pixels($font-size-cent, $line-height-regular));
+  }
+}
+
+@mixin emphasis-variant($color, $inactive: false) {
+  color: $color;
+
+  mark {
+    color: $color-bright;
+    background-color: $color;
+  }
+}
+
+@mixin table-row-variant($variant, $color, $color-background, $theme-background-color) {
+  .table {
+    > thead,
+    > tbody,
+    > tfoot {
+      > tr {
+        &.#{$variant} > th,
+        &.#{$variant} > td,
+        > th.#{$variant},
+        > td.#{$variant} {
+          @if $variant == 'brand' or $variant == 'inactive' {
+            background: $color-background;
+          } @else {
+            background: fallback-rgba($color-background, $table-bgr-color-alpha, $theme-background-color);
+          }
+          color: $color;
+        }
+      }
+    }
+  }
+
+  @if $variant != 'inactive' {
+    .table-hover {
+      > tbody > tr:hover {
+        &.#{$variant} > th,
+        &.#{$variant} > td,
+        > th.#{$variant},
+        > td.#{$variant} {
+          color: hsv-darken($color, 7%, true);
+          @if $variant == 'brand' {
+            background-color: hsv-darken($color-background, 7%, true);
+          } @else {
+            background-color: fallback-rgba($color-background, $table-bgr-color-hover-alpha, $theme-background-color);
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin table-striped-variant($color-odd, $color-odd-bg) {
+  > tbody > tr:nth-child(odd),
+    > tbody > tr.odd {
+    > th,
+    > td {
+      background-color: $color-odd-bg;
+      color: $color-odd;
+    }
+  }
+
+  &.table-hover {
+    > tbody > tr:nth-child(odd):hover {
+      > th,
+      > td {
+        background-color: hsv-darken($color-odd-bg, 7%, true);
+        color: hsv-darken($color-odd, 7%, true);
+      }
+    }
+  }
+}
+
+@mixin box-sizing($box-model) {
+  -webkit-box-sizing: $box-model;
+  -moz-box-sizing: $box-model;
+  box-sizing: $box-model;
+}
+
+@mixin border-top-radius($radius) {
+  border-top-left-radius: $radius;
+  border-top-right-radius: $radius;
+}
+
+@mixin border-right-radius($radius) {
+  border-top-right-radius: $radius;
+  border-bottom-right-radius: $radius;
+}
+
+@mixin border-bottom-radius($radius) {
+  border-bottom-left-radius: $radius;
+  border-bottom-right-radius: $radius;
+}
+
+@mixin border-left-radius($radius) {
+  border-top-left-radius: $radius;
+  border-bottom-left-radius: $radius;
+}
+
+@mixin button-variant($color-text, $color-background, $color-border) {
+  color: $color-text;
+  background-color: $color-background;
+  border-color: $color-border;
+
+  &.focus,
+  &:focus {
+    color: $color-text;
+  }
+
+  &.hover,
+  &:hover {
+    color: $color-text;
+    background-color: hsv-darken($color-background, 7%, true);
+    border-color: hsv-darken($color-border, 7%, true);
+  }
+
+  &.active,
+  &:active {
+    color: $color-text;
+    background-color: hsv-darken($color-background, 13.75%, true);
+    border-color: hsv-darken($color-border, 15%, true);
+  }
+
+  &.disabled,
+  &[disabled] {
+    &,
+    &.focus,
+    &:focus,
+      &.hover,
+      &:hover {
+      color: hsv-lighten($font-color-regular, 50%, true);
+      background: hsv-lighten($color-element-background, 5%, true);
+      border-color: hsv-lighten($color-element-border, 14%, true);
+    }
+  }
+}
+
+@mixin badge-variant($color, $font-color: null) {
+  background-color: $color;
+  color: $font-color;
+}
+
+@mixin opacity($value) {
+  -moz-opacity: $value;
+  -khtml-opacity: $value;
+  opacity: $value;
+  $opacity-ie: ($opacity * 100);
+  -ms-filter: unquote('progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity-ie})');
+  filter: unquote('alpha(opacity=#{$opacity-ie})');
+}
+
+@mixin input-decoration-variant($background-color, $border-color, $theme-background-color) {
+
+  $calculated-border-color: hsv-darken($border-color, 15%, true);
+
+  .form-input {
+    background-color: fallback-rgba($background-color, .05, $theme-background-color);
+    border-color: $calculated-border-color;
+
+    &.hover,
+    &:hover {
+      background-color: fallback-rgba($background-color, .1, $theme-background-color);
+      border-color: hsv-darken($calculated-border-color, 7%, true);
+    }
+
+    &.focus,
+    &:focus {
+      background-color: $color-bright;
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten($calculated-border-color, 20%);
+    }
+
+    &.active,
+    &:active {
+      background-color: fallback-rgba($background-color, .15, $theme-background-color);
+      border-color: hsv-darken($calculated-border-color, 15%, true);
+    }
+  }
+}
+
+@mixin placeholder($color) {
+  &::-webkit-input-placeholder { color: $color; } // Safari, Chrome, Opera 15+
+  &:-moz-placeholder { color: $color; } // FF 4-18
+  &::-moz-placeholder { color: $color; } // FF 19+
+  &:-ms-input-placeholder { color: $color; } // IE10+
+}
+
+@mixin transition($transition, $type: '') {
+  -webkit-transition#{$type}: $transition;
+  -moz-transition#{$type}: $transition;
+  -ms-transition#{$type}: $transition;
+  -o-transition#{$type}: $transition;
+  transition#{$type}: $transition;
+}
+
+@mixin user-select($value) {
+  -webkit-user-select: $value;
+  -khtml-user-select: $value;
+  -moz-user-select: $value;
+  -o-user-select: $value;
+  user-select: $value;
+}
+
+@mixin pagination-variant($width, $height, $gutter) {
+  > li {
+    > a,
+    > span {
+      width: $width;
+      height: $height;
+      margin: 0 ($gutter / 2);
+    }
+  }
+}
+
+@mixin notification-variant($background-color, $border-color, $font-color: $font-color-regular) {
+
+  $calculated-border-color: hsv-darken($border-color, 15%, true);
+  $calculated-bgr-color: fallback-rgba($background-color, .05, $background-color-regular);
+
+  background-color: $calculated-bgr-color;
+  // background-color: rgba($background-color, .05); since alpha is to low
+  border-color: $calculated-border-color;
+  color: $font-color;
+
+  > .notification-badge {
+    background-color: $font-color;
+    color: $calculated-bgr-color;
+  }
+
+  > .close {
+    &.focus,
+    &:focus {
+      color: hsv-darken($font-color, 21%, true); // -21%
+    }
+
+    &.hover,
+    &:hover {
+      color: hsv-darken($font-color, 7%, true); // -7%
+    }
+
+    &.active,
+    &:active {
+      color: hsv-darken($font-color, 15%, true); // -15%
+    }
+  }
+
+}
+
+@mixin ellipsis() {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin content-list-item-variant($name, $font-color, $background-color) {
+  .content-list-item-#{$name} {
+    color: $font-color;
+    background-color: $background-color;
+  }
+
+  a.content-list-item-#{$name} {
+    color: $font-color;
+
+    // focus = browser default - so not defined
+
+    &.hover,
+    &:hover {
+      background-color: hsv-darken($background-color, 7%, true);
+    }
+
+    &.active,
+    &:active {
+      background-color: hsv-darken($background-color, 15%, true);
+    }
+  }
+}
+
+@mixin tab-focus() {
+  // Default
+  outline: thin dotted;
+  // WebKit
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+
+@mixin form-control-focus($bgr-color, $color: $input-border-color-focus) {
+  $color-rgba: rgba(red($color), green($color), blue($color), .6);
+
+  &.focus,
+  &:focus {
+    background-color: $bgr-color;
+    border-color: $color;
+    outline: 0;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px $color-rgba;
+  }
+}
+
+@mixin color-variant($name, $color, $saturation: false) {
+
+  .bg-#{$name} { background-color: $color; }
+
+  @if ($saturation) {
+    .bg-#{$name}-25 { background-color: fallback-rgba($color, .25, $background-color-regular); }
+    .bg-#{$name}-50 { background-color: fallback-rgba($color, .5, $background-color-regular); }
+    .bg-#{$name}-75 { background-color: fallback-rgba($color, .75, $background-color-regular); }
+  }
+
+}
+
+@mixin container-fixed($offset: 0) {
+  // default
+  @if $grid-large-container-width {
+    @media screen and (min-width: #{$grid-large-min}px) and (max-width: #{$grid-large-max}px) {
+      width: (($grid-large-container-width + 1) * 1px) + $offset;
+    }
+  }
+  // down-sizing
+  @if $grid-medium-container-width {
+    @media screen and (max-width: #{$grid-medium-max}px) {
+      width: (($grid-medium-container-width + 1) * 1px) + $offset;
+    }
+  }
+  @if $grid-small-container-width {
+    @media screen and (max-width: #{$grid-small-max}px) {
+      width: (($grid-small-container-width + 1) * 1px) + $offset;
+    }
+  }
+  @if $grid-extra-small-container-width {
+    @media screen and (max-width: #{$grid-extra-small-max}px) {
+      width: (($grid-extra-small-container-width + 1) * 1px) + $offset;
+    }
+  }
+  // up-sizing
+  @if $grid-extra-large-container-width {
+    @media screen and (min-width: #{$grid-extra-large-min}px) {
+      width: (($grid-extra-large-container-width + 1) * 1px) + $offset;
+    }
+  }
+}

data/_sass/_modal.md

@@ -0,0 +1,329 @@
+<!--
+//
+//
+// Modal
+-->
+
+### Aufbau des Dialogs
+
+<div class="tc-example">
+  <div class="modal fade in" aria-labelledby="exampleModalLabel" aria-hidden="true" role="dialog" style="display: block; position: inherit; z-index: 0;">
+      <div class="modal-dialog">
+          <div class="modal-content">
+              <button type="button" class="close" data-dismiss="modal">
+                <span aria-hidden="true">x</span>
+                <span class="sr-only">Close</span>
+              </button>
+              <div class="modal-header">
+                  <h4 class="modal-title" id="exampleModalLabel">Headline</h4>
+              </div>
+              <div class="modal-body">
+                  <p>Content...</p>
+              </div>
+              <div class="modal-footer">
+                  <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
+                  <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
+              </div>
+          </div>
+      </div>
+  </div>
+</div>
+
+```html
+<div class="modal fade" aria-labelledby="exampleModalLabel"
+     aria-hidden="true" role="dialog">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <button type="button" class="close" data-dismiss="modal">
+              <span aria-hidden="true">x</span>
+              <span class="sr-only">Close</span>
+            </button>
+            <div class="modal-header">
+                <h4 class="modal-title" id="exampleModalLabel">Headline</h4>
+            </div>
+            <div class="modal-body">
+                <p>Content...</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default"
+                        data-dismiss="modal">Schließen</button>
+                <button type="button" class="btn btn-default"
+                        data-dismiss="modal">OK</button>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Initialisierung des Dialogs
+
+<div class="tc-example">
+  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-init-demo">Modal-Dialog öffnen</button>
+
+  <div id="modal-init-demo" class="modal fade" aria-labelledby="exampleModalLabel2" aria-hidden="true" role="dialog">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <button type="button" class="close" data-dismiss="modal">
+          <span aria-hidden="true">x</span>
+          <span class="sr-only">Close</span>
+        </button>
+        <div class="modal-header">
+          <h4 class="modal-title" id="exampleModalLabel2">Headline</h4>
+        </div>
+        <div class="modal-body">
+          <p>Content...</p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
+          <button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+```html
+<!-- Der Button öffnet den Modal-Dialog -->
+<button type="button" class="btn btn-default" data-toggle="modal"
+        data-target="#modal-init-demo">Modal-Dialog öffnen</button>
+
+<!-- Der Modal-Dialog -->
+<div class="modal fade" aria-labelledby="exampleModalLabel"
+     aria-hidden="true" role="dialog">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <button type="button" class="close" data-dismiss="modal">
+              <span aria-hidden="true">x</span>
+              <span class="sr-only">Close</span>
+            </button>
+            <div class="modal-header">
+                <h4 class="modal-title" id="exampleModalLabel">Headline</h4>
+            </div>
+            <div class="modal-body">
+                <p>Content...</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default"
+                        data-dismiss="modal">Schließen</button>
+                <button type="button" class="btn btn-default"
+                        data-dismiss="modal">OK</button>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Datenmanagement
+
+Oft sollen Daten im Modal-Dialog von außen beeinflussbar sein,
+beispielsweise wenn ein Formular im Dialog vorausgefüllt werden soll.
+
+In einem zweiten Schritt sollen beim Absenden des Formulars die Daten
+verarbeitet werden können.
+
+Das folgende Beispiel zeigt diese Fälle:
+
+<div class="tc-example">
+
+  <button type="button" class="btn btn-default" data-toggle="modal" data-init-value="1" data-target="#modal-init-demo2">Modal-Dialog mit &lt;1&gt; öffnen</button>
+  <button type="button" class="btn btn-default" data-toggle="modal" data-init-value="2" data-target="#modal-init-demo2">Modal-Dialog mit &lt;2&gt; öffnen</button>
+
+  <div id="modal-init-demo2" class="modal fade" aria-labelledby="exampleModalLabel3" aria-hidden="true" role="dialog">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <form name="exampleModalForm3">
+          <button type="button" class="close" data-dismiss="modal">
+            <span aria-hidden="true">x</span>
+            <span class="sr-only">Close</span>
+          </button>
+          <div class="modal-header">
+            <h4 class="modal-title" id="exampleModalLabel3">Headline</h4>
+          </div>
+          <div class="modal-body">
+            <div class="form-input-set">
+              <label for="text-modal">Value</label>
+              <input type="text" class="form-input" name="text-modal" id="text-modal">
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
+            <button type="submit" class="btn btn-default">Senden</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+```html
+<!-- Der Button öffnet den Modal-Dialog -->
+<button type="button" class="btn btn-default" data-toggle="modal" data-init-value="1"
+  data-target="#modal-init-demo2">Modal-Dialog mit &lt;1&gt; öffnen</button>
+<button type="button" class="btn btn-default" data-toggle="modal" data-init-value="2"
+  data-target="#modal-init-demo2">Modal-Dialog mit &lt;2&gt; öffnen</button>
+
+<!-- Der Modal-Dialog -->
+<div id="modal-init-demo2" class="modal fade"
+     aria-labelledby="exampleModalLabel3" aria-hidden="true" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <form name="exampleModalForm3">
+        <button type="button" class="close" data-dismiss="modal">
+          <span aria-hidden="true">x</span>
+          <span class="sr-only">Close</span>
+        </button>
+        <div class="modal-header">
+          <h4 class="modal-title" id="exampleModalLabel3">Headline</h4>
+        </div>
+        <div class="modal-body">
+          <div class="form-input-set">
+            <label for="text-modal">Value</label>
+            <input type="text" class="form-input"
+                   name="text-modal" id="text-modal">
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default"
+                  data-dismiss="modal">Schließen</button>
+          <button type="submit" class="btn btn-default">Senden</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+```
+
+JavaScript:
+```javascript
+// Daten übermitteln
+$('#modal-init-demo2').on('show.tc.modal', function (event) {
+  var $button = $(event.relatedTarget) // der betätigte Button
+  var value = $button.data('init-value') // Wert aus HTML5-Data auslesen
+
+  // Wert in Modal-Formuar übernehmen
+  var $modal = $(this)
+  $modal.find('input[name="text-modal"]').val(value)
+})
+
+// Daten abholen
+$('form[name="exampleModalForm3"]').on('submit', function (event) {
+  event.preventDefault() // Absenden des Formular unterdrücken
+
+  var $modal = $('#modal-init-demo2')
+  $modal.modal('hide') // den Modal-Dialog schließen
+
+  var $form = $(this)
+  alert($form.serialize()) // Daten aus dem Formular übernehmen
+})
+```
+
+### Größe
+
+Die Größe des Modal-Dialogs kann mit den CSS-Klassen `.modal-small`
+und `.modal-large` beeinflusst werden:
+
+```html
+<!-- groß -->
+<div class="modal fade" aria-labelledby="exampleModalLabel4"
+    aria-hidden="true" role="dialog">
+  <div class="modal-dialog modal-large">
+    ...
+  </div>
+</div>
+
+<!-- klein -->
+<div class="modal fade" aria-labelledby="exampleModalLabel4"
+    aria-hidden="true" role="dialog">
+  <div class="modal-dialog modal-small">
+    ...
+  </div>
+</div>
+```
+
+## Verwendung
+
+Der Modal-Dialog kann derzeit über zwei Schnittstellen gestartet werden.
+
+### HTML Attribut
+```html
+<button type="button" data-toggle="modal" data-target="#eg-modal">Modal-Dialog</button>
+```
+
+### JavaScript
+```js
+$('#eg-modal').modal(options)
+```
+
+<table class="table table-small">
+  <caption>Optionen</caption>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Typ</th>
+      <th>Standard</th>
+      <th>Beschreibung</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>backdrop</td>
+      <td>Bool</td>
+      <td>true</td>
+      <td>
+        Gibt an ob der Modal-Dialog durch einen Hintergrund abgesetzt werden soll.
+        Der Modal-Dialog wird bei einem Klick auf den Hintergrund geschlossen.
+      </td>
+    </tr>
+    <tr>
+      <td>keyboard</td>
+      <td>Bool</td>
+      <td>true</td>
+      <td>Gibt an, ob der Modal-Dialog durch drücken der ESC-Taste geschlossen wird.</td>
+    </tr>
+    <tr>
+      <td>show</td>
+      <td>Bool</td>
+      <td>true</td>
+      <td>Gibt an ob der der Modal-Dialog beim Initialisieren angezeigt werden soll.</td>
+    </tr>
+  </tbody>
+</table>
+
+```js
+// Initialisieren des Modal-Dialogs ohne direkte Anzeige
+$('#eg-modal').modal({ show: false })
+```
+
+<table class="table table-small">
+  <caption>Events</caption>
+  <thead>
+    <tr>
+      <th>Typ</th>
+      <th>Beschreibung</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>show.tc.modal</td>
+      <td>Dieses Event tritt noch vor dem eigentlichen Anzeigen des Modal-Dialogs auf.</td>
+    </tr>
+    <tr>
+      <td>shown.tc.modal</td>
+      <td>Dieses Event tritt auf, wenn der Modal-Dialog fertig angezeigt wird.</td>
+    </tr>
+    <tr>
+      <td>hide.tc.modal</td>
+      <td>Dieses Event tritt noch vor dem eigentlichen Schließen des Modal-Dialogs auf.</td>
+    </tr>
+    <tr>
+      <td>hidden.tc.modal</td>
+      <td>Dieses Event tritt auf, wenn der Modal-Dialog fertig geschlossen wurde.</td>
+    </tr>
+  </tbody>
+</table>
+
+```js
+$('#eg-modal').on('hide.tc.modal', function (event) {
+  // ...
+})
+```