paint-rails 0.7.24 → 0.8.27.1

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

@@ -1,7 +1,21 @@
+////
+/// Grid placeholders generator
+/// @group grid
+/// @since v0.8.5
+////
+
+/// Grid placeholder prefix
+
 $grid-prefix: 'grid-column';
 $grid-responsive-media-queries: $small-up, $medium-up, $large-up, $xlarge-up, $xxlarge-up;
 $grid-responsive-sizes: 'small', 'medium', 'large', 'xlarge', 'xxlarge';
 
+$medium-down: "#{$screen} and (max-width:#{upper-bound($medium-range)})" !default;
+$large-down: "#{$screen} and (max-width:#{upper-bound($large-range)})" !default;
+
+/// Generate grid column placeholders
+/// and uses Foundation to generate column placeholders
+
 @mixin grid-column-placeholders($prefix: $grid-prefix) {
   @for $i from 1 through $total-columns {
     %#{$prefix}-#{$i} {
@@ -20,7 +34,7 @@ $grid-responsive-sizes: 'small', 'medium', 'large', 'xlarge', 'xxlarge';
 
 @include grid-column-placeholders;
 
-// Generate placeholders for different media queries, e.g. %grid-column-small-4
+/// Generate placeholders for different media queries, e.g. %grid-column-small-4
 
 @for $i from 1 through length($grid-responsive-media-queries) {
   $query: nth($grid-responsive-media-queries, $i);
@@ -32,6 +46,25 @@ $grid-responsive-sizes: 'small', 'medium', 'large', 'xlarge', 'xxlarge';
   }
 }
 
+///
+/// @example scss - Usage
+///   .wrapper {
+///     @extend %grid-row;
+///
+///     .sidebar {
+///       @extend %grid-column-medium-4;
+///       @extend %grid-column-large-3;
+///       @extend %grid-column-xlarge-2;
+///     }
+///
+///     .content {
+///       @extend %grid-column-medium-8;
+///       @extend %grid-column-large-9;
+///       @extend %grid-column-xlarge-10;
+///     }
+///   }
+///
+
 %grid-row {
   @include grid-row;
 }

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

@@ -0,0 +1,100 @@
+////
+/// Icons Component
+/// @group icon
+/// @since v0.8.16
+////
+
+/// Extends FontAwesome icons and Paint icons
+
+@import url(https://use.fonticons.com/kits/4d2e7f35/4d2e7f35.css);
+
+/// Custom Paint icons map
+
+$paint-icons: (
+  archive: '\f016',
+  chart: '\f017',
+  check: '\f018',
+  circle-check: '\f019',
+  circle-cross: '\f01a',
+  circle-minus: '\f01b',
+  circle-plus: '\f01c',
+  clip: '\f01d',
+  clock: '\f01e',
+  cog: '\f01f',
+  cross: '\f020',
+  dashboard: '\f014',
+  delete: '\f021',
+  download: '\f022',
+  file: '\f023',
+  flag: '\f024',
+  folder: '\f025',
+  globe: '\f026',
+  head: '\f027',
+  heart: '\f028',
+  image: '\f029',
+  left-arrow: '\f02a',
+  link: '\f02b',
+  lock: '\f02c',
+  mail: '\f02d',
+  menu: '\f02e',
+  // Libsass bug sass/libsass#934
+  'notification': '\f02f',
+  printer: '\f030',
+  right-arrow: '\f015',
+  search: '\f031',
+  share: '\f032',
+  toggle: '\f033',
+  upload: '\f034',
+  video: '\f035',
+);
+
+/// Renders font-awesome icons
+/// @param {string} $name - The name of the icon
+/// @example scss - Usage
+///   .dashboard-icon {
+///     @include icon(dashboard);
+///   }
+
+@mixin icon($name) {
+  @include fa-icon;
+  @extend .fa-#{$name};
+}
+
+/// @access private
+
+%paint-icon {
+  &:before {
+    display: inline-block;
+    font-family: 'Paint';
+    font-size: $h4-font-size;
+    -webkit-font-smoothing: antialiased;
+    font-style: normal;
+    font-variant: normal;
+    font-weight: normal;
+    line-height: 1;
+    speak: none;
+    text-align: center;
+    text-transform: none;
+  }
+}
+
+/// Renders custom Paint icons
+/// @param {string} $name - The name of the icon
+/// @example scss - Usage
+///   .dashboard-icon {
+///     @include paint-icon(dashboard);
+///   }
+
+@mixin paint-icon($name) {
+  @extend %paint-icon;
+
+  $content: map-get($paint-icons, $name);
+
+  @if not $content {
+    @error "Icon #{$name} doesn't exist"
+  }
+
+  &:before {
+    content: $content;
+  }
+}

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

@@ -0,0 +1,125 @@
+////
+/// Labels
+/// @group label
+/// @since v0.8.27
+////
+
+/// Default settings
+/// @example scss
+///   span.default-label {
+///     @extend %label-base;
+///   }
+///
+///   span.primary-tiny {
+///     @extend %label-primary;
+///     @extend %label-tiny;
+///   }
+///
+///   span.info-base {
+///     @extend %label-info;
+///     @extend %label-base-size;
+///   }
+///
+///   h1 > span.label {
+///     @extend %label-base;
+///     @extend %label-large;
+///   }
+
+$label-default-settings: (
+  padding: 5px 10px,
+
+  styles: (
+    base: color(border),
+    primary: color(primary),
+    secondary: color(secondary),
+    alert: color(alert),
+    error: color(alert),
+    warning: color(warning),
+    success: color(success),
+    info: color(info)
+  ),
+
+  sizes: (
+    tiny: .6,
+    small: .8,
+    base-size: 1,
+    large: 1.2
+  )
+);
+
+$label: () !default;
+$label: map-merge-settings($label-default-settings, $label);
+
+@function label-settings($setting, $property: null) {
+  @if $property {
+    @return map-get(map-get($label, $setting), $property);
+  } @else {
+    @return map-get($label, $setting);
+  }
+}
+
+/// Generates background color and text color
+/// @access private
+
+@mixin label-style($color: label-settings(styles, base)) {
+  background-color: $color;
+  color: contrast($color);
+}
+
+/// Generates font size from label settings
+/// @access private
+
+@mixin label-size($size: small) {
+  $fraction: label-settings(sizes, $size);
+
+  font-size: $base-font-size * $fraction;
+
+  @if $fraction < 1 {
+    text-transform: uppercase;
+  } @else {
+    text-transform: capitalize;
+  }
+}
+
+/// Basic label styles
+/// @access private
+
+%label {
+  border-radius: $global-radius / 2;
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
+  display: inline-block;
+  font-weight: $font-weight-bold;
+  line-height: 1;
+  padding: label-settings(padding);
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &:empty {
+    display: none;
+  }
+}
+
+/// Generates label style and size placeholders
+/// @access private
+
+@mixin label-placeholders {
+  @each $style, $color in label-settings(styles) {
+    %label-#{$style} {
+      @extend %label;
+
+      @include label-style($color);
+      @include label-size(small);
+    }
+  }
+
+  @each $size, $fraction in label-settings(sizes) {
+    %label-#{$size} {
+      @include label-size($size);
+    }
+  }
+}
+
+@include exports('paint-label') {
+  @include label-placeholders;
+}

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

