chr 0.2.8 → 0.3.5

data/app/assets/stylesheets/_chr.scss

@@ -1,16 +1,14 @@
 @import "bourbon";
 
-@import "core/settings";
-@import "core/mixins";
-@import "core/icons";
-@import "core/main";
-@import "core/list";
-@import "core/responsive";
+@import "chr/settings";
+@import "chr/mixins";
+@import "chr/icons";
+@import "chr/main";
+
+@import "form/input-select2";
+@import "form/expandable-group";
+@import "form/main";
+
+
+
 
-@import "form/form";
-@import "form/input-checkbox";
-@import "form/input-color";
-@import "form/input-file";
-@import "form/input-form";
-@import "form/input-list";
-@import "form/input-string";

data/app/assets/stylesheets/_input-redactor.scss

@@ -5,30 +5,31 @@
 .input-inverter,
 .input-redactor {
   .redactor-box     { margin-bottom: 0; }
-  .redactor-toolbar { box-shadow: none; border-bottom: 2px solid $contrastColor; }
-  .redactor-editor  { border: 1px solid $contrastColor; border-top: 0; }
-}
-
-
-// fullscreen
-.redactor-box-fullscreen {
-  .redactor-toolbar           { box-shadow: none; border-bottom: 2px solid $contrastColor; }
-  .redactor-placeholder:after { content: ''; }
-  .redactor-editor            { padding-bottom: 5em; border: none; }
+  .redactor-toolbar { box-shadow: none; border-bottom: 2px solid $neutralColor; }
+  .redactor-editor  { border: 0; padding: 1em .5em 0 .5em; }
 }
 
+// toolbar
+.redactor-toolbar li a:hover { background-color: $positiveColor; }
+.redactor-dropdown a:hover { background-color: $positiveColor; }
 
 // placeholder
-.redactor-placeholder:after { color: $lightColor!important; }
-
+.redactor-placeholder:after { color: $lightColor!important; left: .5em; top: 18px; }
 
 // scrollbars
-.redactor-editor, textarea.redactor { @include customScrollbar(); }
-
+.redactor-editor, textarea.redactor { @include custom-scrollbar; }
 
 // line-height issue fix
 .redactor-editor { line-height: inherit !important; }
 
-
-
+// modal
+#redactor-modal-close { line-height: 30px; text-align: center; }
+#redactor-modal footer button {
+  &.redactor-modal-close-btn { background-color: $lightColor;
+    &:hover { background-color: $lightColor;     opacity: .75; } }
+  &.redactor-modal-action-btn { background-color: $positiveColor;
+    &:hover { background-color: $positiveColor;  opacity: .75; color: $white; } }
+  &.redactor-modal-delete-btn { background-color: $assertiveColor;
+    &:hover { background-color: $assertiveColor; opacity: .75; color: $white; } }
+}
 

data/app/assets/stylesheets/{core → chr}/_icons.scss

@@ -60,7 +60,7 @@
     position: relative;
     width: 12px;
     height: 20px;
-    margin-top: -4px;
+    margin-top: -5px;
     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; }

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

