alchemy 1.0.0

data/app/assets/stylesheets/alchemy/components/_shared.scss

@@ -0,0 +1,18 @@
+@import "../partials/base";
+
+//***shared between login and shell.***//
+//is javascript working?
+.noscript-warning {
+  color: $white_color;
+  background-color: $error_color;
+  font-family: $headlinefont;
+  font-weight: bold;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  z-index: 101;
+  text-align: center;
+  font-size: 120%;
+  padding: 5px 0px 5px 0px;
+}

data/app/assets/stylesheets/alchemy/components/buttons/_buttons.scss

@@ -0,0 +1,241 @@
+@import "../../partials/base";
+@import "buttons_vars";
+
+/*
+   ====================================
+   BUTTONS
+   ====================================
+*/
+
+.btn,
+.button,
+button {
+  @include inline-block();
+  vertical-align: top;
+  text-decoration: none;
+  font-family: $screenfont;
+  font-size: 100%;
+  padding: 0.5em 1em;
+  margin: 10px 8px 0 0;
+  cursor: pointer;
+  border: 1px solid $btn_border_color;
+  line-height: normal; /* must be normal because of firefox bug: http://cbjdigital.com/blog/2010/08/bulletproof_css_input_button_heights*/
+  @include border-radius($border_radius);
+
+  color: $btn_text_color;
+  text-shadow: 0 1px 0 rgba($white_color, 0.7);
+  @include linear_gradient(lighten($btn_neutral_color, 10%), lighten($btn_neutral_color, 15%), $btn_neutral_color);
+  @include box-shadow($btn_shadow_reflection_light); /* inside reflection */
+
+  &:hover {
+    border-color: darken($btn_border_color, 5%);
+    @include linear_gradient(lighten($btn_neutral_color, 13%), $white_color, lighten($btn_neutral_color, 6%));
+  }
+
+  &:active {
+    color: rgba($btn_text_color, 0.9);
+    @include text-shadow(0 -1px 0 rgba($black_color, 0.05));
+    @include linear_gradient(lighten($btn_neutral_color, 3%), lighten($btn_neutral_color, 3%), lighten($btn_neutral_color, 3%));
+    @include box-shadow(none);
+  }
+
+  /* ----------------------- */
+  /* color */
+
+  &.primary,
+  &.warning:hover { /* set white text on dark backgrounds */
+    color: $btn_white_text_color;
+    @include text-shadow(0 -1px 0 rgba($black_color, 0.25));
+    @include box-shadow($btn_shadow_reflection_dark);
+
+    &:active {
+      color: rgba($btn_white_text_color, 0.95);
+      @include text-shadow(0 -1px 0 rgba($black_color, 0.45));
+      @include box-shadow(none);
+    }
+  }
+
+  &.primary { /* primary button */
+    border-color: lighten($btn_primary_color, 13%);
+    @include linear_gradient(($btn_primary_color, 7%), lighten($btn_primary_color, 18%), $btn_primary_color);
+
+    &:hover {
+      border-color: lighten($btn_primary_color, 15%);
+      @include linear_gradient(($btn_primary_color, 11%), lighten($btn_primary_color, 22%), lighten($btn_primary_color, 5%));
+    }
+
+    &:active {
+      border-color: $primary_color;
+      @include linear_gradient(lighten($btn_primary_color, 4%), darken($btn_primary_color, 3%), lighten($btn_primary_color, 3%), 10%);
+    }
+  }
+
+  &.warning { /* warning */
+    color: lighten($btn_danger_color, 7%);
+
+    &:hover {
+      border-color: lighten($btn_danger_color, 5%);
+      @include linear_gradient(lighten($btn_danger_color, 5%), lighten($btn_danger_color, 13%), $btn_danger_color);
+    }
+
+    &:active {
+      @include linear_gradient(darken($btn_danger_color, 1%), darken($btn_danger_color, 7%), lighten($btn_danger_color, 3%), 10%);
+    }
+  }
+
+  /* ----------------------- */
+  /* size */
+
+  &.mini {
+    font-size: 75%;
+  }
+
+  &.small {
+    font-size: 85%;
+  }
+
+  &.large {
+    font-size: 125%;
+  }
+
+  &.huge {
+    font-size: 155%;
+  }
+
+  /* ----------------------- */  
+  /* disabled */
+
+  &.disabled,
+  &[disabled] { /* common for light buttons */
+    &,
+    &:hover,
+    &:active {
+      color: rgba($btn_text_color, 0.5);
+      text-shadow: 0 -1px 0 rgba($white_color, 0.9);
+      cursor: default;
+      border-color: lighten($btn_border_color, 7%);
+      @include linear_gradient(lighten($btn_neutral_color, 14%), lighten($btn_neutral_color, 17%), lighten($btn_neutral_color, 6%));
+
+      &.warning {
+        color: rgba($btn_danger_color, 0.47);
+      }
+    }
+  }
+
+  &.processing {
+    &,
+    &:hover,
+    &:active {
+      @include background(
+        image-url("alchemy/icons/spinner.gif") no-repeat 50% 50%,
+        linear-gradient(lighten($btn_neutral_color, 17%), lighten($btn_neutral_color, 6%)));
+    }
+  }
+
+  /* ----------------------- */
+  /* buttons with icons */
+
+  &.icon {
+    padding-left: 28px;
+    position: relative;
+
+    &:before {
+      content: "";
+      display: block;
+      width: 16px;
+      height: 16px;
+    }
+
+    i,
+    &:before {
+      position: absolute;
+      top: 4px;
+      left: 8px;
+    }
+
+    & > .btn,
+    & > .button { /* for inputs - submit (need to be in special div) */
+      margin: 0;
+      border: 0;
+      padding-left: 28px;
+      display: inline-block;
+      background: none;
+      @include filter-gradient($transparent_white_color, $transparent_white_color);
+      @include box-shadow(none);
+    }
+
+    &.download_example:before {
+      @include background(image-url('alchemy/icons/action-icons.png'));
+      background-position: -512px -16px;
+    }
+  }
+}
+
+// reset padding for outer button div
+div.btn.icon {
+  padding: 0;
+  display: inline-block;
+}
+
+// quite useful reset feature
+button::-moz-focus-inner,
+input::-moz-focus-inner { 
+  border: 0;
+  padding: 0;
+}
+
+/* ----------------------- */  
+/* groups */
+
+.btn_group {
+  .btn,
+  .button,
+  button {
+    margin-left: 0;
+    margin-right: 0;
+    display: block;
+    float: left;
+    border-left-width: 0;
+    @include border-radius(0);
+
+    &:first-child {
+      border-left-width: 1px;
+      @include border-radius($border_radius 0 0 $border-radius);
+    }
+
+    &:last-child {
+      @include border-radius(0 $border_radius $border-radius 0);
+    }
+  }
+
+  &:after { /* clear after itself */
+    content: ""; 
+    display: block; 
+    height: 0; 
+    clear: both;
+  }
+
+  form { /* for rails button_to helper (creates form > div > input) */
+    div {
+      display: block;
+      float: left;
+    }
+
+    &:first-child {
+      .btn,
+      .button,
+      button {
+        border-left-width: 1px;
+        @include border-radius($border_radius 0 0 $border-radius);
+      }
+    }
+
+    &:last-child {
+      .btn,
+      .button,
+      button {
+        @include border-radius(0 $border_radius $border-radius 0);
+      }
+    }
+  }
+}

