codelation_ui 1.0.1 → 1.0.57

data/app/assets/javascripts/codelation_ui/vue_pages.js

@@ -1,16 +1,41 @@
 (function() {
   "use strict";
 
-  App.register('component').enter(function() {
-    App.vue.currentPage = new Vue({
-      mixin: [App.vue.interfaces.contentFormatters],
-      el: "body",
-      methods: {
-        numeral: numeral,
-        moment: moment
-      }
-    })
+  App.register('first').enter(function() {
+    // All vue components inherit this.  Used to show the vue page after the js loads
+    Vue.mixin({
+      mixins: App.vue.config.main.includedInterfaces,
+      components: App.vue.globalComponents
+    });
+  });
+
+  App.register('last').enter(function() {
+    
+    // Outputs the vue object
+    if (App.vue.config.main.showInterfaces) {
+      console.warn("Loaded Vue")
+      console.warn(App.vue);
+    }
+
+    if (App.vue.root === null && $(App.vue.config.main.rootComponentNode || 'body').length) {
+      App.vue.root = new Vue({
+        el: App.vue.config.main.rootComponentNode || 'body',
+        components: App.vue.extend,
+        data: function() {
+          return {
+            pageLoadedClass: "vue-page-loaded"
+          }
+        }
+      });
+    }
   }).exit(function() {
-    App.vue.currentPage = null;
+    // Destroy Root
+    App.vue.root.$destroy();
+    App.vue.root = null;
+    
+    // Reinit Extends
+    App.vue.extend = {
+      _info: 'Used to hold references to per page components and attach to the root component if you did not define one.'
+    };
   });
 })();

data/app/assets/stylesheets/codelation_ui.scss

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

data/app/assets/stylesheets/codelation_ui/_base_resources/_turbolinks.scss

@@ -0,0 +1,11 @@
+@if variable-exists(accent-color) {
+  $progress-bar-color: $accent-color !default;
+  html.turbolinks-progress-bar::before {
+    background-color: $progress-bar-color !important;
+  }
+}@else{
+  $progress-bar-color: $default-ui-color !default;
+  html.turbolinks-progress-bar::before {
+    background-color: $progress-bar-color !important;
+  }
+}

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

@@ -1,47 +1,199 @@
-$accent-color: $blue !default;
+@mixin button(
+    $background-color: $default-ui-color,
+    $color: #fff,
+    $options: (),
+    $padding: 6px 12px,
+    $border-radius: 2px,
+    $border-color: $background-color,
+    $box-shadow: none,
+    $box-shadow-hover: none,
+    $float-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1),
+    $float-box-shadow-hover: (0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)),
+    $font-size: 14px,
+    $transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),
+    $height: false,
+    $width: false,
+    $line-height: false,
+    $font-weight: normal,
+    $outline: none,
+    $text-decoration: none,
+    $text-transform: none,
+    $cursor: pointer,
+    $display: inline-block) {
 
-@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;
+
+  $float-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
+  $float-box-shadow-hover: (0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12));
+
+  @if $height {
+    height: $height;
+  }
+
+  @if $width {
+    width: $width;
+  }
+
+  @if $line-height {
+    line-height: $line-height;
   }
 
+  @include transition($transition);
+  background-color: $background-color;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+  color: $color;
+  cursor: pointer;
+  display: $display;
+  font-size: $font-size;
+  -webkit-font-smoothing: antialiased;
+  font-weight: $font-weight;
+  outline: $outline;
+  padding: $padding;
+  text-decoration: $text-decoration;
+  text-transform: $text-transform;
+
   &:hover {
-    background-image: linear-gradient(to bottom, lighten($background-color, 5%), darken($background-color, 3.5%));
+    @include transition($transition);
     color: $color;
+    box-shadow: $box-shadow-hover;
   }
 
