doc-msp-theme 0.1.0

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

@@ -0,0 +1,70 @@
+//
+// Headlines
+// ----------------------------------------
+
+.dark {
+
+  h1, h2, h3, h4, h5, h6,
+  .h1, .h2, .h3, .h4, .h5, .h6 {
+
+    &.underline, &.cluster {
+      border-color: $heading-border-color;
+    }
+
+    &.cluster {
+      color: $font-color-light;
+    }
+
+    small,
+    .small {
+      color: $font-color-light;
+    }
+
+  }
+
+  dfn,
+  abbr,
+  abbr[title] {
+    background-image: $dfn-background-image;
+  }
+
+  mark {
+    background-color: $marked-bgr-color;
+    color: $marked-font-color;
+  }
+
+  .text-positive { @include emphasis-variant($font-color-positive); }
+  .text-warning { @include emphasis-variant($font-color-warning); }
+  .text-negative { @include emphasis-variant($font-color-negative); }
+  .text-brand { @include emphasis-variant($font-color-brand); }
+  .text-inactive { @include emphasis-variant($font-color-inactive, true); }
+
+  //
+  // Lists
+  // ----------------------------------------
+
+
+  .list-unordered-brand > li:before {
+    color: $font-color-brand;
+  }
+
+  .list-ordered-brand > li:before {
+    color: $font-color-brand;
+  }
+
+  //
+  // Blockquote
+  // ----------------------------------------
+
+  .figure {
+    border-left: $quote-figure-border-left;
+  }
+
+
+  .quote-list {
+    .quote-list-item {
+      border-left: $quote-figure-border-left;
+    }
+  }
+
+}

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