data/app/assets/stylesheets/alchemy/components/buttons/_buttons_vars.scss

@@ -0,0 +1,10 @@
+$btn_neutral_color: lighten($rh_base, 47%);
+$btn_primary_color: darken($primary_color, 7%);
+$btn_danger_color: darken($rh_red1, 8%);
+
+$btn_border_color: darken($btn_neutral_color, 8%);
+$btn_text_color: lighten($text_color, 10%);
+$btn_white_text_color: lighten($rh_cream, 15%);
+
+$btn_shadow_reflection_dark: 0 1px 6px rgba($white_color, 0.25) inset;
+$btn_shadow_reflection_light: 0 1px 3px rgba($white_color, 1) inset;

data/app/assets/stylesheets/alchemy/components/flash_messages/_flash_messages.scss

@@ -0,0 +1,93 @@
+@import "../../partials/base";
+@import "flash_messages_vars";
+
+/*
+  =======================================
+  FLASH MESSAGES
+  =======================================
+*/
+
+.flash_hud {
+  position: relative;
+  color: $flash_text_color;
+  border-bottom: 1px solid lighten($border_color, 10%);
+  @include linear_gradient($flash_bg_color, lighten($flash_bg_color, 10%), $flash_bg_color, 3em);
+
+  /* link for closing flash messages */
+  .control {
+    display: block;
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    right: 13px;
+    top: 12px;
+    @include background(image-url('alchemy/icons/action-icons.png') no-repeat -33px 0);
+
+    &:hover {
+      background-position: -33px -16px;
+    }
+  }
+
+  ul {
+    margin: 0;
+    padding: 10px 30px;
+
+    li {
+      line-height: 1.8;
+      position: relative;
+
+      a {
+        color: inherit;
+
+        &:hover {
+          text-decoration: none;
+        }
+      }
+
+      &:before {
+        content: "";
+        width: 16px;
+        height: 16px;
+        position: absolute;
+        left: -24px;
+        top: 1px;
+      }
+    }
+
+    ul {
+      border: 0 none;
+      padding: 0 20px;
+      font-size: 90%;
+
+      li {
+        padding: 0;
+        line-height: 1.4;
+        list-style-type: disc;
+      }
+    }
+
+    &.success {
+      border-left: 5px solid $success_color;
+
+      & > li:before {
+        @include background(image-url("alchemy/icons/success_icon.png") no-repeat 50% 50%);
+      }
+    }
+
+    &.warning {
+      border-left: 5px solid $warning_color;
+
+      & > li:before {
+        @include background(image-url("alchemy/icons/warning_icon.png") no-repeat 50% 50%);
+      }
+    }
+
+    &.error {
+      border-left: 5px solid $error_color;
+
+      & > li:before {
+        @include background(image-url("alchemy/icons/error_icon.png") no-repeat 50% 50%);
+      }
+    }
+  }
+}

