fae-railsz 2.1.0

data/app/assets/stylesheets/fae/modules/forms/_asset-actions.scss

@@ -0,0 +1,83 @@
+.asset-actions {
+  position: relative;
+  display: inline-block;
+  width: 90%;
+  min-width: 223px;
+  max-width: 515px;
+  padding: 5px 5px 4px 5px;
+  border: 1px solid $c-border;
+  background: $c-white;
+  font-size: 13px;
+  border-radius: 2px;
+
+  &.active {
+    background: $c-white;
+  }
+
+  &.-files {
+    a {
+      padding-top: 9px;
+      padding-bottom: 9px;
+    }
+  }
+
+  > img {
+    max-width: 20%;
+    max-height: 150px;
+    margin-right: 20px;
+    cursor: pointer;
+    float: left;
+    display: block;
+  }
+
+  a {
+    padding: 6px;
+    display: inline-block;
+  }
+
+  span {
+    @include transition(color .2s);
+    color: $c-text-sub;
+  }
+
+  .button {
+    display: inline-block;
+    margin-right: 10px;
+
+    &:focus {
+      border-color: $c-notice-content;
+      outline: 0;
+    }
+
+    span {
+      padding-right: 30px;
+    }
+  }
+}
+
+.asset-delete {
+  @include transition(color 0.2s);
+  float: right;
+  display: none;
+  color: $c-darker-grey;
+
+  &:before {
+    @include icon-stuff;
+    content: fae-icon(trash);
+  }
+
+  &:hover {
+    color: $c-mid-dark-grey;
+  }
+
+  .active & {
+    display: block;
+  }
+}
+
+.asset-title {
+  display: inline-block;
+  width: 70%;
+  padding: 10px 7px 0 0;
+  color: $c-darkest-grey;
+}

data/app/assets/stylesheets/fae/modules/forms/_base.scss

@@ -0,0 +1,100 @@
+input[type=text],
+input[type=number],
+input[type=textarea],
+input[type=url],
+input[type=tel],
+input[type=password],
+input[type=email] {
+  @include transition(border-color .2s);
+  padding: 12px 15px;
+  border: 1px solid $c-border;
+  font-size: 14px;
+  outline: none;
+  border-radius: 2px;
+  max-width: 100%;
+
+  &:focus {
+    border-color: $c-notice-content;
+  }
+}
+
+.input {
+  margin-bottom: 20px;
+
+  &.disabled {
+    opacity: 0.5;
+  }
+}
+
+.addedit-form {
+  padding-bottom: 20px;
+
+  h3 {
+    @extend label;
+    margin-bottom: 20px;
+  }
+
+  .flash-message {
+    width: 100%;
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+}
+
+.js-addedit-form-wrapper {
+  display: none;
+}
+
+.nested-form {
+  padding: $content-buffer $content-buffer $content-buffer 40px;
+  border: 1px solid $c-border;
+  border-top: 0;
+  background: $c-form-table-bg;
+
+  h2 {
+    margin-bottom: 20px;
+    font-size: 16px;
+    color: $c-text-heavy;
+    font-weight: bold;
+    letter-spacing: 0;
+    text-transform: none;
+    border: 0;
+    padding: 0;
+    margin: 0 auto 30px;
+    background: none;
+  }
+}
+
+.cancel-nested-button {
+  margin-left: 10px;
+}
+
+.table-helper-text {
+  font-size: 14px;
+  font-style: italic;
+  padding-bottom: 14px;
+}
+
+.js-add-link {
+  font-size: 12px;
+}
+
+.table-add-link {
+  float: right;
+
+  &:before {
+    @include icon-stuff;
+    content: fae-icon(plus);
+    font-size: 7px;
+    position: relative;
+    bottom: 2px;
+    display: inline-block;
+    margin-right: 3px;
+  }
+
+  // Specificity hack
+  &.table-add-link {
+    margin-top: 13px;
+    margin-bottom: 10px;
+  }
+}

data/app/assets/stylesheets/fae/modules/forms/_checkbox.scss

@@ -0,0 +1,87 @@
+// Checkboxes
+.input.boolean,
+.checkbox-wrapper {
+  display: block;
+
+  input[type=checkbox] {
+    position: absolute;
+    left: -9999px;
+  }
+
+  .active {
+    &:after {
+      @include icon-stuff;
+      content: fae-icon(check);
+      position: absolute;
+      top: 6px;
+      left: 6px;
+      font-size: 12px;
+      color: $c-darkest-grey;
+      cursor: pointer;
+    }
+  }
+}
+
+.checkbox {
+  position: relative;
+  padding: 0 20px 0 35px;
+  margin: 0;
+  cursor: pointer;
+  display: inline-block;
+
+  h6 {
+    display: inline-block;
+    padding-top: 0;
+    padding-left: 6px;
+  }
+}
+
+label.checkbox,
+.checkbox label {
+  padding-top: 6px; // Vertical align hack
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 25px;
+    width: 25px;
+    border: 1px solid $c-border;
+    background: $c-white;
+    cursor: pointer;
+    border-radius: 2px;
+  }
+}
+
+label.checkbox.focused:before,
+.checkbox.focused label:before {
+  border-color: $c-notice-content;
+}
+
+.checkbox-wrapper {
+  &.-stacked {
+    label:not(.control-label) {
+      display: block;
+      margin-bottom: 25px;
+    }
+
+    .checkbox {
+      display: block;
+    }
+  }
+
+  &.-inline {
+    label:not(.control-label) {
+      padding-top: 0;
+      vertical-align: top;
+      width: 190px;
+      margin-bottom: 25px;
+      margin-right: 10px;
+    }
+
+    .checkbox {
+      vertical-align: top;
+    }
+  }
+}

