alchemy_cms 2.5.3.1 → 2.6.0.rc5

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

@@ -13,6 +13,7 @@ noscript {
   border-bottom: 1px solid #c4c19c;
   color: #726d23;
   background-color: #f3f0c1;
+
   h1, p {
     margin: 16px 0;
   }
@@ -32,7 +33,7 @@ body {
 }
 
 h1 {
-  margin: 0 0 10px;
+  margin: 8px;
   padding: 0;
   font-weight: bold;
   font-size: $default-font-size;
@@ -67,7 +68,7 @@ a {
   }
 
   &:focus {
-    @include default-focus-style(rgba(white, 0.5), none);
+    @extend %white-focus-style;
     color: black;
   }
 
@@ -280,27 +281,6 @@ ul.list span.right {
   font-weight: bold;
 }
 
-/* @group image_upload */
-
-table td.tools .icon, table td.icon .icon {
-  width: 16px;
-  height: 16px;
-  @include disable-user-select;
-  margin-top: 0;
-  background-repeat: no-repeat;
-  @include inline-block;
-  margin-right: 4px;
-}
-
-div.spinner {
-  background-color: #ffffff;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
 .headline_text_editor {
   overflow: auto;
   width: 374px;
@@ -394,37 +374,6 @@ div.all_rights {
   margin: 2*$default-padding;
 }
 
-.element_spinner {
-  float: right;
-  height: 23px;
-  position: relative;
-  bottom: 3px;
-  right: -3px;
-}
-
-.element_folder_spinner {
-  position: relative;
-  bottom: 2px;
-  width: 24px;
-  height: 24px;
-  right: -2px;
-}
-
-.element_spinner img {
-  bottom: 1px;
-  float: left;
-  position: relative;
-  width: 24px;
-  height: 24px;
-  right: 0;
-}
-
-span.spinner_wait_text {
-  float: left;
-  position: relative;
-  top: 4px;
-}
-
 div.element_head span.ajax_folder span.error_icon {
   float: left;
   width: 14px;
@@ -447,7 +396,7 @@ p.foot_note {
   padding: $default-padding;
   background-color: $light_yellow;
   border: 1px solid $medium-gray;
-  @include rounded-corner;
+  @extend .rounded-border;
 }
 
 #all_files td.name a {
@@ -467,21 +416,12 @@ p.foot_note {
   padding: 2 * $default-padding;
 
   .thumbnail_background {
-    @include thumbnail-background;
+    @extend %thumbnail-background;
     width: 800px;
     height: 600px;
     position: relative;
   }
 
-  .picture_content_spinner {
-    left: 400px;
-    top: 300px;
-    margin-top: -16px;
-    margin-left: -16px;
-    width: 32px;
-    height: 32px;
-  }
-
   .jcrop-holder { @include inline-block }
 
   img {
@@ -522,7 +462,7 @@ textarea#essence_picture_caption {
   border: 1px inset #e8e8e8;
   overflow: auto;
   padding: 4px 0 0 4px;
-  @include rounded-corner;
+  @extend .rounded-border;
 }
 
 #alchemyConfirmation .alchemy_window_buttons {
@@ -562,44 +502,6 @@ input#user_admin {
   line-height: 19px;
 }
 
-#alchemy div#overlay_toolbar div#image_assign_filter_and_image_sizing form {
-  float: right;
-  width: 310px;
-  height: 25px;
-  margin-top: 2px;
-  padding: 0 !important;
-  margin-right: 0;
-
-  .button {
-    margin: 0;
-  }
-}
-
-div#image_assign_filter_and_image_sizing form input.button {
-  float: right;
-}
-
-li.assign_file_file {
-  display: block;
-  text-align: center;
-  width: 100%;
-  margin-bottom: 4px;
-}
-
-#assign_file_list li.assign_file_file a {
-  overflow: hidden;
-  display: block;
-  padding-right: 4px;
-  text-align: left;
-  line-height: 25px;
-}
-
-div.assign_file_file_icon {
-  float: left;
-  margin: $default-margin;
-  line-height: normal;
-}
-
 #alchemy .ui-dialog-content a img {
   border-style: none;
 }
@@ -713,13 +615,12 @@ div.elements_for_page {
   padding: $default-padding;
   border: $default-border;
   @include box-shadow(#9ea09f 0px 0px 4px);
-  @include rounded-corner;
+  @extend .rounded-border;
 
-  img {
-    width: 20px;
-    height: 20px;
+  .spinner {
+    top: 17px !important;
+    left: 50% !important;
     margin-left: 4px;
-    margin-top: 7px;
   }
 
   .alchemy_selectbox {
@@ -765,18 +666,9 @@ a.close_elements_from_page_selector {
   float: none;
 }
 
-ul#assign_file_list {
-  margin-bottom: 8px;
-  margin-top: 8px;
-  clear: both;
-  height: 280px;
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
 ul#sitemap li .sitemap_sitename.selected_page a {
-  background-color: #DB694C;
-  color: #f5f5f5;
+  background-color: $linked-color;
+  color: $dark-gray;
 }
 
 #alchemy .ui-dialog-content ul#sitemap ul li span.sitemap_sitename.selected_page a {
@@ -788,20 +680,6 @@ ul#sitemap li .sitemap_sitename.selected_page a {
   font-weight: bold;
 }
 
-div.assign_file_file_name {
-  float: left;
-}
-
-.selected_file a {
-  font-weight: bold;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-div.assign_file_file_icon img {
-  margin-top: 2px;
-}
-
 #external_link_table .padding_right {
   padding-right: 8px;
 }
@@ -839,63 +717,13 @@ select#url_protocol.medium {
   vertical-align: inherit;
 }
 
-.assign_file_file.selected_file {
-  background-color: #d1d1d1;
-}
-
-div#overlay_toolbar {
-  background: $medium-gray url('shading.png') repeat-x 0 -42px;
-  border: $default-border;
-  height: 44px;
-  border-top-style: none;
-  border-left-style: none;
-  border-right-style: none;
-  padding: $default-padding;
-}
-
-div#overlay_toolbar div.toolbar_spacer {
-  float: left;
-  width: 1px;
-  height: 37px;
-  border-right-style: dotted;
-  border-right-width: 1px;
-  margin-right: 8px;
-  margin-left: 4px;
-}
-
-div#overlay_toolbar a.button {
-  width: 25px;
-  height: 21px;
-  text-decoration: none;
-  float: right;
-  border-width: 0;
-  border-style: none;
-  font-size: 0;
-  padding: 0;
-  background-repeat: no-repeat;
-  background-position: 0 0;
-}
-
-div#overlay_toolbar a.button:active {
-  text-decoration: none;
-  background-position: 0 -21px;
-}
-
-#alchemy div#overlay_toolbar form {
-  float: left;
-  padding: 0;
-  margin-right: 8px;
-}
-
 #alchemy .ui-dialog #alchemyConfirmation.ui-dialog-content {
   padding: 2*$default-padding;
 }
 