@@ -0,0 +1,110 @@
+/* Global ------------------------------------------------------------------ */
+*, *:before, *:after { box-sizing: border-box; }
+html { @include antialiased; font-family: $fontFamily; color: $black; }
+html a { text-decoration: none; }
+
+
+/* Menu -------------------------------------------------------------------- */
+.menu { font-size: .8em; letter-spacing: 1px; text-transform: uppercase;  }
+.menu:before { @include menu-title($contrastColor); content: 'CHARACTER'; }
+
+
+/* Header ------------------------------------------------------------------ */
+.header          { height: 40px; background-color: rgba(255,255,255,.9); text-align: center;
+  .title         { @include truncate; display: inline-block; max-width: 70%; font-weight: 500; line-height: 2.5; }
+  .back, .close  { @include header-back-arrow;                                                         }
+  .new           { @include position(absolute, 0 0   null null); @extend .icon-plus;                   }
+  .new + .search { @include position(absolute, 0 40px inherit inherit);                                }
+  .spinner       { @include spinner; @include hide; position: absolute; margin: 6px 0 0 -36px;         }
+  .save          { @include position(absolute, 0 1em null null); @include header-button($stableColor); font-weight: 500; }
+}
+
+.view.has-unsaved-changes .save { color: $positiveColor; }
+.show-spinner .spinner { display: inline-block; }
+
+
+/* Item -------------------------------------------------------------------- */
+.menu a, .item { @include list-item($black, $neutralColor, $neutralColor); }
+
+.item .icon-reorder { top: 50%; margin-top: -20px; right: 0; }
+
+.item.is-folder                              { font-weight: 400;             }
+.item.has-subtitle                           { padding: .6em 1em;            }
+.item.has-thumbnail                          { padding-left: 4.1em;          }
+.item.has-thumbnail .item-title              { line-height: 2.15;            }
+.item.has-thumbnail.has-subtitle             { padding: 1em 1em .75em 4.1em; }
+.item.has-thumbnail.has-subtitle .item-title { line-height: 1.2;             }
+.item.reorderable                            { padding-right: 2.5em;         }
+
+.item-title         { @include truncate;                                                         }
+.item-subtitle      { @include truncate; color: $stableColor; font-size: .8em; line-height: 1.5; }
+.item-thumbnail     { @include position(absolute, .5em 0 0 .5em); width: 3.1em; height: 3.1em;   }
+.item-thumbnail img { width: 100%; border-radius: 25px;                                          }
+
+
+/* Search ------------------------------------------------------------------ */
+.search { @include position(absolute, 0 0 null null); width: 40px; height: 40px; overflow: hidden;
+  .icon { @include position(absolute, 0 null null 0); @extend .icon-search; }
+  input, .cancel { @include hide; }
+}
+
+.list-search {
+  .item.is-folder, .item.is-nested_object { @include hide; }
+  .new + .search  { @include position(absolute, 0 0 null 0); }
+  .search   { @include position(absolute, 0 null null null); width: 100%; background-color: $white;
+    .cancel { display: inline; @include header-button; @include position(absolute, 0 1em null null);  }
+    input   { display: block; width: 100%; height: 40px; padding: 0 5em 0 2.5em; @include no-outline; }
+    .icon   { &:hover { opacity: 1; } &:before { border-color: $stableColor; } &:after { background-color: $stableColor; } }
+  }
+}
+
+
+/* View -------------------------------------------------------------------- */
+.view-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; } }
+
+.view-saving .save    { @include hide(); }
+.view-saving .spinner { display: inline-block; }
+
+
+/* Mobile ------------------------------------------------------------------ */
+.header       { @include position(fixed, 0 null null null); z-index: 10; width: 100%; }
+.view, .list  { @include position(absolute, 0 0 null 0); background-color: $white; z-index: 1; padding-top: 41px; min-height: 100%; }
+.list.scroll-lock { overflow: hidden; bottom: 0; }
+.content, .items  { padding-bottom: 5em; position: relative; z-index: 0; }
+
+
+/* Tablet ------------------------------------------------------------------ */
+@media #{$tablet} {
+  body     { overflow: hidden; }
+  .sidebar { @include position(absolute, 0 null 0 0); width: 9em; }
+  .module  { @include position(absolute, 0 0 0 9em); z-index: 1; @include border-shadow; }
+  .view,
+  .list    { @include position(absolute, 0 0 0 0); overflow: hidden; background-color: #fff; padding-top: 0px; }
+  .header  { @include position(relative); }
+  .items,
+  .content { @include position(absolute, 41px 0 0 0); @include scrollable(); }
+
+  .view .close { @include header-back-label; }
+  .module .list:first-child .back { @include hide; }
+}
+
+
+/* Desktop ----------------------------------------------------------------- */
+@media #{$desktop} {
+  .sidebar         { width: 10em; }
+  .module          { left:  10em; }
+  .list            { width: 22em; }
+  .list.list-aside { left: 22em; right: 0; width: auto;     }
+  .list .header    { border-right: 1px solid $neutralColor; }
+  .view            { left: 22em; @include border-shadow;    }
+  .view.fullsize   { left: 0em; @include no-border-shadow;  }
+
+  .list.list-aside .back { @include header-back-label; }
+  .input-text textarea, .content, .items { @include custom-scrollbar;  }
+}
+
+
+
+

data/app/assets/stylesheets/{core → chr}/_mixins.scss