data/app/assets/stylesheets/fae/modules/forms/_colorpicker.scss

@@ -0,0 +1,57 @@
+.input.string .color-picker {
+  width: 180px;
+}
+
+div.cp-color-picker {
+  border: 1px solid $c-darker-grey;
+  padding: 10px 10px 0;
+  background: $c-lightest-grey;
+  overflow: visible;
+  border-radius: 3px;
+
+  .cp-alpha {
+    margin: 10px 0;
+    height: 6px;
+    border-radius: 6px;
+    overflow: visible;
+    border: 1px solid $c-darker-grey;
+    box-sizing: border-box;
+    background: linear-gradient(to right, rgba($c-lightest-grey, 1) 0%, rgba($c-lightest-grey, 0) 100%);
+  }
+
+  .cp-xy-slider {
+    border: 1px solid $c-darker-grey;
+    margin-bottom: 10px;
+
+    &:active {
+      cursor: none;
+    }
+  }
+
+  .cp-xy-cursor {
+    width: 12px;
+    height: 12px;
+    margin: -6px
+  }
+
+  .cp-z-slider {
+    margin-left: 10px;
+    border: 1px solid $c-darker-grey;
+  }
+
+  .cp-z-cursor {
+    border-width: 5px;
+    margin-top: -5px;
+  }
+
+  .cp-alpha-cursor {
+    background: $c-lightest-grey;
+    border-radius: 100%;
+    width: 14px;
+    height: 14px;
+    margin: -5px -7px;
+    border: 1px solid $c-mid-dark-grey !important; // overrides default border
+    box-shadow: inset -2px -4px 3px $c-mid-grey;
+  }
+}
+

data/app/assets/stylesheets/fae/modules/forms/_date.scss

