paint-rails 0.6.7 → 0.7.24

data/vendor/assets/stylesheets/components/_quick-jump.scss

@@ -0,0 +1,267 @@
+$include-html-paint-quick-jump: true !default;
+
+$quick-jump-default-settings: (
+  bar: (
+    background-color: #e1e5ea,
+    active-background-color: $white,
+    icon-size: $button-icon-size,
+    height: $layout-sidebar-header-height
+  ),
+  results: (
+    background-color: #f2f2f2,
+    item-height: rem-calc(50)
+  ),
+  actions: (
+    navigation: (
+      change-app: th,
+      add: plus
+    )
+  )
+);
+
+@if global-variable-exists(quick-jump) {
+  $quick-jump: map-merge-settings($quick-jump-default-settings, $quick-jump);
+} @else {
+  $quick-jump: $quick-jump-default-settings;
+}
+
+@function quick-jump-settings($setting, $property: null) {
+  @if $property {
+    @return map-get(map-get($quick-jump, $setting), $property);
+  } @else {
+    @return map-get($quick-jump, $setting);
+  }
+}
+
+@mixin quick-jump($overlay: true) {
+  @if $overlay {
+    @include overlay;
+  }
+
+  > .bar {
+    background-color: quick-jump-settings(bar, background-color);
+    display: block;
+    height: quick-jump-settings(bar, height);
+    line-height: quick-jump-settings(bar, height);
+    padding: 0 $column-gutter / 2;
+    position: relative;
+    width: 100%;
+
+    > div,
+    > .icon {
+      @include single-transition(all, 150ms, linear);
+
+      border-radius: $global-rounded;
+      color: $primary-color;
+      height: quick-jump-settings(bar, icon-size);
+      overflow: hidden;
+      position: absolute;
+      text-align: center;
+      top: (quick-jump-settings(bar, height) - quick-jump-settings(bar, icon-size)) / 2;
+      width: quick-jump-settings(bar, icon-size);
+
+      i {
+        @include icon(search);
+
+        display: block;
+        line-height: quick-jump-settings(bar, icon-size);
+      }
+    }
+
+    input {
+      $icon-size: quick-jump-settings(bar, icon-size);
+      $input-left-padding: $icon-size * 1.15;
+
+      @include single-transition(all, 150ms, linear);
+
+      background-color: transparent;
+      border: 0;
+      box-shadow: none;
+      display: inline-block;
+      margin: 0;
+      text-indent: $input-left-padding;
+      width: 100%;
+    }
+  }
+
+  &.active {
+    > .bar {
+      background-color: quick-jump-settings(bar, active-background-color);
+      border-bottom: 1px solid quick-jump-settings(bar, background-color);
+
+      > div,
+      > .icon {
+        background-color: $primary-color;
+        color: quick-jump-settings(bar, active-background-color);
+      }
+    }
+
+    > .actions {
+      .content {
+        display: none;
+      }
+
+      .close {
+        display: block;
+      }
+    }
+  }
+
+  &.loading {
+    .results .content {
+      opacity: .7;
+    }
+  }
+}
+
+@mixin quick-jump-actions {
+  $quick-jump-actions: quick-jump-settings(actions);
+
+  @each $action-group, $actions in $quick-jump-actions {
+    .#{$action-group}-actions {
+      @each $action, $icon in $actions {
+        .#{$action} {
+          @include button-icon($icon);
+        }
+      }
+    }
+  }
+}
+
+%quick-jump-actions-section {
+  $actions-button-size: quick-jump-settings(bar, icon-size);
+
+  padding: 0 $column-gutter / 2;
+  position: absolute;
+  right: 0;
+  text-align: right;
+  top: (quick-jump-settings(bar, height) - $actions-button-size) / 2;
+
+  .close {
+    display: none;
+
+    > button {
+      @include icon(times-circle);
+
+      background-color: transparent;
+      border: 0;
+      margin-bottom: 0;
+      min-height: $actions-button-size;
+    }
+  }
+
+  .content {
+    @include quick-jump-actions;
+
+    ul {
+      @extend %button-group;
+    }
+  }
+}
+
+%quick-jump-results {
+  $background-color: quick-jump-settings(results, background-color);
+
+  @include single-transition(opacity, 150ms, linear);
+
+  background-color: $background-color;
+  position: relative;
+  width: 100%;
+
+  section {
+    @extend %grid-row;
+
+    padding-bottom: $column-gutter / 2;
+    padding-top: $column-gutter / 2;
+
+    > .title {
+      @extend .hide-for-small-only;
+      @extend %grid-column-2;
+
+      color: $primary-color;
+      line-height: quick-jump-settings(results, item-height);
+      margin-bottom: 0;
+      margin-top: 0;
+      text-align: right;
+    }
+
+    &:nth-of-type(even) {
+      background-color: darken($background-color, 3%);
+    }
+
+    ul {
+      @extend %grid-column-small-12;
+      @extend %grid-column-medium-10;
+      @extend .no-bullet;
+
+      margin-bottom: 0;
+    }
+
+    li {
+      line-height: quick-jump-settings(results, item-height);
+    }
+
+    article {
+      @extend %grid-column-12;
+
+      cursor: pointer;
+
+      &:hover {
+        background-color: lighten($background-color, 3%);
+      }
+
+      .title {
+        color: $body-font-color;
+        line-height: quick-jump-settings(results, item-height);
+      }
+    }
+  }
+
+  .empty-message {
+    height: quick-jump-settings(bar, height);
+    line-height: quick-jump-settings(bar, height);
+    padding-left: $column-gutter + rem-calc(quick-jump-settings(bar, icon-size));
+  }
+}
+
+%quick-jump-result {
+  .title,
+  .details {
+    line-height: quick-jump-settings(results, item-height);
+  }
+
+  .title {
+    @extend %grid-column-small-12;
+    @extend %grid-column-large-4;
+
+    font-size: $base-font-size;
+    margin: 0;
+  }
+
+  .details {
+    @extend %grid-column-small-12;
+    @extend %grid-column-large-8;
+
+    color: $small-font-color;
+  }
+}
+
+@include exports('paint-quick-jump') {
+  @if $include-html-paint-quick-jump {
+    .quick-jump {
+      @include quick-jump;
+
+      .actions {
+        @extend %quick-jump-actions-section;
+      }
+
+      .results {
+        @extend %quick-jump-results;
+
+        .result {
+          @extend %quick-jump-result;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,154 @@
+$side-panel-default-settings: (
+  screen-size: (
+    small: 100%,
+    medium: 45em,
+    large: 75em,
+    xlarge: 90em,
+    xxlarge: 120em
+  ),
+  actions-bar: (
+    background-color: #e1e5ea,
+    button-size: 35px,
+    height: rem-calc(60)
+  ),
+  actions: (
+    navigation: (
+      previous: angle-left,
+      next: angle-right
+    )
+  )
+);
+
+@if global-variable-exists(side-panel) {
+  $side-panel: map-merge-settings($side-panel-default-settings, $side-panel);
+} @else {
+  $side-panel: $side-panel-default-settings;
+}
+
+$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($screen: large) {
+  $width: side-panel-settings(screen-size, $screen);
+
+  right: -$width;
+  width: $width;
+}
+
+@mixin side-panel {
+  @include overlay($position: fixed, $z-index: 200);
+
+  > div {
+    @include single-transition(opacity, 150ms, linear);
+
+    background-color: $white;
+    float: right;
+    height: 100%;
+    overflow-y: auto;
+    position: relative;
+
+    > .content {
+      bottom: 0;
+      left: 0;
+      overflow-y: auto;
+      position: absolute;
+      right: 0;
+      top: side-panel-settings(actions-bar, height);
+    }
+
+    @media #{$small-only} {
+      @include side-panel-size(small);
+    }
+
+    @media #{$medium-only} {
+      @include side-panel-size(medium);
+    }
+
+    @media #{$large-only} {
+      @include side-panel-size(large);
+    }
+
+    @media #{$xlarge-only} {
+      @include side-panel-size(xlarge);
+    }
+
+    @media #{$xxlarge-up} {
+      @include side-panel-size(xxlarge);
+    }
+  }
+}
+
+@mixin side-panel-actions-bar {
+  @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);
+  padding: 0 $column-gutter;
+
+  .content {
+    @extend %grid-column-10;
+
+    min-height: side-panel-settings(actions-bar, height);
+    padding: 0 !important;
+
+    > ul {
+      @extend %button-group;
+    }
+  }
+
+  .close {
+    @extend %grid-column-2;
+
+    padding: 0 !important;
+    text-align: right;
+
+    > button {
+      @include button-icon(close);
+
+      border-color: $global-section-border-color;
+    }
+  }
+
+  button {
+    &: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;
+    }
+  }
+}
+
+@mixin side-panel-actions {
+  $side-panel-actions: side-panel-settings(actions);
+
+  @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;
+
+      .actions {
+        @include side-panel-actions-bar;
+        @include side-panel-actions;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,105 @@
+$include-html-paint-table: true !default;
+
+$table-row-background-color: $white !default;
+$table-odd-background-color: darken($white, 3%) !default;
+$table-highlighted-row-background-color: lighten($primary-color, 47%) !default;
+$table-highlighted-row-color: $jet !default;
+$table-column-padding: $column-gutter / 2 !default;
+
+%table {
+  width: 100%;
+
+  thead {
+    tr {
+      background-color: darken($table-row-background-color, 5%);
+    }
+
+    th {
+      color: $small-font-color;
+      font-size: $small-font-size;
+      font-weight: $font-weight-bold;
+      padding: $table-column-padding;
+      text-align: left;
+      text-transform: uppercase;
+    }
+  }
+
+  tbody {
+    tr {
+      background-color: $table-row-background-color;
+      border-bottom: 1px solid $table-odd-background-color;
+
+      &:last-child {
+        border: 0;
+      }
+
+      td {
+        line-height: $base-line-height;
+        padding: $table-column-padding;
+      }
+    }
+  }
+}
+
+%table-stripped {
+  tr {
+    &:nth-of-type(2n) {
+      background-color: $table-odd-background-color;
+    }
+  }
+}
+
+%table-highlighted-row {
+  background-color: $table-highlighted-row-background-color;
+  color: $table-highlighted-row-color;
+
+  td {
+    border-bottom: 1px solid darken($table-highlighted-row-background-color, 7%);
+    border-top: 1px solid darken($table-highlighted-row-background-color, 7%);
+    font-weight: $font-weight-bold;
+  }
+}
+
+%table-rounded {
+  border-radius: $global-radius;
+
+  thead th {
+    &:first-child {
+      border-radius: $global-radius 0 0;
+    }
+
+    &:last-child {
+      border-radius: 0 $global-radius 0 0;
+    }
+  }
+
+  tbody tr:last-child td {
+    &:first-child {
+      border-radius: 0 0 0 $global-radius;
+    }
+
+    &:last-child {
+      border-radius: 0 $global-radius 0 0;
+    }
+  }
+}
+
+@include exports('paint-table') {
+  @if $include-html-paint-table {
+    .table {
+      @extend %table;
+
+      &.stripped {
+        @extend %table-stripped;
+      }
+
+      &.rounded {
+        @extend %table-rounded;
+      }
+
+      .highlighted-row {
+        @extend %table-highlighted-row;
+      }
+    }
+  }
+}

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

@@ -1,8 +1,30 @@
-$typography-header-tags: h1, h2, h3, h4, h5, h6, blockquote !default;
+$typography-default-settings: (
+  header-tags: (
+    h1, h2, h3, h4, h5, h6, blockquote
+  ),
+
+  condensed-tags: ()
+);
+
+@if global-variable-exists(typography) {
+  $typography: map-merge-settings($typography-default-settings, $typography);
+} @else {
+  $typography: $typography-default-settings;
+}
 
 $include-html-paint-typography: true !default;
 
-@mixin typography-font-smoothing($header-tags: $typography-header-tags) {
+@function typography-settings($setting, $property: null) {
+  @if $property {
+    @return map-get(map-get($typography, $setting), $property),
+  } @else {
+    @return map-get($typography, $setting)
+  }
+}
+
+@mixin typography-font-smoothing(
+  $header-tags: typography-settings(header-tags)
+) {
   body {
     -webkit-font-smoothing: $body-font-smoothing;
   }
@@ -16,8 +38,17 @@ $include-html-paint-typography: true !default;
   }
 }
 
-@include exports("paint-typography") {
+@mixin typography-condensed-tags {
+  @each $tag, $letter-spacing in typography-settings(condensed-tags) {
+    #{$tag} {
+      letter-spacing: $letter-spacing;
+    }
+  }
+}
+
+@include exports('paint-typography') {
   @if $include-html-paint-typography {
     @include typography-font-smoothing;
+    @include typography-condensed-tags;
   }
 }

data/vendor/assets/stylesheets/components/_vertical-align.scss

@@ -0,0 +1,9 @@
+%vertical-align {
+  display: table !important;
+
+  > * {
+    display: table-cell;
+    float: none !important;
+    vertical-align: middle;
+  }
+}

data/vendor/assets/stylesheets/globals/_functions.scss

@@ -0,0 +1,69 @@
+@function map-set($map, $keys, $value) {
+  $maps: ($map,);
+  $result: null;
+
+  @if type-of(nth($keys, -1)) == 'map' {
+    @warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
+  }
+
+  @if length($keys) == 1 {
+    @return map-merge($map, ($keys: $value));
+  }
+
+  @for $i from 1 through length($keys) - 1 {
+    $current-key: nth($keys, $i);
+    $current-map: nth($maps, -1);
+    $current-get: map-get($current-map, $current-key);
+    @if $current-get == null {
+      @warn "Key `#{$key}` doesn't exist at current level in map.";
+    }
+    $maps: append($maps, $current-get);
+  }
+
+  @for $i from length($maps) through 1 {
+    $current-map: nth($maps, $i);
+    $current-key: nth($keys, $i);
+    $current-val: if($i == length($maps), $value, $result);
+    $result: map-merge($current-map, ($current-key: $current-val));
+  }
+
+  @return $result;
+}
+
+@function map-merge-settings($default-map, $map) {
+  $merged-map: $default-map;
+
+  @each $settings-group, $settings in $map {
+    @if type-of($settings) == 'map' {
+      @each $setting, $value in $settings {
+        $merged-map: map-set($merged-map, $settings-group $setting, $value);
+      }
+    } @else {
+      $merged-map: map-set($merged-map, $settings-group, $settings);
+    }
+  }
+
+  @return $merged-map;
+}
+
+@function brightness($color) {
+  @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)) / 255 * 100%;
+}
+
+@function contrast(
+  $color,
+  $dark: $small-font-color,
+  $light: $white
+) {
+  $color-brightness: brightness($color);
+  $dark-text-brightness: brightness($dark);
+  $light-text-brightness: brightness($light);
+
+  @if abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness) {
+    $output: $light;
+  } @else {
+    $output: $dark;
+  }
+
+  @return $output;
+}

data/vendor/assets/stylesheets/globals/_mixins.scss

@@ -1,5 +1,27 @@
 @mixin detached-border($color: $info-color, $radius: $global-radius) {
   border-radius: $radius;
-  box-shadow: 0 0 0 1px $color, 0 0 0 1px #fff inset;
+  box-shadow: 0 0 0 1px $color, 0 0 0 1px $white inset;
   padding: 1px;
 }
+
+@mixin overlay($position: absolute, $z-index: 100) {
+  @include single-transition(background-color, 150ms, linear);
+
+  bottom: 0;
+  left: 0;
+  overflow-y: auto;
+  pointer-events: none;
+  position: $position;
+  right: 0;
+  top: 0;
+  z-index: $z-index;
+
+  > * {
+    pointer-events: all;
+  }
+
+  &.active {
+    background-color: $global-overlay-background-color;
+    pointer-events: all;
+  }
+}