doc-msp-theme 0.1.0

data/_sass/_radio.scss

@@ -0,0 +1,122 @@
+//
+// Radio - JS
+// ----------------------------------------
+
+.form-radio-js {
+  width: 22px;
+  height: 22px;
+  font-size: 24px;
+  padding: 0;
+  border: 0;
+  background-color: $radio-bgr-color;
+  border-radius: 50%;
+  font-family: 'TeleIconUi';
+  line-height: 1px;
+  position: relative;
+  @include user-select(none);
+  @include transition(all $transition-time-out $transition-function);
+
+  &.focus,
+  &:focus {
+    outline: 0;
+  }
+
+  &.focus { // since we simulate the focus behavior, we need a real class
+    background-color: hsv-darken($radio-bgr-color, 21%, true);
+  }
+
+  &.hover,
+  &:hover {
+    background-color: hsv-darken($radio-bgr-color, 7%, true);
+    @include transition($transition-time-in, '-duration');
+  }
+
+  &.active,
+  &:active {
+    background-color: hsv-darken($radio-bgr-color, 15%, true);
+  }
+
+  // outline
+  > .border {
+    color: $radio-border-color;
+    position: absolute;
+    top: 9px;
+    left: -1px;
+
+    &:before {
+      content: 'C';
+    }
+  }
+
+  > .check {
+    font-size: 24px;
+    position: absolute;
+    top: 9px;
+    left: -1px;
+    color: $radio-check-color;
+
+    &:before {
+      content: '';
+    }
+  }
+
+  &.checked > .check:before {
+    content: 'D';
+  }
+
+  fieldset[disabled] &,
+  &[disabled],
+  &.disabled {
+    cursor: not-allowed;
+    background-color: $radio-disabled-bgr-color;
+
+    > .border:before {
+      color: $radio-disabled-border-color;
+    }
+
+    > .check:before {
+      color: $radio-disabled-check-color;
+    }
+  }
+
+  .form-radio-set & {
+    vertical-align: middle;
+    float: left;
+    margin-left: -36px;
+    margin-right: 12px;
+  }
+}
+
+// <= IE8
+
+.lte-ie8 {
+  .form-radio-js {
+    background-color: transparent !important;
+    background-repeat: no-repeat;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAYCAYAAAAxkDmIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozNzdDRDJBNDk3RTFFMzExODA1Q0VBNjZFMjk1MzI2MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxODZGRDVCRkUxQTcxMUUzQTBCRkM0RUQzNUQwMDFCRiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxODZGRDVCRUUxQTcxMUUzQTBCRkM0RUQzNUQwMDFCRiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjM4N0NEMkE0OTdFMUUzMTE4MDVDRUE2NkUyOTUzMjYyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM3N0NEMkE0OTdFMUUzMTE4MDVDRUE2NkUyOTUzMjYyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+JE+ciQAAAjVJREFUeNrsms1Kw0AUhadpl4KrglAQFMTiSvAFiiAIgsWFm3bpA9gnUHyALnyAbty6EApSQfANBFeiCHZVEEILBbcFz+ANxKGTv87tgNwDpw2h+ZJyksmdn9J4PFYJqsEn8BFchXdp/wscwvfwHTyad/BkMlEpWogfhiErfzqdsvIbjQYrX6tkCXgNvoLP4HLKRczgHnwJf2UM2Ak/IWAn/ISAnfATAnbCtwV8CN/CKyqfvuFT+CElYGd8S8DO+JaAnfEtATvjawXGj87hQQG4omMGxLBJ+EvmxwM+hrtqcXWJZUr4HvhB7GV+k6G9z6IysWpGsSB8D/wo4At4VbnTKjGV8P3ydZG1ju9PR3ePWd1tUqHFxqdCi41PhRYbnwotNn4FHy0GeNRUtGLbwvfA1wEfKD7tM1288DPydcDbjCfYUbwSfgq/QkNgXKoy/wHhp/ADJfrX0gGHjPxQ+H75uol+NzrdLvVKRYTwPfH1E/zIeAc9Cd8vXw90bGDjg6mjvUUDHWx8Guhg49NABxufBjrY+PoJHqrf+UTX6iHcIScf4bLyES4rH+Gy8jU7mg/W74A3VWyaap703GQdAUcrDVj4CJiVj4BZ+QiYlQ+Pom6SPlHb4d3TVn+XkQjfEz/eD+7DHQfwDrFMCd8D3xzouIab9IgXaRaaxLBJ+EvmB5Y7qU4v6VnGaq1Hx/Qz/F74S+SXci6b3aP9z4pn2WwufoFls7n4BZbN5uIXWDabi6/1I8AAeDZjVOQRAs0AAAAASUVORK5CYII=');
+
+    &.focus,
+    &:focus {
+      background-position: -72px 0;
+    }
+
+    &.hover,
+    &:hover {
+      background-position: -24px 0;
+    }
+
+    &.active,
+    &:active {
+      background-position: -47px 1px; // -48px 0 -3d click fx ie
+    }
+
+    &[disabled],
+    &.disabled {
+      background-position: -96px 0;
+    }
+  }
+}
+
+.lte-ie8 fieldset[disabled] .form-radio-js {
+  background-position: -96px 0;
+}

