refinerycms-core 2.1.5 → 3.0.0

data/app/assets/javascripts/refinery/refinery.js.erb

@@ -1,19 +1,13 @@
 /*
  *= require jquery
  *= require jquery_ujs
- *= require jquery-ui
+ *= require jquery-ui/dialog
+ *= require jquery-ui/sortable
+ *= require jquery-ui/tabs
  *= require modernizr-min
  *= require jquery/jquery.html5-placeholder-shim
  *= require jquery/jquery.timers
- *= require jquery/jquery.jcarousel
  *= require jquery/jquery.browser
  *= require admin
  *= require refinery/core
- *= require refinery/site_bar
- *= require refinery/admin
- *= require refinery/submenu
- *= require refinery/interface
- *= require refinery/sortable_menu
- *= require refinery/submit_continue
- *= require refinery/ajaxy_pagination
 */

data/app/assets/javascripts/refinery/serializelist.js

@@ -10,7 +10,7 @@
  * will be read by PHP as a multidimensional array which you may
  * use for saving state.
  *
- * http://github.com/botskonet/jquery.serialize-list
+ * https://github.com/botskonet/jquery.serialize-list
  */
 (function($) {
   $.fn.serializelist = function(options) {

data/app/assets/javascripts/refinery/site_bar.js

@@ -1,8 +1,3 @@
 $(function() {
-  $logo = $('#site_bar_content #site_bar_refinery_cms_logo');
-  $logo.css('left', ($('#site_bar_content').width() / 2) - ($logo.width() / 2));
-
   $switch_anchor = $('#editor_switch a').not('.ie7 #editor_switch a, .ie6 #editor_switch a');
-
-  $('#editor_switch a').appendTo($('<span></span>').prependTo('#editor_switch'));
 });

data/app/assets/javascripts/refinery/sortable_list.js

@@ -4,7 +4,7 @@ var create_sortable_list = function(options){
         , init: function(options) {
             if(!this.initialised){
                 this.update_url = options.update_url;
-                this.sortable_list = options.sortable_list;
+                this.sortable_list = $(options.sortable_list);
                 this.tree = options.tree;
                 this.replaceContentsAfterUpdate = options.replaceContentsAfterUpdate;
 
@@ -25,7 +25,7 @@ var create_sortable_list = function(options){
                     this.sortable_list.find('li').addClass('no-nest');
                 }
 
-                this.sortable_list.nestedSortable({
+                this.sortable_list.nestedSortable($.extend({
                     listType: 'ul',
                     disableNesting: 'no-nest',
                     forcePlaceholderSize: true,
@@ -37,11 +37,10 @@ var create_sortable_list = function(options){
                     tolerance: 'pointer',
                     toleranceElement: this.tree ? '> div' : null,
                     disabled: true,
-                    start: function () {
-                    },
+                    start: function () {},
                     change: $.proxy(this.change, {list: this}),
                     stop: $.proxy(this.stop, {list: this})
-                });
+                }, options));
                 if (this.tree) {
                     this.reset_branch_classes(this.sortable_list);
                 } else {
@@ -101,9 +100,9 @@ var create_sortable_list = function(options){
         , enable_reordering: function(e) {
             if(e) { e.preventDefault(); }
             this.list.sortable_list.addClass("reordering");
-            $('.actions', this.list.sortable_list).fadeTo(500, 0.3);
-            this.list.div_with_list_and_actions.parents().siblings('div').fadeTo(500,0.3);
-            $('*:not("#reorder_action_done, #reorder_action")',this.list.actions).not(this.list.reorder_action_done.parents('li, ul, div')).fadeTo(500, 0.55);
+            $('.actions', this.list.sortable_list).fadeTo(0, 0.3);
+            this.list.div_with_list_and_actions.parents().siblings('div').fadeTo(0, 0.3);
+            $('*:not("#reorder_action_done, #reorder_action")', this.list.actions).not(this.list.reorder_action_done.parents('li, ul, div')).fadeTo(0, 0.55);
             this.list.sortable_list.nestedSortable("enable");
             this.list.reorder_action.hide();
             this.list.reorder_action_done.show();
@@ -128,9 +127,9 @@ var create_sortable_list = function(options){
 
         , restore_controls: function(e) {
             this.list.sortable_list.removeClass('reordering');
-            $('.actions',this.list.sortable_list).fadeTo(250, 1);
-            this.list.div_with_list_and_actions.parents().siblings('div').fadeTo(250,1);
-            $('*:not("#reorder_action_done, #reorder_action")',this.list.actions).not($('#reorder_action_done').parents('li, ul, div')).fadeTo(250, 1);
+            $('.actions',this.list.sortable_list).fadeTo(0, 1);
+            this.list.div_with_list_and_actions.parents().siblings('div').fadeTo(0,1);
+            $('*:not("#reorder_action_done, #reorder_action")',this.list.actions).not($('#reorder_action_done').parents('li, ul, div')).fadeTo(0, 1);
             this.list.reorder_action_done.hide().removeClass('loading');
             this.list.reorder_action.show();
             if (this.list.replaceContentsAfterUpdate) {

data/app/assets/javascripts/refinery/submit_continue.js.coffee.erb

@@ -6,7 +6,7 @@
 
   if (continue_editing_button = $("#continue_editing")).length > 0 and continue_editing_button.attr("rel") != "no-prompt"
     $("#editor_switch a").click (e) ->
-      e.preventDefault()  unless confirm("<%= ::I18n.t("js.admin.confirm_changes") %>")  if $("form[data-changes-made]").length > 0
+      e.preventDefault()  unless confirm("<%= ::I18n.t("refinery.js.admin.confirm_changes") %>")  if $("form[data-changes-made]").length > 0
 
   $("input[id=page_custom_slug]").change ->
     $("#submit_continue_button").remove()

data/app/assets/stylesheets/application.scss

@@ -0,0 +1,2 @@
+@import 'refinery/formatting.scss';
+@import 'refinery/theme.scss';

data/app/assets/stylesheets/refinery/_colours.scss

@@ -0,0 +1,18 @@
+$icon_default_colour: #404650;
+$icon_page_colour:    #86cffa;   //
+$icon_folder_colour:  #e6cb47;   // dark yellow
+$icon_add_colour: $icon_default_colour;
+// $icon_add_colour:     #7fff00;   // chartreuse
+$icon_delete_colour:  #ff707f;   // rose
+$icon_edit_colour: $icon_default_colour;
+// $icon_edit_colour:    #007fff;   // azure
+$icon_error_colour:   #ff0;     //RED
+$icon_preview_colour: $icon_default_colour;
+// $icon_preview_colour: #7f00ff;   // violet
+$icon_locale_colour:  #b7e3fc;    // pale blue
+$icon_done_colour:    #00a017;  //
+$info_icon_blue:      #316CC8;
+
+
+$action_background_colour: lighten($icon_locale_colour,10%);
+$action_border_colour: $icon_locale_colour;

data/app/assets/stylesheets/refinery/_icons.scss

@@ -0,0 +1,85 @@
+
+// we use a content block in the basic icon mixin
+@mixin icon-base($colour, $size, $float:none) {
+  @content;
+  &:before {
+    @extend .fa;
+    font-size: $size;
+    color: $colour;
+    text-decoration: none;
+    width: auto;
+    height:auto;
+    float:$float;
+  }
+}
+
+// Any icon
+@mixin icon($icon-selector, $color: $icon_default_colour, $padding: 4px, $size: 1.2em, $float: none) {
+  @include icon-base($color, $size, $float) {
+    @extend .fa-#{$icon-selector};
+    &:before {margin-right: 0.1em!important;}
+  };
+}
+
+
+%icon-font { font-family: 'FontAwesome', Helvetica, Arial, sans-serif; }
+
+/* icons */
+
+.add_icon             {@include icon('plus-circle');}
+.back_icon            {@include icon('arrow-left');}
+.close_icon           {@include icon('times-circle')}
+.delete_icon, .delete_section_icon    {@include icon('minus-circle', $icon_delete_colour);}
+.download_icon        {@include icon('download');}
+.edit_email_icon      {@include icon('envelope-o');}
+.edit_icon            {@include icon('edit', $icon_edit_colour);}
+.email_icon           {@include icon('envelope-o');}
+.error_icon           {@include icon('question-circle', $icon_error_colour);}
+.failure_icon         {@include icon('times');}
+.folder_icon          {@include icon('folder',$icon_folder_colour)}
+.go_icon              {@include icon('caret-square-o-right');}
+.info_icon            {@include icon('info-circle');}
+.loading_icon         {
+  @include icon('spinner');
+  @extend .fa-spin
+}
+.page_icon            {@include icon('file-o',$icon_page_colour)}
+.preview_icon         {@include icon('eye', $icon_preview_colour)}
+.remove_icon          {@include icon('unlink', $icon_delete_colour);}
+.reorder_done_icon    {@include icon('thumbs-o-up')}
+.reorder_h_icon       {@include icon('exchange');}
+.reorder_icon         {@include icon('unsorted');}
+.reorder_icon.loading {@include icon('spinner')}
+.search_icon          {@include icon('search')}
+.settings_icon        {@include icon('gear')}
+.sortdown_icon        {@include icon('sort-down')}
+.sortup_icon          {@include icon('sort-up')}
+.spam_empty_icon      {@include icon('trash-o');}
+.spam_icon            {@include icon('trash');}
+.success_icon         {@include icon('check');}
+.switch_view_grid_icon {@include icon('th')}
+.switch_view_list_icon {@include icon('list')}
+.upload_icon          {@include icon('upload');}
+.user_comment_icon    {@include icon('comment-o');}
+
+.hidden_icon  {display:none}
+.unhidden_icon {display: inline-block}
+
+// stacked icon/text used for locales
+.locale_marker {
+    display: inline-block;
+    font-size: 8px;
+    margin-right: 10px;
+    position: relative;
+    top: -8px;
+    .fa-stack strong {
+      left: 7px;
+      line-height: 1em;
+      position: absolute;
+      top: 9px;
+    }
+}
+
+// don't want underlines on icons
+#content a[class$='icon'] {border-bottom: none}
+#content a[class$='icon']:hover {border-bottom: none}

data/app/assets/stylesheets/refinery/{layout.css.scss → _layout.scss}

@@ -1,41 +1,23 @@
-/*==================================
-=     Mixins
-==================================*/
-@mixin rounded($radius) {
-  border-radius: $radius;
-  -moz-border-radius: $radius;
-  -webkit-border-radius: $radius;
-}
-@mixin top-rounded($radius) {
-  border-radius-top: $radius;
-  -moz-border-radius-topleft: $radius;
-  -moz-border-radius-topright: $radius;
-  -webkit-border-top-left-radius: $radius;
-  -webkit-border-top-right-radius: $radius;
-}
-@mixin bottom-rounded($radius) {
-  border-radius-bottom: $radius;
-  -moz-border-radius-bottomleft: $radius;
-  -moz-border-radius-bottomright: $radius;
-  -webkit-border-bottom-left-radius: $radius;
-  -webkit-border-bottom-right-radius: $radius;
-}
+$admin_width: 1080px;
+$menu_width: 120px;
+$standard_rounding: 0px;
+
 p {
   font-size: 14px;
   line-height: 18px;
 }
 html {
-  min-height: 100%;
+  height: 100%;
 }
 body {
-  min-height: 100%;
-  margin: 0;
-  padding: 0;
+  height: 100%;
+  margin: -52px 0;
+  padding: 52px 0 0;
+  box-sizing: border-box;
   font-family: Arial, sans-serif;
-  font-size: 13px;
   line-height: 1.5em;
   color: #41403C;
-  background: #303030 image_url('refinery/page_bg.png') repeat;
+  background: rgb(217, 217, 217);
 }
 acronym {
   cursor: help;
@@ -43,25 +25,54 @@ acronym {
 label[for] {
   cursor: pointer;
 }
-#page_container, #site_bar_content, header {
-  margin: 0px auto 10px auto;
+#admin_container, #login_container {
+  font-size: 13px;
+  margin: 0px auto 15px auto;
   text-align: left;
-  width: 990px;
+
+  a {
+    color: #41403C;
+    text-decoration: none;
+  }
+
+  @include rounded($standard_rounding);
+  position: relative;
+  margin-top: 15px;
+  #menu {
+    a:hover {
+      border-bottom: 0px;
+    }
+  }
+
+  .hidden {
+    display: none;
+  }
 }
-#page_container {
-  width: 960px;
-  padding: 30px 15px;
+#login_container {
+  background: white;
+  width: 620px;
 }
-#site_bar_content {
-  margin-bottom: 0px;
+#admin_container {
+  @include faux_columns_2($menu_width, transparent, white);
+  width: $admin_width;
+  margin: -5px auto 0px auto;
+  height: 100%;
+}
+#page_container {
+  @include box-sizing(border-box);
+  @include right-rounded($standard_rounding);
+  background-color: white;
+  padding: 1.5em 1em;
+  position: relative;
+  float: left;
+  width: $admin_width - $menu_width;
 }
 #content .field, #content .form-actions {
-  width: 100%;
   position: relative;
 }
 #dialog_container #content .field, .dialog_container .field {
   width: auto;
-  margin:5px 0;
+  margin: 5px 0;
 }
 input.widest, textarea.widest {
   width: 99%;
@@ -75,7 +86,7 @@ select.widest {
 }
 #actions {
   float: right;
-  width: 30.7%;
+  width: 30%;
   padding-left: 15px;
   padding-top: 0px;
   ul {
@@ -88,28 +99,12 @@ select.widest {
   }
   li {
     margin-bottom: 10px;
-    a {
-      background-color: #dbedff;
-      background-position: 12px;
-      background-repeat: no-repeat;
-      border: 1px solid #65C3F7;
-      display: block;
-      padding: 9px 12px 9px 36px;
-      &:hover {
-        background-color: #cae7fb;
-      }
-      &:active {
-        background-color: #22A7F2;
-        color: white;
-      }
-      img {
-        vertical-align: bottom;
-        border: 0;
-      }
-    }
-    &.selected a {
-      background-color: #22A7F2;
-      color: white;
+    background-color: $action-background-colour;
+    border: 1px solid $action-border-colour;
+    padding: 9px;
+    display: block;
+    &:empty {
+      display: none
     }
   }
 }
@@ -120,17 +115,9 @@ hr {
   border: 0;
   border-top: 1px solid #484743;
 }
-.actions {
-  img {
-    border: none;
-  }
-  a, a:hover {
-  border: none;
-  text-decoration: none;
-  }
-}
+
 .errorExplanation {
-  background: 7px 10px no-repeat image_url('refinery/icons/cancel.png') #FFB1B1;
+  background-color: #FFB1B1;
   padding: 0px 5px 5px 30px;
   font-weight: bold;
   margin-top: 5px;
@@ -149,7 +136,7 @@ hr {
   border: 1px solid red !important;
   background-color: #FFECF0 !important;
 }
-.fieldWithErrors iframe, .fieldWithErrors .wym_box {
+.fieldWithErrors iframe, .fieldWithErrors .visual_editor_box {
   border-color: red !important;
 }
 #message, .flash {
@@ -160,7 +147,7 @@ hr {
 .flash_notice, .flash_message {
   border: 1px solid #00A017;
   color: #00A017;
-  background: 7px 7px no-repeat image_url('refinery/icons/accept.png') #E0F5E0;
+  @include icon('check-circle', green)
 }
 .flash_notice, .flash_notice * {
   color: #00A017;
@@ -168,10 +155,11 @@ hr {
 .flash_error, .flash_alert {
   border: 1px solid #A00027;
   color: #A00027;
-  background: 7px 7px no-repeat image_url('refinery/icons/cancel.png') #FFB1B1;
+  @include icon('question-circle', red)
 }
 .flash.flash_notice #flash_close, .flash.flash_error #flash_close, .flash.flash_alert #flash_close {
   text-transform: lowercase;
+  @include icon('times-circle', $icon_done_colour, 1.2em)
 }
 .flash.flash_message {
   background: #E0F5E0;
@@ -194,6 +182,7 @@ hr {
 .flash.flash_alert a, .flash.flash_alert a:hover {
   display: none;
 }
+
 noscript .flash.flash_error a, noscript .flash.flash_error a:hover,
 noscript .flash.flash_alert a, noscript .flash.flash_alert a:hover {
   display: inline;
@@ -204,18 +193,8 @@ noscript .flash.flash_alert a, noscript .flash.flash_alert a:hover {
   right: 9px;
   top: 7px;
 }
-.flash.flash_message a#flash_close {
-  top: 21px;
-}
-a {
-  color: #41403C;
-  text-decoration: none;
-}
-a:hover {
-  color: #000;
-  border-bottom: 1px solid #727272;
-}
-#content .wym_box a, #content .ui-tabs a {
+
+#content .visual_editor_box a, #content .ui-tabs a {
   border-bottom: 0px none;
 }
 .index #content, .splash #content {
@@ -228,6 +207,7 @@ a:hover {
     border-bottom: 1px dotted #727272;
     &.locale {
       border-bottom: 0;
+      display:inline;
     }
   }
   h1 {
@@ -265,10 +245,7 @@ a:hover {
 .less-important {
   color: #727272;
 }
-a#site_bar_refinery_cms_logo {
-  left: 448px;
-}
-#content, #page_container {
+#content {
   background-color: white;
 }
 header, footer, nav {
@@ -280,15 +257,10 @@ header, footer, nav {
   font-size: 20px;
   line-height:22px
 }
-body.login {
-  #site_bar_content {
-    width: 650px;
-    a#site_bar_refinery_cms_logo {
-      left: 247px;
-    }
-  }
+#login_container {
   #page_container {
-    width: 620px;
+    background: transparent;
+    width: 100%;
     div.remember_me label, label.inline {
       display: inline;
     }
@@ -306,16 +278,17 @@ body.login {
   }
   header {
     background: #eaeaea;
-    width: 620px;
-    padding: 0px 15px 1em;
     height: auto;
+    float: none;
+    width: 100%;
+    @include top-rounded($standard_rounding);
     h1 {
       color: #41403c;
       vertical-align: middle;
       text-align: center;
       font-weight: bold;
       font-size: 18px;
-      padding-bottom: 0px;
+      padding-bottom: 15px;
       line-height: 30px;
       padding-top: 15px;
     }
@@ -364,40 +337,20 @@ div.field.checkbox_access {
     font-weight: normal;
   }
 }
-#menu, header .jcarousel-container {
+#menu, {
   display: block;
-  margin: 0px;
+  margin: 45px 0px 0px 0px;
   padding: 0px;
   position: absolute;
-  bottom: -1px;
-  left: 0px;
-  right: 0px;
   background: transparent;
 }
 header {
-  height: 60px;
-  position: relative;
+  float: left;
   margin-bottom: 0px;
+  width: $menu_width;
   a, a:hover {
     border-bottom: 0px none;
   }
-  .jcarousel-container {
-    position: absolute !important;
-    .jcarousel-prev, .jcarousel-next {
-      position: absolute;
-      top: 13px;
-      cursor: pointer;
-    }
-    .jcarousel-prev {
-      left: -20px;
-    }
-    .jcarousel-next {
-      right: -20px;
-    }
-    .jcarousel-prev-disabled, .jcarousel-next-disabled {
-      display: none !important;
-    }
-  }
   #logo {
     position: absolute;
     right: 20px;
@@ -419,6 +372,8 @@ header {
   }
 }
 #menu {
+  display: block;
+  position: relative;
   &.ui-sortable a {
     cursor: move;
   }
@@ -426,35 +381,42 @@ header {
     cursor: pointer;
   }
   a {
+    @include box-sizing(border-box);
     display: block;
-    padding: 7px 13px;
-    font-size: 13px;
-    background: image_url('refinery/nav_inactive_background.png') transparent repeat;
-    margin-top:4px;
-    color: white;
+    padding: 8px 16px;
+    font-size: 14px;
+    background-color: rgba(233, 233, 233, 1);
+    margin-bottom: 1px;
+    color: rgba(7, 112, 173, 1);
     font-weight: normal;
-    float: left;
-    margin-right: 2px;
     position: relative;
     &.active, &:hover, &:focus {
-      background-color: white;
-      color: #ff5500;
+      background-color: rgba(37, 169, 244, 1);
+      color: white;
     }
     &.active {
-      padding: 9px 13px;
-      margin-top: 0px;
+      margin-left: -0.5em;
+      font-weight: bold;
     }
   }
+
+  a#menu_reorder,
+  a#menu_reorder_done {
+    height: 14px;
+    width: 14px;
+    margin-bottom: 0;
+    padding: 6px;
+    cursor: pointer;
+    vertical-align: middle;
+    text-align: center;
+    float: right;
+    @include box-sizing(content-box);
+  }
+  a#menu_reorder_done {
+    background: white;
+  }
 }
-#menu a#menu_reorder, header #menu a#menu_reorder_done {
-  height: 14px;
-  width: 14px;
-  margin-top: 11px;
-  padding: 6px;
-  cursor: pointer;
-  vertical-align: middle;
-  text-align: center;
-}
+
 pre {
   margin: 0;
   padding: 0;
@@ -473,22 +435,25 @@ pre {
 .filter {
   float: right;
 }
-#records > ul, #records > #recent_activity > ul, #records > #recent_inquiries > ul,
-  #records .pagination_container > ul, #records .pagination_frame > ul {
-  margin-left: 0;
-  padding-left: 0;
-}
-#records > ul li, #records > #recent_activity > ul li, #records > #recent_inquiries > ul li,
-  #records .pagination_container > ul li, #records .pagination_frame > ul {
-  list-style: none;
-  padding: 0px 5px;
-  vertical-align: top;
-  margin-bottom: 2px;
-  line-height: 35px;
-  position: relative;
-}
-#records > #recent_activity > ul li, #records > #recent_inquiries > ul li {
-  max-height: 35px;
+#records {
+  > ul, > #recent_activity > ul, > #recent_inquiries > ul,
+  .pagination_container > ul, .pagination_frame > ul {
+    margin-left: 0;
+    margin-top: 0;
+    padding-left: 0;
+  }
+  > ul li, > #recent_activity > ul li, > #recent_inquiries > ul li,
+  .pagination_container > ul li, .pagination_frame > ul {
+    list-style: none;
+    padding: 0px 5px;
+    vertical-align: top;
+    margin-bottom: 2px;
+    line-height: 35px;
+    position: relative;
+  }
+  > #recent_activity > ul li, > #recent_inquiries > ul li {
+    max-height: 35px;
+  }
 }
 #recent_activity li a, #recent_inquiries li a {
   overflow: hidden;
@@ -497,8 +462,10 @@ pre {
   -ms-text-overflow: ellipsis;
   text-overflow: ellipsis;
 }
-#content #records > ul li .actions a, #content #records .pagination_container > ul li .actions a {
-  line-height: 29px;
+#content #records {
+  > ul li .actions a, .pagination_container > ul li .actions a {
+    line-height: 29px;
+  }
 }
 #records {
   ul {
@@ -602,16 +569,18 @@ pre {
     padding: 0px 6px;
   }
 }
-.pagination .disabled {
-  color: #A8B9C1;
-}
-.pagination a, #content .pagination a, .pagination .current, .disabled, .pagination em  {
-  padding: 7px;
-  line-height: 20px;
-  border-bottom: 0px none;
-}
-.pagination .current, .pagination a:hover, .pagination em {
-  background: #A8B9C1;
+.pagination {
+  .disabled {
+    color: #A8B9C1;
+  }
+  a, #content a, .current, .disabled, em  {
+    padding: 7px;
+    line-height: 20px;
+    border-bottom: 0px none;
+  }
+  .current, a:hover, em {
+    background: #A8B9C1;
+  }
 }
 #dialog-form-actions .pagination {
   margin: -4px 6px -4px 0px;
@@ -677,38 +646,49 @@ label.stripped {
 .record .title span {
   line-height: 30px;
 }
+
 #records.files .record .title, #dialog_main #resource_file_area .pages_list ul li a.page_link {
   display:inline-block;
   padding-left:24px;
   min-height:16px;
   background-repeat:no-repeat;
   background-position:left;
-  background-image: image_url('refinery/icons/folder_page_white.png');
+  @include icon('file-o', blue)
 }
 #dialog_main #resource_file_area .pages_list ul li a.page_link{
   background-position:5px center;
   display:block;
 }
 #records.files .record .title.pdf, #dialog_main #resource_file_area .pages_list ul li a.page_link.pdf {
-	background-image: image_url('refinery/icons/pdf.png');
-}
-#records.files .record .title.jpg, #records.files .record .title.gif, #records.files .record .title.jpeg, #records.files .record .title.png, #records.files .record .title.tiff, #dialog_main #resource_file_area .pages_list ul li a.page_link.jpg, #dialog_main #resource_file_area .pages_list ul li a.page_link.jpeg, #dialog_main #resource_file_area .pages_list ul li a.page_link.gif, #dialog_main #resource_file_area .pages_list ul li a.page_link.png, #dialog_main #resource_file_area .pages_list ul li a.page_link.tiff {
-	background-image: image_url('refinery/icons/img.png');
+  @include icon('file-pdf-o')
+}
+#records.files .record .title.jpg,
+#records.files .record .title.gif,
+#records.files .record .title.jpeg,
+#records.files .record .title.png,
+#records.files .record .title.tiff,
+#dialog_main #resource_file_area .pages_list ul li a.page_link.jpg,
+#dialog_main #resource_file_area .pages_list ul li a.page_link.jpeg,
+#dialog_main #resource_file_area .pages_list ul li a.page_link.gif,
+#dialog_main #resource_file_area .pages_list ul li a.page_link.png,
+#dialog_main #resource_file_area .pages_list ul li a.page_link.tiff {
+  @include icon('file-image-o');
 }
+
 #records.files .record .title.doc, #records.files .record .title.pages, #records.files .record .title.docx, #dialog_main #resource_file_area .pages_list ul li a.page_link.doc, #dialog_main #resource_file_area .pages_list ul li a.page_link.docx, #dialog_main #resource_file_area .pages_list ul li a.page_link.pages {
-	background-image: image_url('refinery/icons/doc.png');
+  @include icon('file-word-o');
 }
 #records.files .record .title.ppt, #records.files .record .title.keynote, #dialog_main #resource_file_area .pages_list ul li a.page_link.ppt, #dialog_main #resource_file_area .pages_list ul li a.page_link.keynote {
-	background-image: image_url('refinery/icons/ppt.png');
+  @include icon('file-powerpoint-o');
 }
 #records.files .record .title.xls, #records.files .record .title.numbers, #dialog_main #resource_file_area .pages_list ul li a.page_link.xls, #dialog_main #resource_file_area .pages_list ul li a.page_link.numbers {
