doc-msp-theme 0.1.0

data/_sass/_icons.scss

@@ -0,0 +1,154 @@
+//
+// Icons
+// ----------------------------------------
+
+@font-face {
+  font-family: 'Telekom-Icon';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../font/teleicon-outline.eot');
+  src: url('../font/teleicon-outline.eot?#iefix') format('embedded-opentype'),
+    url('../font/teleicon-outline.woff') format('woff'),
+    url('../font/teleicon-outline.ttf')  format('truetype'),
+    url('../font/teleicon-outline.svg#teleicon-outline') format('svg');
+}
+
+@font-face {
+  font-family: 'Telekom-Icon';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../font/teleicon-solid.eot');
+  src: url('../font/teleicon-solid.eot?#iefix') format('embedded-opentype'),
+    url('../font/teleicon-solid.woff') format('woff'),
+    url('../font/teleicon-solid.ttf')  format('truetype'),
+    url('../font/teleicon-solid.svg#teleicon-solid') format('svg');
+}
+
+
+.icon {
+  position: relative;
+  bottom: 1px;
+  vertical-align: middle;
+  display: inline-block;
+  font-family: 'Telekom-Icon';
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  text-transform: none !important; // if icon is used in uppercase context
+  -webkit-font-smoothing: antialiased; // reduce font weight
+  -moz-osx-font-smoothing: grayscale; // reduce font weight
+}
+
+.icon-solid {
+  font-weight: 700;
+}
+
+.icon-large {
+  font-size: 36px;
+}
+
+.icon-warning:before                { content: '\21'; }
+.icon-navigation-up:before          { content: '\22'; }
+.icon-navigation-down:before        { content: '\24'; }
+.icon-navigation-left:before        { content: '\25'; }
+.icon-export:before                 { content: '\26'; }
+.icon-import:before                 { content: '\28'; }
+.icon-scroll-left:before            { content: '\29'; }
+.icon-favorites:before              { content: '\2a'; }
+.icon-add:before                    { content: '\2b'; }
+.icon-decrease:before               { content: '\2d'; }
+.icon-record:before                 { content: '\3b'; }
+.icon-scroll-right:before           { content: '\2f'; }
+.icon-tile-view:before              { content: '\30'; }
+.icon-skip-to-start:before          { content: '\31'; }
+.icon-previous:before               { content: '\32'; }
+.icon-rewind:before                 { content: '\33'; }
+.icon-play:before                   { content: '\34'; }
+.icon-pause:before                  { content: '\35'; }
+.icon-stop:before                   { content: '\36'; }
+.icon-fast-forward:before           { content: '\37'; }
+.icon-next:before                   { content: '\38'; }
+.icon-skip-to-end:before            { content: '\39'; }
+.icon-more:before                   { content: '\3a'; }
+.icon-help_2:before                 { content: '\3c'; }
+.icon-list-view:before              { content: '\3d'; }
+.icon-information_2:before          { content: '\3e'; }
+.icon-help:before                   { content: '\3f'; }
+.icon-calendar:before               { content: '\41'; }
+.icon-shopping-cart:before          { content: '\42'; }
+.icon-copy:before                   { content: '\43'; }
+.icon-move-to-trash:before          { content: '\44'; }
+.icon-tablet-pc:before              { content: '\45'; }
+.icon-folder:before                 { content: '\46'; }
+.icon-filter:before                 { content: '\47'; }
+.icon-login:before                  { content: '\48'; }
+.icon-comment:before                { content: '\49'; }
+.icon-start-call:before             { content: '\4a'; }
+.icon-speaker-off:before            { content: '\4b'; }
+.icon-lock:before                   { content: '\4c'; }
+.icon-microphone-socket:before      { content: '\4d'; }
+.icon-ringtone-off:before           { content: '\4e'; }
+.icon-clock:before                  { content: '\4f'; }
+.icon-add-to-watchlist:before       { content: '\50'; }
+.icon-computer:before               { content: '\51'; }
+.icon-iptv:before                   { content: '\52'; }
+.icon-settings:before               { content: '\53'; }
+.icon-digits:before                 { content: '\54'; }
+.icon-my-profile:before             { content: '\55'; }
+.icon-confirm:before                { content: '\56'; }
+.icon-smartphone:before             { content: '\57'; }
+.icon-cancel:before                 { content: '\58'; }
+.icon-cloud:before                  { content: '\59'; }
+.icon-zoom-out:before               { content: '\5a'; }
+.icon-attachment:before             { content: '\61'; }
+.icon-bookmark:before               { content: '\62'; }
+.icon-context-menu:before           { content: '\63'; }
+.icon-download:before               { content: '\64'; }
+.icon-edit:before                   { content: '\65'; }
+.icon-file:before                   { content: '\66'; }
+.icon-reload:before                 { content: '\67'; }
+.icon-home:before                   { content: '\68'; }
+.icon-information:before            { content: '\69'; }
+.icon-end-call:before               { content: '\6a'; }
+.icon-speaker-on:before             { content: '\6b'; }
+.icon-link:before                   { content: '\6c'; }
+.icon-message:before                { content: '\6d'; }
+.icon-ringtone-on:before            { content: '\6e'; }
+.icon-loading-indicator:before      { content: '\6f'; }
+.icon-print:before                  { content: '\70'; }
+.icon-search:before                 { content: '\71'; }
+.icon-reply:before                  { content: '\72'; }
+.icon-synchronize:before            { content: '\73'; }
+.icon-telekom-1T1:before            { content: '\74'; }
+.icon-upload:before                 { content: '\75'; }
+.icon-success:before                { content: '\76'; }
+.icon-forward:before                { content: '\77'; }
+.icon-error:before                  { content: '\78'; }
+.icon-share:before                  { content: '\79'; }
+.icon-zoom-in:before                { content: '\7a'; }
+.icon-navigation-right:before       { content: '\a7'; }
+.icon-maximize:before               { content: '\dc'; }
+.icon-cover-view:before             { content: '\df'; }
+.icon-warning_2:before              { content: '\e4'; }
+.icon-minimize:before               { content: '\fc'; }
+
+.icon-frame {
+  width: $icon-frame-width;
+  height: $icon-frame-height;
+  text-align: center;
+  white-space: nowrap;
+  padding: 0;
+
+  &:before {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+  }
+
+  > .icon {
+    display: inline-block;
+    height: auto;
+    vertical-align: middle;
+  }
+}

