alchemy_cms 2.5.3.1 → 2.6.0.rc5

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

@@ -5,7 +5,7 @@
   margin-bottom: 8px;
   border: 1px solid #d08f91;
   color: #690001;
-  @include rounded-corner;
+  @extend .rounded-border;
 
   &.ajax_status_code_0 {
     border-color: #c4c19c;
@@ -31,7 +31,7 @@ div#errors, div.errors {
   padding: 8px 8px 4px 28px;
   border-width: 1px;
   border-style: solid;
-  @include rounded-corner;
+  @extend .rounded-border;
   border-color: #c49c9c;
   color: #592e2e;
   background-color: #efd3d3;

data/app/assets/stylesheets/alchemy/{mixins.scss → extends.scss}

@@ -1,41 +1,4 @@
-@mixin rounded-corner($radius: $default-border-radius) {
-  @include border-radius($radius);
-}
-
-@mixin reset-border-radius {
-  @include border-radius(0);
-}
-
-@mixin top-rounded-border($radius: $default-border-radius) {
-  @include border-top-radius($radius);
-}
-
-@mixin left-rounded-border($radius: $default-border-radius) {
-  @include border-left-radius($radius);
-}
-
-@mixin right-rounded-border($radius: $default-border-radius) {
-  @include border-right-radius($radius);
-}
-
-@mixin bottom-rounded-border($radius: $default-border-radius) {
-  @include border-bottom-radius($radius);
-}
-
-@mixin bottom-left-rounded-border($radius: $default-border-radius) {
-  @include border-bottom-left-radius($radius);
-}
-
-@mixin disable-user-select {
-  @include user-select(none);
-}
-
-@mixin default-button-style {
-  @include sassy-button('shiny', $sb-border-radius, $sb-font-size, $sb-base-color, $sb-second-color, $sb-text-color, $sb-text-style, $sb-pseudo-states, $sb-ie-support);
-
-  border-color: $button-border-color;
-  margin: $default-form-field-margin;
-}
+// Some few mixins
 
 @mixin default-focus-style($bg-color: $very-light-blue, $border: 1px solid $blue) {
   background-color: $bg-color;
@@ -54,17 +17,82 @@
   }
 }
 
-@mixin field_with_error {
+// Extends without base classes. They are the better mixins ;)
+
+%text-overflow {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  -ms-text-overflow: ellipsis;
+  -moz-text-overflow: ellipsis;
+}
+
+%tooltip {
+  display: none;
+  background: $light_yellow;
+  @extend .rounded-border;
+  @include box-shadow(0 4px 24px $dark-gray);
+  position: absolute;
+  right: -25px;
+  top: 26px;
+  z-index: 100;
+  padding: 8px;
+  line-height: 1.5em;
+  min-width: 180px;
+  font-size: 12px;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: -8px;
+    right: 24px;
+    width: 0px;
+    height: 0px;
+    border-style: solid;
+    border-width: 0 8px 8px 8px;
+    border-color: transparent transparent $light_yellow transparent;
+  }
+}
+
+%thumbnail-background {
+  display: table-cell;
+  background-color: $dark-gray;
+  text-align: center;
+  vertical-align: middle;
+  padding: 0;
+  line-height: 0;
+}
+
+%button-defaults {
+  @include sassy-button('shiny', $sb-border-radius, $sb-font-size, $sb-base-color, $sb-second-color, $sb-text-color, $sb-text-style, $sb-pseudo-states, $sb-ie-support);
+  border-color: $button-border-color;
+  margin: $default-form-field-margin;
+}
+
+%field-with-error {
   border-color: $error_border_color;
   color: $error_text_color;
   background-color: lighten($error_background_color, 8%);
   @include box-shadow(inset 1px 1px 4px rgba($error_border_color, 0.5));
 }
 