-	background-image: image_url('refinery/icons/xls.png');
+  @include icon('file-excel-o');
 }
 #records.files .record .title.zip, #records.files .record .title.rar, #dialog_main #resource_file_area .pages_list ul li a.page_link.zip, #dialog_main #resource_file_area .pages_list ul li a.page_link.rar {
-	background-image: image_url('refinery/icons/zip.png');
+  @include icon('file-zip-o');
 }
 #records.files .record .title.mp3, #records.files .record .title.wav, #records.files .record .title.aiff, #records.files .record .title.m4a, #dialog_main #resource_file_area .pages_list ul li a.page_link.mp3, #dialog_main #resource_file_area .pages_list ul li a.page_link.wav, #dialog_main #resource_file_area .pages_list ul li a.page_link.aiff, #dialog_main #resource_file_area .pages_list ul li a.page_link.m4a {
-  background-image: image_url('refinery/icons/music.png');
+  @include icon('file-audio-o');
 }
 #records .actions {
   position: absolute;
@@ -749,40 +729,30 @@ label.stripped {
 #records.tree .actions a img {
   padding-top: 4px;
 }
-#records.tree li span.icon {
+#records.tree li span.item {
   display: block;
   float: left;
   width: 16px;
   height: 16px;
   margin: 3px 3px 0 0;
