paint-rails 0.6.7 → 0.7.24

data/vendor/assets/stylesheets/components/_layout.scss

@@ -4,8 +4,13 @@ $layout-main-selector: '.application' !default;
 $layout-sidebar-font-weight: $font-weight-normal !default;
 $layout-sidebar-footer-height: rem-calc(60) !default;
 $layout-sidebar-footer-selector: 'footer' !default;
-$layout-sidebar-header-height: rem-calc(60) !default;
-$layout-sidebar-header-logo-height: $layout-sidebar-header-height * 0.5 !default;
+$layout-sidebar-footer-avatar-selector: '.avatar' !default;
+$layout-sidebar-footer-title-selector: '.name' !default;
+$layout-sidebar-footer-actions-selector: '.actions' !default;
+$layout-sidebar-footer-actions-icon: cog !default;
+$layout-sidebar-collapse-duration: .325s;
+$layout-sidebar-header-height: 60px !default;
+$layout-sidebar-header-logo-height: $layout-sidebar-header-height * .5 !default;
 $layout-sidebar-header-selector: '> header' !default;
 $layout-sidebar-heading-font-size: $small-font-size !default;
 $layout-sidebar-heading-font-weight: $font-weight-extrabold !default;
@@ -27,10 +32,14 @@ $layout-sidebar-nav-link-text-color: darken($layout-sidebar-nav-text-color, 30%)
 $layout-sidebar-nav-padding: $column-gutter / 2 !default;
 $layout-sidebar-nav-selector: '> nav' !default;
 $layout-sidebar-nav-list-selector: '> ul' !default;
+$layout-sidebar-nav-list-item-selector: '> li' !default;
 $layout-sidebar-nav-title-height: rem-calc(40) !default;
 $layout-sidebar-nav-title-text-color: darken($layout-sidebar-nav-text-color, 50%) !default;
 $layout-sidebar-nav-width-collapsed: $layout-sidebar-nav-link-icon-width + 2 * $layout-sidebar-nav-padding !default;
 $layout-sidebar-nav-width: rem-calc(260) !default;
+$layout-sidebar-nav-bubble-selector: '.bubble' !default;
+$layout-sidebar-nav-bubble-width: rem-calc(24) !default;
+$layout-sidebar-nav-bubble-background-color: $steel !default;
 $layout-sidebar-selector: '.sidebar' !default;
 
 $include-html-paint-layout: true !default;
