Merge pull request #3167 from stefanspicer/glass-3-menu-sidebar

Glass menu sidebar

core/app/assets/stylesheets/glass/config/_backend.scss

@@ -0,0 +1,14 @@
+$cms-color: $primary-color !default;
+$cms-hover: lighten($cms-color, 15%) !default;
+$cms-fade: lighten($cms-color, 25%) !default;
+$cms-light: lighten($cms-color, 15%) !default;
+$cms-bright: saturate($cms-light, 45%) !default;
+$cms-dark: darken($cms-color, 5%) !default;
+
+.cms-color {
+  color: $cms-color;
+}
+
+.cms-bg {
+  color: $cms-color;
+}

core/app/assets/stylesheets/glass/config/_base-mixins.scss

@@ -0,0 +1,149 @@
+@mixin transition-fix() {
+  -webkit-transform: translateZ(0);
+     -moz-transform: translateZ(0);
+}
+
+@mixin circle($radius) {
+  width: $radius;
+  height: $radius;
+  -webkit-border-radius: $radius / 2;
+     -moz-border-radius: $radius / 2;
+          border-radius: $radius / 2;
+}
+
+@mixin flip($flip) {
+  -webkit-transform: scale($flip);
+     -moz-transform: scale($flip);
+      -ms-transform: scale($flip);
+       -o-transform: scale($flip);
+          transform: scale($flip);
+}
+
+@mixin ellipsis($ellipsis-width) {
+  overflow: hidden;
+  width: $ellipsis-width;
+  white-space: nowrap;
+      text-overflow: ellipsis;
+  -ms-text-overflow: ellipsis;
+}
+
+@mixin button-primary-variant($color, $background, $border) {
+  $active-background: $primary-hover;
+  $active-border: $primary-hover;
+  color: $color;
+  border-color: $border;
+  background-color: $background;
+  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075));
+  @include hover {
+    color: $color;
+    border-color: $active-border;
+    background-color: $active-background;
+  }
+  &:focus,
+  &.focus,
+  &:hover {
+    color: $white;
+    border-color: $active-border;
+    background-color: $active-background;
+  }
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    color: $white;
+    border-color: $active-border;
+    background-color: $active-background;
+    // Remove the gradient for the pressed/active state
+    background-image: none;
+    @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+    &:hover,
+    &:focus,
+    &.focus {
+      color: $white;
+      border-color: lighten($active-border, 8%);
+      background-color: lighten($active-background, 8%);
+    }
+  }
+  &.disabled,
+  &:disabled {
+    @include hover {
+      border-color: $border;
+      background-color: $background;
+    }
+    &:focus,
+    &.focus {
+      border-color: $border;
+      background-color: $background;
+    }
+  }
+}
+
+@mixin button-outline-primary-variant($color) {
+  color: $color;
+  border-color: $color;
+  background-color: transparent;
+  background-image: none;
+  @include hover {
+    color: #ffffff;
+    border-color: $primary-color;
+    background-color: $primary-color;
+  }
+  &:focus,
+  &.focus,
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    color: #ffffff;
+    border-color: $primary-color;
+    background-color: $primary-color;
+  }
+  &.active {
+    &:hover,
+    &:focus,
+    &.focus {
+      color: $white;
+      border-color: darken($primary-color, 8%);
+      background-color: darken($primary-color, 8%);
+    }
+  }
+  &.disabled,
+  &:disabled {
+    @include hover {
+      border-color: lighten($color, 20%);
+    }
+    &:focus,
+    &.focus {
+      border-color: lighten($color, 20%);
+    }
+  }
+}
+
+@mixin button-outline-inverted-variant($color) {
+  color: $white;
+  border-color: $color;
+  background-color: $color;
+  background-image: $color;
+  @include hover {
+    color: $color;
+    border-color: $color;
+    background-color: transparent;
+  }
+  &:focus,
+  &.focus,
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    color: $color;
+    border-color: $color;
+    background-color: transparent;
+  }
+  &.disabled,
+  &:disabled {
+    @include hover {
+      border-color: lighten($color, 20%);
+    }
+    &:focus,
+    &.focus {
+      border-color: lighten($color, 20%);
+    }
+  }
+}

core/app/assets/stylesheets/glass/config/_base-variables.scss

@@ -0,0 +1,76 @@
+/* -------------------- COLORS -------------------- */
+
+$primary-color: #4084b2 !default;
+$primary-hover: lighten($primary-color, 15%);
+$primary-fade: lighten($primary-color, 25%);
+$primary-light: lighten($primary-color, 15%);
+$primary-bright: saturate($primary-light, 45%);
+$primary-dark: darken($primary-color, 5%);
+$secondary-color: #4fa89d !default;
+$secondary-hover: lighten($secondary-color, 8%);
+$white: #fff;
+$white-fade: rgba(255,255,255,.15);
+$white-opaque: rgba(255,255,255,.75);
+$off-white: #f2f2f2;
+$off-white-1: #f5f5f5;
+$off-white-2: #f0f0f0;
+$black: #000;
+$black-fade: rgba(0, 0, 0, .15);
+$black-opaque: rgba(50, 50, 50, .75);
+$gray-1: #e7e7e7;
+$gray-2: #dedede;
+$gray-3: #c4c4c4;
+$gray-4: #aeaeae;
+$gray-5: #999999;
+$gray-6: #5a5a5a;
+$gray-7: #303030;
+$gray-8: #2c2c2c;
+$gray-9: #1f1f1f;
+$beige: #e1dcd9;
+$beige-1: #f1f1ef;
+$brown: #8c8987;
+$blue: #3076d8;
+$steel-blue: #2C2C33;
+$steel-blue-1: #19191E;
+$red: #e94d4d;
+$red-fade: #bf4d4b;
+$red-bg: #ffdfcf;
+$green: #5bc890;
+$mint: #5bc9a9;
+$salmon: #FC9797;
+$maroon: #994169;
+$olive: #3D9970;
+$yellow: #fec641;
+$yellow-fade: #EEE28D;
+$orange: #e99c00;
+
+
+
+/* -------------------- FONTS -------------------- */
+
+$primary-font: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$secondary-font: Georgia, "Times New Roman", Times, serif !default;
+
+
+
+/* -------------------- MODIFIERS -------------------- */
+
+$shadow: 0 1px 4px 0 rgba(50, 50, 50, .1);
+$shadow-solid: inset 0 -2px 0 0 rgba(50, 50, 50, .25);
+$flip: -1, 1;
+$flip-vertical: 1, -1;
+$scale: 1.1;
+$degrees45: 45deg;
+$negdegrees45: 315deg;
+$ellipsis-width: auto;
+$start: rgba(0,0,0,.12);
+$stop: rgba(0,0,0,0);
+$paragraph-margin-bottom: 1.5rem !default;
+
+
+
+/* -------------------- ANIMATION -------------------- */
+
+$transition: .2s;
+$bezier: cubic-bezier(0,0,.25,1);
+$bounce: cubic-bezier(0.550, 0.085, 0.460, 1.380);