-  background: image_url('refinery/icons/page.png') center center no-repeat;
+  @include icon('file-o', $icon_page_colour);
 
   &.toggle {
     cursor: pointer;
-    background-image: image_url('refinery/icons/folder.png');
+    @include icon('folder',$icon_folder_colour);
   }
   &.toggle.expanded {
-    background-image: image_url('refinery/icons/folder_open.png');
+    @include icon('folder-open',$icon_folder_colour);
   }
 }
 #records.tree li.loading > div > span.icon {
-  background-image: image_url('refinery/icons/ajax-loader.gif') !important;
+  @include icon('spinner');
 }
 #image_grid .actions a img {
   padding: 4px 4px 1px 4px;
   vertical-align: top;
 }
-.actions a:hover {
-  color: #E6E5DC;
-  background: #3F3E3A;
-}
-.actions a.cancel {
-  color: #AF0027;
-}
-.actions a.cancel:hover {
-  color: white;
-  background: #AF0027;
-}
+
 .actions a.reorder_anchor:hover {
   background: inherit !important;
   cursor: move;
@@ -825,17 +795,14 @@ label.stripped {
 body.dialog {
   background: #FFF;
 }
-body.dialog, body.wym_dialog {
+body.dialog, body.visual_editor_dialog {
   text-align: left;
 }
-#wym_hide_fields {
-  display: none;
-}
 body.dialog form {
   width: 100% !important;
 }
-.wym_dialog_table {
-	height: 250px;
+.visual_editor_dialog_table {
+  height: 250px;
 }
 .dialog {
   #dialog_main {
@@ -930,7 +897,7 @@ body.dialog form {
 #upload_image_area, #upload_resource_area {
   padding: 12px;
 }
-.wym_dialog #page {
+.visual_editor_dialog #page {
   width: 940px;
   padding: 6px;
 }
@@ -986,7 +953,7 @@ body.dialog form {
   .pages_list .linked a, .pages_list .linked a:hover {
     border: 1px solid #00A017;
     color: #00A017;
-    background: 7px 7px no-repeat image_url('refinery/icons/accept.png') #E0F5E0;
+    @include icon('check-circle', green);
   }
   .pages_list .linked a em {
     color: #00A017;
@@ -1010,32 +977,28 @@ body.dialog form {
 ul#menu.reordering_menu li a {
   cursor: move;
 }
-#site_bar {
-  background: #22a7f2;
-  border-bottom: 0px none;
-}
 #search {
   border: 1px solid #b3b3b3;
   line-height: 18px;
   padding: 2px;
   font-size: 16px;
-  width: 180px;
+  width: 10em;
 }
 .cancel-search {
   float: right;
 }
 .pt-BR #search {
-  width: 187px;
+  width: 107px;
 }
 .en #search {
-  width: 210px;
+  width: 130px;
 }
 .search_form {
   position: relative;
   .button, .button-wrapper {
     position: absolute;
     right: 0px;
-    top: 0px;
+    top: 2px;
   }
 }
 form input[type=submit]:hover {
@@ -1062,39 +1025,24 @@ a:focus {
 a img {
   border: 0px none;
 }
-/* icons */
-.add_icon             { background-image: image_url('refinery/icons/add.png'); }
-.delete_icon          { background-image: image_url('refinery/icons/delete.png'); }
-.edit_icon            { background-image: image_url('refinery/icons/application_edit.png'); }
-.reorder_icon         { background-image: image_url('refinery/icons/arrow_switch.png'); }
-.reorder_icon.loading { background-image:image_url('refinery/icons/ajax-loader.gif'); }
-.user_comment_icon    { background-image: image_url('refinery/icons/user_comment.png'); }
-.edit_email_icon      { background-image: image_url('refinery/icons/email_edit.png'); }
-.spam_icon            { background-image: image_url('refinery/icons/bin.png'); }
-.spam_empty_icon      { background-image: image_url('refinery/icons/bin_closed.png'); }
-.email_icon           { background-image: image_url('refinery/icons/email.png'); }
-.back_icon            { background-image: image_url('refinery/icons/arrow_left.png'); }
-.go_icon              { background-image: image_url('refinery/icons/application_go.png'); }
-.success_icon         { background-image: image_url('refinery/icons/tick.png'); padding: 0px 8px; }
-.failure_icon         { background-image: image_url('refinery/icons/cross.png'); padding: 0px 8px; }
+
 /* page parts */
 ul#page_parts {
   float: left;
   width: 92%;
 }
 ul#page_parts, ul#page_parts_controls {
-  margin: 20px 0 0 0;
+  margin: 0;
   padding: 0;
 }
 ul#page_parts_controls {
   float: right;
-  width: 7%;
-  margin-right: 3px;
+  margin: 20px 3px 0 0;
 }
 ul#page_parts_controls li {
   list-style: none;
   float: right;
