paint-rails 0.7.24 → 0.8.27.1

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

@@ -0,0 +1,165 @@
+////
+/// Modal component
+/// @group modal
+/// @since v0.8.5
+////
+
+/// Default settings
+
+$modal-default-settings: (
+  size: (
+    small: 98%,
+    medium: 40em,
+    large: 60em,
+    xlarge: 80em,
+    xxlarge: 100em
+  )
+);
+
+$modal: () !default;
+$modal: map-merge-settings($modal-default-settings, $modal);
+
+$include-html-paint-modal: true !default;
+
+@function modal-settings($setting, $property: null) {
+  @if $property {
+    @return map-get(map-get($modal, $setting), $property);
+  } @else {
+    @return map-get($modal, $setting);
+  }
+}
+
+/// Calculate the size of the modal based on the screen size
+/// @access private
+/// @param {value} $size [large] - Screen size
+/// @param {Boolean} $use-content-size [false] - Set to `true` to resize based on the modal content
+
+@mixin modal-size($size: large, $use-content-size: false) {
+  $width: modal-settings(size, $size);
+
+  max-width: 98%;
+
+  @if not($use-content-size) {
+    min-width: $width;
+  }
+}
+
+/// Close button styles
+
+@mixin modal-close-button {
+  @include button-icon(close);
+
+  position: absolute;
+  right: 0;
+  top: 0;
+  line-height: panel-settings(header-height);
+  border: none !important;
+  background-color: transparent !important;
+  padding: 0 $column-gutter / 2;
+
+  &:before {
+    display: inline-block;
+  }
+}
+
+/// Modal panel styles, including responsive media queries
+/// @access private
+/// @param {Boolean} $use-content-size [false] - Set to `true` to resize based on the modal content
+
+@mixin modal-panel($use-content-size: false) {
+  @extend %panel-default;
+  @include panel-background(color(gray, smoke));
+
+  > header {
+    font-size: $small-font-size;
+    font-weight: $font-weight-bold;
+    text-transform: uppercase;
+
+    > .close {
+      @include modal-close-button;
+    }
+  }
+
+  > .content {
+    @extend %grid-row;
+  }
+
+  @media #{$small-only} {
+    @include modal-size(small, $use-content-size);
+  }
+
+  @media #{$medium-only} {
+    @include modal-size(medium, $use-content-size);
+  }
+
+  @media #{$large-only} {
+    @include modal-size(large, $use-content-size);
+  }
+
+  @media #{$xlarge-only} {
+    @include modal-size(xlarge, $use-content-size);
+  }
+
+  @media #{$xxlarge-up} {
+    @include modal-size(xxlarge, $use-content-size);
+  }
+}
+
+/// Modal Component
+/// @param {Boolean} $use-content-size [false] - Set to `true` to resize based on the modal content
+/// @example scss - Usage
+///    .custom-modal {
+///      @include modal;
+///    }
+///
+/// @example - Markup
+///   <div class="modal [active]">
+///     <div>
+///       <header>
+///         <h1>Modal Title</h1>
+///         <button class="close"></button>
+///       </header>
+///
+///       <div class="content">
+///         //..
+///       </div>
+///     </div>
+///   </div>
+
+@mixin modal($use-content-size: false) {
+  @include overlay;
+
+  height: 100%;
+  transform-style: preserve-3d;
+  text-align: center;
+
+  > div {
+    @include modal-panel($use-content-size);
+
+    display: inline-block;
+    margin: 0 auto;
+    max-height: 98%;
+    overflow-y: auto;
+    position: relative;
+    top: -100%;
+    transform: translateY(-100%);
+    transition: 
+      top $global-transition-duration $global-transition-easing,
+      transform $global-transition-duration;
+  }
+
+  &.active > div {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+/// Default classes including component implementation
+
+@include exports('paint-modal') {
+  @if $include-html-paint-modal {
+    .modal {
+      @include modal;
+    }
+  }
+}

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

@@ -0,0 +1,572 @@
+////
+/// Navigation
+/// @group navigation
+/// @since v0.8.18
+////
+
+/// Default settings
+
+/// @example html - Topbar and Sidebar Navigation Example
+///   <div class="application with-topbar with-sidebar">
+///     <div class="main-navigation with-topbar">
+///       <div class="item with-sidebar">
+///         <a class="logo"><span>Paint</span></a>
+///
+///         <nav class="sidebar part-open">
+///           <header>
+///             <a class="logo"><span>Paint</span></a>
+///           </header>
+///
+///           <div class="scroller">
+///             <ul class="menu">
+///               <li>
+///                 <a href="#" class="icon-dashboard">Menu Item</a>
+///                 <ul class="submenu">
+///                   <li><a href="#" class="icon-dashboard">Submenu</a></li>
+///                 </ul>
+///               </li>
+///             </ul>
+///           </div>
+///         </nav>
+///       </div> <!-- .item -->
+///
+///       <div class="item"><a class="icon-cog" href="#"><span>Top Item</span></a></div>
+///     </div> <!-- .main-navigation -->
+///     <main>
+///       <div class="content">
+///       </div>
+///     </main>
+///   </div> <!-- .application -->
+///
+/// @example html - Sidebar-only Navigation Example
+///   <div class="application with-sidebar">
+///     <div class="main-navigation">
+///       <div class="item with-sidebar">
+///         <a class="logo"><span>Paint</span></a>
+///
+///         <nav class="sidebar part-open">
+///           <header>
+///             <a class="logo"><span>Paint</span></a>
+///           </header>
+///
+///           <div class="scroller">
+///             <ul class="menu">
+///               <li>
+///                 <a href="#" class="icon-dashboard">Menu Item</a>
+///                 <ul class="submenu">
+///                   <li><a href="#" class="icon-dashboard">Submenu</a></li>
+///                 </ul>
+///               </li>
+///             </ul>
+///           </div>
+///         </nav>
+///       </div> <!-- .item -->
+///     </div> <!-- .main-navigation -->
+///     <main>
+///       <div class="content">
+///       </div>
+///     </main>
+///   </div> <!-- .application -->
+///
+/// @example html - Topbar-only Navigation Example
+///   <div class="application with-topbar">
+///     <div class="main-navigation with-topbar">
+///       <div class="item">
+///         <a class="logo"><span>Paint</span></a>
+///       </div>
+///       <div class="item"><a class="icon-cog" href="#"><span>Top Item</span></a></div>
+///       <div class="item"><a class="icon-cog" href="#"><span>Top Item</span></a></div>
+///       <div class="item"><a class="icon-cog" href="#"><span>Top Item</span></a></div>
+///     </div> <!-- .main-navigation -->
+///     <main>
+///       <div class="content">
+///       </div>
+///     </main>
+///   </div> <!-- .application -->
+///
+/// @example html - Sidebar With Footer Example
+///   <div class="application with-sidebar">
+///     <div class="main-navigation">
+///       <div class="item with-sidebar">
+///         <a class="logo"><span>Paint</span></a>
+///
+///         <nav class="sidebar part-open">
+///           <header>
+///             <a class="logo"><span>Paint</span></a>
+///           </header>
+///
+///           <div class="scroller">
+///             ...
+///           </div>
+///
+///           <footer>
+///             <div class="actions">
+///               <button class="settings"></button>
+///             </div>
+///
+///             <div class="avatar">
+///               <img src="" />
+///             </div>
+///
+///             <div class="title">Footer Title Text</div>
+///           </footer>
+///         </nav>
+///       </div> <!-- .item -->
+///     </div> <!-- .main-navigation -->
+///     <main>
+///       <div class="content">
+///       </div>
+///     </main>
+///   </div> <!-- .application -->
+
+$navigation-default-settings: (
+  height: 60px,
+  height-negative: -60px,
+  logo-width: 28px,
+  transition-duration: .3s,
+  icon-class-selector: '[class^="icon-"]',
+  selector: '.main-navigation',
+  z-index: 100,
+
+  topbar: (
+    background-color: color(white),
+    hover-background-color: color(black),
+    hover-color: color(border, light),
+    border-color: color(border),
+    text-color: #191c1f,
+    text-hover-color: #191c1f
+  ),
+
+  sidebar: (
+    selector: '.sidebar',
+    background-color: #191c1f,
+    hover-color: lighten(#191c1f, 10%),
+    active-color: lighten(#191c1f, 5%),
+    text-color: #a5a5a5,
+    submenu-text-color: darken(#a5a5a5, 20%),
+    min-width: 60px,
+    width: 280px
+  ),
+
+  sidebar-footer: (
+    included: false,
+    actions-selector: '.actions',
+    avatar-selector: '.avatar',
+    title-selector: '.title'
+  )
+);
+
+$navigation: () !default;
+$navigation: map-merge-settings($navigation-default-settings, $navigation);
+
+$no-touch-selector: '.no-touch' !default;
+$include-html-paint-navigation: true !default;
+
+@function navigation-settings($setting, $property: null) {
+  @if $property {
+    @return map-get(map-get($navigation, $setting), $property);
+  } @else {
+    @return map-get($navigation, $setting);
+  }
+}
+
+/// Header title properties
+/// @access private
+
+@mixin navigation-header-title {
+  display: block;
+  font-size: $small-font-size;
+  font-weight: $font-weight-extrabold;
+  padding-left: navigation-settings(sidebar, min-width);
+  text-align: left;
+  text-transform: uppercase;
+}
+
+/// Logo properties
+/// @access private
+/// @param {value} $hover-background-color [topbar hover-background-color] - The logo hover color - useful for when the topbar logo is different than the sidebar one
+
+@mixin navigation-logo(
+  $hover-background-color: navigation-settings(topbar, hover-background-color)
+) {
+  $logo-padding: (navigation-settings(sidebar, min-width) - navigation-settings(logo-width)) / 2;
+
+  background: 
+    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAABXCAYAAABxyNlsAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjM1MUY5QkFDRTgwNTExRTJBRUY5QkM1MkNERUM5NzAzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjM1MUY5QkFERTgwNTExRTJBRUY5QkM1MkNERUM5NzAzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RkM4RTA0NzVFN0VDMTFFMkFFRjlCQzUyQ0RFQzk3MDMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RkM4RTA0NzZFN0VDMTFFMkFFRjlCQzUyQ0RFQzk3MDMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4DCxgbAAAKeklEQVR42uxda2wc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)
+    $logo-padding 50%
+    no-repeat;
+
+  background-size: 
+    navigation-settings(logo-width)
+    navigation-settings(logo-width);
+
+  min-width: navigation-settings(sidebar, min-width);
+  padding-left: 0;
+
+  &:hover {
+    background-color: $hover-background-color !important;
+  }
+
+  span {
+    @include navigation-header-title;
+  }
+}
+
+/// Basic properties for the navigation item icon
+/// @access private
+
+@mixin navigation-item-icon {
+  @extend %paint-icon;
+
+  &:before {
+    display: block !important;
+    height: 0 !important;
+    overflow: hidden;
+    width: 0 !important;
+  }
+}
+
+/// Basic styles for an optional sidebar footer
+/// @access private
+
+@mixin navigation-footer {
+  background-color: navigation-settings(topbar, hover-background-color);
+  bottom: 0;
+  height: navigation-settings(height);
+  left: 0;
+  position: absolute;
+  right: 0;
+
+  #{navigation-settings(sidebar-footer, avatar-selector)} {
+    float: right;
+    text-align: center;
+    width: navigation-settings(sidebar, min-width);
+
+    img {
+      border-radius: 100%;
+      height: navigation-settings(logo-width);
+      width: navigation-settings(logo-width);
+    }
+  }
+
+  #{navigation-settings(sidebar-footer, title-selector)} {
+    color: navigation-settings(sidebar, text-color);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  #{navigation-settings(sidebar-footer, actions-selector)} {
+    float: left;
+    line-height: navigation-settings(height);
+    margin: 0 navigation-settings(sidebar, min-width) / 4;
+    width: navigation-settings(sidebar, min-width) / 2;
+
+    button {
+      @include button-icon(cog);
+
+      background-color: transparent;
+      border: 0;
+      color: navigation-settings(sidebar, text-color);
+      margin-bottom: 0;
+    }
+  }
+}
+
+#{$layout-main-selector} {
+  &.with-sidebar {
+    margin-left: navigation-settings(height);
+  }
+
+  &.with-topbar {
+    margin-top: navigation-settings(height);
+  }
+}
+
+#{navigation-settings(selector)} {
+  background: navigation-settings(topbar, background-color);
+  border-bottom: solid 1px navigation-settings(topbar, border-color);
+  color: navigation-settings(topbar, text-color);
+  font-size: $base-font-size;
+  height: navigation-settings(height);
+  left: 0;
+  line-height: navigation-settings(height);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  text-transform: none;
+  top: 0;
+  z-index: navigation-settings(z-index);
+
+  &.with-topbar {
+    width: 100%;
+  }
+
+  &:not(.with-topbar)
+  .item.with-sidebar > .logo span {
+    display: none;
+  }
+
+  a {
+    cursor: pointer;
+    display: block;
+    height: 100%;
+    text-decoration: none;
+  }
+
+  > .item {
+    border-right: 1px solid navigation-settings(topbar, hover-color);
+    display: block;
+    float: left;
+    height: 100%;
+    text-align: center;
+
+    &.with-sidebar {
+      position: relative;
+      -webkit-touch-callout: none;
+      user-select: none;
+    }
+
+    &:last-child:not(.with-sidebar),
+    &.right {
+      border-left: 1px solid navigation-settings(topbar, hover-color);
+      border-right: 0;
+      float: right;
+    }
+
+    > a {
+      color: navigation-settings(topbar, text-color);
+      font-weight: $font-weight-normal;
+      padding: 0 navigation-settings(height) / 2;
+      text-transform: uppercase;
+
+      &#{navigation-settings(icon-class-selector)} {
+        @include navigation-item-icon;
+      }
+    }
+
+    > .logo {
+      @include navigation-logo(
+        $hover-background-color: navigation-settings(topbar, background-color)
+      );
+    }
+  }
+}
+
+#{$no-touch-selector} {
+  .main-navigation .item > a:hover {
+    background-color: navigation-settings(topbar, hover-color);
+    color: navigation-settings(topbar, text-hover-color);
+  }
+}
+
+#{navigation-settings(selector)}
+#{navigation-settings(sidebar, selector)} {
+  background: navigation-settings(sidebar, background-color);
+  bottom: 0;
+  color: navigation-settings(sidebar, text-color);
+  left: 0;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  transform: translateX(navigation-settings(height-negative));
+  transition: 
+    transform navigation-settings(transition-duration),
+    width navigation-settings(transition-duration);
+  transition-delay: navigation-settings(transition-duration);
+  width: navigation-settings(sidebar, min-width);
+
+  > header {
+    background-color: navigation-settings(topbar, background-color);
+    padding: 0;
+    transition: background-color navigation-settings(transition-duration);
+    transition-delay: navigation-settings(transition-duration);
+
+    span {
+      color: color(white);
+    }
+
+    .logo {
+      @include navigation-logo;
+    }
+  }
+
+  > footer {
+    @include navigation-footer;
+
+    span {
+      color: color(white);
+    }
+  }
+
+  .scroller {
+    left: 0;
+    -webkit-overflow-scrolling: touch;
+    overflow-y: scroll;
+    position: absolute;
+    right: 0;
+    top: navigation-settings(height);
+    width: navigation-settings(sidebar, width);
+
+    @if navigation-settings(sidebar-footer, included) {
+      bottom: navigation-settings(height);
+    } @else {
+      bottom: 0;
+    }
+  }
+
+  .menu,
+  .menu ul {
+    background: navigation-settings(sidebar, background-color);
+    border-bottom: 1px solid navigation-settings(sidebar, hover-color);
+    color: color(white);
+    font-size: $base-font-size;
+    line-height: navigation-settings(height);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+    text-transform: none;
+
+    li:not(:first-child),
+    li li {
+      box-shadow: inset 0 1px navigation-settings(sidebar, hover-color);
+    }
+
+    a {
+      color: navigation-settings(sidebar, text-color);
+      text-transform: uppercase;
+
+      &:hover {
+        background-color: navigation-settings(sidebar, hover-color);
+      }
+
+      &.active {
+        background-color: navigation-settings(sidebar, active-color);
+      }
+
+      span {
+        display: block;
+        height: 0;
+        overflow: hidden;
+        width: 0;
+      }
+    }
+
+    a#{navigation-settings(icon-class-selector)} {
+      @extend %paint-icon;
+
+      &:before {
+        width: navigation-settings(sidebar, min-width);
+      }
+    }
+
+    .submenu li {
+      height: 0;
+      overflow: hidden;
+      transition: height navigation-settings(transition-duration);
+
+      a {
+        color: navigation-settings(sidebar, submenu-text-color);
+      }
+    }
+  }
+}
+
+/// Use custom classes for the partially open sidebar and fully open one. By default the sidebar opens fully on hover
+/// @access private
+
+$sidebar-part-open: '.part-open';
+$sidebar-full-open: '.part-open:hover';
+
+#{navigation-settings(selector)}
+#{navigation-settings(sidebar, selector)} {
+  &#{$sidebar-full-open},
+  &#{$sidebar-part-open} {
+    transform: translateX(0);
+  }
+
+  &#{$sidebar-part-open} > footer {
+    #{navigation-settings(sidebar-footer, avatar-selector)},
+    #{navigation-settings(sidebar-footer, title-selector)} {
+      transform: translateY(100px);
+      transition: transform $global-transition-duration ease;
+      transition-delay: 0s;
+    }
+  }
+
+  &#{$sidebar-full-open} {
+    transition-delay: 0s;
+    width: navigation-settings(sidebar, width);
+
+    > header {
+      background-color: navigation-settings(topbar, hover-background-color);
+      transition-delay: 0s;
+    }
+
+    .submenu li {
+      height: navigation-settings(height);
+    }
+
+    > footer {
+      #{navigation-settings(sidebar-footer, avatar-selector)},
+      #{navigation-settings(sidebar-footer, title-selector)} {
+        transform: translateY(0);
+        transition-delay: navigation-settings(transition-duration) / 2;
+      }
+    }
+  }
+}
+
+@media #{$small-only} {
+  #{$layout-main-selector} {
+    &.with-sidebar {
+      margin-left: 0;
+    }
+  }
+
+  #{navigation-settings(selector)} {
+    .item.with-sidebar:hover,
+    .item.with-sidebar:focus
+    #{navigation-settings(sidebar, selector)} {
+      transform: translateX(0);
+    }
+
+    #{navigation-settings(sidebar, selector)} {
+      &#{$sidebar-part-open} {
+        transform: translateX(navigation-settings(height-negative));
+      }
+
+      &#{$sidebar-full-open} {
+        min-width: navigation-settings(sidebar, width);
+        transform: translateX(0);
+        width: 80%;
+
+        .scroller {
+          width: 130%;
+        }
+      }
+    }
+  }
+}
+
+@media #{$medium-down} {
+  #{navigation-settings(selector)} {
+    .item > a {
+      &#{navigation-settings(icon-class-selector)} {
+        padding: 0 $column-gutter / 4 !important;
+
+        &:before {
+          display: inline-block !important;
+          height: auto !important;
+          line-height: navigation-settings(height) !important;
+          width: navigation-settings(sidebar, min-width) / 2 !important;
+        }
+      }
+
+      span {
+        display: none !important;
+      }
+    }
+  }
+}