@@ -1,56 +1,61 @@
 /* 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 hide { display: none; }
 
-@mixin user-select-none {
-  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;
-}
+@mixin truncate { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
 
-@mixin border($color) {
-  &:after { content: ''; display: block; height: 1px;
-            background-color: $color; @include position(absolute, 0px 0px null 1em); }
-}
+@mixin scrollable { overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
 
-@mixin noBorder { &:after { display: none; } }
+@mixin antialiased { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
 
-@mixin noFocus { &:focus { outline: none; } }
+@mixin no-focus-outline { &:focus { outline: none; } }
 
-@mixin customScrollbar {
-  &::-webkit-scrollbar { width: 6px; background-color: $neutralColor; }
-  &::-webkit-scrollbar-thumb { background-color: $contrastColor; border-radius: 3px; }
-}
+@mixin no-outline { @include no-focus-outline; outline: none; border: none; }
 
-@mixin scrollable { overflow: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
+@mixin border-shadow { box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); }
 
-@mixin spinner {
-  border:      .25em solid rgba($positiveColor, 0.2);
-  border-left: .25em solid $positiveColor;
-  -webkit-animation: spinning 1.1s infinite linear; animation: spinning 1.1s infinite linear;
-  &, &:after { border-radius: 50%; width: 1.75em; height: 1.75em; }
+@mixin no-border-shadow { box-shadow: none; }
+
+@mixin header-back-arrow { @include position(absolute, 0 null null 0); @extend .icon-back; overflow: hidden; height: 40px; }
+
+@mixin header-back-label { @include position(absolute, 0 null null 1em); @include header-button; width: auto; &:before { @include hide; } }
+
+@mixin header-button($color: $positiveColor) {
+  display: inline-block; height: 40px; line-height: 2.5; color: $color;
+  @include no-focus-outline; &:hover { opacity: .5; }
 }
 
-@-webkit-keyframes spinning {
-  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg);   }
-  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
+@mixin custom-scrollbar {
+  &::-webkit-scrollbar       { width: 6px; background-color: $neutralColor;          }
+  &::-webkit-scrollbar-thumb { background-color: $contrastColor; border-radius: 3px; }
 }
 
-@keyframes spinning {
-  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg);   }
-  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
+
+/* Menu Title --------------------------------------------- */
+@mixin menu-title($color) {
+   display: block; position: relative; padding: 1.5em 0 .75em 1em; font-weight: 800; color: $color;
+   // TODO: fix size for mobile, menu items too small
 }
 
-@mixin headerButton($color: $positiveColor) {
-  color: $color; &:hover { opacity: .5; }
+
+/* Menu Item & List Item ---------------------------------- */
+@mixin bottom-border($color) {
+  &:after { content: ''; display: block; height: 1px; background-color: $color;
+            @include position(absolute, null 0px 0px 1em); }
 }
 
-@mixin shadow {
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
+@mixin no-bottom-border { &:after { @include hide; } }
+
+@mixin list-item($color, $activeBgColor, $borderColor) {
+  display: block; position: relative; padding: 1em; color: $color; font-weight: 300;
+  margin-top: -1px; @include bottom-border($borderColor);
+  &.active     { background-color: $activeBgColor; z-index: 1; }
+  &:last-child { @include no-bottom-border; }
 }
 
-@mixin switchControl() {
+
+/* Switch ------------------------------------------------- */
+@mixin switch {
   $switch-width: 52px;
   $switch-padding: 2px;
   $switch-height: 32px;
@@ -126,5 +131,24 @@
 }
 
 
+/* Spinner ------------------------------------------------ */
+@mixin spinner {
+  border:      .25em solid rgba($contrastColor, 0.2);
+  border-left: .25em solid $contrastColor;
+  -webkit-animation: spinning 1.1s infinite linear; animation: spinning 1.1s infinite linear;
+  &, &:after { border-radius: 50%; width: 1.75em; height: 1.75em; }
+}
+
+@-webkit-keyframes spinning {
+  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg);   }
+  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
+}
+
+@keyframes spinning {
+  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg);   }
+  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
+}
+
+
 
 

data/app/assets/stylesheets/{core → chr}/_settings.scss

@@ -6,4 +6,10 @@ $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;
+$black:          #333 !default;
+
+$fontFamily: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
+
+/* Layouts ----------------------------------------------------------------- */
+$tablet:  "screen and (min-width:768px)";
+$desktop: "screen and (min-width:1024px)";

data/app/assets/stylesheets/form/_expandable-group.scss

