alchemy_cms 2.2.4 → 2.3.rc5

data/app/assets/stylesheets/alchemy/_defaults.scss

@@ -1,155 +1,119 @@
+@import "compass/css3";
+@import "compass/css3/user-interface";
+@import "sassy-buttons";
+
 $text-color: #333333;
 $light-blue: #C6DBE7;
+$blue: darken($light-blue, 15%);
+$very-light-blue: lighten($light-blue, 12%);
 $light-gray: #EDEDED;
 $medium-gray: #E3E3E3;
 $dark-gray: #666666;
-$button-bg-color: #F7F7F7;
-$button-hover-bg-color: #e6f0f5;
-$button-border-color: #9A9A9A;
-$button-hover-border-color: #888888;
-$button-text-shadow: #f2f2f2 1px 1px 0;
 
 $default-padding: 4px;
 $default-margin: $default-padding;
 
-$default-font-face: "Lucida Grande", Arial, sans-serif;
+$default-font-face: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
 $default-font-size: 12px;
 $default-font-style: $default-font-size $default-font-face;
 
-$default-border: 1px solid #AFAFAF;
-
-@mixin button-styles {
-  margin: 0;
-  font: 11px $default-font-face;
-  border: 1px solid $button-border-color;
-  background-color: $button-bg-color;
-  background-image: image-url('alchemy/shading.png');
-  background-repeat: repeat-x;
-  background-position: 0 -73px;
-  cursor: pointer;
-  color: $text-color;
-  text-shadow: $button-text-shadow;
-  @include rounded-corner;
+$default-border-color: #AFAFAF;
+$default-border-width: 1px;
+$default-border-style: solid;
+$default-border: $default-border-width $default-border-style $default-border-color;
+$default-border-radius: 3px;
+
+$button-bg-color: #F7F7F7;
+$button-hover-bg-color: #e6f0f5;
+$button-border-color: #9A9A9A;
+$button-hover-border-color: #888888;
+$button-text-shadow: #f2f2f2 1px 1px 0;
+
+$sb-base-color:      $light-gray;
+$sb-border-radius:   $default-border-radius;
+$sb-font-size:       $default-font-size;
+$sb-text-color:      $text-color;
+$sb-ie-support:      true;
+$default-form-field-margin: 0.3em 0;
+
+@mixin rounded-corner($radius: $default-border-radius) {
+  @include border-radius($radius);
 }
 
-@mixin button-hover-styles {
-  text-decoration: none;
-  text-shadow: none;
-  border: 1px solid $button-hover-border-color;
-  background: $button-hover-bg-color image-url('alchemy/shading.png') repeat-x 50% -75px;
-  font-weight: normal;
+@mixin reset-border-radius {
+  @include border-radius(0);
 }
 
-@mixin rounded-corner {
-  $radius: 3px;
-  border-radius: $radius;
-  -o-border-radius: $radius;
-  -ms-border-radius: $radius;
-  -moz-border-radius: $radius;
-  -webkit-border-radius: $radius;
+@mixin top-rounded-border($radius: $default-border-radius) {
+  @include border-top-radius($radius);
 }
 
-@mixin reset-border-radius {
-  $radius: 0px;
-  border-radius: $radius;
-  -o-border-radius: $radius;
-  -ms-border-radius: $radius;
-  -moz-border-radius: $radius;
-  -webkit-border-radius: $radius;
+@mixin left-rounded-border($radius: $default-border-radius) {
+  @include border-left-radius($radius);
 }
 
-@mixin top-rounded-border {
-  $sidea: top-left;
-  $sideb: top-right;
-  $radius: 3px;
-  border-#{$sidea}-radius: $radius;
-  border-#{$sideb}-radius: $radius;
-  -o-border-#{$sidea}-radius: $radius;
-  -o-border-#{$sideb}-radius: $radius;
-  -ms-border-#{$sidea}-radius: $radius;
-  -ms-border-#{$sideb}-radius: $radius;
-  -moz-border-radius-#{$sidea}: $radius;
-  -moz-border-radius-#{$sideb}: $radius;
-  -webkit-border-#{$sidea}-radius: $radius;
-  -webkit-border-#{$sideb}-radius: $radius;
+@mixin right-rounded-border($radius: $default-border-radius) {
+  @include border-right-radius($radius);
 }
 
-@mixin left-rounded-border {
-  $sidea: bottom-left;
-  $sideb: top-left;
-  $radius: 3px;
-  border-#{$sidea}-radius: $radius;
-  border-#{$sideb}-radius: $radius;
-  -o-border-#{$sidea}-radius: $radius;
-  -o-border-#{$sideb}-radius: $radius;
-  -ms-border-#{$sidea}-radius: $radius;
-  -ms-border-#{$sideb}-radius: $radius;
-  -moz-border-radius-#{$sidea}: $radius;
-  -moz-border-radius-#{$sideb}: $radius;
-  -webkit-border-#{$sidea}-radius: $radius;
-  -webkit-border-#{$sideb}-radius: $radius;
+@mixin bottom-rounded-border($radius: $default-border-radius) {
+  @include border-bottom-radius($radius);
 }
 
-@mixin right-rounded-border {
-  $sidea: bottom-right;
-  $sideb: top-right;
-  $radius: 3px;
-  border-#{$sidea}-radius: $radius;
-  border-#{$sideb}-radius: $radius;
-  -o-border-#{$sidea}-radius: $radius;
-  -o-border-#{$sideb}-radius: $radius;
-  -ms-border-#{$sidea}-radius: $radius;
-  -ms-border-#{$sideb}-radius: $radius;
-  -moz-border-radius-#{$sidea}: $radius;
-  -moz-border-radius-#{$sideb}: $radius;
-  -webkit-border-#{$sidea}-radius: $radius;
-  -webkit-border-#{$sideb}-radius: $radius;
+@mixin bottom-left-rounded-border($radius: $default-border-radius) {
+  @include border-bottom-left-radius($radius);
 }
 
-@mixin bottom-rounded-border {
-  $sidea: bottom-left;
-  $sideb: bottom-right;
-  $radius: 3px;
-  border-#{$sidea}-radius: $radius;
-  border-#{$sideb}-radius: $radius;
-  -o-border-#{$sidea}-radius: $radius;
-  -o-border-#{$sideb}-radius: $radius;
-  -ms-border-#{$sidea}-radius: $radius;
-  -ms-border-#{$sideb}-radius: $radius;
-  -moz-border-radius-#{$sidea}: $radius;
-  -moz-border-radius-#{$sideb}: $radius;
-  -webkit-border-#{$sidea}-radius: $radius;
-  -webkit-border-#{$sideb}-radius: $radius;
+@mixin disable-user-select {
+  @include user-select(none);
 }
 
-@mixin bottom-left-rounded-border {
-  $side: bottom-left;
-  $radius: 3px;
-  border-#{$side}-radius: $radius;
-  -o-border-#{$side}-radius: $radius;
-  -ms-border-#{$side}-radius: $radius;
-  -moz-border-radius-#{$side}: $radius;
-  -webkit-border-#{$side}-radius: $radius;
+@mixin default-button-style {
+  @include sassy-button('shiny');
+  display: inline;
+  border-color: $button-border-color;
+  margin: $default-form-field-margin;
 }
 
-@mixin rounded-search-field {
-  $radius: 12px;
-  border-radius: $radius;
-  -o-border-radius: $radius;
-  -ms-border-radius: $radius;
-  -moz-border-radius: $radius;
-  -webkit-border-radius: $radius;
+@mixin default-focus-style($bg-color: $very-light-blue, $border: 1px solid $blue) {
+  background-color: $bg-color;
+  border: $border;
+  @include box-shadow(0 0 6px $blue, inset 0 0 4px $light-blue);
+  outline: none;
+  @include transition(all 0.25s ease-in-out);
+
+  &::-moz-focus-inner {
+    border: none !important;
+    padding: 1px !important;
+  }
 }
 
-@mixin opacity($opacity){
-  opacity: $opacity/100;
-  filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity})");
+@mixin default-input-style {
+  $border-inset-color: lighten($default-border-color, 20%);
+  @include rounded-corner;
+  @include box-shadow(inset 1px 1px 2px $medium-gray);
+  font: $default-font-style;
+  padding: 1px $default-padding;
+  margin: $default-form-field-margin;
+  background: #fff;
+  border-top: 1px solid $default-border-color;
+  border-left: 1px solid $default-border-color;
+  border-bottom: 1px solid $border-inset-color;
+  border-right: 1px solid $border-inset-color;
+  width: 210px;
+  font-size: 12px;
+  line-height: 12px;
+  height: 25px;
+  @include transition(all 0.25s ease-in-out);
+
+  &:focus {
+    @include default-focus-style;
+  }
 }
 
-@mixin disable-user-select {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
+@mixin text-overflow($prop: ellipsis) {
+  text-overflow: $prop;
+  -o-text-overflow: $prop;
+  -ms-text-overflow: $prop;
+  -moz-text-overflow: $prop;
 }

data/app/assets/stylesheets/alchemy/alchemy.css

@@ -1,10 +1,11 @@
 /* Alchemy CMS Sprockets Manifest
 * -------------------------------
 *= require alchemy/base
-*= require alchemy/buttons
+*= require alchemy/archive
 *= require alchemy/dashboard
 *= require alchemy/elements
 *= require alchemy/flash
+*= require alchemy/form_elements
 *= require alchemy/frame
 *= require alchemy/icons
 *= require alchemy/login
@@ -15,6 +16,5 @@
 *= require alchemy/upload
 *= require alchemy/jquery-ui.alchemy
 *= require alchemy/jquery.Jcrop
-*= require alchemy/jquery.sb
 *= require alchemy/custom
 */

data/app/assets/stylesheets/alchemy/archive.css.scss

@@ -0,0 +1,288 @@
+@import "alchemy/defaults";
+
+div#image_assign_filter_and_image_sizing {
+  width: 100%;
+  height: 40px;
+}
+
+#picture_archive {
+  padding: 4 * $default-padding;
+
+  .selected_item_tools {
+    margin: -4*$default-padding;
+    border-bottom: 1px solid $default-border-color;
+    margin-bottom: 4*$default-padding;
+    padding: 4*$default-padding;
+    display: none;
+  }
+}
+
+.picture_thumbnail {
+  padding: $default-padding;
+  margin: 2px 1px 2px 2px;
+  background-color: #fff;
+  float: none;
+  display: inline;
+  display: inline-block;
+  border: 1px solid #c0c0c0;
+  position: relative;
+  @include rounded-corner;
+
+  .thumbnail_background {
+    display: table-cell;
+    width: 160px;
+    height: 120px;
+    background-color: $dark-gray;
+    text-align: center;
+    vertical-align: middle;
+    padding: 0;
+    line-height: 0;
+  }
+
+  .picture_name {
+    height: 14px;
+    display: block;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    position: absolute;
+    bottom: 1px;
+    left: 0;
+    font-family: "Courier New", Courier, mono;
+    line-height: 11px;
+    padding: 2px 0;
+    margin-right: 4px;
+    margin-left: 4px;
+  }
+
+  &.small {
+    width: 80px;
+    height: 80px;
+
+    .picture_name {
+      width: 80px;
+    }
+
+    .thumbnail_background {
+      width: 80px;
+      height: 60px;
+    }
+
+    .image_spinner {
+      height: 60px;
+      margin: $default-margin;
+
+      img {
+        top: 14px;
+        left: 25px;
+      }
+    }
+  }
+
+  &.medium {
+    width: 160px;
+    height: 140px;
+
+    .picture_name {
+      width: 160px;
+    }
+
+    .thumbnail_background {
+      width: 160px;
+      height: 120px;
+    }
+
+    .image_spinner {
+      height: 120px;
+      margin: $default-margin;
+
+      img {
+        top: 42px;
+        left: 64px;
+      }
+    }
+  }
+
+  &.large {
+    width: 240px;
+    height: 200px;
+
+    .picture_name {
+      width: 240px;
+    }
+
+    .thumbnail_background {
+      width: 240px;
+      height: 180px;
+    }
+
+    .image_spinner {
+      height: 180px;
+
+      img {
+        top: 74px;
+        left: 108px;
+      }
+    }
+  }
+
+  &:hover {
+
+    .picture_tool {
+      display: block;
+    }
+  }
+}
+
+#pictures {
+  padding-right: 232px;
+
+  .picture_thumbnail {
+    margin: 0 8px 8px 0;
+    display: inline-block;
+    float: none;
+
+    .thumbnail_background {
+      cursor: -webkit-zoom-in;
+      cursor: -moz-zoom-in;
+      cursor: -ms-zoom-in;
+      cursor: -o-zoom-in;
+      cursor: image-url('alchemy/lupe.cur'), zoom-in, pointer;
+    }
+  }
+}
+
+div.assign_image_list_image {
+  text-align: center;
+  overflow: hidden;
+  position: relative;
+}
+
+div.image_spinner {
+  background-color: $dark-gray;
+  width: 1px;
+  margin: $default-margin;
+
+  img {
+    position: absolute;
+    z-index: 0;
+    top: 32px;
+    left: 40px;
+  }
+}
+
+#assign_image_list {
+  position: relative;
+  padding-right: 244px;
+  height: 519px;
+
+  div.assign_image_list_image img {
+    border-style: none;
+  }
+}
+
+.picture_tool {
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  background-color: white;
+  top: 3px;
+  padding: 1px;
+  z-index: 10;
+  display: none;
+
+  &.visible {
+    display: block;
+  }
+
+  &.hidden {
+    display: none;
+  }
+
+  &.select {
+    left: 4px;
+
+    input {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  &.delete {
+    right: 4px;
+
+    a {
+      background: image-url('alchemy/icons.png') no-repeat -63px -72px;
+    }
+  }
+
+  &.edit {
+    top: auto;
+    right: 4px;
+    bottom: 24px;
+
+    a {
+      background: image-url('alchemy/icons.png') no-repeat -160px -167px;
+    }
+  }
+
+  a {
+    display: block;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+  }
+}
+
+div#library_sidebar {
+  position: absolute;
+  border-left: 1px solid $default-border-color;
+  top: 0;
+  right: 0;
+  width: 200px;
+  padding: 0 4*$default-padding;
+  height: 100%;
+  z-index: 1;
+  background-color: $light-gray;
+
+  h2 {
+    margin-top: 4*$default-margin;
+  }
+}
+
+div#filter_bar {
+
+  .selectboxit {
+    width: 180px;
+  }
+}
+
+div#tag_list {
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+    margin: $default-margin 0 3*$default-margin 0;
+
+    li {
+      @include inline-block;
+      padding: $default-padding 2*$default-padding;
+      margin: 0 $default-margin 2*$default-margin 0;
+      background-color: $medium-gray;
+      @include border-radius(16px);
+      white-space: nowrap;
+
+      a {
+        text-decoration: none;
+      }
+
+      &.active {
+        background-color: $dark-gray;
+
+        a {
+          color: $light-gray;
+        }
+      }
+    }
+  }
+}