data/_sass/_images.md

@@ -0,0 +1,21 @@
+<!--
+//
+//
+// Bilder
+-->
+
+Bilder werden in der Regel mit dem `<img>`-Tag ausgezeichnet.
+Sie kommen ausschließlich mit Rahmen vor. Die CSS-Klasse
+`.img-vignette-square` sorgt für die Umrandung:
+
+<div class="tc-example">
+  <div class="img-vignette-square">
+    <img src="assets/play.jpg" width="252" height="168" alt="Beispielbild">
+  </div>
+</div>
+
+```html
+<div class="img-vignette-square">
+  <img src="{url}" width="252" height="168" alt="Beispielbild">
+</div>
+```

data/_sass/_images.scss

@@ -0,0 +1,54 @@
+//
+// Default Image Classes
+// ----------------------------------------
+
+.img-round {
+  border-radius: 50%;
+  vertical-align: bottom;
+}
+
+.img-thumbnail {
+  max-width: 100%;
+  max-height: 100%;
+  height: auto;
+  padding: 2px;
+  border: 1px solid $image-tn-border-color;
+  background: #fff;
+}
+
+.img-frame {
+  width: $image-frame-width;
+  height: $image-frame-height;
+  text-align: center;
+  white-space: nowrap;
+  padding: 0;
+
+  &:before {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+  }
+
+  > img {
+    display: inline-block;
+    height: auto;
+    vertical-align: middle;
+  }
+}
+
+.img-frame-small {
+  width: $image-frame-width-small;
+  height: $image-frame-height-small;
+}
+
+.img-vignette-square {
+  display: inline-block;
+
+  > img {
+    outline: 1px solid rgba(0, 0, 0, .3);
+    outline-offset: -1px;
+    padding: .5px;
+  }
+}
+

