codelation_ui 1.0.0

data/app/assets/stylesheets/codelation_ui/_base_resources/mixins/button.scss

@@ -0,0 +1,47 @@
+$accent-color: $blue !default;
+
+@mixin button($background-color: color($grey, 100), $color: color($grey, 800), $active-background-color: $accent-color, $active-color: text-color($accent-color)) {
+  background-image: linear-gradient(to bottom, $background-color, darken($background-color, 8%));
+  border: 0;
+  border-radius: 2px;
+  box-shadow: rgba(0, 0, 0, 0.14902) 0 0 0 1px inset;
+  color: $color;
+  display: inline-block;
+  font-size: 11px;
+  height: 26px;
+  line-height: 25px;
+  margin-bottom: 4px;
+  outline: none;
+  padding: 0 12px;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  i {
+    font-size: 13px;
+    line-height: 11px;
+    margin-right: 2px;
+  }
+
+  &:hover {
+    background-image: linear-gradient(to bottom, lighten($background-color, 5%), darken($background-color, 3.5%));
+    color: $color;
+  }
+
+  &:active {
+    background-image: linear-gradient(to bottom, lighten($active-background-color, 3%), darken($active-background-color, 5%));
+    color: $active-color;
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.5;
+
+    &:hover,
+    &:active {
+      background-image: linear-gradient(to bottom, $background-color, darken($background-color, 8%));
+      color: $color;
+    }
+  }
+}

data/app/assets/stylesheets/codelation_ui/_base_resources/mixins/center_children.scss

@@ -0,0 +1,9 @@
+// Centers child elements horizontally and vertically without needing
+// to set the height and width of the child elements using flexbox.
+@mixin center-children {
+  @include align-content(center);
+  @include align-items(center);
+  @include display(flex);
+  @include flex-direction(column);
+  @include justify-content(center);
+}

data/app/assets/stylesheets/codelation_ui/_base_resources/mixins/col_span.scss

@@ -0,0 +1,16 @@
+// Used to create create columns in a row that span the width of multiple columns in another row.
+// See the readme for more details on usage.
+@mixin col-span($span: $columns of $total-columns, $gutter: 0) {
+  $columns: nth($span, 1);
+  $container-columns: nth($span, 3);
+
+  @if ($gutter != 0 and unit($gutter) != "%") {
+    @error "The col-span mixin can only be used if there is no gutter or the gutter's unit is %";
+  }
+
+  $single-column-width: (100% - ($gutter * ($container-columns - 1))) / $container-columns;
+  $spanned-width: $single-column-width * $columns;
+  $spanned-gutters-width: $gutter * ($columns - 1);
+
+  width: $spanned-width + $spanned-gutters-width;
+}

data/app/assets/stylesheets/codelation_ui/_base_resources/mixins/has_cards.scss

