ui_alchemy-rails 1.0.4

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

@@ -0,0 +1,423 @@
+@import "alchemy/partials/colors";
+@import "alchemy/partials/vars";
+/* @group Base */
+
+.chzn-container {
+  font-size: 13px;
+
+  position: relative;
+  display: inline-block;
+  zoom: 1;
+  *display: inline;
+  .chzn-drop {
+    background: #fff;
+    border: 1px solid #aaa;
+    border-top: 0;
+    position: absolute;
+    top: 29px;
+    left: 0;
+    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+    -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+    -o-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
+    z-index: 999;
+  }
+}
+
+/* @end */
+
+/* @group Single Chosen */
+
+.chzn-container-single {
+  .chzn-single {
+    background-color: #fff;
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
+    background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
+    background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
+    background-image: -o-linear-gradient(top, #eeeeee 0%, white 50%);
+    background-image: -ms-linear-gradient(top, #eeeeee 0%, white 50%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
+    background-image: linear-gradient(top, #eeeeee 0%, white 50%);
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    border: 1px solid #aaa;
+    display: block;
+    overflow: hidden;
+    white-space: nowrap;
+    position: relative;
+    height: 19px;
+    line-height: 19px;
+    padding: 0 0 0 8px;
+    color: $text_color;
+    text-decoration: none;
+    span {
+      margin-right: 26px;
+      display: block;
+      overflow: hidden;
+      white-space: nowrap;
+      -o-text-overflow: ellipsis;
+      -ms-text-overflow: ellipsis;
+      text-overflow: ellipsis;
+    }
+    abbr {
+      display: block;
+      position: absolute;
+      right: 26px;
+      top: 8px;
+      width: 12px;
+      height: 13px;
+      font-size: 1px;
+      background: url($chosen_sprite_url) right top no-repeat;
+      &:hover {
+        background-position: right -11px;
+    }
+  }
+    div {
+      -webkit-border-radius: 0 4px 4px 0;
+      -moz-border-radius: 0 4px 4px 0;
+      border-radius: 0 4px 4px 0;
+      -moz-background-clip: padding;
+      -webkit-background-clip: padding-box;
+      background-clip: padding-box;
+      background: #ccc;
+      background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #cccccc), color-stop(0.6, #eeeeee));
+      background-image: -webkit-linear-gradient(center bottom, #cccccc 0%, #eeeeee 60%);
+      background-image: -moz-linear-gradient(center bottom, #cccccc 0%, #eeeeee 60%);
+      background-image: -o-linear-gradient(bottom, #cccccc 0%, #eeeeee 60%);
+      background-image: -ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%);
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 );
+      background-image: linear-gradient(top, #cccccc 0%, #eeeeee 60%);
+      border-left: 1px solid #aaa;
+      position: absolute;
+      right: 0;
+      top: 0;
+      display: block;
+      height: 100%;
+      width: 18px;
+      b {
+        margin-top: -4px;
+        background: url($chosen_sprite_url) no-repeat 0 1px;
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .chzn-search {
+    padding: 3px 4px;
+    position: relative;
+    margin: 0;
+    white-space: nowrap;
+    z-index: 1010;
+    input {
+      background: white url($chosen_sprite_url) no-repeat 100% -22px;
+      background: url($chosen_sprite_url) no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
+      background: url($chosen_sprite_url) no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+      background: url($chosen_sprite_url) no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+      background: url($chosen_sprite_url) no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
+      background: url($chosen_sprite_url) no-repeat 100% -22px, -ms-linear-gradient(top, white 85%, #eeeeee 99%);
+      background: url($chosen_sprite_url) no-repeat 100% -22px, linear-gradient(top, white 85%, #eeeeee 99%);
+      margin: 1px 0;
+      padding: 4px 20px 4px 5px;
+      outline: 0;
+      border: 1px solid #aaa;
+      font-family: sans-serif;
+      font-size: 1em;
+    }
+  }
+  .chzn-drop {
+    -webkit-border-radius: 0 0 4px 4px;
+    -moz-border-radius: 0 0 4px 4px;
+    border-radius: 0 0 4px 4px;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+  }
+}
+
+/* @end */
+
+.chzn-container-single-nosearch .chzn-search input {
+  position: absolute;
+  left: -9000px;
+}
+
+/* @group Multi Chosen */
+
+.chzn-container-multi .chzn-choices {
+  background-color: #fff;
+  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
+  background-image: -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+  background-image: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+  background-image: -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
+  background-image: -ms-linear-gradient(top, white 85%, #eeeeee 99%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
+  background-image: linear-gradient(top, white 85%, #eeeeee 99%);
+  border: 1px solid #aaa;
+  margin: 0;
+  padding: 0;
+  cursor: text;
+  overflow: hidden;
+  height: auto !important;
+  height: 1%;
+  position: relative;
+  li {
+    float: left;
+    list-style: none;
+  }
+  .search-field {
+    white-space: nowrap;
+    margin: 0;
+    padding: 0;
+    input {
+      color: #666;
+      background: transparent !important;
+      border: 0 !important;
+      padding: 5px;
+      margin: 1px 0;
+      outline: 0;
+      -webkit-box-shadow: none;
+      -moz-box-shadow: none;
+      -o-box-shadow: none;
+      box-shadow: none;
+    }
+    .default {
+      color: #999;
+    }
+  }
+  .search-choice {
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border-radius: 3px;
+    -moz-background-clip: padding;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    background-color: #e4e4e4;
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #e4e4e4), color-stop(0.7, #eeeeee));
+    background-image: -webkit-linear-gradient(center bottom, #e4e4e4 0%, #eeeeee 70%);
+    background-image: -moz-linear-gradient(center bottom, #e4e4e4 0%, #eeeeee 70%);
+    background-image: -o-linear-gradient(bottom, #e4e4e4 0%, #eeeeee 70%);
+    background-image: -ms-linear-gradient(top, #e4e4e4 0%, #eeeeee 70%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e4e4e4', endColorstr='#eeeeee',GradientType=0 );
+    background-image: linear-gradient(top, #e4e4e4 0%, #eeeeee 70%);
+    color: #333;
+    border: 1px solid #b4b4b4;
+    line-height: 13px;
+    padding: 3px 19px 3px 6px;
+    margin: 3px 0 3px 5px;
+    position: relative;
+    span {
+      cursor: default;
+    }
+  }
+  .search-choice-focus {
+    background: #d4d4d4;
+  }
+  .search-choice .search-choice-close {
+    display: block;
+    position: absolute;
+    right: 3px;
+    top: 4px;
+    width: 12px;
+    height: 13px;
+    font-size: 1px;
+    background: url($chosen_sprite_url) right top no-repeat;
+    &:hover {
+      background-position: right -11px;
+    }
+  }
+  .search-choice-focus .search-choice-close {
+    background-position: right -11px;
+  }
+}
+
+/* @end */
+
+/* @group Results */
+
+.chzn-container .chzn-results {
+  margin: 0 4px 4px 0;
+  max-height: 190px;
+  padding: 0 0 0 4px;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.chzn-container-multi .chzn-results {
+  margin: -1px 0 0;
+  padding: 0;
+}
+
+.chzn-container .chzn-results {
+  li {
+    display: none;
+    line-height: 80%;
+    padding: 7px 7px 8px;
+    margin: 0;
+    list-style: none;
+  }
+  .active-result {
+    cursor: pointer;
+    display: list-item;
+  }
+  .highlighted {
+    background: #3875d7;
+    color: #fff;
+  }
+  li em {
+    background: #feffde;
+    font-style: normal;
+  }
+  .highlighted em {
+    background: transparent;
+  }
+  .no-results {
+    background: #f4f4f4;
+    display: list-item;
+  }
+  .group-result {
+    cursor: default;
+    color: #999;
+    font-weight: bold;
+  }
+  .group-option {
+    padding-left: 20px;
+  }
+}
+
+.chzn-container-multi .chzn-drop .result-selected {
+  display: none;
+}
+
+/* @end */
+
+/* @group Active  */
+
+.chzn-container-active {
+  .chzn-single {
+    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    border: 1px solid #5897fb;
+  }
+  .chzn-single-with-drop {
+    border: 1px solid #aaa;
+    -webkit-box-shadow: 0 1px 0 #fff inset;
+    -moz-box-shadow: 0 1px 0 #fff inset;
+    -o-box-shadow: 0 1px 0 #fff inset;
+    box-shadow: 0 1px 0 #fff inset;
+    background-color: #eee;
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
+    background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%);
+    background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
+    background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%);
+    background-image: -ms-linear-gradient(top, white 0%, #eeeeee 50%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
+    background-image: linear-gradient(top, white 0%, #eeeeee 50%);
+    -webkit-border-bottom-left-radius: 0;
+    -webkit-border-bottom-right-radius: 0;
+    -moz-border-radius-bottomleft: 0;
+    -moz-border-radius-bottomright: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    div {
+      background: transparent;
+      border-left: none;
+      b {
+        background-position: -18px 1px;
+     }
+    }
+  }
+  .chzn-choices {
+    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    -o-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    border: 1px solid #5897fb;
+    .search-field input {
+      color: #111 !important;
+    }
+  }
+}
+
+/* @end */
+
+/* @group Disabled Support */
+
+.chzn-disabled {
+  cursor: default;
+  opacity: 0.5 !important;
+  .chzn-single, .chzn-choices .search-choice .search-choice-close {
+    cursor: default;
+  }
+}
+
+/* @group Right to Left */
+
+.chzn-rtl {
+  direction: rtl;
+  text-align: right;
+  .chzn-single {
+    padding-left: 0;
+    padding-right: 8px;
+    span {
+      margin-left: 26px;
+      margin-right: 0;
+    }
+    div {
+      left: 0;
+      right: auto;
+      border-left: none;
+      border-right: 1px solid #aaaaaa;
+      -webkit-border-radius: 4px 0 0 4px;
+      -moz-border-radius: 4px 0 0 4px;
+      border-radius: 4px 0 0 4px;
+    }
+  }
+  .chzn-choices {
+    li {
+      float: right;
+    }
+    .search-choice {
+      padding: 3px 6px 3px 19px;
+      margin: 3px 5px 3px 0;
+      .search-choice-close {
+        left: 5px;
+        right: auto;
+        background-position: right top;
+      }
+    }
+  }
+  &.chzn-container-single .chzn-results {
+    margin-left: 4px;
+    margin-right: 0;
+    padding-left: 0;
+    padding-right: 4px;
+  }
+  .chzn-results .group-option {
+    padding-left: 0;
+    padding-right: 20px;
+  }
+  &.chzn-container-active .chzn-single-with-drop div {
+    border-right: none;
+  }
+  .chzn-search input {
+    background: url($chosen_sprite_url) no-repeat -38px -22px, white;
+    background: url($chosen_sprite_url) no-repeat -38px -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
+    background: url($chosen_sprite_url) no-repeat -38px -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+    background: url($chosen_sprite_url) no-repeat -38px -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
+    background: url($chosen_sprite_url) no-repeat -38px -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
+    background: url($chosen_sprite_url) no-repeat -38px -22px, -ms-linear-gradient(top, white 85%, #eeeeee 99%);
+    background: url($chosen_sprite_url) no-repeat -38px -22px, -ms-linear-gradient(top, white 85%, #eeeeee 99%);
+    background: url($chosen_sprite_url) no-repeat -38px -22px, linear-gradient(top, white 85%, #eeeeee 99%);
+    padding: 4px 5px 4px 20px;
+  }
+}
+
+/* @end */

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

@@ -0,0 +1,58 @@
+@import "alchemy/partials/base";
+@import "alchemy/components/footer/footer_vars";
+
+* {margin:0;padding:0;}
+
+body {
+  background-color: $application_background_color;
+}
+
+body, html {
+  height:100%;
+  font-family: $screenfont;
+  font-size: 12px;
+  font-size-adjust: none;
+  font-stretch: normal;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 1.5;
+}
+
+#wrapper {
+  min-height: 100%;
+  //padding-bottom: 10px;
+}
+
+#maincontent {
+  overflow: auto;
+  padding-bottom: $stickyfooter_height + 10 + px;
+
+  section.maincontent{
+      background-color: $white_color;
+      min-height:20em;
+      margin: 0 auto 5px;
+      width: $static_width;
+      @include box-shadow(0 1px 5px rgba(0, 0, 0, 0.6));
+
+      h1 {
+        color:transparent;
+        padding-top: 3em;
+        color: #ddd;
+        text-align: center;
+        font-weight: normal;
+        text-transform:capitalize;
+      }
+
+  }
+}
+
+/* microclearfix on all areas */
+section:before, section:after, article:before, article:after {
+  content:"";
+  display:table;
+}
+
+article:after, section:after {
+  clear:both;
+}

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

@@ -0,0 +1,38 @@
+/* ==|== non-semantic helper classes ========================================
+   ,          _                     ___  _
+ /|   |     | |                   / (_)| |
+  |___|  _  | |   _   _   ,_     |     | |  __,   ,   ,   _   ,
+  |   |\|/  |/  |/ \_|/  /  |    |     |/  /  |  / \_/ \_|/  / \_
+  |   |/|__/|__/|__/ |__/   |_/   \___/|__/\_/|_/ \/  \/ |__/ \/
+               /|
+               \|
+
+we should never use these, but we probably will someday
+   ========================================================================== */
+
+.visuallyhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
+  clip: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  position: static;
+  width: auto;
+}
+.invisible { visibility: hidden; }
+.clearfix:before, .clearfix:after { content: ""; display: table; }
+.clearfix:after { clear: both; }
+.clearfix { *zoom: 1; }
+.fr { float: right; }
+.fl { float: left; }
+
+.clickable{cursor: pointer}

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

@@ -0,0 +1,49 @@
+@import "alchemy/partials/base";
+
+
+@media only screen and (max-width: 30em) {}
+
+@media only screen and (max-width: 52em) {
+  header {
+    height:8em;
+
+    h1 { text-indent:1em; }
+    article {
+      padding-left:0em;
+
+      section:last-child {
+        padding-right:0.25em;
+
+        a { margin-right:0em; }
+      }
+    }
+    #appnav {
+      margin-top:4em ;
+      width: 100%;
+
+      ul{
+        li {
+          width: 20%;
+          padding:0em;
+
+          &:nth-child(1) { width: 16%; }
+          &:nth-child(2) { width: 29%; }
+          &:nth-child(3) { width: 15%; }
+          &:nth-child(4) { width: 20%; }
+          &:nth-child(5) { width: 20%; }
+          &:last-child ul { margin-left: -6.5em !important; }
+          a { padding-left:.5em; padding-right:.5em; }
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 49em) {
+  header  nav#appnav > ul > li > a{  }
+  body > header h1{ text-indent:0em; }
+}
+@media only screen and (max-width: 44em) {
+  header  nav#appnav { min-width:38em !important; white-space:nowrap; }
+  header  nav#appnav > ul > li > a{  }
+}

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

@@ -0,0 +1,22 @@
+.media, .bd {
+  overflow:  hidden; 
+  _overflow: visible; 
+  zoom: 1;
+}
+
+.media { 
+  margin: 10px;
+
+  .img {
+    float: left; 
+    margin-right: 10px;
+ 
+    img { display:block; }
+  }
+
+  .imgExt {
+    float: right; 
+    margin-left: 10px;
+  }
+
+}