@@ -38,8 +47,8 @@ $include-html-paint-layout: true !default;
 %layout-sidebar-heading {
   font-size: $layout-sidebar-heading-font-size;
   font-weight: $layout-sidebar-heading-font-weight;
-  text-transform: uppercase;
   letter-spacing: 1px;
+  text-transform: uppercase;
 }
 
 @mixin layout-navigation-icons {
@@ -56,6 +65,7 @@ $include-html-paint-layout: true !default;
 @mixin layout-sidebar {
   $nav-top-margin: 0;
   $nav-bottom-margin: 0;
+  $subnav-selector: '#{$layout-sidebar-nav-list-item-selector} #{$layout-sidebar-nav-list-selector}';
 
   @if $layout-sidebar-include-header {
     $nav-top-margin: $layout-sidebar-header-height;
@@ -68,10 +78,12 @@ $include-html-paint-layout: true !default;
   #{$layout-sidebar-selector} {
     background-color: $layout-sidebar-nav-background-color;
     float: left;
-    font-family: $header-font-family;
     font-weight: $layout-sidebar-font-weight;
     height: 100%;
     position: relative;
+    transform: translate3d(0, 0, 0);
+    transition: width $layout-sidebar-collapse-duration cubic-bezier(.78, .01, .27, 1);
+    transition-delay: .015s;
     width: $layout-sidebar-nav-width;
 
     @if $layout-sidebar-include-header {
@@ -92,144 +104,44 @@ $include-html-paint-layout: true !default;
 
           color: $white;
           display: inline-block;
-          margin: 0;
           -webkit-font-smoothing: $body-font-smoothing;
+          margin: 0;
+          opacity: 1;
+          transition: 
+            opacity $layout-sidebar-collapse-duration / 2 ease-in,
+            width $layout-sidebar-collapse-duration / 1.5 ease-in;
+          width: auto;
         }
       }
     }
 
     #{$layout-sidebar-nav-selector} {
-      bottom: $nav-bottom-margin;
-      left: 0;
-      overflow-y: auto;
-      position: absolute;
-      right: 0;
-      top: $nav-top-margin;
-
-      header {
-        background-color: $layout-sidebar-nav-title-background-color;
-        color: $layout-sidebar-nav-title-text-color;
-        line-height: $layout-sidebar-nav-title-height;
-        padding: 0 $layout-sidebar-nav-padding;
-        white-space: nowrap;
-
-        h1 {
-          @extend %layout-sidebar-heading;
-
-          color: $layout-sidebar-nav-link-text-color;
-          display: inline-block;
-          margin: 0;
-        }
-
-        .toggle-collapse {
-          color: $layout-sidebar-nav-link-text-color;
-          display: inline-block;
-          float: right;
-          line-height: $layout-sidebar-nav-title-height;
-
-          button {
-            @include icon(chevron-circle-left);
-
-            background-color: transparent;
-            border-width: 0;
-            margin-bottom: 0;
-          }
-        }
-      }
-
-      #{$layout-sidebar-nav-list-selector} {
-        @include layout-navigation-icons();
-
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-
-        a {
-          @include single-transition(background-color, 150ms, linear);
-
-          border-bottom: 1px solid $layout-sidebar-nav-title-background-color;
-          display: block;
-          font-size: $paragraph-font-size;
-          line-height: $layout-sidebar-nav-link-height;
-          padding: 0 $layout-sidebar-nav-padding;
-          text-decoration: none;
-          white-space: nowrap;
-          -webkit-font-smoothing: $header-font-smoothing;
-
-          &, &:visited {
-            color: $layout-sidebar-nav-link-text-color;
-          }
-
-          &:hover {
-            background-color: $layout-sidebar-nav-link-hover-background-color;
-          }
-
-          &.active {
-            background-color: $layout-sidebar-nav-link-active-background-color;
-            color: $layout-sidebar-nav-link-active-text-color;
-
-            &:hover {
-              background-color: lighten($layout-sidebar-nav-link-active-background-color, 5%);
-              color: lighten($layout-sidebar-nav-link-active-text-color, 5%);
-            }
-          }
-        }
-
-        i {
-          @include single-transition(margin, 150ms, linear);
-
-          border-radius: $layout-sidebar-nav-link-icon-roundness;
-          color: $layout-sidebar-nav-link-text-color;
-          margin-right: $layout-sidebar-nav-padding;
-          padding: $layout-sidebar-nav-link-icon-padding 0;
-          text-align: center;
-          width: $layout-sidebar-nav-link-icon-width;
-          font-size: $base-font-size;
-        }
-      }
+      @include layout-sidebar-nav($nav-bottom-margin, $nav-top-margin, $subnav-selector);
     }
 
     @if $layout-sidebar-include-footer {
       #{$layout-sidebar-footer-selector} {
+        @include layout-sidebar-footer-with-actions;
+
         background: $layout-sidebar-nav-title-background-color;
         bottom: 0;
         color: $layout-sidebar-nav-link-text-color;
         height: $layout-sidebar-footer-height;
         left: 0;
         line-height: $layout-sidebar-footer-height;
+        padding: 0 $layout-sidebar-nav-padding;
         position: absolute;
         right: 0;
+        white-space: nowrap;
       }
     }
 
     &.collapsed {
-      width: $layout-sidebar-nav-width-collapsed;
-
-      #{$layout-sidebar-nav-selector} {
-        #{$layout-sidebar-nav-list-selector} a {
-          > i {
-            margin-right: 0;
-          }
+      @include layout-sidebar-nav-collapsed;
 
-          > span {
-            display: none;
-          }
-        }
-      }
-
-      header {
-        h1 {
-          display: none;
-        }
-
-        .toggle-collapse {
-          float: none;
-
-          button {
-            @include icon(chevron-circle-right);
-
-            width: $layout-sidebar-nav-link-icon-width;
-          }
+      @if $layout-sidebar-include-footer {
+        #{$layout-sidebar-footer-selector} {
+          @include layout-sidebar-footer-with-actions-collapsed;
         }
       }
     }
@@ -237,7 +149,8 @@ $include-html-paint-layout: true !default;
 }
 
 @mixin layout {
-  html, body {
+  html,
+  body {
     height: 100%;
     overflow: hidden;
   }
@@ -258,7 +171,234 @@ $include-html-paint-layout: true !default;
   }
 }
 
