alchemy 1.0.0

data/app/assets/stylesheets/alchemy/components/footer/_footer_vars.scss

@@ -0,0 +1,4 @@
+$footer_background_color: #EBEBEB !default;
+$footer_border_top_color: #d9d9d9 !default;
+
+$stickyfooter_height: 55 !default;

data/app/assets/stylesheets/alchemy/components/forms/_forms.scss

@@ -0,0 +1,536 @@
+@import "../../partials/base";
+@import "forms_vars";
+@import "forms_mixins";
+
+/*
+  =======================================
+  FORMS
+  =======================================
+*/
+
+.form {
+  width: 100%;
+  display: block;
+  line-height: 1;
+  color: $text_color;
+
+  .control_group {
+    padding: 5px 8px;
+    position: relative;
+    white-space: nowrap;
+
+    .label {
+      width: $left_column_width;
+      float: left;
+      text-align: right;
+      position: relative;
+      padding: 0;
+    }
+
+    .input {
+      margin-left: $left_column_width;
+      position: relative;
+      min-height: 2.5em;
+    }
+  }
+
+  fieldset {
+    border: 1px solid $fieldset_border_color;
+    @include border-radius(5px);
+    padding: 0;
+    margin: 0 0 10px;
+    background: $fieldset_background_color;
+
+    legend {
+      margin-left: 10px;
+      padding: 3px 5px;
+      color: $fieldset_text_color;
+      @include background(linear-gradient(rgba(white, 1), rgba(white, 0) 90%));
+    }
+  }
+}
+
+/*
+  =======================================
+  INPUTS
+  =======================================
+*/
+
+
+/* general */
+.form {
+  .label {
+    label {
+      line-height: 2.5;
+      display: inline-block;
+      padding: 0 20px 0 3px;
+    }
+  }
+
+  // font for inputs (is not inherited)
+  input,
+  select,
+  textarea {
+    font-family: $screenfont;
+  }
+
+  /* general styling of fields */
+  input {
+    line-height: 1.3;
+  }
+
+  input[type="text"],
+  input[type="password"],
+  input[type="email"],
+  input[type="url"],
+  input[type="search"],
+  input[type="date"],
+  input[type="number"],
+  textarea {
+    width: $input_width;
+    padding: 6px $input_padding;
+    color: inherit;
+    outline: none;
+    border: 1px solid $border_color;
+    margin-bottom: 7px;
+    @include box-shadow(0 1px 2px 0 darken($shadow_color, 15%) inset);
+    @include border-radius($border_radius);
+
+    &:hover {
+      border-color: darken($border_color, 18%);
+    }
+
+    &:focus {
+      border-color: lighten($primary_color, 10%);
+      @include box-shadow(0 0 2px lighten($primary_color, 10%));
+      @include transition(all 0.17s linear);
+    }
+  }
+
+  input[type="file"],
+  input[type="range"] {
+    width: auto;
+    max-width: $input_width + $input_padding;
+    padding: 6px 0;
+    margin-bottom: 7px;
+  }
+
+  input[type="range"] {
+    width: $input_width + $input_padding;
+    padding-top: 4px;
+  }
+
+  input[type="number"] {
+    width: 50px;
+    text-align: left;
+  }
+
+  select {
+    min-width: $input_width/1.5;
+    width: auto;
+    max-width: $input_width - $input_padding; //has one more for right padding
+    padding: 4px 0 4px $input_padding;
+    margin-bottom: 7px;
+    position: relative;
+    top: 2px;
+    font-size: 100%;
+    color: $text_color;
+
+    &[multiple="multiple"] {
+      background: $white_color;
+      height: auto;
+      line-height: 1.5;
+      border: 1px solid $border_color;
+    }
+  }
+
+  textarea {
+    height: auto;
+    resize: none;
+    overflow: auto;
+  }
+
+  /* placeholder for various browsers
+     (needs to be separate) */
+  input::-webkit-input-placeholder {
+    color: $placeholder_color;
+    font-style: italic;
+  }
+
+  input:-moz-placeholder {
+    color: $placeholder_color;
+    font-style: italic;
+  }
+
+  /* remove placeholder on focus
+     (needs to be separate) */
+  input:focus::-webkit-input-placeholder {
+    color: $transparent_white_color;
+  }
+
+  input:focus:-moz-placeholder {
+    color: $transparent_white_color;
+  }
+
+  /* required field */
+  .required {
+    .label {
+      position: relative;
+
+      &:after {
+        display: inline-block;
+        position: absolute;
+        right: 11px;
+        top: 4px;
+        font-size: 125%;
+        font-weight: bold;
+        content: '*';
+        color: $primary_color;
+      }
+    }
+
+    &.warning .label:after {
+      color: $warning_color;
+    }
+
+    &.error .label:after {
+      color: $error_color;
+    }
+  }
+
+  /* informative values */
+  .value {
+    display: inline-block;
+    width: $input_width;
+    padding: 8px 0;
+    margin-bottom: 7px;
+    line-height: 1.3;
+    font-size: 100%;
+    color: $readonly_text_color;
+  }
+
+  /* readonly field */
+  .readonly input,
+  input[readonly="readonly"],
+  textarea[readonly="readonly"] {
+    color: $readonly_text_color;
+
+    &:hover,
+    &:focus {
+      border: 1px solid $border_color;
+      @include box-shadow(0 1px 2px 0 darken($shadow_color, 15%) inset);
+    }
+  }
+
+  /* disabled field */
+  .disabled {
+    label {
+      color: $disabled_text_color;
+    }
+  }
+
+  input[disabled="disabled"],
+  textarea[disabled="disabled"] {
+    color: $disabled_text_color;
+    background: $disabled_color;
+    border: 1px solid $border_color;
+
+    &:hover,
+    &:focus {
+      border: 1px solid $border_color;
+      @include box-shadow(0 1px 2px 0 darken($shadow_color, 15%) inset);
+    }
+  }
+
+  select[disabled="disabled"] {
+    color: $disabled_text_color;
+  }
+
+  input[type="file"][disabled="disabled"] {
+    color: $disabled_text_color;
+    border: 0 none;
+    @include box-shadow(none);
+  }
+
+  /* warning field */
+  .warning {
+    @include input_field($warning_color);
+  }
+
+  /* error field */
+  .error {
+    @include input_field($error_color);
+  }
+
+  /* checking items */
+  .checkbox,
+  .radio {
+    .control {
+      display: block;
+      padding: 1px 0 5px 0;
+
+      label {
+        padding-right: 15px;
+      }
+    }
+
+    & > label + .control {
+      display: inline-block;
+    }
+
+    &.horizontal .control {
+      display: inline-block;
+      margin: 0 5px 0 0;
+    }
+
+    &:not(.inline) {
+      label {
+        line-height: 2;
+      }
+    }
+
+    input[type="radio"],
+    input[type="checkbox"] {
+      margin: 0 2px 0 0;
+      position: relative;
+      top: 1px;
+    }
+
+    &.inline {
+      .control {
+        display: inline-block;
+        margin-left: 15px;
+      }
+    }
+  }
+}
+
+/*
+  =======================================
+  MESSAGES
+  =======================================
+*/
+
+.form {
+
+  // GENERAL SPAN
+  // ============
+  span {
+    display: inline-block;
+    max-width: $input_width;
+    line-height: 1.1;
+    vertical-align: middle;
+    font-size: 90%;
+    white-space: normal;
+  }
+
+  // LABEL HELP
+  // ==========
+
+  .help {
+    i {
+      display: inline-block;
+      position: relative;
+      height: 13px;
+      width: 13px;
+      padding-top: 1px;
+      text-align: center;
+      color: $note_text_color;
+      @include text-shadow(0 1px 0 rgba($white_color, 0.8));
+      @include border-radius(50%);
+      border: 1px solid $light_border_color;
+      @include background(
+        $light_box_color
+        linear-gradient($light_box_gradient, darken($light_box_color, 4%)));
+      cursor: default;
+
+      &:hover {
+        color: $white_color;
+        @include text-shadow(0 1px 1px rgba($black_color, 0.3));
+        border-color: $dark_box_color;
+        @include background(
+          $dark_box_color
+          linear-gradient($dark_box_gradient, lighten($dark_box_color, 3%)));
+      }
+
+      // triangle for box
+      &:after {
+        display: none;
+        @include opacity(0.97);
+        content: "";
+        height: 0;
+        width: 0;
+        border-style: solid;
+        border-width: 0 9px 8px 9px;
+        border-color: $transparent_white_color $transparent_white_color $dark_box_gradient;
+        position: absolute;
+        bottom: -11px;
+        left: -2px;
+        z-index: 2;
+      }
+    }
+
+    span {
+      display: none;
+      @include opacity(0.97);
+      position: absolute;
+      left: 5px;
+      top: 33px;
+      z-index: 1;
+      width: $left_column_width - 40px;
+      padding: 7px 10px 9px 10px;
+      margin: 0;
+      @include border-radius($border_radius);
+      @include linear_gradient($dark_box_color, $dark_box_gradient, $dark_box_color, 20%);
+      @include filter-gradient($dark_box_gradient, $dark_box_color);
+      color: lighten($rh_cream, 30%);
+      border-color: $dark_box_color;
+      text-align: left;
+      line-height: 1.2;
+      @include text-shadow(0 1px 1px rgba($black_color, 0.2));
+      @include box-shadow(0 1px 3px $shadow_color);
+    }
+
+    i:hover {
+      &:after {
+        display: block;
+      }
+
+      & ~ span {
+        display: block;
+      }
+    }
+  }
+
+  // ALWAYS VISIBLE INFORMATION
+  // ==========================
+  .note {
+    display: block;
+    font-size: 85%;
+    color: $note_text_color;
+    margin: 0 0 5px 10px;
+
+    strong {
+      font-weight: bold;
+      font-size: 110%;
+    }
+  }
+
+  // HINT AND VALIDATION MESSAGES
+  // ============================
+  .hint,
+  .message {
+    position: relative;
+    left: 0;
+    color: $message_text_color;
+    padding: 9px $input_padding 7px $input_padding;
+    margin-left: 10px;
+    @include linear_gradient($light_box_color, $light_box_gradient, $light_box_color, 30%);
+    @include filter-gradient($light_box_gradient, $light_box_color);
+    @include border-radius($border_radius);
+    border: 1px solid $light_border_color;
+    @include box-shadow($shadow_color 0 1px 3px);
+    vertical-align: top;
+
+    &:before, // triangle left
+    &:after { // border of left triangle
+      content: "";
+      display: block;
+      height: 0;
+      width: 0;
+      border-style: solid;
+      border-width: 8px 8px 8px 0;
+      border-color: $transparent_white_color $light_box_color $transparent_white_color;
+      position: absolute;
+      top: 14px;
+      left: -8px;
+      margin-top: -8px; // half size of triangle
+      z-index: 2;
+    }
+
+    &:after {
+      border-right-color: $light_border_color;
+      left: -9px; // 1 more pixel than arrow width
+      z-index: 1;
+    }
+  }
+
+  .hint {
+    @include opacity(0);
+    position: absolute;
+    top: 0;
+    left: $input_width + $input_padding + 30px;
+
+    &.always_visible {
+      @include opacity(1);
+      position: relative;
+      left: 0;
+    }
+  }
+
+  .message ~ .hint {
+    display: none;
+  }
+
+  .control_group input:focus ~ .hint {
+    @include transition(all 0.29s ease);
+    @include opacity(1);
+    left: $input_width + $input_padding + 15px;
+
+    &.always_visible {
+      left: 0;
+    }
+  }
+
+  /* field validations */
+  .success,
+  .warning,
+  .error {
+    .message {
+      padding-left: 29px;
+      max-width: $input_width - 19px; // because of bigger left-padding
+    }
+  }
+
+  /* success message */
+  .success .message {
+    background: $light_box_color image-url("alchemy/icons/success_icon.png") no-repeat 8px 6px; // for IE6-9
+    @include background(
+      image-url("alchemy/icons/success_icon.png") no-repeat 8px 6px,
+      linear-gradient($light_box_gradient, $light_box_color 30%));
+    @include filter-gradient($transparent_white_color, $transparent_white_color);
+  }
+
+  /* warning message */
+  .warning .message {
+    background: $light_box_color image-url("alchemy/icons/warning_icon.png") no-repeat 7px 6px; // for IE6-9
+    @include background(
+      image-url("alchemy/icons/warning_icon.png") no-repeat 7px 6px,
+      linear-gradient($light_box_gradient, $light_box_color 30%));
+    @include filter-gradient($transparent_white_color, $transparent_white_color);
+  }
+
+  /* error message */
+  .error .message {
+    background: $light_box_color image-url("alchemy/icons/error_icon.png") no-repeat 7px 6px; // for IE6-9
+    @include background(
+      image-url("alchemy/icons/error_icon.png") no-repeat 7px 6px,
+      linear-gradient($light_box_gradient, $light_box_color 30%));
+    @include filter-gradient($transparent_white_color, $transparent_white_color);
+  }
+}
+
+/*
+  =======================================
+  RESPONSIVE
+  =======================================
+*/
+@import "forms_responsive";
+
+
+/*
+  =======================================
+  IE tweaks
+  =======================================
+*/
+@import "forms_ie";