-  margin: 12px 3px 0px 3px;
+  margin: 0 3px;
 }
 ul#page_parts_controls li a {
   border: 0px none;
@@ -1113,14 +1061,7 @@ ul#page_parts_controls img {
 #page_part_editors {
   clear:left;
 }
-a#toggle_advanced_options {
-	background: image_url('refinery/icons/page_white_gear.png') no-repeat 0px 3px;
-	padding: 5px 5px 5px 22px;
-	border-bottom: none;
-}
-a#toggle_advanced_options:hover {
-	border-bottom:1px dotted #727272;
-}
+
 /* dialog stuff */
 #dialog_frame {
   width:952px;
@@ -1128,15 +1069,11 @@ a#toggle_advanced_options:hover {
   padding: 0px;
   border: 0px solid #F2F1ED;
 }
-.wym_hideables {
+.visual_editor_hideables {
   display: none;
 }
 #content .form-actions, .wym_dialog .form-actions, .ui-dialog .form-actions {
-  position: relative;
-  background-color: #F2F2F2;
-  border: 1px solid #CCCCCC;
-  margin-top: 10px;
-  height: 45px;
+  @include form-actions;
 }
 .dialog form {
   margin-bottom: 45px;
@@ -1144,19 +1081,19 @@ a#toggle_advanced_options:hover {
 .dialog .dialog_area > div > .field label:first-child, .dialog .dialog_area > div > label:first-child {
   margin-top: 0px;
 }
-.wym_dialog .form-actions, #content.form-actions.dialog-form-actions, .ui-dialog .form-actions {
+.visual_editor_dialog .form-actions, #content.form-actions.dialog-form-actions, .ui-dialog .form-actions {
   margin-top: 16px;
 }
 #content .form-actions .form-actions-left, #content .form-actions .form-actions-right,