@@ -0,0 +1,335 @@
+// special treatment for date groupings
+// current order is year month day
+.input.date {
+  select {
+    min-width: 50px;
+
+    $date-widths: 100px, 200px, 75px;
+
+    @for $i from 1 through length($date-widths) {
+      &:nth-of-type(#{$i}),
+      .ie-select-#{$i} {
+        width: nth($date-widths, $i);
+      }
+    }
+  }
+
+  //specific chosen stuff for dates
+  .chosen-container {
+    margin-right: 10px;
+  }
+}
+
+.daterangepicker-seperator {
+  margin: 0 15px;
+}
+
+// DATEPICKER
+// DatePicker Container
+.ui-datepicker {
+  @extend %table-reset;
+  width: 216px;
+  height: auto;
+  margin: 5px auto 0;
+  font: 9pt Arial, sans-serif;
+  box-shadow: 0 0 10px 0 $c-box_shadow;
+
+  a {
+    text-decoration: none;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  thead {
+    @include gradient-vertical($start-color: $c-near-white, $end-color: $c-content-header-bg);
+    background-color: $c-near-white;
+    border-bottom: 1px solid $c-border;
+  }
+
+  th {
+    text-transform: uppercase;
+    font-size: 6pt;
+    padding: 5px 0;
+    color: $c-mid-dark-grey;
+    text-align: center;
+    background: none;
+    font-weight: normal;
+  }
+
+  tbody {
+    td {
+      padding: 0;
+      border-right: 1px solid $c-border;
+
+      &:last-child {
+        border-right: 0px;
+      }
+    }
+
+    tr {
+      border-bottom: 1px solid $c-border;
+
+      &:last-child {
+        border-bottom: 0px;
+      }
+    }
+  }
+
+  td {
+    span,
+    a {
+      display: inline-block;
+      font-weight: bold;
+      text-align: center;
+      width: 30px;
+      height: 30px;
+      line-height: 30px;
+      color: $c-mid-dark-grey;
+    }
+  }
+}
+
+
+.ui-datepicker-header {
+  background: $c-darkest-grey;
+  color: $c-white;
+  font-weight: bold;
+  line-height: 30px;
+  border-width: 1px 0 0 0;
+  border-style: solid;
+  border-color: $c-mid-grey;
+
+  box-shadow: 0 1px 1px 0 $c-box_shadow;
+}
+
+.ui-datepicker-title {
+  text-align: center;
+}
+
+.ui-datepicker-prev, .ui-datepicker-next {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  cursor: pointer;
+  overflow: hidden;
+  color: $c-white;
+
+  .ui-icon {
+    display: none;
+  }
+}
+
+.ui-datepicker-prev {
+  float: left;
+
+  &:before {
+    @include icon-stuff;
+    content: fae-icon(chevron_left);
+  }
+}
+
+.ui-datepicker-next {
+  float: right;
+
+  &:before {
+    @include icon-stuff;
+    content: fae-icon(chevron_right);
+  }
+}
+
+.ui-datepicker-calendar .ui-state-default {
+  @include gradient-vertical($start-color: $c-lightest-grey, $end-color: darken($c-lightest-grey, 4%));
+  background-color: $c-lightest-grey;
+  box-shadow: 1px 1px 0 0 $c-box_shadow;
+}
+
+.ui-datepicker-calendar {
+  .ui-state-hover {
+    color: $c-custom-highlight;
+  }
+
+  .ui-state-active {
+    background: $c-custom-highlight;
+    color: $c-white;
+    position: relative;
+  }
+
+  td {
+    &:first-child {
+      .ui-state-active {
+        width: 29px;
+        margin-left: 0;
+      }
+    }
+
+    &:last-child {
+      .ui-state-active {
+        width: 29px;
+        margin-right: 0;
+      }
+    }
+  }
+
+  tr {
+    &:last-child {
+      .ui-state-active {
+        height: 29px;
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.ui-datepicker-unselectable .ui-state-default {
+  background: $c-near-white;
+  color: $c-mid-grey;
+}
+
+.datepicker {
+  position: relative;
+  width: 240px;
+
+  input[type=text] {
+    padding-right: 40px;
+    width: 100%;
+  }
+
+  label:before {
+    @include icon-stuff;
+    content: fae-icon(calendar);
+    position: absolute;
+    right: 5px;
+    bottom: 0;
+    padding: 12px;
+    font-size: 19px;
+    color: $c-darker-grey;
+  }
+}
+
+// Daterange picker
+// This looks whack and overly specific, but it's because it's overriding the vendor styles
+.date-picker {
+  font-family: inherit;
+}
+
+.date-picker-wrapper {
+  @extend %table-reset;
+  box-shadow: 0 0 10px 0 $c-box_shadow;
+  background: $c-mid-grey;
+  font-family: inherit;
+  padding: 0;
+  width: 380px;
+  border: 0;
+  margin-top: 5px;
+
+  &.no-shortcuts {
+    padding-bottom: 0;
+  }
+
+  th {
+    background: none;
+    color: inherit;
+  }
+
+  .month-wrapper {
+    background-color: $c-mid-grey;
+    border: 0;
+    padding: 0;
+
+    table {
+      table-layout: fixed;
+      font-weight: bold;
+
+      .caption {
+        background: $c-darkest-grey;
+        color: $c-white;
+        height: 30px;
+        font-weight: bold;
+
+        .prev,
+        .next {
+          @include icon-stuff;
+          color: $c-darkest-grey;
+
+          &:hover {
+            background: none;
+
+            &:before {
+              color: $c-mid-dark-grey;
+            }
+          }
+        }
+
+        .next {
+          &:before {
+            content: fae-icon(chevron_right);
+            color: $c-white;
+          }
+        }
+
+        .prev {
+          &:before {
+            content: fae-icon(chevron_left);
+            color: $c-white;
+          }
+        }
+      }
+
+      .week-name {
+        background: $c-white;
+        border-bottom: 1px solid $c-border;
+        color: $c-darkest-grey;
+        line-height: 1;
+        font-weight: 400;
+
+        th {
+          font-size: 6pt;
+          text-transform: uppercase;
+          color: $c-mid-dark-grey;
+        }
+      }
+
+      .day {
+        @include gradient-vertical($start-color: $c-lightest-grey, $end-color: darken($c-lightest-grey, 4%));
+        height: 30px;
+        padding: 6px;
+        border-right: 1px solid $c-border;
+
+        &.lastMonth,
+        &.nextMonth {
+          background: $c-white;
+          color: $c-mid-grey;
+        }
+
+        &.checked,
+        &.toMonth.valid.checked {
+          background: $c-custom-highlight;
+          color: $c-white;
+        }
+
+        &.real-today.checked {
+          background: $c-custom-highlight;
+        }
+      }
+
+      div.day {
+        &.lastMonth,
+        &.nextMonth {
+          color: $c-mid-grey;
+        }
+      }
+    }
+  }
+
+  .drp_top-bar {
+    display: none;
+  }
+
+  .gap {
+    display: none !important; //overrides JS display: block;
+  }
+}