paint-rails 0.7.24 → 0.8.27.1

data/vendor/assets/stylesheets/paint/components/_notification.scss

@@ -0,0 +1,124 @@
+@keyframes notificationSlideIn {
+  0% {
+    transform: rotateX(-90deg);
+  }
+
+  100% {
+    transform: rotateX(0deg);
+  }
+}
+
+@keyframes notificationFade {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+$notification-colors: (
+  primary: primary,
+  secondary: secondary,
+  alert: alert,
+  error: alert,
+  warning: warning,
+  success: success,
+  info: info
+);
+
+@mixin notification-animation(
+  $animation: 'notificationSlideIn',
+  $duration: $global-transition-duration,
+  $direction: normal
+) {
+  animation: $animation;
+  animation-duration: $duration;
+  animation-timing-function: $global-transition-easing;
+  animation-fill-mode: forwards;
+  animation-direction: $direction;
+  transition-duration: $duration;
+  transform-style: preserve-3d;
+  transform-origin: center top;
+  perspective: 1000px;
+}
+
+@mixin notification(
+  $type: info,
+  $content-selector: '> span',
+  $close-selector: '> .close',
+  $is-closing-class: 'is-closing'
+) {
+  $background-color: color($type, light);
+  $contrast-text-dark: color($type, dark);
+  $contrast-text-light: color($type, light);
+  $text-color: contrast($background-color, $contrast-text-light, $contrast-text-dark);
+  $text-shadow-color: contrast($text-color, color(black), color(white));
+
+  @include notification-animation;
+
+  background-color: $background-color;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(255, 255, 255, .3);
+  left: 0;
+  position: relative;
+  top: 0;
+  width: 100%;
+
+  &.#{$is-closing-class} {
+    @include notification-animation('notificationFade', $direction: reverse);
+  }
+
+  #{$content-selector},
+  #{$close-selector} {
+    @include notification-animation('notificationFade', $global-transition-duration * 2);
+
+    color: $text-color;
+    display: inline-block;
+    font-size: $h4-font-size;
+    font-weight: $font-weight-bold;
+    padding: $column-gutter / 2 $column-gutter;
+    text-shadow: -1px 0 $text-shadow-color;
+  }
+
+  #{$close-selector} {
+    @include button-icon(times);
+
+    color: transparentize($text-color, .4);
+    position: absolute;
+    right: $column-gutter / 2;
+    text-align: center;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+@mixin notifications($position: fixed) {
+  @if $position == fixed {
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+  } @else {
+    position: $position;
+    width: 100%;
+  }
+}
+
+@mixin notification-placeholders {
+  %notifications {
+    @include notifications;
+  }
+
+  @each $type, $palette in $notification-colors {
+    %notification-#{$type} {
+      @include notification($palette);
+    }
+  }
+}
+
+@include exports('paint-notification') {
+  @include notification-placeholders;
+}

data/vendor/assets/stylesheets/{components → paint/components}/_panel.scss

@@ -1,31 +1,59 @@
+////
+/// Panel
+/// @group panel
+/// @since v0.8.5
+////
+
+/// Default settings
+
+/// @example scss - Usage
+///   .custom-panel-widget {
+///     @extend %panel-widget;
+///   }
+///
+/// @example scss - Custom Panel Styles
+///   // paint-settings.scss
+///   $panel: (
+///     styles: (
+///       success: color(success, dark),
+///       info: color(info)
+///     )
+///   );
+///
+///   // Custom stylesheet
+///   .fancy-green-panel {
+///     @extend %panel-success;
+///   }
+
 $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
+    default: color(border, light),
+    primary: color(primary),
+    widget: color(link)
   ),
 );
 
-@if global-variable-exists(panel) {
-  $panel: map-merge-settings($panel-default-settings, $panel);
-} @else {
-  $panel: $panel-default-settings;
-}
+$panel: () !default;
+$panel: map-merge-settings($panel-default-settings, $panel);
 
 $include-html-paint-panel: true !default;
 
 @function panel-settings($setting, $property: null) {
   @if $property {
-    @return map-get(map-get($panel, $setting), $property),
+    @return map-get(map-get($panel, $setting), $property);
   } @else {
-    @return map-get($panel, $setting)
+    @return map-get($panel, $setting);
   }
 }
 
+/// Panel header background
+/// @access private
+/// @param {Color} $background-color [color(border, light)] - Sets the panel header background to a gradient and sets the text color dynamically based on the color brightness.
+
 @mixin panel-background(
-  $background-color: lighten($global-section-border-color, 5%)
+  $background-color: color(border, light)
 ) {
   $dark-background-color: desaturate(adjust-hue($background-color, 10%), 15%);
   $light-background-color: saturate(adjust-hue($background-color, 10%), 15%);
@@ -33,22 +61,25 @@ $include-html-paint-panel: true !default;
   > 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%);