data/_sass/_scaffolding.scss

@@ -0,0 +1,61 @@
+//
+// Common HTML Scaffolding
+// ----------------------------------------
+
+// reset box sizing to border box to enable better percentage use..
+* {
+  @include box-sizing(border-box);
+}
+
+*:before,
+*:after {
+  @include box-sizing(border-box);
+}
+
+// for components, debugging and extensions
+.t-html-cc-ver {
+  content: $version;
+}
+
+// reset html
+html {
+  font-size: 62.5%; // reset browser font size to 1em = 10px
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // reset ios tab color
+}
+
+// set typo basics for all components
+body {
+  color: $font-color-regular;
+  font-family: $font-family-regular;
+  font-size: $font-size-regular;
+  line-height: $line-height-regular;
+}
+
+// link definitions
+a {
+  color: $font-color-link;
+  text-decoration: none;
+
+  &:focus  { color: $font-color-link-focus; text-decoration: underline; @include tab-focus(); }
+  &:hover  { color: $font-color-link-hover; text-decoration: underline; }
+  &:active { color: $font-color-link-active; }
+}
+
+hr {
+  margin-top: $line-height-extracted;
+  margin-bottom: $line-height-extracted;
+  border: 0;
+  border-top: 1px solid $hr-border-color;
+}
+
+.img-responsive {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.img-responsive-vertical {
+  display: block;
+  max-height: 100%;
+  width: auto;
+}

data/_sass/_search.scss

@@ -0,0 +1,90 @@
+//
+// Search
+// --------------------------------------------------
+
+.search {
+  display: none;
+  &.in { display: block;  }
+}
+
+.search-form-set {
+  position: relative;
+
+  .form-input {
+    padding-right: 29px;
+
+    &::-ms-clear {
+      display: none;
+    }
+  }
+
+  .input-group {
+    overflow: hidden;
+  }
+
+  .cancel {
+    position: absolute;
+    right: 8px;
+    top: 7px;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    line-height: 20px;
+    font-size: 18px;
+    overflow: hidden;
+    z-index: 1; // set z-index at least to 1
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+
+  button.cancel {
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    -webkit-appearance: none;
+  }
+
+  &.in .cancel {
+    display: block;
+  }
+}
+
+.search-results {
+  position: absolute;
+  width: 100%;
+  top: 100%;
+  left: 0;
+  z-index: 1;
+  background-color: #fff;
+  overflow: hidden;
+  margin-top: 4px;
+  border-radius: 3px;
+  border: 1px solid $color-border;
+  display: none;
+
+  > ul {
+    list-style: none;
+    margin: 0;
+    padding-left: 0;
+
+    > li {
+      min-height: building-units(4);
+      font-size: $font-size-regular;
+      padding: (capline-bu(1.5, $font-size-regular) - 2px) 12px (baseline-bu(1.5, $font-size-regular) - 1px);
+
+      &.hover,
+      &:hover {
+        background-color: hsv-darken(#fff, 7%, true);
+      }
+    }
+  }
+
+  .has-results & {
+    display: block;
+  }
+}

data/_sass/_select.md

@@ -0,0 +1,55 @@
+# Select
+
+<div class="tc-example" role="application">
+  <form>
+    <fieldset class="form-fieldset">
+      <legend>Gruppen Beschriftung</legend>
+      <div class="form-input-set">
+        <label for="selectbox" title="Primäroptionen Auswahlliste">Selectbox</label>
+        <select name="select" id="selectbox" class="form-select">
+          <option value="opt1">Option A</option>
+          <option value="opt2" selected>Option B</option>
+          <option value="opt3">Option C</option>
+          <option value="opt4" disabled>Option D (inaktiv)</option>
+        </select>
+      </div>
+      <div class="form-input-set">
+        <label for="selectbox2" title="Sekundäroptionen Auswahlliste">Selectbox ( inaktiv )</label>
+        <select name="select2" id="selectbox2" class="form-select" disabled>
+          <option value="opt1">Option A</option>
+          <option value="opt2">Option B</option>
+          <option value="opt3">Option C</option>
+          <option value="opt4" disabled>Option D (inaktiv)</option>
+        </select>
+      </div>
+    </fieldset>
+    <button type="submit" class="sr-only">senden</button>
+  </form>
+</div>
+
+```html
+<!-- Selectbox -->
+<div class="form-input-set">
+  <label for="selectbox" title="Primäroptionen Auswahlliste">Selectbox</label>
+  <select name="select" id="selectbox" class="form-select">
+    <option value="opt1">Option A</option>
+    <option value="opt2" selected>Option B</option>
+    <option value="opt3">Option C</option>
+    <option value="opt4" disabled>Option D (inaktiv)</option>
+  </select>
+</div>
+
+<!-- Selectbox (inaktiv) -->
+<div class="form-input-set">
+  <label for="selectbox2" title="Sekundäroptionen Auswahlliste">Selectbox ( inaktiv )</label>
+  <select name="select2" id="selectbox2" class="form-select" disabled>
+    <option value="opt1">Option eins</option>
+    <option value="opt2">Option zwei</option>
+    <option value="opt3">Option drei</option>
+    <option value="opt4" disabled>Option vier (inaktiv)</option>
+  </select>
+</div>
+```
+
+Nähere Informationen zu Accessibility von Eingabe-Elementen im Artikel:
+[SEO und Accessibility](accessibility.html#aria)

data/_sass/_select.scss

@@ -0,0 +1,146 @@
+//
+// Select - JS
+// ----------------------------------------
+
+.form-select-js {
+  position: relative;
+  cursor: default;
+  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
+
+  .form-select-js-choice {
+    background-color: $select-bgr-color;
+    border: 1px solid $select-border-color;
+    border-radius: $input-border-radius;
+    color: $select-font-color;
+    display: block;
+    padding: $input-padding;
+    padding-right: 35px;
+    width: 100%;
+    text-decoration: none;
+    -webkit-appearance: none;
+    text-align: left;
+    @include transition(all $transition-time-out $transition-function);
+
+    &:before { // caret
+      content: 'd';
+      float: right;
+      font-family: 'TeleIconUi';
+      font-size: 24px;
+      line-height: 1px;
+      margin-top: 10px;
+      margin-right: -29px;
+    }
+  }
+
+  &.focus .form-select-js-choice ,
+  &:focus .form-select-js-choice {
+    border-color: hsv-darken($select-border-color, 21%, true);
+    background-color: hsv-darken($select-bgr-color, 21%, true);
+    outline: 0;
+  }
+
+  &.hover .form-select-js-choice ,
+  &:hover .form-select-js-choice {
+    border-color: hsv-darken($select-border-color, 7%, true);
+    background-color: hsv-darken($select-bgr-color, 7%, true);
+    @include transition($transition-time-in, '-duration');
+  }
+
+  &.selected .form-select-js-choice ,
+  &:selected .form-select-js-choice {
+    border-color: hsv-darken($select-border-color, -15%, true);
+    background-color: hsv-darken($select-bgr-color, -15%, true);
+  }
+
+  &.active .form-select-js-choice ,
+  &:active .form-select-js-choice {
+    border-color: hsv-darken($select-border-color, 15%, true);
+    background-color: hsv-darken($select-bgr-color, 15%, true);
+  }
+
+  &[aria-disabled=true] .form-select-js-choice {
+    background-color: $select-disabled-bgr-color;
+    border-color: $select-disabled-border-color;
+    color: $select-disabled-font-color;
+    cursor: not-allowed;
+  }
+}
+
+.form-select-js-option-scroll-wrapper {
+  display: none;
+  position: fixed;
+  background-color: $select-options-bgr-color;
+  border: 1px solid $input-border-color;
+  border-radius: $input-border-radius;
+  margin-top: building-units(1);
+  margin-bottom: building-units(1);
+  z-index: $z-index-select-options;
+  overflow-y: auto;
+
+  .in > & {
+    display: block;
+  }
+
+  .form-select-js-options {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    > li {
+      padding: $select-options-padding;
+      @include transition(all $transition-time-out $transition-function);
+      outline: 0;
+      cursor: pointer;
+
+      &.focus,
+      &:focus {
+        background-color: hsv-darken($select-options-bgr-color, 15%, true);
+      }
+
+      &.hover { // do hover only by javascript to prevent hover after key event
+        background-color: hsv-darken($select-options-bgr-color, 7%, true);
+        @include transition($transition-time-in, '-duration');
+      }
+
+      &.active,
+      &:active {
+        background-color: hsv-darken($select-options-bgr-color, 15%, true);
+      }
+
+      &[aria-disabled=true] {
+        background-color: inherit;
+        color: #eee;
+        cursor: not-allowed;
+      }
+
+      &.selected {
+        background-color: $select-options-active-bgr-color;
+        color: $font-color-regular;
+
+        &.focus,
+        &:focus {
+          background-color: hsv-darken($select-options-active-bgr-color, 15%, true);
+        }
+
+        &.hover { // do hover only by javascript to prevent hover after key event
+          background-color: hsv-darken($select-options-active-bgr-color, 7%, true);
+        }
+
+        &.active,
+        &:active {
+          background-color: hsv-darken($select-options-active-bgr-color, 15%, true);
+        }
+      }
+    }
+  }
+}
+
+.form-select-js-choice-input {
+  width: 0;
+  position: absolute;
+  outline: 0;
+  background: none;
+  opacity: 0;
+  clip: rect(0, 0, 0, 0);
+}