-#preview_load_info {
+.ui-dialog-titlebar .preview-refresh-spinner {
   float: left;
-  width: 16px;
-  height: 16px;
-  margin: 1px 0 0 -12px;
+  margin-top: 8px;
 }
 
 #clipboard_items {
@@ -912,7 +740,7 @@ div#overlay_toolbar a.button:active {
       padding: 2*$default-padding;
       border: $default-border;
       background-color: white;
-      @include rounded-corner;
+      @extend .rounded-border;
       &.elements {
         background-color: #E5DCCA;
         border: 1px solid #BBA589;
@@ -935,7 +763,7 @@ div#overlay_toolbar a.button:active {
 #dropbox {
   background: $medium-gray;
   border: $default-border;
-  @include rounded-corner;
+  @extend .rounded-border;
   padding: $default-padding;
   margin-bottom: 2*$default-padding;
   text-align: center;

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

@@ -8,7 +8,7 @@
 
   h1 {
     font-size: 2em;
-    margin-bottom: 8px;
+    margin: 0 0 8px 0;
   }
 
   h2 {
@@ -27,7 +27,7 @@
     margin-bottom: 16px;
     background-color: $medium-gray;
     border: $default-border;
-    @include top-rounded-border;
+    @extend .top-rounded-border;
     float: left;
 
     h2 {

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

@@ -2,4 +2,5 @@
 @import "compass/css3/user-interface";
 @import "sassy-buttons";
 @import "alchemy/variables";
-@import "alchemy/mixins";
+@import "alchemy/extends";
+@import "alchemy/fonts";

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

@@ -1,7 +1,18 @@
-.element_heading .preview_text_quote {
-  font-size: 10px;
-  font-style: italic;
-  line-height: 15px;
+.element_heading {
+  padding: 0;
+  z-index: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  position: absolute;
+  left: 35px;
+  top: 11px;
+  width: 322px;
+
+  .preview_text_quote {
+    font-size: 10px;
+    font-style: italic;
+    line-height: 15px;
+  }
 }
 
 span.preview_text_element_name {
@@ -11,14 +22,6 @@ span.preview_text_element_name {
   line-height: 15px;
 }
 
-img.add_element_spinner {
-  width: 24px;
-  height: 24px;
-  position: absolute;
-  left: 5px;
-  bottom: 6px;
-}
-
 div#element_area {
   padding: 0;
   margin: 0;
@@ -101,7 +104,7 @@ div#element_area {
   padding: 4px;
   background-color: #f0e8d7;
   border: 1px solid #c2baab;
-  @include rounded-corner;
+  @extend .rounded-border;
   height: 115px;
 
   a {
@@ -110,7 +113,7 @@ div#element_area {
     text-align: center;
     font-weight: bold;
     line-height: 104px;
-    @include rounded-corner;
+    @extend .rounded-border;
     font-size: 40px;
     display: block;
     height: 100%;
@@ -118,9 +121,10 @@ div#element_area {
     position: relative;
 
     .icon {
+      font-size: 30px;
       position: absolute;
-      top: 52px;
-      left: 47px;
+      top: 45px;
+      left: 45px;
     }
   }
 }
@@ -159,20 +163,9 @@ div#element_area {
   top: 8px;
 }
 
-.element_heading {
-  padding: 0;
-  z-index: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  position: absolute;
-  left: 35px;
-  top: 11px;
-  width: 322px;
-}
-
-div.element_editor {
+.element_editor {
   border: 1px solid #bba589;
-  @include rounded-corner;
+  @extend .rounded-border;
   background-color: #f0e8d7;
   margin-bottom: 8px;
 
@@ -202,13 +195,13 @@ div.element_editor {
     margin-bottom: 1em;
   }
 
-  p.content_editor_error {
+  .content_editor_error {
     border: 1px solid #f5b04e;
     padding: 4px 8px;
     line-height: 21px;
     background-color: #f5dea9;
     margin-top: 4px;
-    @include rounded-corner;
+    @extend .rounded-border;
 
     span.icon.warning {
       position: relative;
@@ -224,8 +217,8 @@ div.element_editor {
     padding: 2*$default-padding;
 
     label {
-      top: 18px;
-      left: 14px;
+      top: 21px;
+      left: 16px;
     }
 
     input[data-autocomplete] {
@@ -275,7 +268,12 @@ a.element_move_button {
   border-top-color: #e3e3e3;
   height: 20px;
   background-color: #e5dcca;
-  @include disable-user-select;
+  @extend .disable-user-select;
+
+  .spinner {
+    top: 9px;
+    right: 9px;
+  }
 }
 
 form.add_gallery_to_index {
@@ -286,7 +284,7 @@ div.picture_gallery_images {
   overflow: hidden;
   margin: $default-margin 0;
   border: 1px inset #cecece;
-  @include rounded-corner;
+  @extend .rounded-border;
   background-color: #e5dcca;
   padding: 1px;
 
@@ -304,7 +302,7 @@ div.picture_thumbnail div.picture_image {
   overflow: hidden;
 
   img.img_paddingtop {
-    @include disable-user-select;
+    @extend .disable-user-select;
   }
 }
 
@@ -312,14 +310,6 @@ div#cells {
   min-height: 100px;
 }
 
-.place_element_spinner {
-  position: absolute;
-  right: 8px;
-  width: 24px;
-  height: 24px;
-  top: 5px;
-}
-
 span.linkable_essence_tools {
   position: absolute;
   bottom: 0;
@@ -330,11 +320,11 @@ span.linkable_essence_tools {
     position: absolute;
     bottom: 4px;
     right: 28px;
-    @include reset-border-radius;
+    @extend %border-radius-reset;
 
     &.unlink {
       right: 0;
-      @include right-rounded-border;
+      @extend .right-rounded-border;
     }
   }
 }
@@ -382,17 +372,16 @@ a.fold_element {
 
 .edit_images_bottom a.linked {
   position: relative;
-  @include rounded-corner;
-  background-image: url('shading.png');
-  background-repeat: repeat-x;
-  background-position: 0 -75px;
-  background-color: #ffd77a;
+  @extend .rounded-border;
+  background-color: $linked-color;
   border: 1px solid #9a9a9a;
   bottom: 1px;
   margin-right: 2px;
-  width: 17px;
-  height: 17px;
-  margin-left: 1px;
+  width: 18px;
+  height: 18px;
+  margin-left: 0;
+
+  .icon { margin-left: 1px }
 }
 
 .edit_images_bottom a.disabled {
@@ -473,36 +462,20 @@ div.essence_picture_css_class {
   top: 4px;
   left: 4px;
   background-color: transparent;
-  @include disable-user-select;
+  @extend .disable-user-select;
 }
 
 .dragable_picture .picture_handle {
   cursor: move;
 }
 
-.picture_content_spinner {
-  background: #666666;
-  height: 93px;
-  left: 4px;
-  position: absolute;
-  top: 4px;
-  width: inherit;
-  img {
-    top: 50%;
-    left: 50%;
-    position: absolute;
-    margin-top: -16px;
-    margin-left: -16px;
-  }
-}
-
 div.file {
   padding: 0;
   margin-top: 8px;
   margin-bottom: 4px;
   border: 1px solid #c0c0c0;
   background-color: #f3f3f3;
-  @include rounded-corner;
+  @extend .rounded-border;
   height: 24px;
 }
 
@@ -579,22 +552,10 @@ a.new_content_link {
 div.tinymce_container {
   position: relative;
   margin: $default-margin 0;
-}
-
-div.essence_richtext_loader {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  width: 100%;
-  height: 100%;
-  background-color: #F0E8D7;
-  @include opacity(0.9);
 
-  img {
-    position: absolute;
-    top: 46%;
-    left: 46%;
+  .spinner {
+    top: 70px;
+    left: 50%;
   }
 }
 
@@ -639,7 +600,7 @@ div.content_editor {
     padding: 2*$default-padding;
     border: 1px solid #f5b04e;
     background-color: #f5dea9;
-    @include rounded-corner;
+    @extend .rounded-border;
     font-size: 11px;
 
     span.icon.warning {
@@ -654,7 +615,7 @@ div.content_editor {
     margin-right: 4px;
     vertical-align: top;
 
-    input.thin_border {
+    .thin_border {
       width: 170px;
     }
   }
@@ -662,7 +623,7 @@ div.content_editor {
   &.validation_failed {
 
     label { color: $error_text_color }
-    input { @include field_with_error }
+    input { @extend %field-with-error }
     .tinymce_container {
       outline: 1px solid $error_border_color;
     }
@@ -720,6 +681,10 @@ div.content_editor {
       width: 100% !important;
       height: 100%;
     }
+
+    &.display_inline .selectboxit-container {
+      width: 170px;
+    }
   }
 
   &:hover label a.icon_button.small {
@@ -732,7 +697,7 @@ div.content_editor {
   }
 
   select.essence_editor_select {
-    @include rounded-corner;
+    @extend .rounded-border;
     background: white;
     border: 1px solid $button-border-color;
     font-size: 11px;
@@ -772,7 +737,6 @@ div.content_editor {
     float: none;
     height: auto;
     @include inline-block;
-    margin: 8px 0;
   }
 }
 
@@ -816,7 +780,7 @@ textarea.default_tinymce, textarea.custom_tinymce {
   background-color: $error_background_color;
   padding: 2*$default-padding;
   list-style-type: none;
-  @include rounded-corner;
+  @extend .rounded-border;
   color: $error_text_color;
   border: 1px solid $error_border_color;
 
@@ -835,7 +799,7 @@ a.hint {
   cursor: help !important;
 
   &:hover span.bubble { display: block }
-  span.bubble { @include tooltip }
+  span.bubble { @extend %tooltip }
 }
 
 .content_editor .hint {