+    background-color: color(border, light);
   }
 }
 
+/// The placeholder that holds the base panel styles
+/// @access public
+
 %panel {
   backface-visibility: hidden;
-  background-color: $white;
-  border: 1px solid $global-section-border-color;
+  background-color: color(white);
+  border: 1px solid color(border);
   border-radius: $global-radius;
-  box-shadow: 0 2px 1px $global-section-border-color;
+  box-shadow: 0 2px 1px color(border);
 
   > header,
   > footer {
@@ -75,6 +106,10 @@ $include-html-paint-panel: true !default;
   }
 }
 
+/// Generates all panel variation placeholders defined in the settings
+/// @access private
+/// @param {Map} $styles [panel-settings(styles)] - The style variations map
+
 @mixin panel-placeholders(
   $styles: panel-settings(styles)
 ) {

data/vendor/assets/stylesheets/{components → paint/components}/_quick-jump.scss

@@ -1,14 +1,13 @@
-$include-html-paint-quick-jump: true !default;
-
+$quick-jump: () !default;
 $quick-jump-default-settings: (
   bar: (
     background-color: #e1e5ea,
-    active-background-color: $white,
+    active-background-color: color(white),
     icon-size: $button-icon-size,
     height: $layout-sidebar-header-height
   ),
   results: (
-    background-color: #f2f2f2,
+    background-color: color(gray, white-smoke),
     item-height: rem-calc(50)
   ),
   actions: (
@@ -19,11 +18,9 @@ $quick-jump-default-settings: (
   )
 );
 
-@if global-variable-exists(quick-jump) {
-  $quick-jump: map-merge-settings($quick-jump-default-settings, $quick-jump);
-} @else {
-  $quick-jump: $quick-jump-default-settings;
-}
+$quick-jump: map-merge-settings($quick-jump-default-settings, $quick-jump);
+
+$include-html-paint-quick-jump: true !default;
 
 @function quick-jump-settings($setting, $property: null) {
   @if $property {
@@ -52,7 +49,7 @@ $quick-jump-default-settings: (
       @include single-transition(all, 150ms, linear);
 
       border-radius: $global-rounded;
-      color: $primary-color;
+      color: color(primary);
       height: quick-jump-settings(bar, icon-size);
       overflow: hidden;
       position: absolute;
@@ -91,7 +88,7 @@ $quick-jump-default-settings: (
 
       > div,
       > .icon {
-        background-color: $primary-color;
+        background-color: color(primary);
         color: quick-jump-settings(bar, active-background-color);
       }
     }
@@ -178,7 +175,7 @@ $quick-jump-default-settings: (
       @extend .hide-for-small-only;
       @extend %grid-column-2;
 
-      color: $primary-color;
+      color: color(primary);
       line-height: quick-jump-settings(results, item-height);
       margin-bottom: 0;
       margin-top: 0;
@@ -206,7 +203,8 @@ $quick-jump-default-settings: (
 
       cursor: pointer;
 
-      &:hover {
+      &:hover,
+      &.focused {
         background-color: lighten($background-color, 3%);
       }
 

data/vendor/assets/stylesheets/paint/components/_side-panel.scss

@@ -0,0 +1,248 @@
+$side-panel: () !default;
+$side-panel-default-settings: (
+  size: (
+    small: 100%,
+    medium: 45em,
+    large: 75em,
+    xlarge: 90em,
+    xxlarge: 120em
+  ),
+
+  scale-ratio: (
+    small: 1,
+    large: .5
+  ),
+
+  actions-bar: (
+    background-color: #e1e5ea,
+    button-size: 35px,
+    height: rem-calc(60)
+  ),
+
+  footer-bar: (
+    height: rem-calc(90)
+  ),
+
+  actions: (
+    navigation: (
+      previous: angle-left,
+      next: angle-right
+    )
+  )
+);
+
+$side-panel: map-merge-settings($side-panel-default-settings, $side-panel);
+
+$include-html-paint-side-panel: true !default;
+
+@function side-panel-settings($setting, $property: null) {
+  @if $property {
+    @return map-get(map-get($side-panel, $setting), $property);
+  } @else {
+    @return map-get($side-panel, $setting);
+  }
+}
+
+@mixin side-panel-size($size: large, $scaled: false) {
+  $width: side-panel-settings(size, $size);
+  $ratio: side-panel-settings(scale-ratio, large);
+  $main-translation: -100% * $ratio;
+  $drawer-width: "calc(#{$width} * #{$ratio})";
+
+  @if ($size == small or $size == medium) {
+    $ratio: side-panel-settings(scale-ratio, small);
+  }
+
+  @if $scaled {
+    $width: "calc(#{$width} * #{$ratio})";
+    $drawer-width: $width;
+    $main-translation: -100%;
+  }
+
+  > .main {
+    width: #{$width};
+  }
+
+  > .drawer {
+    width: #{$drawer-width};
+  }
+
+  &.active {
+    > .main {
+      transform: translate(0, 0);
+    }
+
+    &.drawer-active {
+      // Animating the width of the drawer seems more natural. However, we must
+      // use percentages otherwise the transform is wonky (not fluid).
+      > .main {
+        transform: translate($main-translation, 0);
+      }
+
+      > .drawer {
+        transform: translate(0, 0);
+      }
+    }
+  }
+}
+
+@mixin side-panel($overlay: true, $scaled: false) {
+  @if $overlay {
+    @include overlay($position: fixed, $z-index: 200);
+  }
+
+  > .main,
+  > .drawer {
+    background-color: color(white);
+    box-shadow: 5px 5px 15px -2px rgba(0, 0, 0, .125);
+    height: 100%;
+    overflow: hidden;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translate(100%, 0);
+    transition: transform $global-transition-duration $global-transition-easing;
+
+    &.has-footer > .content {
+      bottom: side-panel-settings(footer-bar, height);
+    }
+
+    &.has-header > .content {
+      top: side-panel-settings(actions-bar, height);
+    }
+
+    > header {
+      @include side-panel-header;
+
+      .actions {
+        @include side-panel-header-actions;
+      }
+    }
+
+    > .content {
+      bottom: 0;
+      left: 0;
+      overflow-y: auto;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
+    > footer {
+      border-top: solid 1px $global-section-border-color;
+      bottom: 0;
+      height: side-panel-settings(footer-bar, height);
+      left: 0;
+      line-height: side-panel-settings(footer-bar, height);
+      margin: 0;
+      padding: 0;
+      position: absolute;
+      right: 0;
+
+      .actions {
+        float: left;
+        height: side-panel-settings(footer-bar, height);
+        line-height: side-panel-settings(footer-bar, height);
+        width: 100%;
+      }
+    }
+  }
+
+  @media #{$small-only} {
+    @include side-panel-size(small, $scaled);
+  }
+
+  @media #{$medium-only} {
+    @include side-panel-size(medium, $scaled);
+  }
+
+  @media #{$large-only} {
+    @include side-panel-size(large, $scaled);
+  }
+
+  @media #{$xlarge-only} {
+    @include side-panel-size(xlarge, $scaled);
+  }
+
+  @media #{$xxlarge-up} {
+    @include side-panel-size(xxlarge, $scaled);
+  }
+
+  > .main {
+    z-index: 1;
+  }
+}
+
+@mixin side-panel-header {
+  @extend %grid-row;
+
+  background-color: side-panel-settings(actions-bar, background-color);
+  height: side-panel-settings(actions-bar, height);
+  line-height: side-panel-settings(actions-bar, height);
+  min-height: side-panel-settings(actions-bar, height);
+  top: 0;
+  padding: 0 $column-gutter;
+  position: absolute;
+}
+
+@mixin side-panel-header-actions {
+  $side-panel-actions: side-panel-settings(actions);
+
+  > .content {
+    @extend %grid-column-10;
+
+    padding: 0 !important;
+
+    > ul {
+      @extend %button-group;
+
+      line-height: inherit !important;
+
+      > li {
+        float: left;
+        margin: 0 !important;
+      }
+    }
+  }
+
+  .close {
+    @extend %grid-column-2;
+
+    padding: 0 !important;
+    text-align: right;
+
+    > button {
+      @include button-icon(close);
+
+      border-color: color(border);
+    }
+  }
+
+  button {
+    line-height: side-panel-settings(actions-bar, height);
+
+    &:before {
+      font-size: $h3-font-size;
+      line-height: side-panel-settings(actions-bar, button-size) !important;
+      width: side-panel-settings(actions-bar, button-size) !important;
+    }
+  }
+
+  @each $action-group, $actions in $side-panel-actions {
+    .#{$action-group}-actions {
+      @each $action, $icon in $actions {
+        .#{$action} {
+          @include button-icon($icon);
+        }
+      }
+    }
+  }
+}
+
+@include exports('paint-side-panel') {
+  @if $include-html-paint-side-panel {
+    .side-panel {
+      @include side-panel;
+    }
+  }
+}