formagic 0.1.0

data/app/assets/stylesheets/formagic/checkbox.scss

@@ -0,0 +1,8 @@
+// checkbox
+
+.form {
+  .input-checkbox { padding: .8em 1em 1em;
+    input  { display: inline; width: auto; margin-right: .5em; }
+    .label { display: inline; cursor: pointer; }
+  }
+}

data/app/assets/stylesheets/formagic/color.scss

@@ -0,0 +1,12 @@
+// color
+
+.form {
+  .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;
+    }
+  }
+}

data/app/assets/stylesheets/formagic/date.scss

@@ -0,0 +1,37 @@
+// date
+
+@import "vendor/datedropper";
+
+.form .input-stacked input.input-datetime-date {
+  @include position(absolute); width: 7em; opacity: .0; cursor: pointer;
+}
+
+.form .input-stacked input.input-datetime-time { width: auto; display: inline-block; }
+
+.input-date-label  { display: inline-block; min-width: 7em; cursor: pointer; }
+.input-timedate-at { color: $stableColor; margin: 0 .25em;  }
+
+.dd_ .dd_sw_ .dd_nav_.dd_prev_ { background-image: image-url('datedropper/prev.png'); }
+.dd_ .dd_sw_ .dd_nav_.dd_next_ { background-image: image-url('datedropper/next.png'); }
+.dd_ .dd_submit                { background-image: image-url('datedropper/done.png'); }
+
+.dd_ { border: 0; }
+.dd_:after {
+  top: -6px!important;
+  border-left: 1px solid $contrastColor!important;
+  border-top:  1px solid $contrastColor !important;
+}
+
+.dd_ .dd_m_                         { font-size: 16px; }
+.dd_ .dd_d_                         { font-size: 38px; border-color: $neutralColor; }
+.dd_ .dd_d_ .dd_sl_ ul li em        { color: $stableColor!important; font-size: 13px; bottom: 4px; }
+.dd_ .dd_d_ .dd_sl_ ul li.dd_sunday { color: $assertiveColor!important; }
+.dd_ .dd_sw_ .dd_sl_ li:hover       { background-color: $neutralColor; }
+
+.dd_ .dd_m_ {
+  border-top-left-radius:  4px!important;
+  border-top-right-radius: 4px!important;
+}
+
+.dd_r_ { display: none; }
+.dd_ .dd_submit { background-color: $positiveColor!important; }

data/app/assets/stylesheets/formagic/file.scss

@@ -0,0 +1,29 @@
+// file
+
+.form {
+
+  // calculated based on image thumbnail size
+
+  .input-file { min-height: 102px;
+
+    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; } }
+  }
+
+}

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

@@ -0,0 +1,36 @@
+// form ::: generic components
+
+.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; }
+
+  // required
+
+  .input-required .label:before { content: '*'; color: $assertiveColor; @include position(absolute, null null null .38em); }
+
+  // disabled
+
+  .input-disabled { textarea, input { color: $stableColor; } }
+
+  // character counter
+
+  .input-character-counter { font-size: .8em; margin-left: .5em; &.exceeds { color: $assertiveColor; } }
+
+}

data/app/assets/stylesheets/formagic/group.scss

@@ -0,0 +1,22 @@
+// group
+
+.form {
+  .group .input-stacked:last-child { @include bottom-border($neutralColor); }
+}
+
+// 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; }
+
+

data/app/assets/stylesheets/formagic/image.scss

@@ -0,0 +1,19 @@
+// image ::: based on file
+
+.form {
+
+  .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;
+    }
+  }
+
+}

data/app/assets/stylesheets/formagic/list.scss

@@ -0,0 +1,39 @@
+// list :: supports reordering + typeahead
+
+.form {
+
+  .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; }
+    }
+  }
+
+}

data/app/assets/stylesheets/formagic/nested-form.scss

@@ -0,0 +1,23 @@
+  // 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; } }
+  }

data/app/assets/stylesheets/formagic/redactor.scss

@@ -0,0 +1,41 @@
+// redactor
+
+@import "redactor";
+
+// input
+
+.input-inverter,
+.input-redactor {
+  .redactor-box     { margin-bottom: 0; }
+  .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; left: .5em; top: 18px; }
+
+// scrollbars
+
+.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/formagic/select.scss

@@ -0,0 +1,5 @@
+// select
+
+.form {
+  .input-select select { margin-top: 0.15em; }
+}

data/app/assets/stylesheets/formagic/select2.scss

@@ -0,0 +1,95 @@
+// select2
+
+@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/formagic/string.scss

@@ -0,0 +1,14 @@
+// string
+
+.form {
+
+  .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; }
+    }
+  }
+
+}

data/app/assets/stylesheets/formagic/switch.scss

@@ -0,0 +1,86 @@
+// switch
+
+/* Switch ------------------------------------------------- */
+@mixin switch {
+  $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);
+        }
+      }
+    }
+  }
+}
+
+.form {
+
+  .input-switch { padding-top: .75em;
+    .label  { cursor: pointer; }
+    .switch { @include switch; float: right; }
+  }
+
+}

data/app/assets/stylesheets/formagic/text.scss

@@ -0,0 +1,9 @@
+// text
+
+.form {
+
+  .input-text { min-height: 82px;
+    textarea  { resize: none; overflow: auto; box-sizing: border-box; min-height: 20px; }
+  }
+
+}

data/app/assets/stylesheets/formagic.scss

@@ -0,0 +1,15 @@
+@import "formagic/form";
+@import "formagic/checkbox";
+@import "formagic/color";
+@import "formagic/date";
+@import "formagic/file";
+@import "formagic/group";
+@import "formagic/image";
+@import "formagic/list";
+@import "formagic/nested-form";
+@import "formagic/redactor";
+@import "formagic/select";
+@import "formagic/select2";
+@import "formagic/string";
+@import "formagic/switch";
+@import "formagic/text";