alchemy_cms 2.6.0.rc5 → 2.6.0

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

@@ -3,4 +3,4 @@
 @import "sassy-buttons";
 @import "alchemy/variables";
 @import "alchemy/extends";
-@import "alchemy/fonts";
+@import "alchemy/icon-font";

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

@@ -62,7 +62,7 @@ div#element_area {
   position: absolute;
   top: 0;
   left: 0;
-  background: url('icons.png') no-repeat -224px -72px;
+  background: image-url('alchemy/icons.png') no-repeat -224px -72px;
 }
 
 .element_handle span.icon {
@@ -122,9 +122,11 @@ div#element_area {
 
     .icon {
       font-size: 30px;
+      width: 30px;
+      height: 30px;
       position: absolute;
-      top: 45px;
-      left: 45px;
+      top: 42px;
+      left: 40px;
     }
   }
 }
@@ -217,7 +219,7 @@ div#element_area {
     padding: 2*$default-padding;
 
     label {
-      top: 21px;
+      top: 20px;
       left: 16px;
     }
 
@@ -250,15 +252,15 @@ span.element_tools_icons {
 }
 
 a.delete_element_button {
-  background: url('icons.png') no-repeat -63px -72px;
+  background: image-url('alchemy/icons.png') no-repeat -63px -72px;
 }
 
 a.element_copy_button {
-  background: url('icons.png') no-repeat -128px -72px;
+  background: image-url('alchemy/icons.png') no-repeat -128px -72px;
 }
 
 a.element_move_button {
-  background: url('icons.png') no-repeat -97px -72px;
+  background: image-url('alchemy/icons.png') no-repeat -97px -72px;
 }
 
 .element_head {
@@ -330,7 +332,7 @@ span.linkable_essence_tools {
 }
 
 a.expand_element {
-  background: url('icons.png') no-repeat -160px -72px;
+  background: image-url('alchemy/icons.png') no-repeat -160px -72px;
   height: 16px;
   width: 16px;
   text-decoration: none;
@@ -339,7 +341,7 @@ a.expand_element {
 }
 
 a.fold_element {
-  background: url('icons.png') no-repeat -192px -72px;
+  background: image-url('alchemy/icons.png') no-repeat -192px -72px;
   height: 16px;
   width: 16px;
   text-decoration: none;
@@ -429,10 +431,12 @@ div.essence_picture_editor {
     border-color: $error_border_color
   }
 
-  .thumbnail_background.missing {
-    background-image: url('placeholder.png');
-    background-repeat: no-repeat;
-    background-position: center 12px;
+  .thumbnail_background.missing:before {
+    font-family: 'Alchemy Icons';
+    @extend .icon-pictures:before;
+    font-size: 48px;
+    color: $medium-gray;
+    vertical-align: top;
   }
 }
 
@@ -493,7 +497,7 @@ div.file_icon span.icon {
 div.file_icon a.assign_file {
   display: block;
   height: 16px;
-  background: url('icons.png') no-repeat -480px -40px;
+  background: image-url('alchemy/icons.png') no-repeat -480px -40px;
   width: 16px;
   margin: $default-margin;
 }
@@ -523,11 +527,11 @@ div.essence_file_tools a {
 }
 
 div.essence_file_tools a.assign_file {
-  background: url('icons.png') -512px -40px;
+  background: image-url('alchemy/icons.png') -512px -40px;
 }
 
 div.essence_file_tools a.edit_file {
-  background: url('icons.png') -160px -167px;
+  background: image-url('alchemy/icons.png') -160px -167px;
 }
 
 td.content_editor_essence_type {

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

@@ -13,7 +13,7 @@ div#flash_notices {
       position: absolute;
       right: 2*$default-padding;
       top: 2*$default-padding;
-      @extend .icon-cancel:before;
+      @extend .icon-cross:before;
       font-size: 14px;
     }
   }

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

@@ -91,11 +91,15 @@ button, input[type="submit"], a.button, input.button {
     .icon {
       left: auto;
       position: absolute;
-      right: 5px;
-      top: 0px;
+      left: 1px;
+      top: 2px;
       width: 8px;
       height: 8px;
 
+      &:before {
+        line-height: 10px;
+      }
+
       &.delete-small {
         background-position: -4px -76px;
       }
@@ -109,8 +113,8 @@ button, input[type="submit"], a.button, input.button {
       right: 0px;
 
       .icon {
-        right: 4px;
-        top: 0px;
+        left: 0px;
+        top: 2px;
       }
     }
   }
@@ -390,7 +394,7 @@ td.select .selectboxit {
       }
 
       .selectboxit-arrow-container {
-        width: 16px;
+        width: 15px;
         top: 8px;
         line-height: 1em;
         height: 14px !important;
@@ -398,7 +402,9 @@ td.select .selectboxit {
 
       .selectboxit-arrow {
         margin-top: 2px !important;
+        margin-left: 0;
         font-size: 10px;
+        line-height: 11px;
       }
     }
 
@@ -429,6 +435,7 @@ td.select .selectboxit {
       top: 3px;
       border-left: 1px solid darken($medium-gray, 10%);
       height: 23px !important;
+      line-height: 0;
     }
 
     /* Dropdown List Down Arrow */
@@ -436,14 +443,13 @@ td.select .selectboxit {
       /* Horizontally centers the down arrow */
       margin-right: auto;
       margin-left: auto;
-      margin-top: 6px !important;
-      width: 6px;
-      height: 1em;
-      line-height: 1em;
-      margin-left: 0.3em;
+      margin-top: 5px !important;
+      width: 16px;
+      line-height: 16px;
+      margin-left: 2px;
       font-style: normal;
       display: block;
-      @extend .icon-double-arrow;
+      @extend .icon-menu;
     }
 
     &.with_error { border-color: $error_border_color }
@@ -468,47 +474,48 @@ td.select .selectboxit {
     @extend .rounded-border;
     @include box-shadow(0 4px 16px $dark-gray);
     border: $default-border;
+  }
 
-    /* Dropdown List Individual Options */
-    li, .selectboxit-optgroup-header {
-      line-height: 1.5em; /* Height of Individual Select Box Options */
-      overflow: hidden;
-      white-space: nowrap;
-      list-style: none;
-      margin: 0;
-      padding: 6px 8px;
-    }
+  /* Dropdown List Individual Options */
+  .selectboxit-option, .selectboxit-optgroup-header {
+    line-height: 1.5em; /* Height of Individual Select Box Options */
+    overflow: hidden;
+    white-space: nowrap;
+    list-style: none;
+    margin: 0;
+    padding: 6px 8px;
+  }
 
-    li.selectboxit-hover, li.selectboxit-focus, li.active {
-      background-color: $button-hover-bg-color;
-      color: $text-color;
-    }
+  .selectboxit-option.selectboxit-hover, .selectboxit-option.selectboxit-focus, .selectboxit-option.active {
+    background-color: $button-hover-bg-color;
+    color: $text-color;
+  }
 
-    /* Dropdown List Individual Option Icon Positioning */
-    li span {
-      float:left;
-    }
+  .selectboxit-option-icon {
+    float: left;
+  }
 
-    /* Dropdown List Optgroup Headers */
-    .selectboxit-optgroup-header {
-      font-weight: bold;
-    }
+  /* Dropdown List Optgroup Headers */
+  .selectboxit-optgroup-header {
+    font-weight: bold;
+  }
 
-    /* Dropdown List Optgroup Options */
-    .selectboxit-optgroup-option {
-      text-indent: 8px;
-    }
+  /* Dropdown List Optgroup Options */
+  .selectboxit-optgroup-option {
+    text-indent: 8px;
+  }
 
-    /* Dropdown List Optgroup Header hover psuedo class */
-    .selectboxit-optgroup-header[data-disabled='true']:hover {
-      cursor: default;
-    }
+  /* Dropdown List Optgroup Header hover psuedo class */
+  .selectboxit-optgroup-header[data-disabled='true']:hover {
+    cursor: default;
   }
 
   .selectboxit-option-anchor {
     display: block;
+    width: 100%;
     min-height: 19px;
     max-width: 410px;
+    text-align: left;
     @extend %text-overflow;
   }
 }
@@ -518,8 +525,8 @@ td.select .selectboxit {
 
   label {
     position: absolute;
-    top: 13px;
-    left: 8px;
+    top: 12px;
+    left: 4px;
   }
 
   input[data-autocomplete] {

data/app/assets/stylesheets/alchemy/icon-font.css.scss

@@ -0,0 +1,67 @@
+@font-face {
+  font-family: 'Alchemy Icons';
+  src: font-url('alchemy/icons.eot');
+  src: font-url('alchemy/icons.eot?#iefix') format('embedded-opentype'),
+       font-url('alchemy/icons.woff') format('woff'),
+       font-url('alchemy/icons.ttf') format('truetype'),
+       font-url('alchemy/icons.svg#Alchemy-Icons') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.icon-plus,
+.icon-minus,
+.icon-cross,
+.icon-plus-2,
+.icon-minus-2,
+.icon-pencil,
+.icon-tag,
+.icon-info,
+.icon-warning,
+.icon-checkmark,
+.icon-ccw,
+.icon-trash,
+.icon-cross-2,
+.icon-pictures,
+.icon-menu,
+.icon-magnifying-glass,
+.icon-fullscreen-exit,
+.icon-help,
+.icon-fullscreen,
+.icon-cog {
+  font-family: 'Alchemy Icons';
+  speak: none;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  width: 16px;
+  color: #666;
+  text-align: center;
+  line-height: 1em;
+  @include inline-block;
+}
+
+.icon-plus:before { content: "\e000" }
+.icon-minus:before { content: "\e001" }
+.icon-cross:before { content: "\e004" }
+.icon-plus-2:before { content: "\e005" }
+.icon-minus-2:before { content: "\e006" }
+.icon-pencil:before { content: "\e007" }
+.icon-tag:before { content: "\e034" }
+.icon-info:before { content: "\e008" }
+.icon-warning:before { content: "\e009" }
+.icon-checkmark:before { content: "\e00a" }
+.icon-ccw:before { content: "\e00b" }
+.icon-trash:before { content: "\f014" }
+.icon-cross-2:before { content: "\e00e" }
+.icon-pictures:before { content: "\e00f" }
+.icon-menu:before { content: "\e010" }
+.icon-magnifying-glass:before { content: "\e011" }
+.icon-fullscreen-exit:before { content: "\e01e" }
+.icon-help:before { content: "\e00c" }
+.icon-fullscreen:before { content: "\e01d" }
+.icon-cog:before { content: "\f013" }

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

@@ -1,12 +1,12 @@
 .icon {
   @include inline-block;
-  background: url('icons.png') no-repeat;
+  background: image-url('alchemy/icons.png') no-repeat;
   width: 16px;
   height: 16px;
 
   &.add {
     background: none;
-    @extend .icon-plus;
+    @extend .icon-plus-2;
     line-height: 1em;
     font-size: 19px;
   }
@@ -23,6 +23,18 @@
     background-position: -192px -136px;
   }
 
+  &.back {
+    background: none;
+    line-height: 14px;
+    font-size: 20px;
+    font-weight: bold;
+    color: #666;
+
+    &:before {
+      content: '\00ab';
+    }
+  }
+
   &.blank {
     background: transparent;
   }
@@ -40,7 +52,7 @@
 
     &.small {
       background: none;
-      @extend .icon-cancel;
+      @extend .icon-cross;
       line-height: 0;
     }
   }
@@ -200,7 +212,7 @@
   &.search {
     background: none;
     padding-top: 2px;
-    @extend .icon-search;
+    @extend .icon-magnifying-glass;
   }
 
   &.select_all {

data/app/assets/stylesheets/alchemy/jquery-ui.scss

@@ -258,35 +258,35 @@
 .ui-icon {
   width: 16px;
   height: 16px;
-  background-image: url('ui-icons_666666_256x240.png');
+  background-image: image-url('alchemy/ui-icons_666666_256x240.png');
 }
 
 .ui-widget-content .ui-icon {
-  background-image: url('ui-icons_666666_256x240.png');
+  background-image: image-url('alchemy/ui-icons_666666_256x240.png');
 }
 
 .ui-widget-header .ui-icon {
-  background-image: url('ui-icons_666666_256x240.png');
+  background-image: image-url('alchemy/ui-icons_666666_256x240.png');
 }
 
 .ui-state-default .ui-icon {
-  background-image: url('ui-icons_666666_256x240.png');
+  background-image: image-url('alchemy/ui-icons_666666_256x240.png');
 }
 
 .ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
-  background-image: url('ui-icons_666666_256x240.png');
+  background-image: image-url('alchemy/ui-icons_666666_256x240.png');
 }
 
 .ui-state-active .ui-icon {
-  background-image: url('ui-icons_666666_256x240.png');
+  background-image: image-url('alchemy/ui-icons_666666_256x240.png');
 }
 
 .ui-state-highlight .ui-icon {
-  background-image: url('ui-icons_666666_256x240.png');
+  background-image: image-url('alchemy/ui-icons_666666_256x240.png');
 }
 
 .ui-state-error .ui-icon, .ui-state-error-text .ui-icon {
-  background-image: url('ui-icons_666666_256x240.png');
+  background-image: image-url('alchemy/ui-icons_666666_256x240.png');
 }
 
 /* positioning */
@@ -565,41 +565,40 @@
 
 .ui-icon-refresh {
   background: none !important;
-  position: relative;
-  left: 1px;
+  @extend .icon-ccw;
 
   &:before {
     text-indent: 0;
     position: absolute;
-    right: 1px;
-    top: 2px;
-    @extend .icon-reload:before
+    right: 4px;
+    top: 3px;
   }
 }
 
 .ui-icon-fullscreen {
   background: none !important;
   position: relative;
+  @extend .icon-fullscreen;
 
   &:before {
     text-indent: 0;
     position: absolute;
-    right: 1px;
+    right: 2px;
     top: 2px;
-    @extend .icon-fullscreen:before
+    font-size: 10px;
   }
 }
 
 .ui-icon-exit-fullscreen {
   background: none !important;
   position: relative;
+  @extend .icon-fullscreen-exit;
 
   &:before {
     text-indent: 0;
     position: absolute;
     right: 1px;
     top: 2px;
-    @extend .icon-exit-fullscreen:before
   }
 }
 
@@ -770,13 +769,13 @@
 .ui-icon-closethick {
   background: none !important;
   position: relative;
+  @extend .icon-cross;
 
   &:before {
-    @extend .icon-cancel:before;
     text-indent: 0;
     position: absolute;
-    right: 0px;
-    top: 2px;
+    left: 1px;
+    top: 3px;
     font-size: 16px;
   }
 }
@@ -1524,12 +1523,10 @@ button.ui-button::-moz-focus-inner {
 .ui-dialog-titlebar-close {
   position: absolute;
   right: 2 * $default-padding;
-  top: 50%;
+  top: 2 * $default-padding;
   width: 19px;
-  margin: -10px 0 0 0;
   padding: 1px;
   height: 18px;
-  float: right;
 
   &.ui-state-default {
     background: transparent;
@@ -1540,24 +1537,41 @@ button.ui-button::-moz-focus-inner {
   }
 
   &.ui-state-hover {
-    @extend %foc
+
+    .ui-icon-closethick:before {
+      right: -1px;
+      top: 3px;
+    }
   }
 }
 
+.preview-refresh-spinner {
+  position: absolute !important; // when will js lib authors stop to add styles to elements.... :/
+  top: 16px;
+  right: 57px;
+}
+
 .ui-dialog .ui-dialog-titlebar-refresh {
   position: absolute;
-  right: 42px;
+  right: 46px;
   top: 7px;
   height: 18px;
 
-  &.ui-state-hover { margin-right: 3px }
+  &.ui-state-hover {
+    margin-right: 3px;
+
+    .ui-icon-refresh:before {
+      top: 2px;
+      right: 2px;
+    }
+  }
 }
 
 .ui-dialog .ui-dialog-titlebar-maximize,
 .ui-dialog .ui-dialog-titlebar-restore,
 .ui-dialog .ui-dialog-titlebar-refresh {
   margin-right: 2px;
-  margin-top: 0;
+  margin-top: 1px;
   padding: 0;
 
   .ui-icon {