@@ -0,0 +1,171 @@
+//
+// Components Variables and Settings - Dark
+// ----------------------------------------
+
+////// Scaffolding //////
+$background-color-regular:          #262626; // used for transparency calculations
+
+////// Colors //////
+$color-bright:                      #fff;
+$color-dark:                        #383838;
+
+$color-positive:                    #6bb32d;
+$color-warning:                     #dbad39;
+$color-negative:                    #d90000;
+$color-brand:                       #e20074;
+$color-inactive:                    #d0d0d0;
+$color-function:                    #0ca1dc;
+$color-highlight:                   #ff0;
+
+$color-border:                      #858585;
+$color-border-bright:               #5c5c5c;
+
+$color-element-background:          #383838;
+$color-element-border:              #737373;
+$color-element-divider:             #858585;
+
+
+$font-color-regular:                $color-bright;
+$font-color-light:                  #a3a3a3;
+$font-color-dark:                   $color-dark;
+
+$font-color-positive:               $color-positive;
+$font-color-warning:                $color-warning;
+$font-color-negative:               $color-negative;
+$font-color-brand:                  $color-brand;
+$font-color-inactive:               hsv-lighten($background-color-regular, 10%, true);
+
+$font-color-link:                   #31c3f7;
+$font-color-link-hover:             hsv-darken($font-color-link, 7%, true); // -7%
+$font-color-link-active:            hsv-darken($font-color-link, 15%, true); // -15%
+$font-color-link-focus:             hsv-darken($font-color-link, 21%, true); // -21%
+
+
+
+//////Heading/////
+
+$heading-border-color:              $color-element-divider;
+
+////// Mark //////
+$marked-font-color:                 $font-color-dark;
+$marked-bgr-color:                  $color-highlight;
+
+
+////// Quotes //////
+$quote-figure-border-left:          1px solid $color-border-bright;
+
+////// Tables //////
+
+$table-row-border-bottom:           1px solid $color-border-bright;
+
+$table-header-border-bottom:        1px solid $color-border;
+$table-footer-border-top:           1px double $color-border; // double wins over solid from $table-row-border-bottom
+$table-footer-border-bottom:        1px solid $color-border;
+
+$table-font-color-hover:            hsv-darken($font-color-regular, 7%, true);
+
+$table-font-color-positive:         hsv-darken($font-color-positive, 10%, true);
+$table-font-color-warning:          hsv-darken($font-color-warning , 10%, true);
+$table-font-color-negative:         hsv-darken($font-color-negative, 10%, true);
+$table-font-color-brand:            $color-bright;
+$table-font-color-inactive:         $font-color-inactive;
+
+$table-bgr-color-hover:             hsv-lighten($background-color-regular, 12%, true);
+
+$table-bgr-color-positive:          $color-positive;
+$table-bgr-color-warning:           $color-warning;
+$table-bgr-color-negative:          $color-negative;
+$table-bgr-color-brand:             $color-brand; // brand has no fallback
+$table-bgr-color-inactive:          transparent; // inactive has no fallback
+
+$table-bgr-color-alpha:             .05;
+$table-bgr-color-hover-alpha:       .2;
+
+$table-gray-odd-bgr-color:          hsv-darken($background-color-regular, -5%, true);
+$table-gray-odd-font-color:         $font-color-regular;
+
+
+
+
+////// Forms //////
+$input-bgr-color:                   $color-bright;
+$input-border-color:                $color-bright;
+
+$input-border-color-positive:       hsv-darken($color-positive, -15, true);
+$input-border-color-warning:        hsv-darken($color-warning, 0, true);
+$input-border-color-negative:       hsv-darken($color-negative, 0, true);
+
+
+
+////// Checkboxes | JS //////
+$checkbox-border-color:             $color-element-border;
+
+////// Radios | JS //////
+$radio-border-color:                $color-element-border;
+
+////// Selects | JS //////
+$select-font-color:                 $font-color-regular;
+$select-font-color-dropdown:        $font-color-dark;
+$select-border-color:               $color-element-border;
+$select-bgr-color:                  $color-element-background;
+
+$select-disabled-font-color:        hsv-darken($select-font-color, 50%, true);
+$select-disabled-border-color:      hsv-darken($select-border-color, 14%, true);
+$select-disabled-bgr-color:         hsv-darken($select-bgr-color, 5%, true);
+
+$select-options-bgr-color:          $color-bright;
+$select-options-active-bgr-color:   hsv-darken($select-options-bgr-color, 15%, true);
+
+////// Buttons //////
+$button-border-color-positive:      hsv-darken($color-positive, 32%, true);
+$button-border-color-function:      hsv-darken($color-function, 32%, true);
+$button-border-color-negative:      hsv-darken($color-negative, 32%, true);
+$button-border-color-brand:         #e3bacf; // special color
+
+
+////// Content-Lists //////
+$cl-element-bgr-color-focus:        hsv-lighten($background-color-regular, 21%, true);
+$cl-element-bgr-color-hover:        hsv-lighten($background-color-regular, 7%, true);
+$cl-element-bgr-color-active:       hsv-lighten($background-color-regular, 15%, true);
+
+$cl-element-font-color-brand:       $color-bright;
+$cl-element-bgr-color-brand:        $color-brand;
+
+////// Pager //////
+$pager-text-color:                  $font-color-regular;
+$pager-border-color:                $color-element-border;
+$pager-background-color:            $background-color-regular;
+
+$pager-disabled-text-color:         hsv-darken($pager-text-color, 50%, true);
+$pager-disabled-border-color:       hsv-darken($pager-border-color, 14%, true);
+$pager-disabled-bgr-color:          hsv-lighten($pager-background-color, 5%, true);
+
+////// Breadcrumb //////
+$breadcrumb-color:                  #757575;
+
+////// Pagination //////
+
+$pagination-bgr-color:              $color-element-background;
+$pagination-border-color:           $color-element-border;
+
+$pagination-active-bgr-color:       $color-brand;
+$pagination-active-border-color:    $pagination-active-bgr-color;
+
+$pagination-disabled-bgr-color:     $pagination-bgr-color;
+$pagination-disabled-border-color:  hsv-darken($pagination-border-color, 15%, true);
+
+
+////// Badges //////
+$badges-bgr-color:                  $color-bright;
+$badges-bgr-color-positive:         $color-positive;
+$badges-bgr-color-warning:          $color-warning;
+$badges-bgr-color-negative:         $color-negative;
+$badges-bgr-color-function:         $color-function;
+$badges-bgr-color-brand:            $color-brand;
+$badges-bgr-color-dark:             $color-element-background;
+$badges-font-color-normal:          $color-dark;
+$badges-font-color-bright:          $font-color-regular;
+
+
+////// Modal //////
+$modal-content-bgr:                 $color-dark;

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

@@ -0,0 +1,36 @@
+// Core functions
+@import '../../functions';
+
+// Core variables and mixins
+@import '../../variables';
+@import '../../mixins';
+
+@import 'variables';
+@import 'mixins';
+
+// Reset + Scaffolding
+@import 'scaffolding';
+
+// Basic css
+@import 'type';
+@import 'images';
+@import 'tables';
+@import 'button';
+@import 'forms';
+
+// Components
+@import 'content-list';
+@import 'navbar';
+@import 'brandnav';
+@import 'breadcrumb';
+@import 'pagination';
+@import 'badges';
+@import 'modal';
+@import 'notifications';
+@import 'pager';
+
+// Components with JavaScript
+@import 'checkbox';
+@import 'radio';
+@import 'select';
+@import 'qtip';

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