@@ -0,0 +1,43 @@
+// Sets up a element and its child elements with the flexbox properties needed
+// to have the given number of columns with optional gutters or margins.
+@mixin has-cards($columns, $margin: 0, $column-class: "auto", $mobile: "auto") {
+  @include align-content(flex-start);
+  @include align-items(stretch);
+  @include display(flex);
+  @include flex-direction(row);
+  @include flex-wrap(wrap);
+  @include justify-content(space-around);
+  column-count: $columns; // Used as a reference for JavaScript functions
+  padding: $margin 0 0 $margin;
+
+  $column-selector: "> *:not(script)";
+
+  @if $column-class != "auto" {
+    $column-selector: "." + $column-class;
+  }
+
+  #{$column-selector} {
+    @include flex(1 1 auto);
+    margin: 0 $margin $margin 0;
+    width: (1 / $columns) * 85%;
+
+    &:empty {
+      margin-bottom: 0;
+      margin-top: 0;
+      visibility: hidden;
+    }
+  }
+
+  @if $mobile == "auto" {
+    // Stack columns on mobile by default
+    @media (max-width: $mobile-breakpoint) {
+      #{$column-selector} {
+        width: 100%;
+
+        &:empty {
+          display: none;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/codelation_ui/_base_resources/mixins/has_columns.scss

@@ -0,0 +1,66 @@
+// Sets up a element and its child elements with the flexbox properties needed
+// to have the given number of columns with an optional gutter value.
+@mixin has-columns($columns: 0, $gutter: 0, $column-class: "auto", $mobile: "auto", $grow: true) {
+  @include align-content(stretch);
+  @include align-items(stretch);
+  @include display(flex);
+  @include flex-direction(row);
+  @include flex-wrap(nowrap);
+  @include justify-content(flex-start);
+
+  $column-selector: "> *:not(script)";
+
+  @if $column-class != "auto" {
+    $column-selector: "." + $column-class;
+  }
+
+  #{$column-selector} {
+    @if $grow {
+      @include flex(1 1 auto);
+    }
+
+    // We only want to set the column width if more than 1 column was specified
+    // and we're looking to fill the container's width.
+    @if $grow and $columns > 1 {
+      @if $gutter == 0 {
+        // If there is no gutter, we don't need to do anything
+        // other than split up the columns evenly.
+        width: 100% / $columns;
+      } @else if unit($gutter) == "px" or unit($gutter) == "em" {
+        // If there is a fixed gutter size, we need to trick the columns into
+        // being close to the right width and stretching to fill in the rest.
+        width: 85% / $columns;
+      } @else if unit($gutter) == "%" {
+        // If the gutter size is a percentage of the width, we can use the percentage
+        // to calculate the width of the columns as a percentage as well.
+        width: (100% - ($gutter * ($columns - 1))) / $columns;
+      }
+    }
+
+    @if $gutter > 0 {
+      margin-right: $gutter;
+
+      // Remove the right margin for the last column in a row
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  @if $mobile == "auto" {
+    // Stack columns on mobile by default
+    @media (max-width: $mobile-breakpoint) {
+      @include flex-wrap(wrap);
+
+      #{$column-selector} {
+        margin-bottom: $gutter;
+        margin-right: 0;
+        width: 100%;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/codelation_ui/_base_resources/mixins/has_grid.scss

@@ -0,0 +1,80 @@
+// Sets up a element and its child elements with the flexbox properties needed
+// to have the given number of columns per row with multiple rows in the container
+// and an optional gutter value  that will be used between columns and rows.
+@mixin has-grid($columns, $gutter: 0, $column-class: "auto", $mobile: "auto") {
+  @include align-content(stretch);
+  @include align-items(stretch);
+  @include display(flex);
+  @include flex-direction(row);
+  @include flex-wrap(wrap);
+  @include justify-content(space-around);
+  column-count: $columns; // Used as a reference for JavaScript functions
+
+  $column-selector: "> *:not(script)";
+
+  @if $column-class != "auto" {
+    $column-selector: "." + $column-class;
+  }
+
+  #{$column-selector} {
+    @include flex(1 1 auto);
+
+    @if $gutter == 0 {
+      // If there is no gutter, we don't need to do anything other
+      // than split up the columns evenly.
+      width: 100% / $columns;
+    } @else if unit($gutter) == "px" or unit($gutter) == "em" {
+      // If there is a fixed gutter size, we need to trick the columns into
+      // being close to the right width and stretching to fill in the rest.
+      width: 85% / $columns;
+    } @else if unit($gutter) == "%" {
+      // If the gutter size is a percentage of the width, we can use the percentage
+      // to calculate the width of the columns as a percentage as well.
+      width: (100% - ($gutter * ($columns - 1))) / $columns;
+    }
+
+    // Remove the right margin for the last column in a row
+    // and the top margin for each column in the first row
+    @if $gutter > 0 {
+      margin-right: $gutter;
+      margin-top: $gutter;
+
+      @for $i from 1 through $columns {
+        &:nth-child(#{$i}) {
+          margin-top: 0;
+        }
+      }
+
+      &:nth-child(#{$columns}n) {
+        margin-right: 0;
+      }
+    }
+
+    // The JavaScript component will add empty spans to keep a uniform column width
+    &:empty {
+      margin-bottom: 0;
+      margin-top: 0;
+      visibility: hidden;
+    }
+  }
+
+  @if $mobile == "auto" {
+    // Stack columns on mobile by default
+    @media (max-width: $mobile-breakpoint) {
+      #{$column-selector} {
+        margin-bottom: $gutter;
+        margin-right: 0;
+        margin-top: 0;
+        width: 100%;
+
+        &:last-of-type {
+          margin-bottom: 0;
+        }
+
+        &:empty {
+          display: none;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/codelation_ui/_base_resources/mixins/outer_container.scss

@@ -0,0 +1,10 @@
+// Sets the max width of a container and centers it by setting margin-left and
+// margin-right to auto. The max width can be overridden by defining $max-width.
+// A left and right padding of 12px is added by default.
+@mixin outer-container($padding: 12px) {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: $max-width;
+  padding-left: $padding;
+  padding-right: $padding;
+}

data/app/assets/stylesheets/codelation_ui/base.scss

@@ -0,0 +1,27 @@
+// A collection of Sass functions and mixins used by Codelation
+// https://codelation.com
+
+// Used to set the max-width with the outer-container mixin
+$max-width: 1024px !default;
+
+// Used for has-cards, has-columns, and has-grid mixins. When the
+// viewport reaches the mobile-breakpoint, the columns will be stacked.
+$mobile-breakpoint: 767px !default;
+
+@import "_base_resources/bourbon/bourbon";
+@import "_base_resources/functions/**/*";
+@import "_base_resources/mixins/**/*";
+@import "_base_resources/normalize";
+
+// Border Box by default for all elements
+html { // http://bit.ly/1qk2tVR
+  box-sizing: border-box;
+}
+
+* {
+  &,
+  &::after,
+  &::before {
+    box-sizing: inherit;
+  }
+}

data/app/assets/stylesheets/codelation_ui/extended/slider.scss

@@ -0,0 +1,222 @@
+$vue-slider-track-color: #0366d6 !default;
+$vue-slider-tool-tip-bg-color: #0366d6 !default;
+$vue-slider-tool-tip-text-color: #ffffff !default;
+
+.vue-slider-wrap {
+	position: relative;
+	box-sizing: border-box;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+.vue-slider-wrap.vue-slider-disabled {
+	opacity: .5;
+	cursor: not-allowed;
+}
+.vue-slider-wrap.vue-slider-has-label {
+	margin-bottom: 15px;
+}
+.vue-slider-wrap.vue-slider-disabled .vue-slider-dot {
+	cursor: not-allowed;
+}
+.vue-slider-wrap .vue-slider {
+	position: relative;
+	display: block;
+	border-radius: 15px;
+	background-color: #ccc;
+}
+.vue-slider-wrap .vue-slider::after {
+	content: '';
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 2;
+}
+.vue-slider-process {
+	position: absolute;
+	border-radius: 15px;
+	background-color: $vue-slider-track-color;
+	transition: all 0s;
+	z-index: 1;
+}
+.vue-slider-horizontal .vue-slider-process {
+	width: 0;
+	height: 100%;
+	top: 0;
+	left: 0;
+	will-change: width;
+}
+.vue-slider-vertical .vue-slider-process {
+	width: 100%;
+	height: 0;
+	bottom: 0;
+	left: 0;
+	will-change: height;
+}
+.vue-slider-horizontal-reverse .vue-slider-process {
+	width: 0;
+	height: 100%;
+	top: 0;
+	right: 0;
+}
+.vue-slider-vertical-reverse .vue-slider-process {
+	width: 100%;
+	height: 0;
+	top: 0;
+	left: 0;
+}
+.vue-slider-dot {
+	position: absolute;
+	border-radius: 50%;
+	background-color: #fff;
+	box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32);
+	transition: all 0s;
+	will-change: transform;
+	cursor: pointer;
+	z-index: 3;
+}
+.vue-slider-horizontal .vue-slider-dot {
+	left: 0;
+}
+.vue-slider-vertical .vue-slider-dot {
+	bottom: 0;
+}
+.vue-slider-horizontal-reverse .vue-slider-dot {
+	right: 0;
+}
+.vue-slider-vertical-reverse .vue-slider-dot {
+	top: 0;
+}
+.vue-slider-tooltip {
+	display: none;
+	font-size: 14px;
+	white-space: nowrap;
+	position: absolute;
+	padding: 2px 5px;
+	min-width: 20px;
+	text-align: center;
+	color: $vue-slider-tool-tip-text-color;
+	border-radius: 5px;
+	border: 1px solid $vue-slider-tool-tip-bg-color;
+	background-color: $vue-slider-tool-tip-bg-color;
+	z-index: 9;
+}
+.vue-slider-tooltip.vue-slider-tooltip-top  {
+	top: -9px;
+	left: 50%;
+	transform: translate(-50%, -100%);
+}
+.vue-slider-tooltip.vue-slider-tooltip-bottom  {
+	bottom: -9px;
+	left: 50%;
+	transform: translate(-50%, 100%);
+}
+.vue-slider-tooltip.vue-slider-tooltip-left  {
+	top: 50%;
+	left: -9px;
+	transform: translate(-100%, -50%);
+}
+.vue-slider-tooltip.vue-slider-tooltip-right  {
+	top: 50%;
+	right: -9px;
+	transform: translate(100%, -50%);
+}
+.vue-slider-tooltip.vue-slider-tooltip-top::before {
+	content: '';
+	position: absolute;
+	bottom: -10px;
+	left: 50%;
+	width: 0;
+	height: 0;
+	border: 5px solid transparent;
+	border: 6px solid transparent\0;
+	border-top-color: inherit;
+	transform: translate(-50%, 0);
+}
+.vue-slider-tooltip.vue-slider-tooltip-bottom::before {
+	content: '';
+	position: absolute;
+	top: -10px;
+	left: 50%;
+	width: 0;
+	height: 0;
+	border: 5px solid transparent;
+	border: 6px solid transparent\0;
+	border-bottom-color: inherit;
+	transform: translate(-50%, 0);
+}
+.vue-slider-tooltip.vue-slider-tooltip-left::before  {
+	content: '';
+	position: absolute;
+	top: 50%;
+	right: -10px;
+	width: 0;
+	height: 0;
+	border: 5px solid transparent;
+	border: 6px solid transparent\0;
+	border-left-color: inherit;
+	transform: translate(0, -50%);
+}
+.vue-slider-tooltip.vue-slider-tooltip-right::before  {
+	content: '';
+	position: absolute;
+	top: 50%;
+	left: -10px;
+	width: 0;
+	height: 0;
+	border: 5px solid transparent;
+	border: 6px solid transparent\0;
+	border-right-color: inherit;
+	transform: translate(0, -50%);
+}
+.vue-slider-dot.vue-slider-hover:hover .vue-slider-tooltip {
+	display: block;
+}
+.vue-slider-dot.vue-slider-always .vue-slider-tooltip {
+	display: block!important;
+}
+.vue-slider-piecewise {
+	position: absolute;
+	width: 100%;
+	padding: 0;
+	margin: 0;
+	left: 0;
+	top: 0;
+	height: 100%;
+	list-style: none;
+}
+.vue-slider-piecewise li {
+	position: absolute;
+	width: 8px;
+	height: 8px;
+}
+.vue-slider-piecewise .vue-slider-piecewise-dot {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	width: 100%;
+	height: 100%;
+	display: inline-block;
+	background-color: rgba(0, 0, 0, 0.16);
+	border-radius: 50%;
+	transform: translate(-50%, -50%);
+    z-index: 2;
+	transition: all .3s;
+}
+.vue-slider-piecewise li:first-child .vue-slider-piecewise-dot, .vue-slider-piecewise li:last-child .vue-slider-piecewise-dot {
+	visibility: hidden;
+}
+.vue-slider-piecewise .vue-slider-piecewise-label {
+	position: absolute;
+	display: inline-block;
+	top: 15px;
+	left: 50%;
+	white-space: nowrap;
+	font-size: 12px;
+	color: #333;
+	transform: translateX(-50%);
+	visibility: visible;
+}

data/app/assets/stylesheets/codelation_ui/extended.scss

@@ -0,0 +1 @@
+@import "./extended/**/*";

data/app/assets/stylesheets/codelation_ui/forms/input.scss

@@ -0,0 +1,72 @@
+.vue-input {
+  display: inline-block;
+  position: relative;
+
+  .vue-input-icon {
+    position: absolute;
+    line-height: 2em;
+    font-size: 1.3em;
+    margin-left: 5px;
+    color: color($grey, 400);
+
+    &.fa-calendar:hover {
+      cursor: pointer;
+      color: color($grey, 500);
+    }
+
+    & ~ input {
+      padding-left: 25px;
+    }
+  }
+
+  .vue-input-message-container {
+    background-color: rgba($black, 0.6);
+    border-radius: 2px;
+    bottom: 100%;
+    color: $white;
+    font-size: 13px;
+    font-weight: normal;
+    line-height: 14px;
+    margin: 15px 10px 30px 0;
+    padding: 8px;
+    position: absolute;
+    right: -30px;
+    width: 250px;
+    z-index: 1;
+
+    @include display(flex);
+    @include flex-flow(row nowrap);
+    @include align-items(center);
+
+    i {
+      display: inline-block;
+      padding-right: 6px;
+    }
+
+    div {
+      display: inline-block;
+    }
+
+    h5 {
+      margin: 0;
+      font-size: 13px;
+      font-weight: normal;
+    }
+
+    p {
+      margin: 0;
+      font-size: 10px;
+      font-weight: normal;
+    }
+
+    &::after {
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-top: 10px solid rgba($black, 0.6);
+      content: "";
+      right: 60px;
+      position: absolute;
+      bottom: -10px;
+    }
+  }
+}

data/app/assets/stylesheets/codelation_ui/forms.scss

@@ -0,0 +1 @@
+@import "./forms/**/*";

data/app/assets/stylesheets/codelation_ui/std.scss

@@ -0,0 +1 @@
+//@import "std/**/*";

data/app/assets/stylesheets/codelation_ui.scss

@@ -0,0 +1,4 @@
+@import "codelation_ui/base";
+@import "codelation_ui/std";
+@import "codelation_ui/forms";
+@import "codelation_ui/extended";

data/lib/codelation_ui.rb

@@ -0,0 +1,7 @@
+require "rails/engine"
+
+module CodelationUi
+  class Engine < ::Rails::Engine
+    # Including an Engine tells Rails that this gem contains assets
+  end
+end