@@ -0,0 +1,16 @@
+
+// expandable group
+.group-edit { color: $stableColor; font-size: .9em; @include position(absolute, null .5em null null); text-transform: lowercase; margin-top: -1.5em;
+  &:hover   { color: $positiveColor; }
+}
+
+.group-edit:before {
+  content: '-';
+  display: block; width: 1em; height: 1em;
+  @include position(absolute, null null null -.75em);
+}
+
+.group-edit.hidden:before   { content: '+';  }
+.group-edit.hidden + .group { display: none; }
+
+.form .group .input-stacked:last-child { @include bottom-border($neutralColor); }

data/app/assets/stylesheets/form/_input-select2.scss

@@ -0,0 +1,94 @@
+@import "vendor/select2";
+
+
+.input-stacked.input-select2 {
+  padding-bottom: .3em;
+}
+
+.select2-dropdown,
+.select2-container--default .select2-selection--single {
+  border-color: $neutralColor;
+  border-radius: 0;
+}
+
+.select2-container--default .select2-selection--single {
+  border: 0;
+}
+
+.select2-container--open .select2-dropdown--above {
+  border: 1px solid $neutralColor; border-top: none;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__rendered {
+  line-height: 1.4em;
+  color: $black;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__arrow b {
+  border-color: $positiveColor transparent transparent transparent;
+}
+
+.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
+  border-color: transparent transparent $positiveColor transparent;
+}
+
+.select2-container--default .select2-search--dropdown .select2-search__field {
+  border-color: $contrastColor;
+  &:focus {
+    border-color: $stableColor;
+  }
+}
+
+.select2-container--default * {
+  &:focus {
+    outline: none;
+  }
+}
+
+.select2-container--default .select2-results__option[aria-selected=true] {
+  background-color: $neutralColor;
+  color: $black;
+}
+
+.select2-results__option {
+  font-weight: 300;
+}
+
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+  background-color: $positiveColor;
+  color: $white;
+}
+
+.select2-container--default .select2-results__option[aria-selected=true] {
+  &:hover {
+    background-color: $positiveColor;
+    color: $white;
+  }
+}
+
+.select2-container--default .select2-results > .select2-results__options {
+  @include custom-scrollbar();
+}
+
+.select2-dropdown--below {
+  top: -4px;
+}
+
+.select2-container--default .select2-selection--single .select2-selection__arrow {
+  left: 1px;
+  top: -1px;
+}
+
+.select2-container .select2-selection--single .select2-selection__rendered {
+  padding-left: 20px;
+  padding-right: 8px;
+}
+
+.select2-search--dropdown {
+  padding: 0;
+  margin: 0 -1px;
+}
+
+
+
+

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