data/app/assets/stylesheets/alchemy/components/flash_messages/_flash_messages_vars.scss

@@ -0,0 +1,3 @@
+// colors
+$flash_bg_color: rgb(245, 245, 245);
+$flash_text_color: rgb(120, 120, 120);

data/app/assets/stylesheets/alchemy/components/fonts/_liberation.scss

@@ -0,0 +1,44 @@
+@import "../../partials/base";
+
+
+@font-face {
+    font-family: 'Liberation Sans';
+    src: local('Liberation Sans'), local('LiberationSans'), local('Liberation-Sans'),
+         font-url('alchemy/LiberationSans-Regular-webfont.eot?#iefix') format('eot'),
+         font-url('alchemy/LiberationSans-Regular-webfont.woff') format('woff'),
+         font-url('alchemy/LiberationSans-Regular-webfont.ttf') format('truetype'),
+         font-url('alchemy/LiberationSans-Regular-webfont.svg#webfontLfr8h6FA') format('svg');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+@font-face {
+    font-family: 'Liberation Sans';
+    src: local('Liberation Sans Italic'), local('LiberationSansItalic'), local('Liberation-Sans-Italic'),
+         font-url('alchemy/LiberationSans-Italic-webfont.woff') format('woff'),
+         font-url('alchemy/LiberationSans-Italic-webfont.ttf') format('truetype'),
+         font-url('alchemy/LiberationSans-Italic-webfont.svg#webfont8TmwkzPJ') format('svg');
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Liberation Sans';
+    src: local('Liberation Sans Bold'), local('LiberationSansBold'), local('Liberation-Sans-Bold'),
+         font-url('alchemy/LiberationSans-Bold-webfont.woff') format('woff'),
+         font-url('alchemy/LiberationSans-Bold-webfont.ttf') format('truetype'),
+         font-url('alchemy/LiberationSans-Bold-webfont.svg#webfontHyWb8e07') format('svg');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Liberation Sans';
+    src: local('Liberation Sans Bold Italic'), local('LiberationSansBoldItalic'), local('Liberation-Sans-Bold-Italic'),
+         font-url('alchemy/LiberationSans-BoldItalic-webfont.woff') format('woff'),
+         font-url('alchemy/LiberationSans-BoldItalic-webfont.ttf') format('truetype'),
+         font-url('alchemy/LiberationSans-BoldItalic-webfont.svg#webfont8uGO27Bu') format('svg');
+    font-weight: bold;
+    font-style: italic;
+}

data/app/assets/stylesheets/alchemy/components/fonts/_overpass.scss

@@ -0,0 +1,24 @@
+@import "../../partials/base";
+
+
+@font-face {
+    font-family: 'Overpass';
+    src: local("Overpass"),
+         font-url('alchemy/overpass_regular-web.eot?#iefix') format('eot'),
+         font-url('alchemy/overpass_regular-web.woff') format('woff'),
+         font-url('alchemy/overpass_regular-web.ttf') format('truetype'),
+         font-url('alchemy/overpass_regular-web.svg#webfontLTZe4IYH') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Overpass';
+    src: local("Overpass Bold"), local("OverpassBold"),
+         font-url('alchemy/overpass_bold-web.eot?#iefix') format('eot'),
+         font-url('alchemy/overpass_bold-web.woff') format('woff'),
+         font-url('alchemy/overpass_bold-web.ttf') format('truetype'),
+         font-url('alchemy/overpass_bold-web.svg#webfontzAU82Ltw') format('svg');
+    font-weight: bold;
+    font-style: normal;
+}

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

@@ -0,0 +1,53 @@
+@import "../../partials/base";
+@import "footer_vars";
+
+
+body > footer {
+  min-height: 55px;
+  background: $footer_background_color;
+  border-top: 1px solid $footer_border_top_color;
+  clear:both;
+  position: relative;
+  margin-top: (0 - $stickyfooter_height - 1) + px; /* negative value of footer height */
+  height: $stickyfooter_height + px;
+
+  span {
+    width: 74px;
+    position: absolute;
+    left: 30px;
+    bottom: 16px;
+  }
+
+  p.copyright {
+    position: relative;
+    bottom: -16px;
+    text-align: center;
+  }
+
+  ul {
+    display: inline-block;
+    position: absolute;
+    right: 0;
+    bottom: 16px;
+
+    li {
+      margin-right: 20px;
+      float: left;
+
+      a {
+        font-size: 11px;
+        color: #50505a;
+      }
+    }
+
+    &:last-child {
+      margin-right: 30px;
+    }
+  }
+
+  .versioning {
+    position: relative;
+    bottom: -18px;
+    text-align: center;
+  }
+}