data/_sass/_jsbutton.md

@@ -0,0 +1,171 @@
+<!--
+//
+//
+// Buitton
+-->
+
+In Anwendungen für die ein veränderbarer Buttonstate, ein ToogleButton
+oder eine Button-Sectioned mit *radio* oder *check* Funktion benötigt
+werden, steht das jQuery-Plugin: `button()` zur Verfügung.
+
+### Dynamisch veränderbare Buttenstates
+Für alle Buttonelemente ist es möglich die States *active*, *disable*,
+*enable*, *default* zusetzen so wie die States Active und Disabled mit
+*toggleactive* und *toggledisable* zu Togglen.
+
+<div class="tc-note">
+**Anmerkung:**
+Der State *enable* ermöglicht es Aktive Button die Disabled wurde wieder in den aktiven Zustand zu setzen.
+Der State *default* dient als Reset.
+</div>
+
+
+Die Einbindung für States ist wie folgt:
+
+<div class="tc-example">
+  <button id="button-b" class="btn btn-default" >Active</button>
+  <button id="button-c" class="btn btn-default" >Disabled</button>
+</div>
+
+```html
+<button id="button-b" class="btn btn-default" >Active</button>
+<button id="button-c" class="btn btn-default" >Disabled</button>
+```
+
+```js
+$(document).ready(function() {
+  $('#button-a').button('default')
+  $('#button-b').button('active')
+  $('#button-c').button('disable')
+  $('#button-d').button('enable')
+})
+```
+
+Die Einbindung für Toogle das Toggeln von States ist wie folgt:
+
+<div class="tc-example">
+  <button id="button-e" class="btn btn-default">Toggle Active</button>
+  <button id="button-f" class="btn btn-default">Toggle Disable</button>
+  <button id="button-g" class="btn btn-default">Button</button>
+</div>
+
+```html
+<button id="button-e" class="btn btn-default">Toggle Active</button>
+<button id="button-f" class="btn btn-default">Toggle Disable</button>
+<button id="button-g" class="btn btn-default">Button</button>
+```
+
+```js
+$(document).ready(function() {
+  $('#button-e').click(function (e) {
+    $('#button-g').button("toggleactive");
+  })
+  $('#button-f').click(function (e) {
+    $('#button-g').button("toggledisable");
+  })
+})
+```
+
+### Toogle Button
+Durch das Verwenden des Data-Attributes *data-toggle="button"* erhällt
+ein Button automatisch ein Toggle-Verhalten.
+Zusätzlich kann durch das Data-Attribut *data-callback="$meineFunktion"*
+eine Callbackfunktion bestimmt werden die bei dem event on *press*
+aufgerufen wird. Übergeben werden hierbei das *aufrufende Element* und der *state*
+
+Die Einbindung für einen Togglebutton ist wie folgt:
+
+<div class="tc-example">
+  <button class="btn btn-default" data-toggle="button" >Togglebutton</button>
+  <button id="button-h" class="btn btn-default" data-toggle="button" data-callback="myFunction">Togglebutton mit Callback</button>
+  <p id="callbackOutput" class="text-xsmall"></p>
+</div>
+
+```html
+<button class="btn btn-default" data-toggle="button" >Togglebutton</button>
+<button id="button-h" class="btn btn-default" data-toggle="button" data-callback="myFunction" >Togglebutton</button>
+```
+
+```js
+$(document).ready(function() {
+  myFunction = function (element, event) {
+
+  }
+}
+```
+
+### Radio Button-Sectioned
+Durch das Verwenden des Data-Attribut *data-toggle="buttonsectioned-radio"* erhält eine ButtonSectioned automatisch ein Radio-Button verhalten.
+Zusätzlich kann durch das Data-Attribut *data-callback="$meineFunktion"* eine Callback-Funktion eine Callback-Funktion aufgerufen werden.
+Übergeben werden hierbei das *aufrufende Element* und der *state*.
+
+
+<div class="tc-note tc-note-info">
+  **Tipp:**
+  Durch das Verwenden des Data-Attribut *data-callback-states="all"*
+  in dem umschließenden Element können die States aller Elemente
+  die sich bei der Interaktion verändern ausgegeben werden.
+</div>
+
+Die Einbindung für einen Buttongroup mit Radio Verhalten ist wie folgt:
+
+<div class="tc-example">
+  <div class="btn-sectioned" data-toggle="buttonsectioned-radio">
+    <button class="btn btn-default" data-callback="myFunctionA">Button 1</button>
+    <button class="btn btn-default" data-callback="myFunctionA">Button 2</button>
+    <button class="btn btn-default" data-callback="myFunctionA" disabled>Button 3</button>
+    <button class="btn btn-default" data-callback="myFunctionA">Button 4</button>
+  </div>
+  <p id="callbackOutput-a" class="text-xsmall"></p>
+</div>
+
+```html
+<div class="btn-sectioned" data-toggle="buttonsectioned-radio">
+  <button class="btn btn-default" data-callback="myFunctionA">Button 1</button>
+  <button class="btn btn-default" data-callback="myFunctionA">Button 2</button>
+  <button class="btn btn-default" data-callback="myFunctionA" disabled>Button 3</button>
+  <button class="btn btn-default" data-callback="myFunctionA">Button 4</button>
+</div>
+```
+
+```js
+$(document).ready(function() {
+  var text = ''
+  myFunctionA = function (element, event) {
+    text += 'callback from ' + element.text() + ' '+ event + '<br/>'
+    $('#callbackOutput-a').html(text)
+  }
+}
+```
+
+<br/>
+Die Einbindung für einen Button-Sectioned mit Checkbox Verhalten ist wie folgt:
+
+<div class="tc-example">
+  <div class="btn-sectioned" data-toggle="buttonsectioned" data-callback-states="all">
+    <button class="btn btn-default" data-callback="myFunctionB">Button 1</button>
+    <button class="btn btn-default" data-callback="myFunctionB">Button 2</button>
+    <button class="btn btn-default" data-callback="myFunctionB" disabled>Button 3</button>
+    <button class="btn btn-default" data-callback="myFunctionB">Button 4</button>
+  </div>
+  <p id="callbackOutput-b" class="text-xsmall"></p>
+</div>
+
+```html
+<div class="btn-sectioned" data-toggle="buttonsectioned" data-callback-states="all">
+  <button class="btn btn-default" data-callback="myFunctionB">Button 1</button>
+  <button class="btn btn-default" data-callback="myFunctionB">Button 2</button>
+  <button class="btn btn-default" data-callback="myFunctionB" disabled>Button 3</button>
+  <button class="btn btn-default" data-callback="myFunctionB">Button 4</button>
+</div>
+```
+
+```js
+$(document).ready(function() {
+  var textB = ''
+  myFunctionB = function (element, event) {
+    textB += 'callback from ' + element.text() + ' '+ event + '<br/>'
+    $('#callbackOutput-b').html(textB)
+  }
+}
+```

data/_sass/_media.scss

@@ -0,0 +1,48 @@
+//
+// Media
+// ----------------------------------------
+
+.media {
+  padding: $media-padding;
+}
+
+.media-body,
+.media-left,
+.media-right {
+  display: table-cell;
+  vertical-align: middle;
+  height: $media-min-height; // = min-height for table-cell
+}
+
+.media-left {
+  padding-right: $media-column-padding;
+}
+
+.media-right {
+  padding-left: $media-column-padding;
+}
+
+.media-body {
+  width: 100%;
+  padding: $media-body-padding;
+}
+
+.media-top {
+  vertical-align: top;
+}
+
+.media-bottom {
+  vertical-align: bottom;
+}
+
+.media-heading {
+  margin: 0;
+  padding: 0;
+}
+
+.media-hint {
+  margin: 0;
+  padding: 0;
+  color: $font-color-light;
+  font-size: $media-hint-font-size;
+}