alchemy 1.0.0

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

@@ -0,0 +1,11 @@
+$header_border_top_color:         lighten($primary_color, 6%) !default;
+$header_border_bottom_color:      darken($primary_color, 10%) !default;
+$header_widget_color:             darken($primary_color, 1%) !default;
+$tab_background_color:            rgba(black, 0.3) !default;
+$tab_hover_color:                 rgba(black, 0.2) !default;
+$tab_font_color:                  #F1F1F1 !default;
+$tab_selected_text_color:         #505050 !default;
+$tab_selected_color:              #D9D9D9 !default;
+$tab_container_outline_color:     rgba(white, 0.3) !default;
+
+$header_height: 85px !default;

data/app/assets/stylesheets/alchemy/components/login/_login.scss

@@ -0,0 +1,169 @@
+@import "../../partials/base";
+@import "login_vars";
+@import "login_mixins";
+@import "../footer/footer_vars";
+@import "../../components/buttons/buttons";
+@import "../../components/forms/forms";
+
+html, body{
+  width: 100%;
+  height: 100%;
+  @include login_background_color;
+  //* ugly IE8 specific color hack for the background to show*/
+  background-color/*\**/: darken(rgba(0, 157, 204, 1), 4%)\9;
+}
+
+#wrapper {
+  padding-bottom: 0 - ($stickyfooter-height + 1) + px;
+  display: table;
+  width: 100%;
+  height: 100%;
+}
+
+article {
+  position: relative;
+  display: table-cell;
+  vertical-align: middle;
+
+  a, a:visited {
+    cursor: hand;
+    cursor: pointer;
+    color: $link_color;
+    text-decoration: none;
+
+    &:hover, &:focus {
+      color: lighten($link_color, 10%);
+      text-decoration: underline;
+    }
+    &:active {
+      color: darken($link_color, 20%);
+    }
+  }
+
+  .container {
+    position: relative;
+    width: $login_container_width;
+    height: $login_container_height;
+    margin: 0 auto;
+    padding: $login_container_top_padding;
+    @include background-image(linear-gradient(top, rgba(255, 255, 255, 0) 40%, $login_base_color 120%));
+    @include box-shadow($login_card_outer_shadow_color 0px 12px 15px -8px);
+    @include border-radius(7px);
+    aside {
+      width: $logo_container_width;
+      min-height: $login_container_height;
+      float: left;
+      @include theme_background_gradient;
+      @include border-radius(7px 0 0 7px);
+
+      img {
+        margin-top: $login_container_height / 3;
+      }
+    }
+
+    section {
+      width: $form_container_width;
+      position: relative;
+      overflow: hidden;
+
+      .card {
+        position: relative;
+        @include box-sizing(border-box);
+        min-height: $login_container_height;
+        height: $login_container_height;
+        width: $form_container_width;
+        background: #FFF;
+        padding: 0 $form_container_padding;
+        @include border-radius(0 7px 7px 0);
+        @include box-shadow(inset -15px -15px 30px -7px $login_card_shadow_color, inset 0px -15px 130px $login_card_shadow_color);
+
+        &#login{ padding-top: 35px; }
+        &#username_recovery{ padding-top: 30px; }
+        &#password_reset{ padding-top: 15px; }
+        &#change_password{ padding-top: 30px; }
+        &.slidable{
+          position: absolute;
+          top: 0;
+          left: -$form_container_width;
+          z-index: -1;
+
+          &.slid{
+            left: 0;
+            z-index: 1;
+          }
+        }
+
+        //forms and buttons styling override
+        .form{
+          @include box-sizing(border-box);
+
+          .control_group{
+            padding: 5px 0px;
+            @include clearfix;
+            .right_aligned{float: right;}
+            .left_aligned{float: left;}
+            .button, .btn, button{margin: 5px 0 0 0;}
+            .input{
+              margin-bottom: 0;
+              #username, #password_field{ margin-bottom: 0; }
+            }
+
+          }
+        }
+
+        //spinner post-login
+        .spinner {
+          background: transparent image-url("alchemy/icons/spinner.gif") no-repeat center center;
+          margin-top: 5px;
+          height: 29px;
+          width: 40px;
+          display: none;
+        }
+
+        a.return_link {
+          display: inline-block;
+          margin: 7px 2px 2px 2px;
+          height: 20px;
+          width: 20px;
+          border: 2px solid #B5B5B5;
+          border-radius: 30px;
+          background: #DEDEDE;
+
+          &:hover {
+            border: 2px solid $link_color;
+            @include box-shadow(0px 0px 4px $link_color);
+          }
+
+          .left_arrow_icon_black { background-position: -654px -15px; }
+        }
+
+        h2 {
+          font-size: 12px;
+          color: $heading_text_color;
+        }
+
+        p {
+          color: lighten($text_color, 35%);
+          font-size: 10px;
+          padding: 5px 0px;
+        }
+      }
+    }
+  }
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+.hidden {
+  display: none;
+}
+
+
+//* ugly IE8 specific color hack for the border to show*/
+@media \0screen {
+  	.container {
+        border: 8px solid darken(rgba(0, 157, 204, 1), 10%);
+	}
+}

data/app/assets/stylesheets/alchemy/components/login/_login_mixins.scss

@@ -0,0 +1,7 @@
+@mixin login_background_color {
+  @include background(linear-gradient(top, $login_background_top_color 0%, $login_background_top_color 50%, $login_background_bottom_color 100%));
+}
+
+@mixin button_color {
+  @include background-image(linear-gradient(top, #F9F9F9, #F0F0F0, #E5E5E5, #E9E9E9));
+}

data/app/assets/stylesheets/alchemy/components/login/_login_vars.scss

@@ -0,0 +1,19 @@
+$label_font_color:              #CCC !default;
+$input_font_color:              #50505A !default;
+//$login_link_color:              #0194E8 !default;
+$login_base_color:              #D9D9D9 !default;
+$login_card_shadow_color:       #D9D9D9 !default;
+$login_background_top_color:    #efefef !default;
+$login_background_bottom_color: #efefef !default;
+$login_card_outer_shadow_color: #ACACAC !default;
+
+$login_container_width: 500px !default;
+$login_container_top_padding: 10px !default;
+$login_container_height: 275px - $login_container_top_padding !default;
+$form_container_padding: 30px !default;
+$logo_container_width: 140px !default;
+$form_container_width: 360px !default;
+$login_form_top_margin: 75px - 20px !default;
+
+// forms override
+$input_width: $form_container_width - 2 * $form_container_padding - 2px - 20px;

data/app/assets/stylesheets/alchemy/components/sprites/_sprites.scss

@@ -0,0 +1,110 @@
+@import "../../partials/base";
+@import "sprites_mixins";
+
+
+/* this needs to work for Alchemy */
+$spritePath: image-url("alchemy/icons/action-icons.png");
+
+[class*="_icon_grey"],
+[class*="_icon_black"],
+[class*="_icon-"],
+[class*="_icon"] {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  vertical-align: text-top;
+  background-image: $spritePath;
+  background-position: 16px 16px;
+  background-repeat: no-repeat;
+}
+
+//Black Icons
+.search_icon-black          { background-position: 1px -16px; }
+.edit_icon-black            { background-position: -16px -16px; }
+.x_icon-black               { background-position: -33px -16px; }
+.add_icon-black             { background-position: -48px -16px; }
+.gears_icon-black           { background-position: -63px -16px; }
+.unknown_icon-black         { background-position: -80px -16px; }
+.lock_icon-black            { background-position: -97px -16px; }
+.unlock_icon-black          { background-position: -112px -17px; }
+.progress_gear_icon-black   { background-position: -128px -16px; }
+.discs_icon-black           { background-position: -144px -16px; }
+.circle_x_icon-black        { background-position: -160px -16px; }
+.play_icon-black            { background-position: -176px -16px; }
+.stop_icon-black            { background-position: -192px -16px; }
+.camera_icon-black          { background-position: -208px -16px; }
+.key_icon-black             { background-position: -224px -16px; }
+.circle_plus_icon-black     { background-position: -240px -16px; }
+.details_icon-black         { background-position: -257px -16px; }
+.refresh_icon-black         { background-position: -272px -16px; }
+.power_icon-black           { background-position: -288px -16px; }
+.terminal_icon-black        { background-position: -304px -16px; }
+.computer_icon-black        { background-position: -320px -16px; }
+.help_tip_icon-black        { background-position: -336px -16px; }
+.machine_icon-black         { background-position: -352px -16px; }
+.machine_outline_icon-black { background-position: -368px -16px; }
+.warning_icon-black         { background-position: -384px -16px; }
+.plus_box_icon-black        { background-position: -400px -16px; }
+.bug_icon-black             { background-position: -416px -16px; }
+.shield_icon-black          { background-position: -432px -16px; }
+.check_icon-black           { background-position: -448px -16px; }
+.clock_icon-black           { background-position: -464px -16px; }
+.gear_menu_icon-black       { background-position: -480px -16px; }
+.download_icon-black        { background-position: -512px -16px; }
+.down_arrow_icon-black      { background-position: -528px -16px; }
+.right_arrow_icon-black     { background-position: -544px -16px; }
+.package_icon-black         { background-position: -560px -16px; }
+.errata_icon-black          { background-position: -576px -16px; }
+.system_group_icon-black    { background-position: -592px -16px; }
+.collapse_icon-black        { background-position: -608px -16px; }
+.favorites_icon-black       { background-position: -624px -16px; }
+.dot_icon-black             { background-position: -640px -16px; }
+.left_arrow_icon-black      { background-position: -656px -16px; }
+.selector_icon-black        { background-position: -672px -16px; }
+.validation_icon-black      { background-position: -688px -16px; }
+
+//Grey Icons
+.search_icon-grey          { background-position: 1px 0; }
+.edit_icon-grey            { background-position: -16px 0; }
+.x_icon-grey               { background-position: -33px 0; }
+.add_icon-grey             { background-position: -48px 0; }
+.gears_icon-grey           { background-position: -63px 0; }
+.unknown_icon-grey         { background-position: -80px 0; }
+.lock_icon-grey            { background-position: -97px 0; }
+.unlock_icon-grey          { background-position: -112px 0; }
+.progress_gear_icon-grey   { background-position: -128px 0; }
+.discs_icon-grey           { background-position: -144px 0; }
+.circle_x_icon-grey        { background-position: -160px 0; }
+.play_icon-grey            { background-position: -176px 0; }
+.stop_icon-grey            { background-position: -192px 0; }
+.camera_icon-grey          { background-position: -208px 0; }
+.key_icon-grey             { background-position: -224px 0; }
+.circle_plus_icon-grey     { background-position: -240px 0; }
+.details_icon-grey         { background-position: -257px 0; }
+.refresh_icon-grey         { background-position: -272px 0; }
+.power_icon-grey           { background-position: -288px 0; }
+.terminal_icon-grey        { background-position: -304px 0; }
+.computer_icon-grey        { background-position: -320px 0; }
+.help_tip_icon-grey        { background-position: -336px 0; }
+.machine_icon-grey         { background-position: -352px 0; }
+.machine_outline_icon-grey { background-position: -368px 0; }
+.warning_icon-grey         { background-position: -384px 0; }
+.plus_box_icon-grey        { background-position: -400px 0; }
+.bug_icon-grey             { background-position: -416px 0; }
+.shield_icon-grey          { background-position: -432px 0; }
+.check_icon-grey           { background-position: -448px 0; }
+.clock_icon-grey           { background-position: -464px 0; }
+.gear_menu_icon-grey       { background-position: -480px 0; }
+.download_icon-grey        { background-position: -512px 0; }
+.down_arrow_icon-grey      { background-position: -528px 0; }
+.right_arrow_icon-grey     { background-position: -544px 0; }
+.package_icon-grey         { background-position: -560px 0; }
+.errata_icon-grey          { background-position: -576px 0; }
+.system_group_icon-grey    { background-position: -592px 0; }
+.collapse_icon-grey        { background-position: -608px 0; }
+.favorites_icon-grey       { background-position: -624px 0; }
+.dot_icon-grey             { background-position: -640px 0; }
+.left_arrow_icon-grey      { background-position: -656px 0; }
+.selector_icon-grey        { background-position: -672px 0; }
+.validation_icon-grey      { background-position: -688px 0; }

data/app/assets/stylesheets/alchemy/components/sprites/_sprites_mixins.scss

@@ -0,0 +1,9 @@
+@mixin product_sprite {
+  background: $base_product_icon;
+  height: 16px;
+  width: 16px;
+  margin-top: 2px;
+  margin-left: 4px;
+  margin-right: 4px;
+  float: left;
+}

data/app/assets/stylesheets/alchemy/components/text/_text.scss

@@ -0,0 +1,30 @@
+@import "../../partials/base";
+@import "../fonts/overpass";
+@import "../fonts/liberation";
+@import "text_vars";
+
+body {
+  font: 12px/1.5 $screenfont;
+  color: $text_color;
+}
+
+h1 {
+  font-size: 180%;
+  text-transform: uppercase;
+}
+h2 { font-size: 170%; }
+h3 { font-size: 160%; }
+h4 { font-size: 150%; }
+h5 { font-size: 140%; }
+h1,h2,h3,h4,h5 {
+  color: $heading_text_color;
+  font-family: $headlinefont;
+  font-weight: bold;
+  word-wrap: break-word;
+}
+li {
+  margin-left: 0;
+}
+fieldset {
+  margin-bottom: 10px;
+}

data/app/assets/stylesheets/alchemy/components/text/_text_vars.scss

@@ -0,0 +1 @@
+$heading_text_color:  lighten($text_color, 15%) !default;

data/app/assets/stylesheets/alchemy/composites/content_elements.scss

@@ -0,0 +1,6 @@
+@import "../components/sprites/sprites";
+@import "../components/text/text";
+@import "../components/buttons/buttons";
+@import "../components/forms/forms";
+@import "../components/flash_messages/flash_messages";
+@import "../components/chosen";

data/app/assets/stylesheets/alchemy/composites/login.scss

@@ -0,0 +1,9 @@
+@import "../components/shared";
+@import "../components/footer/footer";
+
+@import "../components/sprites/sprites";
+@import "../components/text/text";
+//@import "../components/forms/forms";
+//@import "../components/buttons/buttons";
+
+@import "../components/login/login";

data/app/assets/stylesheets/alchemy/composites/shell.scss

@@ -0,0 +1,4 @@
+@import "../components/shared";
+@import "../components/header/header";
+@import "../components/content";
+@import "../components/footer/footer";

data/app/assets/stylesheets/alchemy/partials/_base.scss

@@ -0,0 +1,8 @@
+@charset "UTF-8";
+@import "compass";
+@import "vars";
+@import "mixins";
+@import "colors";
+
+/* ie9 support */
+$experimental-support-for-svg: true;

data/app/assets/stylesheets/alchemy/partials/_colors.scss

@@ -0,0 +1,99 @@
+/*************
+* Base Colors
+**************/
+$application_background_color:  rgb(217, 217, 217) !default;
+$primary_color:                 rgb(19, 158, 221) !default;
+$primary_gradient_top_color:    lighten($primary_color, 16%);
+$primary_gradient_bottom_color: darken($primary_color, 0%);
+$link_color:                    darken($primary_color, 0%); // default links
+$text_color:                    rgb(60, 60, 60) !default;
+$border_color:                  rgb(200, 200, 200) !default;
+$white_color:                   white !default;
+$black_color:                   black !default;
+$transparent_white_color:       rgba(white, 0) !default;
+
+$success_color:                 rgb(87, 168, 27) !default;
+$warning_color:                 rgb(255, 134, 14) !default;
+$error_color:                   rgb(230, 0, 0) !default;
+
+/****************
+*  Palette Colors
+*****************/
+
+/* Proposed colour palette
+===========================*/
+
+/* Generic default tone for non interactive elements */
+$tone:  #a7b0b2 !default;
+
+/* Favorite greys for warm interactive elements */
+$g0:  #ffffff !default;
+$g1:  #f6f6f6 !default;
+$g2:  #d7d5cf !default;
+$g3:  #bdbab6 !default;
+$g4:  #9f9d99 !default;
+$g5:  #565753 !default;
+$g6:  #333333 !default;
+$g7:  #222222 !default;
+$g8:  #111111 !default;
+$g9:  #000000 !default;
+
+/* Red Hat toners */
+$rh_base: #60605b !default;
+$rh_cream: #dedcc1 !default;
+
+/* Red Hat Official */
+$rh_red1:      #cc0000 !default;
+$rh_red2:      #9e292b !default;
+$rh_red3:      #781f1c !default;
+
+$rh_blue:      #4e9fdd !default;
+$rh_lightblue: #bfdce8 !default;
+$rh_teal:      #2c8596 !default;
+$rh_dark_blue: #003d6e !default;
+$rh_lime:      #e3e936 !default;
+$rh_green:     #afbf27 !default;
+$rh_purple:    #564979 !default;
+$rh_orange:    #dc9f2e !default;
+
+/* Red Hat Apps  - Web Extended
+================================*/
+
+/* Orange (the letter o) */
+$o7:    #400 !default;
+$o6:    #b30 !default;
+$o5:    #c40 !default;
+$o4:    #e70 !default;
+$o3:    #fa0 !default;
+$o2:    #fc3 !default;
+$o1:    #fea !default;
+
+/* Green */
+$link_light:  #39f !default;
+$link:        #05f !default;
+$link_dark:   #039 !default;
+
+$green1: #a3d541 !default;
+$green2: #57a81c !default;
+$green3: #286200 !default;
+
+/* Red */
+$error_color: #990000 !default;
+$error_lighter_color: lighten($error_color, 60%);
+
+
+/************
+* Theme color
+************/
+/* background for header */
+@mixin theme_background_gradient {
+  @include background(
+    linear-gradient(
+      top,
+      $primary_gradient_top_color 0%,
+      $primary_gradient_top_color 40%,
+      $primary_gradient_bottom_color 100%
+    )
+  );
+}
+