-@mixin default-input-style {
+%border-radius-reset {
+  @include border-radius(0);
+}
+
+%blue-focus-style {
+  @include default-focus-style;
+}
+
+%white-focus-style {
+  @include default-focus-style(rgba(white, 0.5), none);
+}
+
+%default-input-style {
   @include box-sizing(border-box);
   $border-inset-color: lighten($default-border-color, 20%);
-  @include rounded-corner;
+  @extend .rounded-border;
   @include box-shadow(inset 1px 1px 2px $medium-gray);
   font: $default-font-style;
   padding: 1px 2*$default-padding;
@@ -78,58 +106,54 @@
   font-size: 12px;
   line-height: 12px;
   height: 29px;
-    @include transition(
+  @include transition(
     box-shadow 0.25s ease-in-out,
     background-color 0.25s ease-in-out,
     border 0.25s ease-in-out
   );
 
   &:focus {
-    @include default-focus-style;
+    @extend %blue-focus-style;
   }
 
-  &.with_error { @include field_with_error }
+  &.with_error { @extend %field-with-error }
 }
 
-@mixin text-overflow($prop: ellipsis) {
-  text-overflow: $prop;
-  -o-text-overflow: $prop;
-  -ms-text-overflow: $prop;
-  -moz-text-overflow: $prop;
+%gradiated-toolbar {
+  background: $medium-gray;
+  @include background(linear-gradient(top, $medium-gray 85%, darken($medium-gray, 10) 100%));
 }
 
-@mixin tooltip {
-  display: none;
-  background: $light_yellow;
-  @include rounded-corner;
-  @include box-shadow(0 4px 24px $dark-gray);
-  position: absolute;
-  right: -25px;
-  top: 26px;
-  z-index: 100;
-  padding: 8px;
-  line-height: 1.5em;
-  min-width: 180px;
-  font-size: 12px;
+%progressbar {
+  @include background-image(linear-gradient(top, rgba(lighten($light-gray, 10), .5) 5%, rgba($light-gray, 0.5) 65%, rgba(darken($medium-gray, 10), 0.5) 90%));
+}
 
-  &:before {
-    content: '';
-    position: absolute;
-    top: -8px;
-    right: 24px;
-    width: 0px;
-    height: 0px;
-    border-style: solid;
-    border-width: 0 8px 8px 8px;
-    border-color: transparent transparent $light_yellow transparent;
-  }
+// Useful base classes
+
+.rounded-border {
+  @include border-radius($default-border-radius);
 }
 
-@mixin thumbnail-background {
-  display: table-cell;
-  background-color: $dark-gray;
-  text-align: center;
-  vertical-align: middle;
-  padding: 0;
-  line-height: 0;
+.top-rounded-border {
+  @include border-top-radius($default-border-radius);
+}
+
+.left-rounded-border {
+  @include border-left-radius($default-border-radius);
+}
+
+.right-rounded-border {
+  @include border-right-radius($default-border-radius);
+}
+
+.bottom-rounded-border {
+  @include border-bottom-radius($default-border-radius);
+}
+
+.bottom-left-rounded-border {
+  @include border-bottom-left-radius($default-border-radius);
+}
+
+.disable-user-select {
+  @include user-select(none);
 }

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

@@ -9,20 +9,18 @@ div#flash_notices {
     cursor: pointer;
     padding-right: 24px;
 
-    &:after {
-      content: '';
+    &:before {
       position: absolute;
       right: 2*$default-padding;
       top: 2*$default-padding;
-      width: 16px;
-      height: 16px;
-      background: url(ui-icons_666666_256x240.png) -96px -128px no-repeat;
+      @extend .icon-cancel:before;
+      font-size: 14px;
     }
   }
 }
 
 div.flash {
-  @include rounded-corner;
+  @extend .rounded-border;
   @include opacity(0.95);
   padding: 8px 8px 8px 30px;
   font-weight: bold;

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

@@ -0,0 +1,46 @@
+@charset "UTF-8";
+
+@font-face {
+  font-family: 'Alchemy Icons';
+  src: url("/assets/alchemy-icons.eot?23044784");
+  src: url("/assets/alchemy-icons.eot?23044784#iefix") format('embedded-opentype'),
+       url("/assets/alchemy-icons.woff?23044784") format('woff'),
+       url("/assets/alchemy-icons.ttf?23044784") format('truetype'),
+       url("/assets/alchemy-icons.svg?23044784#alchemy") format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.icon-plus,
+.icon-expand,
+.icon-collapse,
+.icon-cancel:before,
+.icon-reload:before,
+.icon-tag,
+.icon-fullscreen:before,
+.icon-exit-fullscreen:before,
+.icon-double-arrow,
+.icon-search {
+  font-family: 'Alchemy Icons';
+  font-size: 12px;
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+  text-decoration: none;
+  width: 12px;
+  color: #666;
+  text-align: center;
+  line-height: 1em;
+  @include inline-block;
+}
+
+.icon-plus:before { content: '\e804' } /* '' */
+.icon-expand:before { content: '\229e' }
+.icon-collapse:before { content: '\229f' } /* '⊟' */
+.icon-cancel:before { content: '\e803' } /* '' */
+.icon-reload:before { content: '\27f2' } /* '⟲' */
+.icon-tag:before { content: '\e801' } /* '' */
+.icon-fullscreen:before { content: '\e802' } /* '' */
+.icon-exit-fullscreen:before { content: '\e800' } /* '' */
+.icon-double-arrow:before { content: '\e74f' } /* '' */
+.icon-search:before { content: '\1f50e' } /* '\1f50e' */

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

@@ -4,12 +4,12 @@
   margin-top: $default-margin;
   display: block;
   line-height: 100%;
-  @include disable-user-select;
+  @extend .disable-user-select;
   clear: both;
 }
 
 button, input[type="submit"], a.button, input.button {
-  @include default-button-style;
+  @extend %button-defaults;
 
   &.small {
     padding: 2px 2*$default-padding;
@@ -34,18 +34,19 @@ button, input[type="submit"], a.button, input.button {
   }
 
   &:focus {
-    @include default-focus-style;
+    @extend %blue-focus-style;
   }
 
   &.disabled {
     line-height: 13px;
+    height: 29px;
     padding-top: 5px;
     padding-bottom: 4px;
   }
 }
 
 .icon_button {
-  @include default-button-style;
+  @extend %button-defaults;
   width: 21px;
   height: 21px;
   line-height: 19px;
@@ -82,7 +83,7 @@ button, input[type="submit"], a.button, input.button {
     float: none;
     @include inline-block;
     position: relative;
-    top: -2px;
+    top: 0px;
     background: none;
     border: none;
     @include box-shadow(none);
@@ -90,8 +91,8 @@ button, input[type="submit"], a.button, input.button {
     .icon {
       left: auto;
       position: absolute;
-      right: 4px;
-      top: 4px;
+      right: 5px;
+      top: 0px;
       width: 8px;
       height: 8px;
 
@@ -104,12 +105,12 @@ button, input[type="submit"], a.button, input.button {
       border: $default-border-width $default-border-style $button-hover-border-color;
       @include border-radius($default-border-radius);
       background: $button-hover-bg-color;
-      top: -2px;
+      top: -1px;
       right: 0px;
 
       .icon {
-        right: 3px;
-        top: 3px;
+        right: 4px;
+        top: 0px;
       }
     }
   }
@@ -146,7 +147,7 @@ button, input[type="submit"], a.button, input.button {
   }
 
   &:focus {
-    @include default-focus-style;
+    @extend %blue-focus-style;
   }
 }
 
@@ -167,11 +168,11 @@ div#toolbar label {
   @include default-label-style;
 }
 
-div.button_with_label {
+.button_with_label {
+  @include inline-block(top);
   text-align: center;
   margin-right: 8px;
   margin-left: 8px;
-  float: left;
   min-width: 70px;
   line-height: 0;
 
@@ -233,7 +234,7 @@ div.sitemap_right_tools .sitemap_sitetools a.icon_button {
 }
 
 textarea, input[type="text"], input[type="email"], input[type="password"], .thin_border, .input_field {
-  @include default-input-style;
+  @extend %default-input-style;
 
   &.dirty {
     background-color: #fff8df;
@@ -270,18 +271,18 @@ input#search_input_field {
 div.search_field span.icon, div.js_filter_field_box span.icon {
   position: absolute;
   left: 8px;
-  top: 6px;
+  top: 8px;
 }
 
 .js_filter_field_box {
-  position: relative;
-  float: right;
-  margin-left: 4px;
+  position: absolute;
+  right: 4px;
+  top: 4px;
 
   .js_filter_field {
     width: 220px;
     text-align: left;
-    @include border-radius(15px);
+    @include border-radius(3px);
     padding: 3px 24px;
     height: 29px;
     margin: 0;
@@ -293,23 +294,13 @@ div.search_field span.icon, div.js_filter_field_box span.icon {
     text-align: center;
     padding-top: 3px;
   }
-
-  .js_filter_field_clear {
-    width: 15px;
-    height: 15px;
-    background: url('icons.png') no-repeat 0 -70px;
-    position: absolute;
-    right: 8px;
-    top: 4px;
-    @include rounded-corner;
-  }
 }
 
 // Just some basic styling for select tags.
 // Not used, because we use the .selectBoxIt() jQuery plugin.
 
 select {
-  @include default-button-style;
+  @extend %button-defaults;
   height: 29px;
   padding: 0.4em 0.6em;
 }
@@ -338,7 +329,7 @@ td.select .selectboxit {
   a { text-decoration: none }
 
   .selectboxit {
-    @include default-button-style;
+    @extend %button-defaults;
     width: auto;
     height: 15px;
     padding: 6px 0 6px 8px;
@@ -401,16 +392,18 @@ td.select .selectboxit {
       .selectboxit-arrow-container {
         width: 16px;
         top: 8px;
+        line-height: 1em;
         height: 14px !important;
       }
 
       .selectboxit-arrow {
-        margin-top: 0 !important;
+        margin-top: 2px !important;
+        font-size: 10px;
       }
     }
 
     &:focus {
-      @include default-focus-style;
+      @extend %blue-focus-style;
     }
 
     /* Dropdown List Box Text */
@@ -419,8 +412,8 @@ td.select .selectboxit {
       overflow: hidden;
       float: left;
       white-space: nowrap;
-      @include disable-user-select;
-      @include text-overflow(ellipsis);
+      @extend .disable-user-select;
+      @extend %text-overflow;
       padding-right: 32px;
       line-height: normal !important;
     }
@@ -443,20 +436,21 @@ td.select .selectboxit {
       /* Horizontally centers the down arrow */
       margin-right: auto;
       margin-left: auto;
-      margin-top: 4.5px !important;
-      width: 16px;
-      height: 15px;
-      text-indent: -99999px;
-      overflow: hidden;
+      margin-top: 6px !important;
+      width: 6px;
+      height: 1em;
+      line-height: 1em;
+      margin-left: 0.3em;
+      font-style: normal;
       display: block;
-      background: url('ui-icons_666666_256x240.png') -127px -17px no-repeat;
+      @extend .icon-double-arrow;
     }
 
     &.with_error { border-color: $error_border_color }
   }
 
   /* Dropdown List Options List*/
-  ul {
+  .selectboxit-options {
     @include box-sizing(border-box);
     min-height: 28px;
     min-width: 100%;
@@ -471,7 +465,7 @@ td.select .selectboxit {
     display: none;
     z-index: 99999;
     outline: none;
-    @include rounded-corner;
+    @extend .rounded-border;
     @include box-shadow(0 4px 16px $dark-gray);
     border: $default-border;
 
@@ -510,6 +504,13 @@ td.select .selectboxit {
       cursor: default;
     }
   }
+
+  .selectboxit-option-anchor {
+    display: block;
+    min-height: 19px;
+    max-width: 410px;
+    @extend %text-overflow;
+  }
 }
 
 .autocomplete_tag_list {
@@ -517,8 +518,8 @@ td.select .selectboxit {
 
   label {
     position: absolute;
-    top: 8px;
-    left: 6px;
+    top: 13px;
+    left: 8px;
   }
 
   input[data-autocomplete] {