@@ -0,0 +1,180 @@
+
+.form {
+  // label
+  label { display: block; }
+
+
+  // general
+  .input-stacked {
+    @include position(relative); padding: .5em 1em .9em;
+    @include bottom-border($neutralColor); &:last-child { @include no-bottom-border; }
+
+    textarea, input {  width: 100%; @include no-outline; @include placeholder { color: $lightColor; } }
+
+    .label { display: block; line-height: 1.8; color: $stableColor; }
+  }
+
+
+  // validation error
+  .error-message { color: $assertiveColor; font-size: .8em; margin-left: .5em; }
+
+
+  // nested form
+  .nested-forms {
+    & > .label { margin-bottom: .25em; }
+    & > ul { margin: 0; padding: 0; }
+    & > ul > li { list-style-type: none; margin-top: 1em; @include position(relative); border: 1px solid $neutralColor; }
+    & > ul > li:first-child { margin-top: 0; }
+    & > ul > li > .icon-reorder { left: 0; top: 1em; }
+    & > ul li.reorderable { background-color: $white; }
+    & > ul li.reorderable > .input-stacked:first-child { padding-left: 2.4em; }
+  }
+
+  .nested-form-new {
+    color: $positiveColor; margin-top: .75em; display: inline-block; font-size: .9em;
+    &:hover { opacity: .5; }
+  }
+
+  .nested-form-delete {
+    @include position(absolute, .35em .3em null null); border-radius: 1em;
+    @include hide-text; width: 1.5em; height: 1.5em;  background-color: rgba(0,0,0,.05);
+    &:before { content: '\00d7'; color: $stableColor; line-height: 1.35em; @include position(absolute, null 7px null null); }
+    &:hover  { background-color: $positiveColor; &:before { color: $white; } }
+  }
+
+
+  // required
+  .input-required .label:before { content: '*'; color: $assertiveColor; @include position(absolute, null null null .38em); }
+
+
+  // disabled
+  .input-disabled { textarea, input { color: $stableColor; } }
+
+
+  // string
+  .input-string  {
+    .twitter-typeahead { width: 100%; }
+    .tt-suggestions    { padding: .1em .5em; margin: 0 0 0 -.5em; background: rgba(255,255,255, .95); }
+    .tt-suggestion     { cursor: pointer; opacity: .5;
+      p                { line-height: 1.5; margin: 0; }
+      &.tt-cursor      { opacity: 1; }
+    }
+  }
+
+  // character counter
+  .input-character-counter { font-size: .8em; margin-left: .5em; &.exceeds { color: $assertiveColor; } }
+
+
+  // text
+  .input-text { min-height: 82px;
+    textarea { resize: none; overflow: auto; box-sizing: border-box; min-height: 20px; }
+  }
+
+
+  // select
+  .input-select select { margin-top: 0.15em; }
+
+
+  // checkbox
+  .input-checkbox { padding: .8em 1em 1em;
+    input  { display: inline; width: auto; margin-right: .5em; }
+    .label { display: inline; cursor: pointer; }
+  }
+
+
+  // switch
+  .input-switch { padding-top: .75em;
+    .label  { cursor: pointer; }
+    .switch { @include switch; float: right; }
+  }
+
+
+  // color
+  .input-color {
+    position: relative; padding-left: 4.75em;
+
+    .preview {
+      @include position(absolute, .65em null null 1em);
+      width: 50px; height: 50px; border-radius: 4px; background-color: #eee;
+    }
+  }
+
+
+  // list
+  .input-list {
+    input   { padding-left: 2em; margin-top: .1em; }
+    ul      { line-height: 1.5; margin: 0 0 0 2em; list-style: none; padding: 0; }
+    ul li   { @include user-select(none); position: relative; }
+    ul li a { color: $assertiveColor; font-size: .75em; }
+
+    .slip-reordering { color: $positiveColor; }
+
+    .icon-reorder {
+      width:  25px;
+      height: 25px;
+      left:  -1.75em;
+      &:before { left: 0; top: 9px; }
+      &:after  { left: 0; top: 14px; }
+    }
+
+    .twitter-typeahead       { width: 100%; }
+    .twitter-typeahead:after {
+      content: '+';
+      display: block;
+      width: 40px;
+      height: 24px;
+      position: absolute; left: 12px; top: -3px;
+      font-size: 22px;
+      color: $contrastColor;
+    }
+
+    .tt-suggestions { padding: .1em .5em; margin: 0 0 0 1.55em; background: rgba(255,255,255, .95); }
+    .tt-suggestion  { cursor: pointer; opacity: .5;
+      p             { line-height: 1.5; margin: 0; }
+      &.tt-cursor   { opacity: 1; }
+    }
+  }
+
+
+  // file
+  .input-file { min-height: 102px; // NOTE: calculated based on image thumbnail size
+
+    a { color: $positiveColor; @include truncate; }
+    a:hover { text-decoration: underline; }
+
+    input[type=file] { margin-top: .5em; margin-left: 1.75em; }
+    input[type=checkbox] { display: inline; width: auto; margin-right: .5em; margin-left: 1em; }
+    label { display: inline; font-size: .8em; }
+
+    &.empty {
+      img, a, label, input[type=checkbox] { @include hide; }
+      input[type=file] { margin-top: .2em; }
+    }
+  }
+
+  .input-file-clear {
+    display: inline-block; width: 1.5em; height: 1.5em;  background-color: rgba(0,0,0,.05);
+    @include position(absolute); border-radius: 1em; margin-top: -22px;
+    &:before { content: '\00d7'; color: $stableColor; line-height: 1.35em; @include position(absolute, null 7px null null); }
+    &:hover  { background-color: $positiveColor; &:before { color: $white; } }
+  }
+
+
+  // input
+  .input-image { @extend .input-file; }
+  .input-image:not(.empty) {
+    padding-left: 6.5em;
+    position: relative;
+    img {
+      position: absolute;
+      border-radius: 4px;
+      left: 1em;
+      top: .8em;
+      width: 4.7em;
+    }
+  }
+}
+
+
+
+