doc-msp-theme 0.1.0

data/_sass/themes/bevel-theme/theme.scss

@@ -0,0 +1,13 @@
+@import '../../mixins';
+
+.btn-bevel {
+  &.btn-default {
+    @include linear-gradient(#fff, #e7e7e7);
+    text-shadow: 0 1px 0 #fff;
+  }
+
+  &.btn-primary {
+    @include linear-gradient(#fe319a, #ce006a);
+    text-shadow: 0 -1px 0 #cc0069;
+  }
+}

data/_sass/themes/dark-theme/_badges.scss

@@ -0,0 +1,37 @@
+//
+// Badges
+// ----------------------------------------
+.dark {
+  .badge {
+    background-color: $badges-bgr-color;
+    color: $badges-font-color-normal;
+
+    &:empty {
+      display: none;
+    }
+  }
+
+  .badge-positive {
+    @include badge-variant($badges-bgr-color-positive);
+  }
+
+  .badge-warning {
+    @include badge-variant($badges-bgr-color-warning);
+  }
+
+  .badge-negative {
+    @include badge-variant($badges-bgr-color-negative, $badges-font-color-bright);
+  }
+
+  .badge-function {
+    @include badge-variant($badges-bgr-color-function, $badges-font-color-bright);
+  }
+
+  .badge-brand {
+    @include badge-variant($badges-bgr-color-brand, $badges-font-color-bright);
+  }
+
+  .badge-dark {
+    @include badge-variant($badges-bgr-color-dark, $badges-font-color-bright);
+  }
+}

data/_sass/themes/dark-theme/_brandnav.scss

@@ -0,0 +1,30 @@
+
+
+.dark {
+  .brandnav {
+    > ul > li > a {
+      @include button-variant($font-color-regular, $background-color-regular, $color-element-border);
+    }
+  }
+
+  .brandnav-lvl-2 {
+    background-color: $background-color-regular;
+
+    @media (min-width: #{$grid-float-breakpoint}px) {
+      > ul > li > a {
+        &,
+        &:hover,
+          &:active,
+          &:focus {
+          color: $font-color-regular;
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
+  .brandnavhead {
+    background-color: $background-color-regular;
+  }
+
+}

data/_sass/themes/dark-theme/_breadcrumb.scss

@@ -0,0 +1,17 @@
+//
+// Breadcrumb
+// ----------------------------------------
+
+.dark {
+  .breadcrumb {
+    > li {
+      + li:before {
+        color: $breadcrumb-color;
+      }
+    }
+
+    > .active {
+      color: $breadcrumb-color;
+    }
+  }
+}

data/_sass/themes/dark-theme/_button.scss

@@ -0,0 +1,86 @@
+//
+// Buttons
+// ----------------------------------------
+.dark {
+
+  .btn {
+
+    &.hover,
+    &:hover {
+      text-decoration: none;
+    }
+
+    &.disabled,
+    &[disabled],
+    &.disabled:hover,
+      &[disabled]:hover, {
+      cursor: not-allowed;
+      background: hsv-darken($color-element-background, 5%, true);
+      border-color: hsv-darken($color-element-border, 14%, true);
+      color: hsv-darken($font-color-regular, 50%, true);
+    }
+  }
+
+  %btn-default,
+  .btn-default {
+    @include button-variant($font-color-regular, $color-element-background, $color-element-border);
+  }
+
+  .btn-brand {
+    @include button-variant($color-bright, $color-brand, $button-border-color-brand, #f4067d, #f4c8df, #ff0683, #ffd0e8);
+
+    &.disabled,
+    &[disabled] {
+      &,
+      &.focus,
+      &:focus,
+        &.hover,
+        &:hover {
+        color: $color-bright;
+        background: $color-brand;
+        border-color: $button-border-color-brand;
+        opacity: .3;
+      }
+    }
+  }
+
+  .btn-positive {
+    @include button-variant($color-bright, $color-positive, $button-border-color-positive);
+  }
+
+  .btn-negative {
+    @include button-variant($color-bright, $color-negative, $button-border-color-negative);
+  }
+
+  .btn-clean {
+    @extend %btn-default;
+    color: $color-bright;
+    background-color: transparent;
+
+    &,
+    &.focus,
+    &:focus,
+      &.hover,
+      &:hover,
+      &.active,
+      &:active {
+      border-color: transparent;
+    }
+
+    &.hover,
+    &:hover {
+      background: hsv-lighten($color-element-background, 0%, true);
+    }
+
+    &.active,
+    &:active {
+      background: hsv-lighten($color-element-background, 15%, true);
+    }
+
+    &.focus,
+    &:focus {
+      background: hsv-lighten($color-element-background, 21%, true);
+    }
+
+  }
+}

data/_sass/themes/dark-theme/_checkbox.scss

@@ -0,0 +1,9 @@
+//
+// Checkbox - JS
+// ----------------------------------------
+
+.dark {
+  .form-checkbox-js > .border {
+    color: $checkbox-border-color;
+  }
+}

data/_sass/themes/dark-theme/_content-list.scss

@@ -0,0 +1,40 @@
+//
+// Content-List
+// ----------------------------------------
+.dark {
+  .content-list {
+    > li,
+    > .content-list-item {
+      border-bottom: 1px solid $color-border-bright;
+    }
+  }
+
+  .content-list-item {
+    &.selected {
+      color: $color-brand;
+    }
+  }
+
+  a.content-list-item {
+    color: inherit;
+    text-decoration: none;
+
+    &.focus,
+    &:focus {
+
+      background-color: $cl-element-bgr-color-focus;
+    }
+
+    &.hover,
+    &:hover {
+      background-color: $cl-element-bgr-color-hover;
+    }
+
+    &.active,
+    &:active {
+      background-color: $cl-element-bgr-color-active;
+    }
+  }
+
+  @include content-list-item-variant('brand', $cl-element-font-color-brand, $cl-element-bgr-color-brand);
+}

data/_sass/themes/dark-theme/_forms.scss

@@ -0,0 +1,107 @@
+//
+// Default Form Elements
+// ----------------------------------------
+
+.dark {
+  label {
+    display: inline-block;
+  }
+
+  .form-input {
+    background-color: $input-bgr-color;
+    border-color: $input-border-color;
+    @include placeholder($input-font-color-placeholder);
+
+
+    &.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);
+    }
+
+    &.focus,
+    &:focus {
+      background-color: $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;
+      @include placeholder($input-disabled-font-color-placeholder);
+    }
+  }
+
+  // firefox fix to prevent textareas < one line
+  .decoration-positive { @include input-decoration-variant($color-positive, $input-border-color-positive, #fff); }
+  .decoration-warning { @include input-decoration-variant($color-warning, $input-border-color-warning, #fff); }
+  .decoration-negative { @include input-decoration-variant($color-negative, $input-border-color-negative, #fff); }
+
+
+  // default checkbox/radio style
+  .form-radio-set,
+  .form-checkbox-set {
+
+    &.disabled label {
+      color: $input-disabled-font-color;
+    }
+  }
+
+  .form-fieldset {
+
+    > legend {
+      color: $font-color-light;
+      border-bottom-color: $heading-border-color;
+    }
+  }
+
+  // fieldset width fix for ff
+  // @-moz-document url-prefix() {
+  //   .form-fieldset {
+  //     display: table-cell;
+  //   }
+  // }
+
+  .form-select {
+    background-color: $color-element-background;
+    border-color: $input-border-color;
+    color: $input-font-color;
+
+    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;
+      @include placeholder($input-disabled-font-color-placeholder);
+    }
+  }
+}

data/_sass/themes/dark-theme/_images.scss

@@ -0,0 +1,30 @@
+//
+// Default Image Classes
+// ----------------------------------------
+
+
+.dark {
+  .img-thumbnail {
+    border-color: $color-element-border;
+    background: #fff;
+  }
+
+  .img-vignette-square {
+    display: inline-block;
+    font-size: 1px;
+
+    > img {
+      outline-color: $color-element-border;
+      outline-offset: -1px;
+      padding: .5px;
+    }
+  }
+
+
+  .img-vignette-round {
+    &:after {
+      content: '';
+      border-color: $color-element-border;
+    }
+  }
+}

data/_sass/themes/dark-theme/_mixins.scss

@@ -0,0 +1,67 @@
+//
+// Mixins
+// ----------------------------------------
+
+@mixin button-variant($color-text, $color-background, $color-border, $color-background-hover: false, $color-border-hover: false, $color-background-active: false, $color-border-active: false, $color-background-disabled: false, $color-border-disabled: false) {
+
+  @if $color-background-hover == false {
+    $color-background-hover: hsv-lighten($color-background, 7%, true);
+  }
+
+  @if $color-border-hover == false {
+    $color-border-hover: hsv-lighten($color-border, 7%, true);
+  }
+
+  @if $color-background-active == false {
+    $color-background-active: hsv-lighten($color-background, 15%, true);
+  }
+
+  @if $color-border-active == false {
+    $color-border-active: hsv-lighten($color-border, 15%, true);
+  }
+
+  @if $color-background-disabled == false {
+    $color-background-disabled: hsv-darken($color-element-background, 5%, true);
+  }
+
+  @if $color-border-disabled == false {
+    $color-border-disabled: hsv-darken($color-element-border, 14%, true);
+  }
+
+
+  color: $color-text;
+  background-color: $color-background;
+  border-color: $color-border;
+
+  &.focus,
+  &:focus {
+    color: $color-text;
+  }
+
+  &.hover,
+  &:hover {
+    color: $color-text;
+    background-color: $color-background-hover;
+    border-color: $color-border-hover;
+  }
+
+  &.active,
+  &:active {
+    color: $color-text;
+    background-color: $color-background-active;
+    border-color: $color-border-active;
+  }
+
+  &.disabled,
+  &[disabled] {
+    &,
+    &.focus,
+    &:focus,
+      &.hover,
+      &:hover {
+      color: hsv-darken($font-color-regular, 50%, true);
+      background: $color-background-disabled;
+      border-color: $color-border-disabled;
+    }
+  }
+}