-  .wym_dialog .form-actions .form-actions-left, .wym_dialog .form-actions .form-actions-right,
+  .visual_editor_dialog .form-actions .form-actions-left, .visual_editor_dialog .form-actions .form-actions-right,
   .ui-dialog .form-actions .form-actions-left, .ui-dialog .form-actions .form-actions-right {
   position: absolute;
   top: 10px;
 }
-#content .form-actions .form-actions-left, .wym_dialog .form-actions .form-actions-left, .ui-dialog .form-actions .form-actions-left {
+#content .form-actions .form-actions-left, .visual_editor_dialog .form-actions .form-actions-left, .ui-dialog .form-actions .form-actions-left {
   left: 10px;
 }
-#content .form-actions .form-actions-right, .wym_dialog .form-actions .form-actions-right, .ui-dialog .form-actions .form-actions-right {
+#content .form-actions .form-actions-right, .visual_editor_dialog .form-actions .form-actions-right, .ui-dialog .form-actions .form-actions-right {
   right: 10px;
 }
 #content .form-actions .save-loader {
@@ -1164,7 +1101,7 @@ a#toggle_advanced_options:hover {
   right: -24px;
   top: 4px;
 }
-.wym_dialog .form-actions, .ui-dialog .form-actions {
+.visual_editor_dialog .form-actions, .ui-dialog .form-actions {
   border: 0px none;
   border-top: 1px solid #E8E8E8;
 }
@@ -1197,6 +1134,7 @@ body.dialog #content .search_form {
   margin: 0px 10px;
 }
 #dialog_container, .dialog_container {