@@ -0,0 +1,415 @@
+// black alpha = 90%
+// background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkYGB4BsQogJEGggAKvQSEMnZimwAAAABJRU5ErkJggg==) repeat;
+// black alpha = 70%
+// background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkYGDYDMQogJEGggDP6QOF2TXaEQAAAABJRU5ErkJggg==) repeat;
+// black alpha = 50%
+// background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkYGCoB2IUwEgDQQCT/QKB/1JzRQAAAABJRU5ErkJggg==) repeat;
+
+// Core functions
+@import '../../functions';
+
+// Core variables and mixins
+@import '../../variables';
+@import '../../mixins';
+
+// The Grid
+@import '../../grid';
+
+@if $compile-grid {
+  @include grid-debug();
+
+}
+
+.debug-cross-section {
+  .container-fixed,
+  .container-liquid,
+  &.container-fixed,
+  &.container-liquid {
+    background: url('../images/bu-cross-section.png');
+    background-size: building-units(2) building-units(2);
+  }
+}
+
+.debug-bu-overlay {
+  background-size: building-units(2) building-units(2);
+  position: absolute;
+  z-index: 99997;
+  top: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  background: url('../images/bu-cross-section-alpha.png');
+  opacity: .25;
+}
+
+debug {
+  .media-frame,
+  &.media-frame {
+    background: #ddf;
+  }
+}
+
+// scss-lint:disable IdSelector
+#debug-thingy {
+  position: fixed;
+  display: block;
+
+  // black alpha = 70%
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkYGDYDMQogJEGggDP6QOF2TXaEQAAAABJRU5ErkJggg==') repeat;
+  border: 1px solid #000;
+  border-color: rgba(0, 0, 0, .2);
+  top: 12px;
+  right: 12px;
+  padding: 12px;
+  border-radius: 6px;
+  font-size: .75em;
+  color: #fff;
+  z-index: 99999;
+  min-width: 100px;
+
+  .fa {
+    display: inline-block;
+    width: 16px;
+  }
+
+  .color-swatch {
+    display: inline-table;
+    width: building-units(2);
+    height: building-units(2);
+    border: 2px solid rgba(0, 0, 0, 0);
+    background-color: rgba(0, 0, 0, 0);
+    margin: 7px 0;
+
+    outline: inset 1px #ccc;
+
+    .fa {
+      display: table-cell;
+      width: 100%;
+      height: 100%;
+      vertical-align: middle;
+      text-align: center;
+    }
+  }
+}
+
+#debug-thingy .size-info {
+  font-size: 10px;
+}
+
+#debug-thingy .icon-cancel {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  font-size: 8px;
+}
+
+#debug-thingy .size-o-tron {
+  position: relative;
+  background: #000;
+  width: 100%;
+  height: 2px;
+  margin: 10px 0 20px;
+  cursor: move;
+}
+
+.size-o-tron .screensize {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  text-align: center;
+  color: #666;
+  margin-bottom: 0;
+}
+
+#debug-thingy .size-o-tron .size-bar {
+  background: #0ca1dc;
+  width: 0;
+  height: 2px;
+}
+
+#debug-thingy .size-o-tron .breakpoint {
+  background: #eee;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1px;
+  height: 2px;
+}
+// scss-lint:enable IdSelector
+
+.debug-breakpoint-thingy {
+  position: fixed;
+  z-index: 99998;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  border-left: 1px dashed #0ca1dc;
+  border-color: rgba(12, 161, 220, .75);
+}
+
+.debug-image-overlay {
+  position: absolute;
+  background-repeat: no-repeat;
+  z-index: 99996;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-height: 100%;
+  opacity: .25;
+  pointer-events: none;
+
+  &.fixed {
+    position: fixed;
+  }
+
+  &.align-left {
+    background-position: top left;
+    text-align: left;
+  }
+
+  &.align-center {
+    background-position: top center;
+    text-align: center;
+  }
+
+  &.align-right {
+    background-position: top right;
+    text-align: right;
+  }
+
+
+  // results in a 50% grey, if html and overlay are equal.
+  // contrasts though aren't as good as with mixed-blend-mode
+  &.inverted {
+    opacity: .5;
+    // most prefixes not supported today, but it won't hurt and the time may come.
+    -webkit-filter: invert(100%);
+    -moz-filter: invert(100%);
+    -o-filter: invert(100%);
+    -ms-filter: invert(100%);
+    filter: invert(100%);
+  }
+
+
+  // Currently only enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags
+  // Will be featured in Safari 8 and Firefox 32
+
+  &.mixed {
+    opacity: 1;
+    // prefixes not supported today, but it won't hurt and the time may come.
+    -webkit-mix-blend-mode: difference;
+    -moz-mix-blend-mode: difference;
+    -o-mix-blend-mode: difference;
+    -ms-mix-blend-mode: difference;
+    mix-blend-mode: difference;
+  }
+}
+
+.debug-breakpoint-thingy:before,
+.debug-breakpoint-thingy:after {
+  content: ' ';
+  // black alpha = 50%
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkYGCoB2IUwEgDQQCT/QKB/1JzRQAAAABJRU5ErkJggg==') repeat;
+  color: #fff;
+  padding: .1em .3em;
+}
+
+.debug-breakpoint-thingy:before {
+  text-align: right;
+}
+
+.debug-image-overlay-settings {
+  border-top: 1px solid #ccc;
+  margin: building-units(1) 0 0; //0;
+  padding: building-units(1) 0 0; //0;
+
+  button {
+    background: #000;
+  }
+
+  .debug-col {
+    width: 170px;
+
+    span.icon {
+      display: inline-block;
+      width: 28px;
+    }
+
+    select,
+    input {
+      width: 116px;
+      color: #666;
+    }
+
+    input[type="number"] {
+      width: 40px;
+    }
+
+    input[type="range"] {
+      vertical-align: middle;
+    }
+  }
+}
+
+.measure-rect {
+  .measure-rect-background,
+  .measure-rect-thumb,
+  .measure-rect-border {
+    position: fixed;
+    display: block;
+    z-index: 99998;
+  }
+
+  .measure-rect-background {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0;
+    // black alpha = 70%
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkYGDYDMQogJEGggDP6QOF2TXaEQAAAABJRU5ErkJggg==') repeat;
+  }
+
+  .measure-rect-thumb {
+    left: 100px;
+    top: 100px;
+    width: 20px;
+    height: 20px;
+    border: 1px solid #0090c4;
+    // blue alpha = 50%
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAE0lEQVQIW2NkmHi0ngENMNJAEAAnuAkvTPFU7wAAAABJRU5ErkJggg==') repeat;
+
+    &.top.left {
+      cursor: nw-resize;
+    }
+
+    &.top.right {
+      cursor: ne-resize;
+    }
+
+    &.bottom.left {
+      cursor: sw-resize;
+    }
+
+    &.bottom.right {
+      cursor: se-resize;
+    }
+  }
+
+  .measure-rect-border {
+    outline: 2px solid #0090c4;
+    cursor: move;
+  }
+}
+
+.noselect {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.mouse-move-event-target-dummy {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  min-height: 100%;
+  min-width: 100%;
+}
+
+.cursor-crosshair {
+  cursor: crosshair !important;
+}
+
+.debug-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  border: 0;
+  box-sizing: border-box;
+}
+
+.debug-scroll-pane {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  right: 20px;
+  bottom: 20px;
+  background: #333;
+  margin: 0;
+  padding: 0;
+  box-sizing: content-box;
+  overflow: auto;
+}
+
+.debug-scroll-pane-thumb {
+  position: fixed;
+  background: #fff;
+  margin: 0;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #000;
+}
+
+// scss-lint:disable IdSelector
+#measure-rect-info {
+  display: none;
+}
+// scss-lint:enable IdSelector
+
+.breakpoint-thingy-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: #f00;
+}
+
+.debug-image-overlay-wrapper {
+  overflow: hidden;
+}
+
+@include create-emphased-classes($grid-settings-size-exclusive);
+
+.visible-on,
+.hidden-on {
+
+  margin-bottom: 12px;
+
+  span {
+    display: block;
+    padding: 10px 12px;
+    text-align: center;
+    border-radius: 4px;
+  }
+
+  .hidden-xs,
+  .hidden-s,
+  .hidden-m,
+  .hidden-l,
+  .hidden-xl {
+    color: #999;
+    border: 1px solid #ddd;
+    background-color: #eee;
+  }
+
+  .visible-xs-block,
+  .visible-s-block,
+  .visible-m-block,
+  .visible-l-block,
+  .visible-xl-block {
+    color: #468847;
+    border: 1px solid #d6e9c6;
+    background-color: #dff0d8;
+  }
+
+}