chr 0.1.0

data/app/assets/stylesheets/_chr.scss

@@ -0,0 +1,7 @@
+@import "normalize-rails";
+@import "bourbon";
+
+@import "core/main";
+@import "form/form";
+
+@import "core/responsive";

data/app/assets/stylesheets/core/_icons.scss

@@ -0,0 +1,124 @@
+@mixin rotate($deg) {
+  -webkit-transform:rotate($deg * 1deg);
+  -moz-transform:rotate($deg * 1deg);
+  -ms-transform:rotate($deg * 1deg);
+  -o-transform:rotate($deg * 1deg);
+  transform:rotate($deg * 1deg);
+}
+
+.icon-base {
+  display: block;
+  width: 40px;
+  height: 40px;
+  &:after, &:before {
+    content:"";
+    position:absolute;
+    top:50%;
+    left:0;
+    background: $positiveColor;
+  }
+  &:hover { &:after, &:before { opacity: .5; } }
+}
+
+.icon-plus { @extend .icon-base;
+  &:before {
+    left:19px;
+    width:2px;
+    height:20px;
+    margin-top:-10px;
+
+  }
+  &:after {
+    left:10px;
+    width:20px;
+    height:2px;
+    margin-top:-1px;
+  }
+}
+
+.icon-arrow-left { @extend .icon-base;
+  &:after,
+  &:before { left:8px; width:14px; height:2px; }
+
+  &:before { margin-top: 4px; @include rotate(45); }
+  &:after  { margin-top: -5px; @include rotate(-45); }
+}
+
+.icon-back {
+  display: block;
+  width: 40px;
+  line-height: 42px;
+
+  &:before {
+    content: '';
+    display: inline-block;
+    vertical-align: middle;
+    background-size: 100% auto;
+    background-position: center;
+    background-repeat: no-repeat;
+    font-style: normal;
+    position: relative;
+    width: 12px;
+    height: 20px;
+    margin-top: -4px;
+    background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z' fill='%23007aff'/></svg>");
+  }
+  &:hover { opacity: .5; }
+}
+
+.icon-folder { @extend .icon-base;
+  position: absolute;
+  top: 50%;
+  margin-top: -20px;
+  right: 0;
+  &:after,
+  &:before { left:20px; width:10px; height:2px; background: $contrastColor; }
+
+  &:before { margin-top: 2px; @include rotate(-45); }
+  &:after  { margin-top: -4px; @include rotate(45); }
+  &:hover { &:after, &:before { opacity: 1; } }
+}
+
+.icon-search {
+  display: block;
+  width: 40px;
+  height: 40px;
+
+  &:before {
+    content:"";
+    position:absolute;
+    top: 11px;
+    left: 10px;
+    border: 1px solid $positiveColor;
+    width: 14px;
+    height: 14px;
+    border-radius: 7px;
+  }
+
+  &:after {
+    content:"";
+    position:absolute;
+    @include rotate(-43);
+    width: 2px;
+    height: 8px;
+    left: 23px;
+    top: 21px;
+    background-color: $positiveColor;
+  }
+
+  &:hover { opacity: .5; }
+}
+
+.icon-reorder {
+  position: absolute; width: 40px; height: 40px;
+  cursor: pointer;
+  &:before,
+  &:after  { content: ''; width: 20px; height: 2px; left: 10px; display: block; position: absolute; background-color: $contrastColor; }
+  &:before { top: 16px; }
+  &:after  { top: 21px; }
+}
+
+.slip-reordering > .icon-reorder:before,
+.slip-reordering > .icon-reorder:after { background-color: $positiveColor; }
+
+

data/app/assets/stylesheets/core/_list.scss