-  &:active {
-    background-image: linear-gradient(to bottom, lighten($active-background-color, 3%), darken($active-background-color, 5%));
-    color: $active-color;
+  &:active,
+  &.active {
+    @include transition($transition);
+    background-color: lighten($background-color, 7%);
+    color: $color;
+    cursor: wait;
   }
 
   &:disabled {
-    cursor: default;
-    opacity: 0.5;
+    background-color: desaturate($background-color, 20%);
+    border-color: desaturate($background-color, 20%);
+    box-shadow: none;
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  &.negative {
+    background-color: $color;
+    border-color: $color;
+    color: $background-color;
+
+    &:hover {
+      color: $background-color;
+    }
+
+    &:disabled {
+      background-color: desaturate($color, 20%);
+      border-color: desaturate($color, 20%);
+    }
+  }
+
+  &.transparent {
+    background-color: transparent;
+    border-color: transparent;
+
+    &:hover {
+      background-color: rgba($black, 0.2);
+      border-color: transparent;
+    }
+
+    &:disabled {
+      background-color: transparent;
+      border-color: transparent;
+    }
+  }
+
+  &.float {
+    box-shadow: $float-box-shadow;
+
+    &:hover {
+      box-shadow: $float-box-shadow-hover;
+    }
+  }
+
+  &.large {
+    font-size: 1.2em;
+  }
+
+  &.small {
+    font-size: 0.8em;
+  }
+
+  &.wide {
+    padding: 0.625em 2.250em;
+  }
+
+  &.border-less,
+  &.borderless {
+    border: 0;
+  }
+
+  @each $option in $options {
+    @if $option == "negative" {
+      background-color: $color;
+      border-color: $color;
+      color: $background-color;
+
+      &:hover {
+        color: $background-color;
+      }
+
+      &:disabled {
+        background-color: desaturate($color, 20%);
+        border-color: desaturate($color, 20%);
+      }
+    }
+
+    @if $option == "transparent" {
+      background-color: transparent;
+      border-color: transparent;
+
+      &:hover {
+        background-color: rgba($black, 0.2);
+        border-color: transparent;
+      }
+
+      &:disabled {
+        background-color: transparent;
+        border-color: transparent;
+      }
+    }
+
+    @if $option == "float" {
+      box-shadow: $box-shadow;
+
+      &:hover {
+        box-shadow: $box-shadow-hover;
+      }
+    }
+
+    @if $option == "large" {
+      font-size: 1.2em;
+    }
+
+    @if $option == "small" {
+      font-size: 0.8em;
+    }
+
+    @if $option == "wide" {
+      padding: 0.625em 2.250em;
+    }
+
+    @if $option == "borderless" or $option == "border-less" {
+      border: 0;
+    }
+
+    @if $option == "link" {
+      background-color: transparent;
+      opacity: 0.8;
+      text-decoration: underline;
 
-    &:hover,
-    &:active {
-      background-image: linear-gradient(to bottom, $background-color, darken($background-color, 8%));
-      color: $color;
+      &:hover {
+        background-color: transparent;
+        opacity: 1;
+      }
     }
   }
 }

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

@@ -4,6 +4,9 @@
 // Used to set the max-width with the outer-container mixin
 $max-width: 1024px !default;
 
+$default-ui-color: #0366d6 !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;

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

@@ -0,0 +1,2 @@
+@import "./_base_resources/functions/color";
+@import "./_base_resources/functions/text_color";

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

@@ -0,0 +1,53 @@
+$vue-checkmark-color: $green !default;
+$curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
+
+.vue-checkmark {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  display: block;
+  stroke: #fff;
+  stroke-miterlimit: 10;
+  margin: 10% auto;
+  box-shadow: inset 0px 0px 0px $vue-checkmark-color;
+  @include animation(vue-checkmark-fill .4s ease-in-out .4s forwards, vue-checkmark-scalescale .3s ease-in-out .9s both);
+
+  .vue-checkmark-circle {
+    stroke-dasharray: 166;
+    stroke-dashoffset: 166;
+    stroke-miterlimit: 10;
+    stroke: $vue-checkmark-color;
+    fill: none;
+    @include animation(vue-checkmark-stroke .6s $curve forwards);
+  }
+
+  .vue-checkmark-check {
+    transform-origin: 50% 50%;
+    stroke-dasharray: 48;
+    stroke-dashoffset: 48;
+    @include animation(vue-checkmark-stroke .3s $curve .8s forwards);
+  }
+}
+
+
+
+@keyframes vue-checkmark-stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes vue-checkmark-scale {
+  0%, 100% {
+    @include transform(none);
+  }
+  50% {
+    @include transform(scale3d(1.1, 1.1, 1));
+  }
+}
+
+@keyframes vue-checkmark-fill {
+  100% {
+    box-shadow: inset 0px 0px 0px 30px $vue-checkmark-color;
+  }
+}

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

@@ -0,0 +1,153 @@
+.vue-code {
+
+  &.vue-code-inline {
+    display: inline-block;
+  }
+
+  .hljs {
+    color: #383a42;
+    background: #fafafa;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: #a0a1a7;
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-formula {
+    color: #a626a4;
+  }
+
+  .hljs-section,
+  .hljs-name,
+  .hljs-selector-tag,
+  .hljs-deletion,
+  .hljs-subst {
+    color: #e45649;
+  }
+
+  .hljs-literal {
+    color: #0184bb;
+  }
+
+  .hljs-string,
+  .hljs-regexp,
+  .hljs-addition,
+  .hljs-attribute,
+  .hljs-meta-string {
+    color: #50a14f;
+  }
+
+  .hljs-built_in,
+  .hljs-class .hljs-title {
+    color: #c18401;
+  }
+
+  .hljs-attr,
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-selector-class,
+  .hljs-selector-attr,
+  .hljs-selector-pseudo,
+  .hljs-number {
+    color: #986801;
+  }
+
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-link,
+  .hljs-meta,
+  .hljs-selector-id,
+  .hljs-title {
+    color: #4078f2;
+  }
+
+  &.vue-code-dark {
+    .hljs {
+      color: #abb2bf;
+      background: #282c34;
+    }
+
+    .hljs-comment,
+    .hljs-quote {
+      color: #5c6370;
+    }
+
+    .hljs-doctag,
+    .hljs-keyword,
+    .hljs-formula {
+      color: #c678dd;
+    }
+
+    .hljs-section,
+    .hljs-name,
+    .hljs-selector-tag,
+    .hljs-deletion,
+    .hljs-subst {
+      color: #e06c75;
+    }
+
+    .hljs-literal {
+      color: #56b6c2;
+    }
+
+    .hljs-string,
+    .hljs-regexp,
+    .hljs-addition,
+    .hljs-attribute,
+    .hljs-meta-string {
+      color: #98c379;
+    }
+
+    .hljs-built_in,
+    .hljs-class .hljs-title {
+      color: #e6c07b;
+    }
+
+    .hljs-attr,
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-type,
+    .hljs-selector-class,
+    .hljs-selector-attr,
+    .hljs-selector-pseudo,
+    .hljs-number {
+      color: #d19a66;
+    }
+
+    .hljs-symbol,
+    .hljs-bullet,
+    .hljs-link,
+    .hljs-meta,
+    .hljs-selector-id,
+    .hljs-title {
+      color: #61aeee;
+    }
+  }
+
+  .hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 0.5em;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    font-style: italic;
+  }
+
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: bold;
+  }
+
+  .hljs-link {
+    text-decoration: underline;
+  }
+}