-@include exports("paint-layout") {
+@mixin layout-sidebar-nav($nav-bottom-margin: 0, $nav-top-margin: 0, $subnav-selector: '> li > ul') {
+  bottom: $nav-bottom-margin;
+  left: 0;
+  overflow-y: auto;
+  position: absolute;
+  right: 0;
+  top: $nav-top-margin;
+
+  header {
+    background-color: $layout-sidebar-nav-title-background-color;
+    color: $layout-sidebar-nav-title-text-color;
+    line-height: $layout-sidebar-nav-title-height;
+    padding: 0 $layout-sidebar-nav-padding;
+    white-space: nowrap;
+
+    h1 {
+      @extend %layout-sidebar-heading;
+
+      color: $layout-sidebar-nav-link-text-color;
+      display: inline-block;
+      margin: 0;
+    }
+
+    .toggle-collapse {
+      color: $layout-sidebar-nav-link-text-color;
+      float: right;
+      line-height: $layout-sidebar-nav-title-height;
+
+      button {
+        @include icon(chevron-circle-left);
+
+        background-color: transparent;
+        border-width: 0;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  #{$layout-sidebar-nav-list-selector} {
+    @include layout-navigation-icons();
+
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    a {
+      @include single-transition(background-color, 150ms, linear);
+
+      border-bottom: 1px solid $layout-sidebar-nav-title-background-color;
+      display: block;
+      font-size: $paragraph-font-size;
+      -webkit-font-smoothing: $header-font-smoothing;
+      line-height: $layout-sidebar-nav-link-height;
+      padding: 0 $layout-sidebar-nav-padding;
+      text-decoration: none;
+      white-space: nowrap;
+
+      &,
+      &:visited {
+        color: $layout-sidebar-nav-link-text-color;
+      }
+
+      &:hover {
+        background-color: $layout-sidebar-nav-link-hover-background-color;
+      }
+
+      &.active {
+        background-color: $layout-sidebar-nav-link-active-background-color;
+        color: $layout-sidebar-nav-link-active-text-color;
+
+        &:hover {
+          background-color: lighten($layout-sidebar-nav-link-active-background-color, 5%);
+          color: lighten($layout-sidebar-nav-link-active-text-color, 5%);
+        }
+      }
+
+      > span {
+        transition: opacity $layout-sidebar-collapse-duration / 2 ease-in;
+      }
+    }
+
+    i {
+      @include single-transition(margin, 150ms, linear);
+
+      border-radius: $layout-sidebar-nav-link-icon-roundness;
+      color: $layout-sidebar-nav-link-text-color;
+      font-size: $base-font-size;
+      margin-right: $layout-sidebar-nav-padding;
+      padding: $layout-sidebar-nav-link-icon-padding 0;
+      text-align: center;
+      width: $layout-sidebar-nav-link-icon-width;
+    }
+
+    #{$layout-sidebar-nav-bubble-selector} {
+      background-color: $layout-sidebar-nav-bubble-background-color;
+      border-radius: $global-rounded;
+      color: $white;
+      float: right;
+      font-size: $small-font-size * .8;
+      font-weight: $font-weight-extrabold;
+      letter-spacing: -1px;
+      line-height: $layout-sidebar-nav-bubble-width;
+      margin-right: $layout-sidebar-nav-link-icon-padding / 2;
+      margin-top: ($layout-sidebar-nav-link-height - $layout-sidebar-nav-bubble-width) / 2;
+      min-width: $layout-sidebar-nav-bubble-width;
+      text-align: center;
+    }
+
+    #{$subnav-selector} {
+      background-color: darken($layout-sidebar-nav-background-color, 5%);
+      border-left: solid 3px lighten($layout-sidebar-nav-background-color, 5%);
+      margin: 0;
+      padding: 0;
+
+      a span:not(#{$layout-sidebar-nav-bubble-selector}) {
+        color: darken($layout-sidebar-nav-link-text-color, 10%);
+      }
+
+      i {
+        color: transparentize($layout-sidebar-nav-link-text-color, .5);
+        font-size: $small-font-size !important;
+      }
+    }
+  }
+}
+
+@mixin layout-sidebar-nav-collapsed {
+  width: $layout-sidebar-nav-width-collapsed;
+
+  #{$layout-sidebar-nav-selector} #{$layout-sidebar-nav-list-selector} a {
+    position: relative;
+
+    > i {
+      margin-right: 0;
+    }
+
+    > span:not(#{$layout-sidebar-nav-bubble-selector}) {
+      opacity: 0;
+      width: 0;
+    }
+
+    > #{$layout-sidebar-nav-bubble-selector} {
+      left: $layout-sidebar-nav-link-icon-width;
+      position: absolute;
+      top: - $layout-sidebar-nav-link-icon-padding / 2;
+    }
+  }
+
+  h1 {
+    opacity: 0;
+    width: 0;
+  }
+
+  .toggle-collapse {
+    float: none;
+    margin-bottom: 0;
+
+    button {
+      @include icon(caret-square-o-right);
+    }
+  }
+
+  #{$layout-sidebar-nav-selector} header {
+    h1 {
+      display: none;
+    }
+
+    .toggle-collapse {
+      float: none;
+
+      button {
+        @include icon(chevron-circle-right);
+
+        width: $layout-sidebar-nav-link-icon-width;
+      }
+    }
+  }
+}
+
+@mixin layout-sidebar-footer-with-actions {
+  #{$layout-sidebar-footer-avatar-selector} {
+    float: left;
+    margin-right: $layout-sidebar-nav-padding;
+
+    img {
+      border-radius: 50%;
+      height: $layout-sidebar-nav-link-icon-width;
+      width: $layout-sidebar-nav-link-icon-width;
+    }
+  }
+
+  #{$layout-sidebar-footer-title-selector} {
+    color: $layout-sidebar-nav-link-text-color;
+    margin-right: $layout-sidebar-nav-padding / 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  #{$layout-sidebar-footer-actions-selector} {
+    display: inline-block;
+    float: right;
+    line-height: $layout-sidebar-footer-height;
+
+    button {
+      @include button-icon($layout-sidebar-footer-actions-icon);
+
+      background-color: transparent;
+      border: 0;
+      color: $layout-sidebar-nav-link-text-color;
+      margin-bottom: 0;
+    }
+  }
+}
+
+@mixin layout-sidebar-footer-with-actions-collapsed {
+  #{$layout-sidebar-footer-avatar-selector},
+  #{$layout-sidebar-footer-title-selector} {
+    display: none;
+  }
+
+  #{$layout-sidebar-footer-actions-selector} {
+    display: block;
+    float: none;
+    text-align: center;
+  }
+}
+
+@include exports('paint-layout') {
   @if $include-html-paint-layout {
     @include layout;
     @include layout-sidebar;

data/vendor/assets/stylesheets/components/_panel.scss

@@ -0,0 +1,91 @@
+$panel-default-settings: (
+  header-height: $h1-font-size + $column-gutter,
+  footer-height: $h1-font-size + $column-gutter / 2,
+  styles: (
+    default: lighten($global-section-border-color, 5%),
+    primary: $primary-color,
+    widget: $anchor-font-color
+  ),
+);
+
+@if global-variable-exists(panel) {
+  $panel: map-merge-settings($panel-default-settings, $panel);
+} @else {
+  $panel: $panel-default-settings;
+}
+
+$include-html-paint-panel: true !default;
+
+@function panel-settings($setting, $property: null) {
+  @if $property {
+    @return map-get(map-get($panel, $setting), $property),
+  } @else {
+    @return map-get($panel, $setting)
+  }
+}
+
+@mixin panel-background(
+  $background-color: lighten($global-section-border-color, 5%)
+) {
+  $dark-background-color: desaturate(adjust-hue($background-color, 10%), 15%);
+  $light-background-color: saturate(adjust-hue($background-color, 10%), 15%);
+
+  > header {
+    background: linear-gradient(to right, $dark-background-color, $background-color);
+
+    h1 {
+      color: contrast($background-color);
+    }
+  }
+
+  > footer {
+    background-color: lighten($global-section-border-color, 5%);
+  }
+}
+
+%panel {
+  backface-visibility: hidden;
+  background-color: $white;
+  border: 1px solid $global-section-border-color;
+  border-radius: $global-radius;
+  box-shadow: 0 2px 1px $global-section-border-color;
+
+  > header,
+  > footer {
+    a {
+      font-weight: $font-weight-bold;
+    }
+
+    i {
+      margin-right: $column-gutter / 4;
+    }
+  }
+
+  > header {
+    border-radius: $global-radius $global-radius 0 0;
+
+    h1 {
+      font-size: $base-font-size;
+      font-weight: $font-weight-bold;
+      letter-spacing: 0;
+      line-height: panel-settings(header-height);
+      margin: 0;
+      padding: 0 $column-gutter / 2;
+    }
+  }
+}
+
+@mixin panel-placeholders(
+  $styles: panel-settings(styles)
+) {
+  @each $style, $background-color in $styles {
+    %panel-#{$style} {
+      @extend %panel;
+      @include panel-background($background-color);
+    }
+  }
+}
+
+@include exports('paint-panel') {
+  @include panel-placeholders;
+}