+  margin: 0px;
   padding: 12px;
 }
 ul#image_grid, .pagination_container > ul#image_grid {
@@ -1204,9 +1142,6 @@ ul#image_grid, .pagination_container > ul#image_grid {
   padding: 0px;
   margin: 10px 0px 15px 0px;
 }
-.pagination_container > ul#image_grid.pagination_frame {
-  top: 38px;
-}
 ul#image_grid li, .pagination_container > ul#image_grid li {
   position: relative;
   float: left;
@@ -1298,10 +1233,10 @@ ul.checkboxes li {
 .tooltip, .tooltip * {
   color: white;
 }
-.wym_dialog_paste .field textarea {
+.visual_editor_dialog_paste .field textarea {
   width: 98%;
 }
-.ui-dialog .wym_dialog_paste .field, .ui-dialog .wym_dialog_paste .field textarea {
+.ui-dialog .visual_editor_dialog_paste .field, .ui-dialog .visual_editor_dialog_paste .field textarea {
   margin: 0px 0px 45px 0px;
   height: 300px;
 }
@@ -1311,8 +1246,8 @@ input.button, a.button, #content a.button, span.button-wrapper, span.button-wrap
   color: white;
   padding: 0px 14px 0px 14px;
   font-size: 14px;
-  line-height: 25px;
-  height: 25px;
+  line-height: 24px;
+  height: 24px;
   display: inline-block;
   border: 0px none;
   margin-top: 0px;
@@ -1320,10 +1255,10 @@ input.button, a.button, #content a.button, span.button-wrapper, span.button-wrap
 }
 /* for those pesky IE browsers */
 span.button-wrapper {
-	padding: 0px;
+  padding: 0px;
 }
 span.button-wrapper input {
-	display: inherit;
+  display: inherit;
 }
 /* fixes firefox display */
 input.button {
@@ -1344,7 +1279,7 @@ input.button:active, a.button:active, #content a.button:active, span.button-wrap
 input.button.close_dialog:active, a.button.close_dialog:active, #content a.button.close_dialog:active, span.button-wrapper.close_dialog:active,  span.button-wrapper.close_dialog:active input {
   background: #808080;
 }
-.wym_dialog a.button.wym_cancel.close_dialog {
+.visual_editor_dialog a.button.visual_editor_cancel.close_dialog {
   margin-left: 6px;
 }
 #content a.button.close_dialog:active {
@@ -1367,6 +1302,9 @@ input.button.close_dialog:active, a.button.close_dialog:active, #content a.butto
   line-height: 20px;
 }
 /* ## Advanced Page Options --------------------------------------------- */
+#more_options_field {
+  span#draft_field {float: right;}
+}
 #more_options{
   overflow:hidden;
 }