@@ -1,3 +1,10 @@
+////
+/// Layout and sidebar Component.
+/// @group layout
+/// @since v0.8.5
+/// @deprecated from 0.9.0
+////
+
 $layout-content-selector: '> .content' !default;
 $layout-content-wrapper-selector: 'main' !default;
 $layout-main-selector: '.application' !default;
@@ -8,7 +15,7 @@ $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-collapse-duration: $global-transition-duration !default;
 $layout-sidebar-header-height: 60px !default;
 $layout-sidebar-header-logo-height: $layout-sidebar-header-height * .5 !default;
 $layout-sidebar-header-selector: '> header' !default;
@@ -51,6 +58,9 @@ $include-html-paint-layout: true !default;
   text-transform: uppercase;
 }
 
+/// Sidebar navigation icons generator
+/// @access private
+
 @mixin layout-navigation-icons {
   @for $i from 1 through length($layout-sidebar-nav-classes) {
     $class-name: nth($layout-sidebar-nav-classes, $i);
@@ -62,6 +72,8 @@ $include-html-paint-layout: true !default;
   }
 }
 
+/// Layout sidebar
+
 @mixin layout-sidebar {
   $nav-top-margin: 0;
   $nav-bottom-margin: 0;
@@ -81,8 +93,7 @@ $include-html-paint-layout: true !default;
     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: width $layout-sidebar-collapse-duration $global-transition-easing;
     transition-delay: .015s;
     width: $layout-sidebar-nav-width;
 
@@ -148,6 +159,22 @@ $include-html-paint-layout: true !default;
   }
 }
 
