doc-msp-theme 0.1.0

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

@@ -0,0 +1,9 @@
+//
+// Notifications
+// ----------------------------------------
+
+.dark {
+  .modal-content {
+    background-color: $modal-content-bgr;
+  }
+}

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

@@ -0,0 +1,15 @@
+
+
+.dark {
+
+  .navbar-nav {
+    > li > a {
+      @include button-variant($font-color-regular, $background-color-regular, $color-element-border);
+    }
+  }
+
+  .navbar-default {
+    background-color: $background-color-regular;
+    color: $font-color-regular;
+  }
+}

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

@@ -0,0 +1,94 @@
+//
+// Notifications
+// ----------------------------------------
+.dark {
+  .notification {
+    background-color: fallback-rgba(#525252, .3, $background-color-regular);
+    // background-color: rgba(82, 82, 82, .92); since alpha is to low
+
+    &:empty {
+      display: none;
+    }
+
+  }
+
+  .notification-dismissible {
+    padding-right: building-units(4);
+
+    > .close {
+      margin-right: building-units(-3);
+      margin-top: -7px;
+      margin-left: building-units(1.5);
+
+      &.focus,
+      &:focus {
+        color: $notification-close-button-focus;
+        outline: 0;
+      }
+
+      &.hover,
+      &:hover {
+        color: $notification-close-button-hover;
+      }
+
+      &.active,
+      &:active {
+        color: $notification-close-button-active;
+      }
+
+    }
+  }
+
+  .notification-content,
+  .notification-left,
+  .notification-right {
+    overflow: hidden;
+    zoom: 1;
+  }
+
+  .notification-content > p {
+    padding: 0;
+    margin: 0;
+  }
+
+  .notification-left {
+    float: left;
+    margin-right: building-units(1);
+  }
+
+  .notification-right {
+    float: right;
+    margin-left: building-units(1);
+  }
+
+  .notification-heading {
+    font-size: $font-size-headline-h3;
+    font-weight: 600;
+    padding: 0;
+    margin: 0;
+  }
+
+  .notification-overlay {
+    box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
+  }
+
+  .notification-positive {
+    @include notification-variant($color-positive, $color-positive, $color-bright);
+  }
+
+  .notification-warning {
+    @include notification-variant($color-warning, $color-warning, $color-bright);
+  }
+
+  .notification-negative {
+    @include notification-variant($color-negative, $color-negative, $color-bright);
+  }
+
+  .notification-badge {
+    float: right;
+    margin-top: building-units(-.5) + 1;
+    margin-right: building-units(-1);
+    background-color: $color-gray-dark;
+    color: #fff;
+  }
+}

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

@@ -0,0 +1,46 @@
+//
+// Pager
+// ----------------------------------------
+.dark {
+
+  ////// Pager //////
+  .pager {
+    background: $pager-background-color;
+    border-color: $pager-border-color;
+    color: $pager-text-color;
+    cursor: pointer;
+    text-decoration: none;
+
+    &.focus,
+    &:focus {
+      text-decoration: none;
+    }
+
+    &.hover,
+    &:hover {
+      text-decoration: none;
+      background-color: hsv-lighten($pager-background-color, 7%, true);
+      border-color: hsv-lighten($pager-border-color, 7%, true);
+    }
+
+    &.active,
+    &:active {
+      text-decoration: none;
+      background-color: hsv-lighten($pager-background-color, 15%, true);
+      border-color: hsv-lighten($pager-border-color, 15%, true);
+    }
+
+    &.disabled,
+    &[disabled] {
+      cursor: not-allowed;
+      background: $pager-disabled-bgr-color;
+      border-color: $pager-disabled-border-color;
+      color: $pager-disabled-text-color;
+    }
+  }
+
+  .pager-clean {
+    border-color: transparent;
+  }
+}
+

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

@@ -0,0 +1,81 @@
+//
+// Pagination
+// ----------------------------------------
+.dark {
+  .pagination {
+
+    > li {
+
+      > a {
+        background-color: $pagination-bgr-color;
+        border: 1px solid $pagination-border-color;
+      }
+    }
+
+    > li > a {
+
+      &.focus,
+      &:focus {
+        background-color: hsv-lighten($pagination-bgr-color, 21%, true);
+        border-color: hsv-lighten($pagination-border-color, 21%, true);
+      }
+
+      &.hover,
+      &:hover {
+        background-color: hsv-lighten($pagination-bgr-color, 7%, true);
+        border-color: hsv-lighten($pagination-border-color, 7%, true);
+      }
+
+      &.active,
+      &:active {
+        background-color: hsv-lighten($pagination-bgr-color, 15%, true);
+        border-color: hsv-lighten($pagination-border-color, 15%, true);
+      }
+
+    }
+
+    > .active > a {
+      background-color: $pagination-active-bgr-color;
+      border-color: $pagination-active-border-color;
+      overflow: hidden;
+
+      &:before {
+        content: url('data:image/gif;base64,R0lGODdhDAAMAKUiAOYgheYhhuYihuYih+Yjh+YjiOYkh+YkiOYliOYlieYmiOYmieYniecniecniuYoiucoiecoiuYpiucpiucqiucqi+cri+csjOctjOcujecvjecvjucwjugxj+gyj+g0kOg1kOg1kf///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////ywAAAAADAAMAAAGXUAE4lAYBACAAOFwEB4IRqSS6YQGroKls3gNZJsJptWrXSzEAnKT8XgQ3oOvgiGpVN54A4JuuVzwTXMPFhgaGwVMCQ0QERQYHB4eiQ0RExQWGR0fIIkOlRWYHiAhQQA7');
+      }
+
+      &.focus,
+      &:focus {
+        background-color: hsv-darken($pagination-active-bgr-color, 16%, true);
+        border-color: hsv-darken($pagination-active-border-color, 16%, true);
+      }
+
+      &.hover,
+      &:hover {
+        background-color: hsv-darken($pagination-active-bgr-color, 5%, true);
+        border-color: hsv-darken($pagination-active-border-color, 5%, true);
+      }
+
+      &.active,
+      &:active {
+        background-color: hsv-darken($pagination-active-bgr-color, 10%, true);
+        border-color: hsv-darken($pagination-active-border-color, 10%, true);
+      }
+    }
+
+    > .disabled {
+      > a,
+      > a:hover,
+      > a:focus,
+      > a:active {
+        background-color: $pagination-disabled-bgr-color;
+        border-color: $pagination-disabled-border-color;
+        cursor: not-allowed;
+      }
+    }
+
+  }
+
+  .pagination-small {
+    @include pagination-variant($pagination-width-small, $pagination-height-small, $pagination-gutter-small);
+  }
+}

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

@@ -0,0 +1,8 @@
+//
+// QTip2 Vendor JavaScript - Styling
+// ----------------------------------------
+
+.qtip-default {
+  background-color: #fff;
+  color: $font-color-dark;
+}

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

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

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

@@ -0,0 +1,29 @@
+//
+// Common HTML Scaffolding
+// ----------------------------------------
+
+
+
+// set typo basics for all components
+.dark {
+  background-color: $background-color-regular;
+  color: $font-color-regular;
+
+
+  // link definitions
+  a {
+    color: $font-color-link;
+    text-decoration: none;
+
+    &:focus { color: $font-color-link-focus; text-decoration: underline; }
+    &: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;
+  }
+}

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

@@ -0,0 +1,93 @@
+//
+// Select - JS
+// ----------------------------------------
+.dark {
+  .form-select-js {
+    position: relative;
+    cursor: default;
+
+    .form-select-js-choice {
+      background-color: $select-bgr-color;
+      border-color: $select-border-color;
+      color: $select-font-color;
+    }
+
+
+    &.focus .form-select-js-choice ,
+    &:focus .form-select-js-choice {
+      background-color: hsv-lighten($select-bgr-color, 21%, true);
+    }
+
+    &.hover .form-select-js-choice ,
+    &:hover .form-select-js-choice {
+      background-color: hsv-lighten($select-bgr-color, 7%, true);
+    }
+
+    &.selected .form-select-js-choice ,
+    &:selected .form-select-js-choice {
+      background-color: hsv-darken($select-bgr-color, -15%, true);
+    }
+
+    &.active .form-select-js-choice ,
+    &:active .form-select-js-choice {
+      background-color: hsv-lighten($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;
+    }
+  }
+
+  .form-select-js-option-scroll-wrapper {
+
+    background-color: $select-options-bgr-color;
+    border: 0;
+    color: $select-font-color-dropdown;
+
+    .form-select-js-options {
+
+      > li {
+
+        &.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);
+        }
+
+        &.active,
+        &:active {
+          background-color: hsv-darken($select-options-bgr-color, 15%, true);
+        }
+
+        &[aria-disabled=true] {
+          background-color: inherit;
+          color: #eee;
+        }
+
+        &.selected {
+          background-color: $select-options-active-bgr-color;
+          color: $select-font-color-dropdown;
+
+          &.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);
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,57 @@
+
+.dark {
+  .table {
+    width: 100%;
+
+    > thead,
+    > tbody,
+    > tfoot {
+      > tr {
+        > th,
+        > td {
+          border-bottom: $table-row-border-bottom;
+        }
+      }
+    }
+
+    // set header & footer font weight
+
+
+    // align header text to bottom and header borders
+    > thead > tr > th {
+      border-bottom: $table-header-border-bottom;
+    }
+
+    // set footer borders
+    > tfoot > tr > th {
+      border-top: $table-footer-border-top;
+      border-bottom: $table-footer-border-bottom;
+    }
+
+    // common table caption
+    > caption {
+      border-bottom: $table-header-border-bottom;
+    }
+  }
+
+  .table-hover {
+    > tbody > tr:hover {
+      > th,
+      > td {
+        color: $table-font-color-hover;
+        background-color: $table-bgr-color-hover;
+      }
+    }
+  }
+
+  .table-striped {
+    @include table-striped-variant($table-gray-odd-font-color, $table-gray-odd-bgr-color);
+  }
+
+  @include table-row-variant('positive', $table-font-color-positive, $table-bgr-color-positive, $background-color-regular);
+  @include table-row-variant('warning', $table-font-color-warning, $table-bgr-color-warning, $background-color-regular);
+  @include table-row-variant('negative', $table-font-color-negative, $table-bgr-color-negative, $background-color-regular);
+  @include table-row-variant('brand', $table-font-color-brand, $table-bgr-color-brand, $background-color-regular);
+  @include table-row-variant('inactive', $table-font-color-inactive, $table-bgr-color-inactive, $background-color-regular);
+
+}