@@ -1417,34 +1355,21 @@ input.button.close_dialog:active, a.button.close_dialog:active, #content a.butto
 #more_options_field {
   position: relative;
 }
-#draft_field {
-	position: absolute;
-	right: 0px;
-	top: 0px;
-}
+
 .nothing_selected {
-  border-bottom: 1px dotted #727272;
   width: auto;
   margin-bottom: 12px;
   display: inline-block;
 }
-.nothing_selected:hover {
-  border-bottom: 1px solid #727272;
-}
 #upgrade_wrapper li a {
   line-height: 20px;
 }
-#current_locale li a {
-  position: relative;
-}
-#current_locale li a span {
-  position: absolute;
-  right: 9px;
-  border-bottom: 1px dotted #727272;
-}
-#other_locales li:first-child {
-  margin-top: 0px;
+/* resource-picker */
+#resource_actions {
+  float: right;
+  margin-right: 20px;
 }
+
 /* Locale picker */
 #switch_locale_picker {
   margin: 0px;
@@ -1452,55 +1377,129 @@ input.button.close_dialog:active, a.button.close_dialog:active, #content a.butto
   li {
     float: left;
     padding: 0px;
-    margin: 0px 12px 0px 0px;
+    margin: 0;
     list-style: none;
     a {
-      border-bottom: 0px none;
-      img {
-        border-width: 4px;
-        border-style: solid;
-        border-color: transparent;
-        display: block;
+      background-color: #cdcdcd;
+      background-position: 12px;
+      background-repeat: no-repeat;
+      border-bottom: 0;
+      border-right: solid 1px white;
+      margin-bottom: 1px;
+      display: block;
+      padding: 7px 3px 3px 3px;
+      line-height: 0;
+      &:hover {
+        background-color: #cae7fb;
+      }
+      &:active {
+        background-color: #22A7F2;
       }
     }
-    &.selected a img {
-      border-color: #22A7F2;
+    &:first-child a {
+      border-radius-left: 5px;
+      -moz-border-radius-topleft: 5px;
+      -moz-border-radius-bottomleft: 5px;
+      -webkit-border-top-left-radius: 5px;
+      -webkit-border-bottom-left-radius: 5px;
+    }
+    &:last-child a {
+      border-radius-right: 5px;
+      -moz-border-radius-topright: 5px;
+      -moz-border-radius-bottomright: 5px;
+      -webkit-border-top-right-radius: 5px;
+      -webkit-border-bottom-right-radius: 5px;
+    }
+    &.selected a {
+      background-color: #65c3f7;
     }
   }
 }
+#locale_picker {
+  li {
+    list-style: none;
+    margin: 0;
+    a {
+      background-color: #cdcdcd;
+      background-position: 12px;
+      background-repeat: no-repeat;
+      border: 0;
+      border-bottom: solid 1px white;
+      display: block;
+      padding: 3px 14px 3px 9px;
+      position: relative;
+      &:hover {
+        background-color: #cae7fb;
+      }
+      &:active {
+        background-color: #22A7F2;
+      }
+      span.action {
+        border-bottom: 1px dotted #727272;
+        position: absolute;
+        right: 9px;
+        top: 5px;
+      }
+    }
+    &:first-child a {
+      border-radius-top: 5px;
+      -moz-border-radius-topleft: 5px;
+      -moz-border-radius-topright: 5px;
+      -webkit-border-top-left-radius: 5px;
+      -webkit-border-top-right-radius: 5px;
+    }
+    &:last-child a {
+      border-radius-bottom: 5px;
+      -moz-border-radius-bottomleft: 5px;
+      -moz-border-radius-bottomright: 5px;
+      -webkit-border-bottom-left-radius: 5px;
+      -webkit-border-bottom-right-radius: 5px;
+    }
+  }
+  #current_locale,
+  #other_locales {
+    margin: 0;
+  }
+  #current_locale li {
+    a {
+      background-color: #65c3f7;
+    }
+  }
+}
+.locale_marker {
+  font-size:8px;
+  display: inline;
+  .fa-stack .fa-comment {color: $icon_locale_colour; font-size: 24px;}
+}
+
 #content #records .title .preview a.locale {
   border-bottom: 0px none;
 }
 /* AJAX pagination */
 .pagination_container {
   position: relative;
-  overflow: hidden;
-  min-height: 600px;
 }
 .pagination_frame {
   padding: 0;
   width: 100%;
-  height: auto;
-  position: absolute;
-  top: 28px;
   right: auto;
- 	-moz-transition: all 0.3s ease-in-out;
-	-o-transition: all 0.3s ease-in-out;
-	-webkit-transition: all 0.3s ease-in-out;
-	transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 .pagination_container > div.pagination_frame {
   top: 40px;
 }
 .pagination_frame.frame_left {
-  left: -1000px;
+  left: -3000px;
 }
 .pagination_frame.frame_right {
-  left: 1000px;
+  left: 3000px;
   -moz-transition: all 0.3s ease-in-out;
-	-o-transition: all 0.3s ease-in-out;
-	-webkit-transition: all 0.3s ease-in-out;
-	transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 .pagination_frame.frame_center {
   left: 0;
@@ -1517,31 +1516,6 @@ a.information:hover {
   display: inline-block;
   width: auto;
 }
-/* cornering */
-.button, #editor_switch a, #editor_switch span {
-  @include rounded(6px);
-}
-#page_container, .wym_box {
-  @include bottom-rounded(5px);
-}
-.wym_iframe iframe {
-  @include bottom-rounded(2px);
-}
-.form-actions {
-  @include rounded(5px);
-}
-.form-actions.form-actions-dialog {
-  @include rounded(0px);
-}
-#menu > a {
-  @include top-rounded(5px);
-}
-.ui-tabs .ui-state-default a {
-  @include top-rounded(5px);
-}
-.tooltip, .tooltip span {
-  @include rounded(6px);
-}
 .label {
   padding: 1px 3px 2px;
   font-size: 9.75px;
@@ -1550,9 +1524,6 @@ a.information:hover {
   text-transform: uppercase;
   white-space: nowrap;
   background-color: #bfbfbf;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
 }
 .label.important {
   background-color: #c43c35;
@@ -1575,9 +1546,6 @@ a.information:hover {
   text-transform: uppercase;
   white-space: nowrap;
   background-color: #bfbfbf;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  border-radius: 3px;
 }
 .label.important {
   background-color: #c43c35;
@@ -1613,10 +1581,10 @@ a.information:hover {
   padding-bottom: 6px;
 }
 .ie7 .pt-BR #search {
-  width: 177px;
+  width: 97px;
 }
 .ie7 .en #search {
-  width: 200px;
+  width: 170px;
 }
 /* IE 8 */
 .ie8 body.login .field input.larger, .ie8 body.login .field input.larger:focus {