+/// Global application layout styles
+/// 
+/// @example - Default Usage
+///   <body>
+///     <div class="application">
+///       <div class="sidebar">
+///         //...
+///       </div>
+///       <main>
+///         <div class="content">
+///           //...
+///         </div>
+///       </main>
+///     </div>
+///   </body>
+
 @mixin layout {
   html,
   body {
@@ -171,6 +198,9 @@ $include-html-paint-layout: true !default;
   }
 }
 
+/// Layout sidebar navigation styles
+/// @access private
+
 @mixin layout-sidebar-nav($nav-bottom-margin: 0, $nav-top-margin: 0, $subnav-selector: '> li > ul') {
   bottom: $nav-bottom-margin;
   left: 0;
@@ -182,22 +212,33 @@ $include-html-paint-layout: true !default;
   header {
     background-color: $layout-sidebar-nav-title-background-color;
     color: $layout-sidebar-nav-title-text-color;
-    line-height: $layout-sidebar-nav-title-height;
+    height: $layout-sidebar-nav-title-height;
+    overflow: hidden;
     padding: 0 $layout-sidebar-nav-padding;
+    position: relative;
     white-space: nowrap;
 
     h1 {
       @extend %layout-sidebar-heading;
 
       color: $layout-sidebar-nav-link-text-color;
-      display: inline-block;
+      line-height: $layout-sidebar-nav-title-height;
       margin: 0;
+      transform: translate(0, 0);
+      transition: 
+        transform $layout-sidebar-collapse-duration $global-transition-easing,
+        opacity $layout-sidebar-collapse-duration ease-out;
+      transition-delay: $global-transition-easing;
+      width: 80%;
     }
 
     .toggle-collapse {
       color: $layout-sidebar-nav-link-text-color;
-      float: right;
+      height: $layout-sidebar-nav-title-height;
       line-height: $layout-sidebar-nav-title-height;
+      position: absolute;
+      right: $layout-sidebar-nav-padding;
+      z-index: 1;
 
       button {
         @include icon(chevron-circle-left);
@@ -214,6 +255,7 @@ $include-html-paint-layout: true !default;
 
     list-style-type: none;
     margin: 0;
+    overflow: hidden;
     padding: 0;
 
     a {
@@ -297,6 +339,9 @@ $include-html-paint-layout: true !default;
   }
 }
 
+/// Layout sidebar collapsed navigation styles
+/// @access private
+
 @mixin layout-sidebar-nav-collapsed {
   width: $layout-sidebar-nav-width-collapsed;
 
@@ -321,7 +366,6 @@ $include-html-paint-layout: true !default;
 
   h1 {
     opacity: 0;
-    width: 0;
   }
 
   .toggle-collapse {
@@ -335,21 +379,20 @@ $include-html-paint-layout: true !default;
 
   #{$layout-sidebar-nav-selector} header {
     h1 {
-      display: none;
+      transform: translate(-200%, 0);
     }
 
-    .toggle-collapse {
-      float: none;
-
-      button {
-        @include icon(chevron-circle-right);
+    .toggle-collapse button {
+      @include icon(chevron-circle-right);
 
-        width: $layout-sidebar-nav-link-icon-width;
-      }
+      width: $layout-sidebar-nav-link-icon-width;
     }
   }
 }
 
+/// Sidebar navigation footer with actions
+/// @access private
+
 @mixin layout-sidebar-footer-with-actions {
   #{$layout-sidebar-footer-avatar-selector} {
     float: left;
@@ -385,6 +428,9 @@ $include-html-paint-layout: true !default;
   }
 }
 
+/// Sidebar navigation collapsed footer with actions
+/// @access private
+
 @mixin layout-sidebar-footer-with-actions-collapsed {
   #{$layout-sidebar-footer-avatar-selector},
   #{$layout-sidebar-footer-title-selector} {