alchemy 1.0.0

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

@@ -0,0 +1,45 @@
+.ie8 {
+  .form {
+    .help {
+      i:hover:after {
+        display: none;
+      }
+
+      span {
+        top: 25px;
+      }
+    }
+
+    &.labels_top {
+      .help {
+        span {
+          top: 20px;
+        }
+      }
+    }
+
+    .hint,
+    .message {
+      &:before,
+      &:after {
+        display: none;
+      }
+    }
+
+    .hint {
+      display: none;
+
+      &.always_visible {
+        display: inline-block;
+      }
+    }
+
+    .control_group input:focus ~ .hint {
+      display: block;
+
+      &.always_visible {
+        display: inline-block;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+@mixin input_field($color) {
+  .label {
+    color: $color;
+  }
+
+  input {
+    border-color: $color;
+
+    &:hover {
+      border-color: darken($color, 12%);
+    }
+
+    &:focus {
+      border-color: $color;
+      @include box-shadow(0 0 2px $color);
+    }
+  }
+}

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

@@ -0,0 +1,161 @@
+@mixin labels_top {
+  & {
+    .control_group {
+      .input {
+        margin: 0 0 5px 0;
+      }
+
+      .label {
+        float: none;
+        text-align: left;
+        display: inline-block;
+        width: auto;
+
+        label {
+          padding: 0 8px 0 0;
+          line-height: 1.8;
+        }
+
+        &.help {
+          i {
+            position: absolute;
+            right: -13px;
+            top: 2px;
+          }
+
+          span {
+            left: 60%;;
+            top: 27px;
+          }
+        }
+      }
+    }
+
+    fieldset {
+      legend {
+        margin-left: 3px;
+      }
+    }
+
+    .value {
+      padding-top: 2px;
+    }
+
+    .required {
+      .label {
+        &:after {
+          right: 0;
+          top: 0;
+        }
+
+        &.help {
+          i {
+            right: -19px;
+          }
+        }
+      }
+    }
+
+  }
+}
+
+@mixin messages_bottom {
+  & {
+    .note {
+      display: block;
+      padding: 10px $input_padding 6px $input_padding;
+      margin: 0;
+      border: 1px solid $light_border_color;
+      border-top-width: 0;
+      @include border-radius(0 0 $border_radius $border_radius);
+      position: relative;
+      top: -10px;
+    }
+
+    .hint ~ .note,
+    .message ~ .note {
+      background: $white_color;
+      top: -4px;
+      padding-top: 7px;
+      border-top-width: 1px;
+    }
+
+    .message ~ .hint {
+      display: none;
+    }
+
+    .hint,
+    .message {
+      display: block;
+      position: relative;
+      left: 0;
+      @include opacity(1);
+      margin: 3px 0 0 0;
+
+      &:before,
+      &:after {
+        border-width: 0 8px 8px 8px;
+        border-color: $transparent_white_color $transparent_white_color $light_box_gradient;
+        top: 0;
+        left: auto;
+        right: 20px;
+      }
+
+      &:after {
+        top: -1px;
+        left: auto;
+        border-color: $transparent_white_color $transparent_white_color $light_border_color;
+      }
+
+      &:hover {
+        left: 0;
+      }
+    }
+
+    .control_group input:focus ~ .hint {
+      left: 0;
+    }
+
+    .success,
+    .warning,
+    .error {
+      .message {
+        display: block;
+        margin: 3px 0 0 0;
+
+        & ~ .hint {
+          margin: 0;
+          position: relative;
+          top: -2px;
+          @include border-radius(0 0 $border_radius $border_radius);
+
+          &:before,
+          &:after {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+.form.labels_top {
+  @include labels_top;
+}
+
+.form.messages_bottom {
+  @include messages_bottom;
+}
+
+@media screen and (max-width: 1024px) {
+  .form {
+    @include labels_top;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .form {
+    @include labels_top;
+    @include messages_bottom;
+  }
+}

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

@@ -0,0 +1,25 @@
+// layout
+$left_column_width: 200px;
+$input_width: 280px !default;
+$input_padding: 10px;
+
+// colors
+$light_border_color: lighten($border_color, 10%);
+$fieldset_border_color: lighten($border_color, 10%);
+
+$fieldset_text_color: lighten($text_color, 46%);
+$placeholder_color: lighten($text_color, 55%);
+$note_text_color: lighten($text_color, 40%);
+$message_text_color: lighten($text_color, 20%);
+
+$disabled_color: lighten($rh_base, 60%);
+$disabled_text_color: lighten($text_color, 40%);
+$readonly_text_color: lighten($disabled_text_color, 2%);
+
+$light_box_color: lighten($rh_base, 60%);
+$light_box_gradient: lighten($light_box_color, 40%);
+$dark_box_color: darken($rh_base, 3%);
+$dark_box_gradient: lighten($dark_box_color, 8%);
+$fieldset_background_color: rgb(253, 253, 253);
+
+$shadow_color: lighten($border_color, 20%);

data/app/assets/stylesheets/alchemy/components/header/_header.scss

@@ -0,0 +1,214 @@
+@import "../../partials/base";
+@import "header_vars";
+
+.centered {
+  width: $static_width;
+  margin: 0 auto;
+  height: 100%;
+  position: relative;
+}
+
+header#header {
+  @include theme_background_gradient;
+  height: $header_height;
+  border-top: 4px solid $header_border_top_color;
+  border-bottom: 1px solid $header_border_bottom_color;
+  position: relative;
+  font-family: $headlinefont;
+
+  &:after {
+    content: "";
+    background: $tab_selected_color;
+    border-top: 1px solid $tab_container_outline_color;
+    height: 4px;
+    width: 100%;
+    position: absolute;
+    bottom: -6px;
+    z-index: 0;
+  }
+
+  h1 {
+    display: inline-block;
+    position: absolute;
+    bottom: 25px;
+    left: 15px;
+    margin: 0;
+    font-size: inherit;
+    text-indent: -5555px;
+  }
+
+  .logo {
+    background: $logo_img;
+    text-indent: -5555px;
+    width: 170px;
+    bottom: 16px;
+    height: 46px;
+    left: 30px;
+    position: absolute;
+    display: block;
+  }
+
+  #loading {
+    display: none;
+    position: absolute;
+    bottom: 34px;
+    z-index: 100;
+    height: 22px;
+    width: 22px;
+    padding: 0;
+    background: $loading_img;
+  }
+
+  #appnav {
+    border: 1px solid $header_border_bottom_color;
+    border-bottom: none;
+    @include border-radius(3px 3px 0 0);
+    white-space: nowrap;
+    margin: 0 auto;
+    z-index: 2;
+    float: left;
+
+    ul {
+      position: relative;
+      overflow: auto;
+      @include border-radius(3px 3px 0 0);
+      border: 1px solid $tab_container_outline_color;
+      border-bottom: none;
+      outline: 0 none;
+      @include theme_background_gradient;
+
+      li {
+        display: block;
+        float: left;
+        position: relative;
+        outline: 0 none;
+
+        a {
+          display: block;
+          position: relative;
+          text-decoration: none;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          vertical-align: middle;
+          font-weight: bold;
+          color: $tab_font_color;
+          padding: 0 13px;
+          font-size: 13px;
+          background-color: $tab_background_color;
+          height: 28px;
+          line-height: 28px;
+          border-right: 3px solid $tab_container_outline_color;
+          @include background-clip(padding);
+          outline: 0 none;
+          &:focus{background-color: darken($tab_background_color, 15%)}
+          &.selected {
+            color: $tab_selected_text_color;
+            position: relative;
+            outline: 0 none;
+            @include linear_gradient($tab_selected_color, $white_color, $tab_selected_color);
+
+            &:hover {
+              @include linear_gradient($tab_selected_color, $white_color, $tab_selected_color);
+              color: #37373E;
+            }
+          }
+
+          &:hover {
+            outline: 0 none;
+            background: $tab_hover_color;
+            color: $tab_font_color;
+          }
+        }
+
+        &:first-child > a {
+          outline: 0 none;
+          @include border-radius(3px 0 0 0);
+        }
+
+        &:last-child > a {
+          @include border-radius(0 3px 0 0);
+          border-right: none;
+        }
+      }
+    }
+  }
+
+  #nav-container {
+    display: block;
+    position: absolute;
+    bottom: -1px;
+    left: 35%;
+    z-index: 1;
+    height: 2.5em;
+    padding: 5px 6px 0 6px;
+    @include border-radius(5px 5px 0 0);
+  }
+
+  #widget-container {
+    min-width: 225px;
+    position: relative;
+    top: 22px;
+    float: right;
+    margin-right: 15px;
+    a { color: #FFF; }
+    ul {
+      float: left;
+      li {
+        ul {
+          display: none;
+          position: absolute;
+          top: 16px;
+          z-index: 99;
+          left: 0px;
+          @include border-radius(0 5px 5px 5px);
+          @include box-shadow(2px 2px 2px rgba(0,0,0,0.4));
+          min-width: 4.2em;
+          padding: 2px 12px;
+          text-align: left;
+          background-color: $header_widget_color;
+        }
+        .arrow_icon_menu {
+          height: 11px;
+          width: 13px;
+          background: $arrow_icon;
+          float: right;
+          margin: 5px 0 0 0;
+
+          &:hover {
+            background: $arrow_icon;
+            background-position: 0 -13px;
+          }
+        }
+      }
+    }
+  }
+
+  .header-widget {
+    background-color: $header_widget_color;
+    @include border-radius(5px);
+    font-size: 11px;
+    color: #FFF;
+    text-align: center;
+    margin-right: 8px;
+    padding: 2px 6px 0 6px;
+    text-decoration: none;
+    float: right;
+    height: 20px;
+    line-height: 19px;
+  }
+}
+
+//* ugly IE8 specific hacks for the header to look decent/*/
+@media \0screen {
+  header#header {
+    background-color: #009DCC;
+    .header-widget {
+      background-color: #19191E;
+      @include opacity(0.4);
+    }
+    #appnav {
+      margin-left: 10px;
+    }
+  }
+}