@@ -0,0 +1,44 @@
+.list {
+  header {
+    .search {
+      @include absolutePosition(0 0 inherit inherit);
+      height: 40px; overflow: hidden; width: 40px;
+
+      .icon   { @include absolutePosition(0 inherit inherit 0); z-index: 0; @extend .icon-search; }
+      input   { display: none; height: 42px; width: 100%; padding: 0 5em 0 2.5em; outline-style: none; border: none; }
+      .cancel { display: none; @include absolutePosition(0 1em initial initial); z-index: 0; color: $positiveColor;  }
+    }
+    .new + .search { @include absolutePosition(0 40px inherit inherit); }
+  }
+
+  &.list-search {
+    header {
+      .search { @include absolutePosition(0 0 inherit 0);
+                  width: 100%; z-index: 1; background-color: $white;
+        input   { display: block; }
+        .cancel { display: inline; &:hover { opacity: .5; } }
+        .icon   {
+          &:hover   { cursor: pointer; opacity: 1; }
+          &:before  { border-color: $stableColor;     }
+          &:after   { background-color: $stableColor; }
+        }
+      }
+      .new + .search { @include absolutePosition(0 0 inherit 0); }
+    }
+    .item-folder { display: none; }
+  }
+
+  .items:after {
+    content: 'Loading...';
+    font-size: .8em; text-align: center; width: 100%; color: $stableColor; display: block; margin-top: 1.5em;
+    opacity: 0; @include transition(opacity .25s);
+  }
+
+  &.list-loading .items:after {
+    opacity: 1;
+  }
+}
+
+
+
+

data/app/assets/stylesheets/core/_main.scss

@@ -0,0 +1,89 @@
+/* Generic ----------------------------------------------------------------- */
+*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
+html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
+       font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
+  a  { text-decoration: none; }
+}
+html, body, .view { overflow: hidden; } // .module
+
+/* Settings ---------------------------------------------------------------- */
+$positiveColor:  rgb( 74,135,238) !default;
+$stableColor:    rgb(178,178,178) !default;
+$lightColor:     rgb(210,210,210) !default;
+$assertiveColor: rgb(239, 78, 58) !default;
+$neutralColor:   rgb(246,246,246) !default;
+$contrastColor:  rgb(230,230,230) !default;
+$white:          rgb(255,255,255) !default;
+$black:          #333 !default;
+
+/* Mixins ------------------------------------------------------------------ */
+@mixin absolutePosition($coordinates: null null null null) {
+  position: absolute; top: nth($coordinates, 1); right: nth($coordinates, 2); bottom: nth($coordinates, 3); left: nth($coordinates, 4); }
+
+@mixin truncate {
+  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
+
+@mixin user-select-none {
+  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;
+}
+
+@mixin border($color) {
+  &:after { content: ''; display: block; height: 1px; //width: 100%;
+            background-color: $color; @include position(absolute, 0px 0px null 1em); }
+}
+
+@mixin noBorder { &:after { display: none; } }
+
+@mixin customScrollbar {
+  &::-webkit-scrollbar { width: 6px; background-color: $neutralColor; }
+  &::-webkit-scrollbar-thumb { background-color: $contrastColor; border-radius: 3px; }
+}
+
+@mixin scrollable { overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
+
+/* Imports ----------------------------------------------------------------- */
+@import "icons";
+@import "list";
+
+/* Menu -------------------------------------------------------------------- */
+.menu:before { content: 'CHR'; font-weight: 800; color: $contrastColor; line-height: 2.7;
+               position: absolute; display: block; margin-top: -2.7em; padding-left: 1em;
+               background-color: #fff; width: 100%; }
+.menu { margin-top: 2.7em; font-size: .8em; letter-spacing: 1px; text-transform: uppercase; }
+
+/* Headers ----------------------------------------------------------------- */
+.view header,
+.list header    { text-align: center; position: relative; z-index: 1; line-height: 2.6; max-height: 42px; background-color: $white;
+  .title        { font-weight: 500; padding: 1px 60px 0 40px; color: $black;
+                  @include truncate; }
+  .back, .close { @include absolutePosition(0 inherit inherit 0); @extend .icon-back; overflow: hidden; height: 41px; }
+  .new   { @include absolutePosition(0 0 inherit inherit); @extend .icon-plus; }
+  .save  { @include absolutePosition(0 1em inherit inherit); color: $positiveColor; &:hover { opacity: .5; } }
+}
+
+/* Items ------------------------------------------------------------------- */
+.items  { @include absolutePosition(42px 0 0 0); @include scrollable(); padding-bottom: 5em; }
+.menu a, .items .item {
+                  display: block; position: relative;
+                  padding: 1em; color: $black; @include border($neutralColor); margin-top: -1px;
+  &.active      { background-color: $neutralColor; z-index: 1; }
+  &:first-child { @include noBorder(); }
+}
+.items .item {
+  &.has-subtitle  { padding: .6em 1em; }
+  &.has-thumbnail { padding-left: 4.1em; }
+  &.has-thumbnail .item-title              { line-height: 2.15; }
+  &.has-thumbnail.has-subtitle             { padding-top: 1em; padding-bottom: .75em; }
+  &.has-thumbnail.has-subtitle .item-title { line-height: 1.2; }
+  &.reorderable   { padding-right: 2.5em; }
+  .icon-reorder   { top: 50%; margin-top: -20px; right: 0; }
+}
+.item-title     { @include truncate; }
+.item-subtitle  { @include truncate; color: $stableColor; font-size: .8em; line-height: 1.5; }
+.item-thumbnail { @include absolutePosition(.5em 0 0 .5em); width: 3.1em; height: 3.1em; }
+.item-thumbnail img { width: 100%; border-radius: 25px; }
+
+
+
+
+

data/app/assets/stylesheets/core/_responsive.scss

@@ -0,0 +1,41 @@
+/* Layouts */
+$tablet:  "screen and (min-width:768px)";
+$desktop: "screen and (min-width:1150px)";
+
+/* Mobile Layout */
+.sidebar { @include absolutePosition(0 0 0 0); z-index: 1; }
+.module  { @include absolutePosition(0 0 0 0); z-index: 2; }
+.view    { @include absolutePosition(0 0 0 0); z-index: 3; background-color: #fff; }
+.list    { @include absolutePosition(0 0 0 0); z-index: 0; overflow: hidden; background-color: #fff; }
+
+/* Tablet Layout */
+@media #{$tablet} {
+  .sidebar { right: inherit; width: 9em; }
+  .module  { right: inherit; left: 9em; width: 20em; }
+  .view    { left: 29em; }
+  .list    { font-size: .9em; }
+  .items .item:active { background: $neutralColor; }
+  .module .list:first-child .back { display: none; }
+  .view header .close { @include absolutePosition(0 inherit inherit 1em); color: $positiveColor; &:before { display: none; } }
+  .view header .title { padding-left: 64px; }
+  .module, .view { box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); }
+  .module {
+    &:after {
+      display: block; content: ''; width: 4px; @include position(absolute, 0px -3px 0px null);
+      background-color: $white; border-left: 1px solid $neutralColor;
+    }
+  }
+  // custom scrollbar
+  .redactor-editor, textarea.redactor, .view .input-stacked textarea, .view > form, .list .items { @include customScrollbar(); }
+}
+
+/* Desktop Layout */
+@media #{$desktop} {
+  .sidebar { width: 10em; }
+  .module  { left: 10em; width: 22em; }
+  .view    { left: 32em;  }
+}
+
+
+
+

data/app/assets/stylesheets/form/_form.scss

@@ -0,0 +1,50 @@
+/* Form -------------------------------------------------------------------- */
+.view {
+  form  { @include absolutePosition(42px 0 0 0); @include scrollable(); z-index: 0; padding-bottom: 5em; }
+  form  { color: $black; }
+  label { display: block; }
+
+  .input-stacked {
+    @include position(relative); @include border($neutralColor); &:first-child { @include noBorder(); }
+    padding: .5em 1em .9em;
+
+    &.input-text { min-height: 82px; } // workaround for empty or oneline textareas
+    &.input-select select { margin-top: 0.15em; }
+
+    textarea     { resize: none; overflow: auto; }
+    textarea     { box-sizing: border-box; min-height: 20px; /* max-height: 400px; /* optional */ }
+    textarea,
+    input        { outline-style: none; border: 0; width: 100%; @include placeholder { color: $lightColor; } }
+    .label       { display: block; line-height: 1.8; color: $stableColor; }
+  }
+
+  .delete { display: block; text-align: center; margin: 5em 0; line-height: 2.5em;
+                color: $assertiveColor; border: 1px solid $assertiveColor; border-left: none; border-right: none;
+                &:hover, &:active { background-color: $assertiveColor; color: #fff; } }
+
+  .error-message { color: $assertiveColor; font-size: .8em; margin-left: .5em; }
+
+  &.view-saving {
+    header .save { display: none; }
+    header:after {
+      font-size: .8em;
+      content: 'Saving...';
+      opacity: .4;
+      @include absolutePosition(.4em .8em inherit inherit);
+    }
+  }
+
+  /* Imports --------------------------------------------------------------- */
+  @import "input_checkbox";
+  @import "input_color";
+  @import "input_file";
+  @import "input_list";
+  @import "input_string";
+  @import "input_text";
+  @import "nested_form";
+}
+
+
+
+
+

data/app/assets/stylesheets/form/_input_checkbox.scss

@@ -0,0 +1,87 @@
+/* Checkbox ---------------------------------------------------------------- */
+.input-checkbox {
+  padding: .8em 1em 1em;
+
+  input  { display: inline; width: auto; margin-right: .5em; }
+  .label { display: inline; }
+}
+
+/* Switch ------------------------------------------------------------------ */
+.input-switch { padding-top: .75em; }
+.input-switch .switch {
+  float: right;
+  margin-top: -1.8em;
+
+  $switch-width: 52px;
+  $switch-padding: 2px;
+  $switch-height: 32px;
+  $switch-radius: $switch-height;
+  $knob-size: $switch-height - ($switch-padding * 2);
+  $knob-radius: $switch-height - ($switch-padding * 2);
+  $knob-width: $knob-size;
+  $switch-background: $white;
+  $switch-border-background: $contrastColor;
+  $switch-shadow: 0 0px 2px transparentize(black, 0.6);
+
+  border-radius: $switch-radius;
+  cursor: pointer;
+  display: inline-block;
+  height: $switch-height;
+  position: relative;
+  width: $switch-width;
+
+  input[type="checkbox"] {
+    display: none;
+
+    + .checkbox {
+      @include transition(all 0.3s ease);
+      background: $switch-border-background;
+      border-radius: $switch-radius;
+      border: none;
+      cursor: pointer;
+      height: $switch-height;
+      margin: 0;
+      padding: 0;
+      position: relative;
+      width: $switch-width;
+      z-index: 0;
+
+      &:before {
+        @include position(absolute, 2px 0 0 2px);
+        @include transform(scale(1));
+        @include transition(all 0.3s ease);
+        background: $switch-background;
+        border-radius: $switch-radius;
+        content: "";
+        height: $knob-radius;
+        width: $switch-width - ($switch-padding * 2);
+        z-index: 1;
+      }
+
+      &:after {
+        @include position(absolute, 2px 0 0 2px);
+        @include transition(all 0.3s ease);
+        @include size($knob-size);
+        background: $switch-background;
+        border-radius: $knob-radius;
+        box-shadow: $switch-shadow;
+        content: "";
+        z-index: 2;
+      }
+    }
+
+    &:checked {
+      + .checkbox {
+        background: $positiveColor;
+
+        &:before {
+          @include transform(scale(0));
+        }
+
+        &:after {
+          left: $switch-width - $knob-width - ($switch-padding);
+        }
+      }
+    }
+  }
+}