From 98daeb6a2125744535d00f46c354a110af1a4210 Mon Sep 17 00:00:00 2001
From: Dave Cranwell <david@torchbox.com>
Date: Tue, 11 Feb 2014 17:18:59 +0000
Subject: [PATCH 01/13] wholesale move from less to scss. some files stll need
 checking

---
 .../static/wagtailadmin/css/grid.less         |  80 -------
 .../static/wagtailadmin/css/variables.less    |  53 -----
 .../components/dropdowns.scss}                |  38 ++--
 .../components/explorer.scss}                 |  18 +-
 .../components/formatters.scss}               |  44 ++--
 .../forms.less => scss/components/forms.scss} | 124 +++++------
 .../icons.less => scss/components/icons.scss} |  16 +-
 .../components/listing.scss}                  |  94 ++++-----
 .../components/messages.scss}                 |  16 +-
 .../components/modals.scss}                   |  24 +--
 .../tabs.less => scss/components/tabs.scss}   |  22 +-
 .../{css/core.less => scss/core.scss}         | 196 +++++++++---------
 .../{css => scss}/fonts/wagtail.eot           | Bin
 .../{css => scss}/fonts/wagtail.svg           |   0
 .../{css => scss}/fonts/wagtail.ttf           | Bin
 .../{css => scss}/fonts/wagtail.woff          | Bin
 .../static/wagtailadmin/scss/grid.scss        |  79 +++++++
 .../home.less => scss/layouts/home.scss}      |  18 +-
 .../login.less => scss/layouts/login.scss}    |  40 ++--
 .../layouts/page-editor.scss}                 |  49 ++---
 .../{css/mixins.less => scss/mixins.scss}     |  52 ++---
 .../wagtailadmin/{css => scss}/normalize.css  |   0
 .../panels/rich-text.scss}                    |  10 +-
 .../static/wagtailadmin/scss/variables.scss   |  53 +++++
 .../jquery-ui/images/animated-overlay.gif     | Bin
 .../images/ui-bg_flat_0_aaaaaa_40x100.png     | Bin
 .../images/ui-bg_flat_100_246060_40x100.png   | Bin
 .../images/ui-bg_flat_100_49c0c1_40x100.png   | Bin
 .../images/ui-bg_flat_100_e8f8f9_40x100.png   | Bin
 .../images/ui-bg_flat_100_f7474e_40x100.png   | Bin
 .../images/ui-bg_flat_100_ffffff_40x100.png   | Bin
 .../images/ui-bg_flat_75_ffffff_40x100.png    | Bin
 .../images/ui-bg_glass_55_fbf9ee_1x400.png    | Bin
 .../images/ui-bg_glass_65_ffffff_1x400.png    | Bin
 .../images/ui-bg_glass_75_dadada_1x400.png    | Bin
 .../images/ui-bg_glass_75_e6e6e6_1x400.png    | Bin
 .../images/ui-bg_glass_95_fef1ec_1x400.png    | Bin
 .../ui-bg_highlight-soft_75_cccccc_1x100.png  | Bin
 .../images/ui-icons_222222_256x240.png        | Bin
 .../images/ui-icons_2e83ff_256x240.png        | Bin
 .../images/ui-icons_454545_256x240.png        | Bin
 .../images/ui-icons_49c0c1_256x240.png        | Bin
 .../images/ui-icons_888888_256x240.png        | Bin
 .../images/ui-icons_cd0a0a_256x240.png        | Bin
 .../images/ui-icons_ffffff_256x240.png        | Bin
 .../jquery-ui/jquery-ui-1.10.3.verdant.css    |   0
 .../vendor/jquery-ui/jquery-ui-smoothness.css |   0
 .../{css => scss}/vendor/jquery.tagit.css     |   0
 .../vendor/jquery.timepicker.css              |   0
 .../{css => scss}/vendor/tagit.ui-zendesk.css |   0
 .../{css => scss}/wagtail-userbar.css         |   0
 .../account/password_reset/complete.html      |   2 +-
 .../account/password_reset/confirm.html       |   2 +-
 .../account/password_reset/done.html          |   2 +-
 .../account/password_reset/form.html          |   2 +-
 .../templates/wagtailadmin/home.html          |   2 +-
 .../templates/wagtailadmin/login.html         |   2 +-
 .../wagtailadmin/pages/_editor_css.html       |   6 +-
 .../wagtailadmin/shared/tag_field_css.html    |   2 +-
 .../templates/wagtailadmin/skeleton.html      |   8 +-
 .../templates/wagtailredirects/edit.html      |   2 +-
 61 files changed, 528 insertions(+), 528 deletions(-)
 delete mode 100644 wagtail/wagtailadmin/static/wagtailadmin/css/grid.less
 delete mode 100644 wagtail/wagtailadmin/static/wagtailadmin/css/variables.less
 rename wagtail/wagtailadmin/static/wagtailadmin/{css/components/dropdowns.less => scss/components/dropdowns.scss} (81%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css/components/explorer.less => scss/components/explorer.scss} (98%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css/components/formatters.less => scss/components/formatters.scss} (76%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css/components/forms.less => scss/components/forms.scss} (82%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css/components/icons.less => scss/components/icons.scss} (89%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css/components/listing.less => scss/components/listing.scss} (79%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css/components/messages.less => scss/components/messages.scss} (69%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css/components/modals.less => scss/components/modals.scss} (76%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css/components/tabs.less => scss/components/tabs.scss} (69%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css/core.less => scss/core.scss} (79%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/fonts/wagtail.eot (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/fonts/wagtail.svg (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/fonts/wagtail.ttf (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/fonts/wagtail.woff (100%)
 create mode 100644 wagtail/wagtailadmin/static/wagtailadmin/scss/grid.scss
 rename wagtail/wagtailadmin/static/wagtailadmin/{css/layouts/home.less => scss/layouts/home.scss} (71%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css/layouts/login.less => scss/layouts/login.scss} (80%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css/layouts/page-editor.less => scss/layouts/page-editor.scss} (85%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css/mixins.less => scss/mixins.scss} (51%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/normalize.css (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css/panels/rich-text.less => scss/panels/rich-text.scss} (95%)
 create mode 100644 wagtail/wagtailadmin/static/wagtailadmin/scss/variables.scss
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/animated-overlay.gif (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/ui-bg_flat_0_aaaaaa_40x100.png (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/ui-bg_flat_100_246060_40x100.png (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/ui-bg_flat_100_49c0c1_40x100.png (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/ui-bg_flat_100_e8f8f9_40x100.png (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/ui-bg_flat_100_f7474e_40x100.png (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/ui-bg_flat_100_ffffff_40x100.png (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/ui-bg_flat_75_ffffff_40x100.png (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/ui-bg_glass_55_fbf9ee_1x400.png (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/ui-bg_glass_65_ffffff_1x400.png (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/ui-bg_glass_75_dadada_1x400.png (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/ui-bg_glass_95_fef1ec_1x400.png (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/ui-bg_highlight-soft_75_cccccc_1x100.png (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/ui-icons_222222_256x240.png (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/ui-icons_2e83ff_256x240.png (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/ui-icons_454545_256x240.png (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/ui-icons_49c0c1_256x240.png (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/ui-icons_888888_256x240.png (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/ui-icons_cd0a0a_256x240.png (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/images/ui-icons_ffffff_256x240.png (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery-ui/jquery-ui-smoothness.css (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery.tagit.css (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/jquery.timepicker.css (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/vendor/tagit.ui-zendesk.css (100%)
 rename wagtail/wagtailadmin/static/wagtailadmin/{css => scss}/wagtail-userbar.css (100%)

diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/grid.less b/wagtail/wagtailadmin/static/wagtailadmin/css/grid.less
deleted file mode 100644
index d955391c8..000000000
--- a/wagtail/wagtailadmin/static/wagtailadmin/css/grid.less
+++ /dev/null
@@ -1,80 +0,0 @@
-/* Utility variable — you should never need to modify this */
-@gridsystem_width: @grid-columns * 1px;
-@padding: @grid-gutter-width*0.5;
-@correction: 0.5 / @grid-max-width * 100 * 1%; // NOTE: Check this in IE
-
-/* Ensure grid columns are set to border-boxes. This is essential */
-.border-box(){
-    -webkit-box-sizing: border-box; 
-    -moz-box-sizing: border-box; 
-    box-sizing: border-box;
-}
-
-.content-box(){
-    -webkit-box-sizing: content-box;
-    -moz-box-sizing: content-box;
-    box-sizing: content-box;
-}
-
-/* Our row container */
-.row(@padding:0){
-    .clearfix();
-    .border-box();
-
-    display:block;
-    /*max-width: @grid-max-width; NO MAX WIDTH*/
-    margin-right: auto;
-    margin-left: auto;
-    padding-right: @padding;
-    padding-left: @padding;
-}
-
-.row-flush(){
-    margin-left:-@padding;
-    margin-right:-@padding;
-}
-
-/* Our column container */
-.column(@x, @padding:@padding, @grid-columns:@grid-columns){
-    .border-box();
-
-    display: inline;
-    float: left;
-    width: 100%*(@x / @grid-columns);
-    padding-right: @padding;
-    padding-left: @padding;
-}
-
-.table-column(@x, @padding:@padding, @grid-columns:@grid-columns){
-    .border-box();
-
-    width: 100%*(@x / @grid-columns);
-}
-
-/* Push adds left padding */
-.push(@offset:1, @grid-columns:@grid-columns) {
-    margin-left: 100%*(@offset / @grid-columns);
-}
-.push-padding(@offset:1, @grid-columns:@grid-columns) {
-    padding-left:100%*(@offset / @grid-columns);
-}
-
-/* Pull adds right padding */
-.pull(@offset:1, @grid-columns:@grid-columns) {
-    margin-right: 100%*(@offset / @grid-columns);
-}
-.pull-padding(@offset:1, @grid-columns:@grid-columns){
-    padding-right: 100%*(@offset / @grid-columns);
-}
-
-/* only used in places where padding not applied to same elements as row or row-flush 
- * most of the time this class should be applied directly to the html elements */
-.nice-padding(){
-    padding-left:20px;
-    padding-right:20px;
-
-    @media screen and (min-width: @breakpoint-mobile){
-        padding-left:50px;
-        padding-right:50px;
-    }
-}
\ No newline at end of file
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/variables.less b/wagtail/wagtailadmin/static/wagtailadmin/css/variables.less
deleted file mode 100644
index 638597bcb..000000000
--- a/wagtail/wagtailadmin/static/wagtailadmin/css/variables.less
+++ /dev/null
@@ -1,53 +0,0 @@
-/* paths */
-@static-root: "/static/wagtailadmin/images/";
-@css-root: "/static/wagtailadmin/css/";
-
-/* grid settings */
-@grid-columns: 12; 
-@grid-gutter-width: 3%;
-@grid-max-width: 1200px;
-@grid-content-indent:0.7;
-
-/* screen breakpoints */
-@breakpoint-mobile:50em; /* 800px */
-@breakpoint-desktop-small:56.25em; /* 900px */
-@breakpoint-desktop-large:75em; /* 1200px */
-@breakpoint-desktop-larger:100em; /* 1600px */
-
-/* colours */
-@color-teal: #43b1b0;
-@color-teal-darker: darken(@color-teal, 10%);
-@color-teal-dark: #246060;
-@color-red: #f7474e;
-@color-orange:#e9b04d;
-@color-green: #00FF00;
-
-/* darker to lighter */
-@color-grey-1: #333333;
-@color-grey-1-1: #404040;
-@color-grey-2: #666666;
-@color-grey-3: #d9d9d9;
-@color-grey-4: #e6e6e6;
-@color-grey-5: #fafafa;
-
-@color-thead-bg: @color-grey-5;
-@color-header-bg: @color-teal; // #ff6a58;
-@color-fieldset-hover: @color-grey-5;
-@color-input-border: @color-grey-3;
-@color-input-focus: #f4fcfc;
-@color-input-error-bg: #feedee;
-@color-button: @color-teal;
-@color-button-hover: @color-teal-darker;
-@color-button-yes: @color-green;
-@color-button-yes-hover: darken(@color-button-yes, 8%);
-@color-button-no: @color-red;
-@color-button-no-hover: darken(@color-button-no, 20%);
-@color-link: @color-teal;
-@color-link-hover: @color-teal-dark;
-
-@color-text-base: @color-grey-2;
-@color-text-input: @color-grey-1;
-
-/* misc sizing */
-@thumbnail-width:130px;
-@menu-width: 150px;
\ No newline at end of file
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/dropdowns.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/dropdowns.scss
similarity index 81%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/components/dropdowns.less
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/components/dropdowns.scss
index f409dd42e..4e3c16f7d 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/dropdowns.less
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/dropdowns.scss
@@ -1,14 +1,14 @@
 .dropdown{
     position:relative;
-    .clearfix();
+    @include clearfix();
 
     .dropdown-toggle{
         cursor:pointer;
     }
 
     ul{
-        .unlist();
-        background-color:@color-teal;
+        @include unlist();
+        background-color:$color-teal;
         position:absolute;
         overflow:hidden;
         top:100%;
@@ -37,7 +37,7 @@
             font-weight:normal;
 
             &:hover{
-                background-color:@color-teal-darker;
+                background-color:$color-teal-darker;
             }
             &.icon{
                 padding-right:5em;
@@ -73,7 +73,7 @@
     }
 
     &.open ul{
-        .box-shadow(0px 3px 3px 0 rgba(0,0,0,0.2));
+        @include box-shadow(0px 3px 3px 0 rgba(0,0,0,0.2));
         opacity:1;
         left:0;
         display:block;
@@ -90,14 +90,14 @@
 
 
     &.dropup ul{
-        .box-shadow(0px -3px 3px 0 rgba(0,0,0,0.2));
+        @include box-shadow(0px -3px 3px 0 rgba(0,0,0,0.2));
         top:auto;
         bottom:100%;
     }
 
     input[type=button], input[type=submit], button{
         padding:1em 0;
-        .border-radius(0);
+        @include border-radius(0);
         display:block;
         width:100%;
         text-align:left;
@@ -109,7 +109,7 @@
         float:left;
 
         &:hover{
-            background-color:@color-teal-darker;
+            background-color:$color-teal-darker;
         }
     }
 
@@ -126,11 +126,11 @@
         }
 
         &:hover{
-            background-color:@color-teal-darker;
+            background-color:$color-teal-darker;
         }
     }
     &.open > .button + .dropdown-toggle{
-        background-color:@color-teal-darker;
+        background-color:$color-teal-darker;
     }
 }
 
@@ -143,10 +143,10 @@
         }
       
         a{
-            color:@color-grey-2;
+            color:$color-grey-2;
 
             &:hover{
-                background-color:@color-grey-3;
+                background-color:$color-grey-3;
             }
         }
     }
@@ -160,7 +160,7 @@ h2 .dropdown{
 
     .dropdown-toggle{
         padding:0.5em 0;
-        border-right:1px solid @color-grey-3;
+        border-right:1px solid $color-grey-3;
 
         /* icon */
         &:before{
@@ -170,13 +170,13 @@ h2 .dropdown{
             text-align:left;
         }
         &:hover{
-            background-color:@color-teal;
+            background-color:$color-teal;
             border-color:transparent;
         }
     }
     &.open{
         .dropdown-toggle{
-            background-color:@color-teal;
+            background-color:$color-teal;
         }
 
         ul{
@@ -185,14 +185,14 @@ h2 .dropdown{
     }
 
     .dropdown-toggle:hover{
-        background-color:@color-grey-3;
+        background-color:$color-grey-3;
         &:before{
             color:white;
             opacity:1;
         }
     }
     &.open .dropdown-toggle:before{
-        background-color:@color-teal;
+        background-color:$color-teal;
         color:white;
         opacity:1;
     }
@@ -202,7 +202,7 @@ h2 .dropdown{
 
 footer .actions .dropdown-toggle{
     text-transform:uppercase;
-    background-color:@color-teal;
+    background-color:$color-teal;
     line-height:3em;
     color:white;
     padding-left:1em;
@@ -222,5 +222,5 @@ footer .actions .dropdown ul li{
 
 /* Transitions */
 .dropdown ul{
-    .transition(opacity 0.2s linear);
+    @include transition(opacity 0.2s linear);
 }
\ No newline at end of file
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/explorer.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/explorer.scss
similarity index 98%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/components/explorer.less
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/components/explorer.scss
index f182c5f8d..f18233829 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/explorer.less
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/explorer.scss
@@ -4,7 +4,7 @@ max z-index: unknown;
 */
 
 
-@explorer-z-index:500;
+$explorer-z-index:500;
 
 .explorer {
     pointer-events:none;
@@ -21,7 +21,7 @@ max z-index: unknown;
     perspective-origin: 50% 200%;
     
     ul {
-        background: @color-grey-1;
+        background: $color-grey-1;
         padding: 0;
         margin:0;
         list-style: none;
@@ -32,7 +32,7 @@ max z-index: unknown;
 
     li {
         position: relative;
-        border-top:1px solid @color-grey-1-1;
+        border-top:1px solid $color-grey-1-1;
 
         &:first-child{
             border-top:0;
@@ -57,7 +57,7 @@ max z-index: unknown;
         }
 
         &:hover{
-            background:@color-teal-dark;
+            background:$color-teal-dark;
             color:white;
         }
     }
@@ -69,14 +69,14 @@ max z-index: unknown;
 
     .children{
         position:absolute;
-        z-index:@explorer-z-index + 1;
+        z-index:$explorer-z-index + 1;
         right:0;
         top:0;
         width:4em;
         text-align:center;
         height:100%;
         color:white;
-        background-color:@color-grey-1;
+        background-color:$color-grey-1;
         cursor:pointer;
         border-left:1px solid rgba(255,255,255,0.2);
         
@@ -85,7 +85,7 @@ max z-index: unknown;
         }
 
         &:hover{
-            background:@color-teal-dark;
+            background:$color-teal-dark;
         }
     }
     .dl-subviewopen > .children,
@@ -918,8 +918,8 @@ max z-index: unknown;
 
 /* Transitions */ 
 .children{
-    .transition(all 0.2s linear);
+    @include transition(all 0.2s linear);
 }
 .dl-menu.dl-menu-toggle {
-    .transition(all 0.3s ease);
+    @include transition(all 0.3s ease);
 }
\ No newline at end of file
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/formatters.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss
similarity index 76%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/components/formatters.less
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss
index 6ac54a3ea..59770d30a 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/formatters.less
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss
@@ -1,6 +1,6 @@
 /* user avatars, with fallback to placeholder graphic if no gravatar exists */
 .avatar{
-    .border-radius(100%);
+    @include border-radius(100%);
     position:relative;
     display:inline-block;
     width:50px;
@@ -17,14 +17,14 @@
     img{
         z-index:2;
         position:relative;
-        .border-radius(100%);
+        @include border-radius(100%);
         border:0;
     }
 
     &:before{
-        .border-radius(100%);
-        color:@color-grey-3;
-        border: 2px solid @color-grey-3;
+        @include border-radius(100%);
+        color:$color-grey-3;
+        border: 2px solid $color-grey-3;
         text-align:center;
         display:block;
         width:42px;
@@ -36,8 +36,8 @@
         left:0;
     }
     &:hover:before{
-        color:@color-grey-3;
-        border-color:@color-grey-3;
+        color:$color-grey-3;
+        border-color:$color-grey-3;
     }
 
     &.small{
@@ -58,8 +58,8 @@
             border:0;
         }
         &:hover:before{
-            color:@color-grey-3;
-            border-color:@color-grey-3;
+            color:$color-grey-3;
+            border-color:$color-grey-3;
         }
     }
 }
@@ -103,10 +103,10 @@
 
 /* makes a link look like regular text */
 .nolink{
-    color:@color-text-base;
+    color:$color-text-base;
 
     &:hover{
-        color:@color-teal;
+        color:$color-teal;
     }
 }
 
@@ -114,38 +114,38 @@
 .status-tag{
     text-align:center;
     display:inline-block;
-    .border-radius(2px);
+    @include border-radius(2px);
     text-transform:uppercase;
     padding:0em 0.5em;
-    border:1px solid lighten(@color-grey-2,30%);
-    color:lighten(@color-grey-2,30%);
+    border:1px solid lighten($color-grey-2,30%);
+    color:lighten($color-grey-2,30%);
     -webkit-font-smoothing: auto;
     font-size:0.80em;
     margin:0 0.5em;
-    background:white url(~"@{static-root}bg-dark-diag.svg");
+    background:white url("#{$static-root}bg-dark-diag.svg");
     
     &.primary{
-        color:@color-grey-2;
-        border:1px solid @color-grey-2;
+        color:$color-grey-2;
+        border:1px solid $color-grey-2;
         background:white
     }
 
     a&:hover,
     a&.primary:hover{
-        border-color:@color-teal;
-        color:@color-teal;
+        border-color:$color-teal;
+        color:$color-teal;
     }
 }
 
 /* free tagging tags from taggit */
 .tag{
-    background-color:@color-teal;
+    background-color:$color-teal;
     padding-right:0.5em;
     padding:0.2em 0.5em;
     color:white;
     line-height:2em;
     white-space: nowrap;
-    .border-radius(2px);
+    @include border-radius(2px);
     
 
     &:before{
@@ -156,7 +156,7 @@
         padding-right:0.5em;
     }
     a&:hover{
-        background-color:@color-teal-darker;
+        background-color:$color-teal-darker;
         color:white;
     }
 
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/forms.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
similarity index 82%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/components/forms.less
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
index 5f51fd00d..416670c95 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/forms.less
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
@@ -7,7 +7,7 @@ form {
         padding:0;
     }
     li{
-        .row();
+        @include row();
     }
 }
 
@@ -18,7 +18,7 @@ fieldset{
 }
 
 legend{
-    .visuallyhidden();
+    @include visuallyhidden();
 }
 
 .fields li{
@@ -32,7 +32,7 @@ legend{
 
 label{
     font-weight:bold;
-    color:@color-grey-1;
+    color:$color-grey-1;
     font-size:1.1em;
     display:block;
     padding:0 0 0.8em 0;
@@ -45,15 +45,15 @@ label{
 }
 
 input, textarea, select, .richtext, .tagit{
-    .border-radius(6px);
-    .border-box();
+    @include border-radius(6px);
+    @include border-box();
     font-family:Open Sans,Arial,sans-serif;
     width:100%;
-    border:1px dashed @color-input-border;
+    border:1px dashed $color-input-border;
     padding:1.2em;
-    background-color:@color-fieldset-hover;
+    background-color:$color-fieldset-hover;
     -webkit-appearance: none;
-    color:@color-text-input;
+    color:$color-text-input;
     font-size:1.2em;
     font-weight:300;
     outline:none;
@@ -70,14 +70,14 @@ input, textarea, select, .richtext, .tagit{
         background-color:white;
     }
     &:focus{
-        border-color: darken(@color-input-focus, 40%);
+        border-color: darken($color-input-focus, 40%);
         outline:none;
-        background-color:@color-input-focus;
+        background-color:$color-input-focus;
     }
 }
 
 input[type=radio],input[type=checkbox]{
-    .border-radius(0);
+    @include border-radius(0);
     cursor:pointer;
     float:left;
     border:0;
@@ -91,7 +91,7 @@ input[type=radio]{
 }
 
 input[type=radio]:before{
-    .border-radius(100%);
+    @include border-radius(100%);
     font-family: wagtail;
     font-style: normal;
     text-align:center;
@@ -105,12 +105,12 @@ input[type=radio]:before{
     line-height: 1.1em;
     padding: 4px;
     background-color: white;
-    color:@color-grey-4;
-    border: 1px solid @color-grey-4;
+    color:$color-grey-4;
+    border: 1px solid $color-grey-4;
 }
 input[type=radio]:checked:before{
     content:"K";
-    color:@color-teal;
+    color:$color-teal;
 }
 
 input[type=checkbox]{
@@ -133,20 +133,20 @@ input[type=checkbox]:before{
     width:20px;
     height:20px;
     background-color:white;
-    border:1px solid @color-grey-4;
-    color:@color-grey-4;
+    border:1px solid $color-grey-4;
+    color:$color-grey-4;
 }
 input[type=checkbox]:checked:before{
-    color:@color-teal;
+    color:$color-teal;
 }
 
 /* Core button style */
 input[type=submit], input[type=reset], input[type=button], .button, button{
-    .border-radius(3px);
+    @include border-radius(3px);
     width:auto;
     padding:0.7em 1em;
-    background-color: @color-button;
-    border:1px solid @color-button;
+    background-color: $color-button;
+    border:1px solid $color-button;
     color:white;
     text-decoration:none;
     text-transform:uppercase;
@@ -168,8 +168,8 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
     }
 
     &.button-secondary{
-        border:1px solid @color-button;
-        color:@color-button;
+        border:1px solid $color-button;
+        color:$color-button;
         background-color:white;
     }
 
@@ -182,39 +182,39 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
     }
     
     &:hover{
-        background-color: @color-button-hover;
+        background-color: $color-button-hover;
         color:white;
         border-color:transparent;
     }
 
     &.yes{
-        background-color: @color-button-yes;
-        border:1px solid @color-button-yes;
+        background-color: $color-button-yes;
+        border:1px solid $color-button-yes;
 
         &.button-secondary{
-            border:1px solid @color-button-yes;
-            color:@color-button-yes;
+            border:1px solid $color-button-yes;
+            color:$color-button-yes;
             background-color:transparent;
         }
         &:hover{
             color:white;
             border-color:transparent;
-            background-color: @color-button-yes-hover;
+            background-color: $color-button-yes-hover;
         }
     }
     &.no, &.serious{
-        background-color: @color-button-no;
-        border:1px solid @color-button-no;
+        background-color: $color-button-no;
+        border:1px solid $color-button-no;
 
         &.button-secondary{
-            border:1px solid @color-button-no;
-            color:@color-button-no;
+            border:1px solid $color-button-no;
+            color:$color-button-no;
             background-color:transparent;
         }
         &:hover{
             color:white;
             border-color:transparent;
-            background-color: @color-button-no-hover;
+            background-color: $color-button-no-hover;
         }
     }  
 
@@ -256,7 +256,7 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
 }
 
 .multiple{
-    .transition(max-height 10s ease);
+    @include transition(max-height 10s ease);
     padding:0;
     max-height:10000px;
     max-width:1024px - 50px;
@@ -267,8 +267,8 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
         background-color:white;
         padding:1em 1.5em;
         margin-bottom:1em;
-        border:1px solid lighten(@color-grey-4, 3%); /* really trying to avoid creating more greys, but this one is better than grey 4 or 5 */
-        .border-radius(2px);
+        border:1px solid lighten($color-grey-4, 3%); /* really trying to avoid creating more greys, but this one is better than grey 4 or 5 */
+        @include border-radius(2px);
     }
 
     &.moving{
@@ -291,10 +291,10 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
         top:1em;
         color:white;
         overflow:hidden;
-        .border-radius(2px);
+        @include border-radius(2px);
         
         li{
-            background-color: @color-grey-2;
+            background-color: $color-grey-2;
             float:left;
             cursor:pointer;
             margin-right:1px;
@@ -312,14 +312,14 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
             line-height:2em;
         }
         .icon:hover{
-            background-color:@color-teal;
+            background-color:$color-teal;
 
             &:before{
                 color:white;
             }
         }
         .icon-bin:hover{
-            background-color:@color-red;
+            background-color:$color-red;
         }
         .disabled{
             display:none;
@@ -346,7 +346,7 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
     margin:0 0 0.5em 0;
 }
 .help{
-    color:@color-grey-2;
+    color:$color-grey-2;
 }
 
 /* permanently show checkbox/radio help as they have no focus state */
@@ -365,7 +365,7 @@ li.focused > .help{
 
 .required label:after{
     content:"*";
-    color:@color-red;
+    color:$color-red;
     font-weight:bold;
     display:inline-block;
     margin-left:0.5em;
@@ -375,12 +375,12 @@ li.focused > .help{
 
 .error-message{
     margin:0;
-    color:@color-red;
+    color:$color-red;
     clear:both;
 }
 .error input[type=text], .error input[type=email], .error input[type=tel], .error textarea, .error select, .error .tagit{
-    border-color:@color-red;
-    background-color:@color-input-error-bg;
+    border-color:$color-red;
+    background-color:$color-input-error-bg;
 }
 
 /* field sizing */
@@ -416,7 +416,7 @@ li.inline .field{
 
 /* solve gutter issues of inline fields */
 ul.inline li:first-child, li.inline:first-child{
-    margin-left:-@grid-gutter-width / 2;
+    margin-left:-$grid-gutter-width / 2;
 }
 
 
@@ -424,7 +424,7 @@ ul.inline li:first-child, li.inline:first-child{
 
 .chooser {
     /* We show the 'chosen' state...*/
-    .clearfix();
+    @include clearfix();
 
     input[type=text]{
         float:left;
@@ -444,7 +444,7 @@ ul.inline li:first-child, li.inline:first-child{
             position:relative;
             display:block;
             float:left;
-            color:@color-grey-3;
+            color:$color-grey-3;
             line-height:0.85em;
             font-size:2.5em;
             margin-right:0.3em;
@@ -472,7 +472,7 @@ ul.inline li:first-child, li.inline:first-child{
 .document-chooser {
     .chosen{
         .title{
-            color: @color-grey-1;
+            color: $color-grey-1;
             display:block;
             padding-left:3em;
         }
@@ -514,14 +514,14 @@ ul.inline li:first-child, li.inline:first-child{
         }
     }
     .chosen{
-        padding-left:@thumbnail-width;   
+        padding-left:$thumbnail-width;   
 
         &:before{
             content:"";
         }
         .preview-image{
             float:left;
-            margin-left:-(@thumbnail-width);
+            margin-left:-($thumbnail-width);
             margin-right:1em;
         }
     }
@@ -553,11 +553,11 @@ ul.inline li:first-child, li.inline:first-child{
     .ui-icon-close:before{
         font-family:wagtail;
         display:block;
-        color:@color-grey-3;
+        color:$color-grey-3;
         content:"g";
     }
     .ui-icon-close:hover:before{
-        color:@color-red
+        color:$color-red
     }
 }
 
@@ -570,9 +570,9 @@ ul.inline li:first-child, li.inline:first-child{
     margin-bottom:2em;
 
     &.full-width{
-        .nice-padding();
-        background-color:@color-header-bg;
-        border-bottom:1px solid @color-grey-4;
+        @include nice-padding();
+        background-color:$color-header-bg;
+        border-bottom:1px solid $color-grey-4;
     }
 
     .fields{
@@ -595,7 +595,7 @@ ul.inline li:first-child, li.inline:first-child{
             font-family:wagtail;
             content:"f";
             font-size:25px;
-            color:@color-grey-3;
+            color:$color-grey-3;
         }
     }
     .submit{
@@ -646,16 +646,16 @@ ul.inline li:first-child, li.inline:first-child{
 
 /* Transitions */
 fieldset, input, textarea, select{
-    .transition(background-color 0.2s ease);
+    @include transition(background-color 0.2s ease);
 }
 input[type=submit], input[type=reset], input[type=button], .button, button{
-    .transition(~"background-color 0.2s ease, color 0.2s ease");
+    @include transition("background-color 0.2s ease, color 0.2s ease");
 }
 .help{
-    .transition(opacity 0.2s ease);
+    @include transition(opacity 0.2s ease);
 }
 
-@media screen and (min-width: @breakpoint-mobile){
+@media screen and (min-width: $breakpoint-mobile){
     .help{
         opacity:1;
     }
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/icons.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/icons.scss
similarity index 89%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/components/icons.less
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/components/icons.scss
index e70150eb1..6915a46a5 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/icons.less
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/icons.scss
@@ -1,10 +1,10 @@
 @font-face {
     font-family: "wagtail";
-    src:url("@{css-root}fonts/wagtail.eot");
-    src:url("@{css-root}fonts/wagtail.eot?#iefix") format("embedded-opentype"),
-        url("@{css-root}fonts/wagtail.ttf") format("truetype"),
-        url("@{css-root}fonts/wagtail.svg#wagtail") format("svg"),
-        url("@{css-root}fonts/wagtail.woff") format("woff");
+    src:url("#{$css-root}fonts/wagtail.eot");
+    src:url("#{$css-root}fonts/wagtail.eot?#iefix") format("embedded-opentype"),
+        url("#{$css-root}fonts/wagtail.ttf") format("truetype"),
+        url("#{$css-root}fonts/wagtail.svg#wagtail") format("svg"),
+        url("#{$css-root}fonts/wagtail.woff") format("woff");
     font-weight: normal;
     font-style: normal;
 }
@@ -12,12 +12,12 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
     @font-face {
         font-family: 'wagtail';
-        src: url("@{css-root}fonts/wagtail.svg#wagtail") format("svg"),
+        src: url("#{$css-root}fonts/wagtail.svg#wagtail") format("svg"),
     }
 }
 
 .icon.teal{
-    color:@color-teal;
+    color:$color-teal;
 }
 .icon.white{
     color:white
@@ -201,7 +201,7 @@
 .icon-horizontalrule{
     &:before{
         font-family: Open Sans,Arial,sans-serif !important; // FML
-        content:"—";
+        content:"-";
     }
 }
 .icon-password:before{
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/listing.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss
similarity index 79%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/components/listing.less
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss
index 8d8f31f77..7949f01c9 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/listing.less
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss
@@ -1,20 +1,20 @@
 /* General listings, like for pages, images or snippets */
 ul.listing{
-    .unlist();
+    @include unlist();
 }
 
 .listing{
     margin-bottom:2em;
     ul&{
-        border-top:1px dashed @color-input-border;
+        border-top:1px dashed $color-input-border;
         margin-bottom:2em;
     }
     ul{
-        .unlist();
+        @include unlist();
     }
     > li{
         padding:1em 0;
-        border-bottom:1px dashed @color-input-border;
+        border-bottom:1px dashed $color-input-border;
     }
 
     h3{
@@ -35,8 +35,8 @@ ul.listing{
     }
 
     thead{
-        color: @color-grey-2;
-        border-bottom:1px solid @color-grey-4;
+        color: $color-grey-2;
+        border-bottom:1px solid $color-grey-4;
         
         th{
             font-size:0.85em;
@@ -69,9 +69,9 @@ ul.listing{
         }
         .dropdown:hover,
         .dropdown.open{
-            .box-shadow(0px 0px 3px 0 rgba(0,0,0,0.2));
+            @include box-shadow(0px 0px 3px 0 rgba(0,0,0,0.2));
             background-color:white;
-            margin-left:-@grid-gutter-width * 2;
+            margin-left:-$grid-gutter-width * 2;
         }
     }
 
@@ -84,20 +84,20 @@ ul.listing{
         margin-bottom:-3em; /* this negates the padding added to the bottom of .content */
     }
     &.full-width th{
-        background-color:@color-thead-bg;
+        background-color:$color-thead-bg;
     }
 
     .table-headers{
-        border-bottom:1px solid  @color-grey-4
+        border-bottom:1px solid  $color-grey-4
     }
 
     tbody{
-        border-bottom:1px dashed @color-input-border;
+        border-bottom:1px dashed $color-input-border;
     }
     tbody tr{
-        border-top:1px dashed @color-input-border;
+        border-top:1px dashed $color-input-border;
         &:first-child{
-            border-top:1px dashed @color-input-border;
+            border-top:1px dashed $color-input-border;
         }
         
     }
@@ -108,7 +108,7 @@ ul.listing{
         background-color:#FDFDFD;
     }
     &.chooser tr.can-choose:hover{
-        background-color:@color-teal;
+        background-color:$color-teal;
         color:white;
 
         a,a:hover{
@@ -127,7 +127,7 @@ ul.listing{
     .divider{
         text-transform:uppercase;
         font-size:0.8em;
-        background-color:@color-grey-3;
+        background-color:$color-grey-3;
         td{
            
            padding-top:0.5em;
@@ -140,13 +140,13 @@ ul.listing{
     }
 
     .index {
-        background-color:@color-grey-4;
+        background-color:$color-grey-4;
 
         .title h2{
             font-size:1.2em;
             opacity:1;
             a{
-                .transition(opacity 0.2s ease);
+                @include transition(opacity 0.2s ease);
             }
             a:hover{
                 opacity:0.7;
@@ -159,22 +159,22 @@ ul.listing{
             margin-top:1.8em;
             
             li{
-                border-color:@color-teal-darker;
+                border-color:$color-teal-darker;
             }
             a{
                 color:white;
 
                 &:hover{
-                    color:@color-teal-dark;
+                    color:$color-teal-dark;
                 }
             }
 
             .button{
-                background-color:@color-teal-darker;
+                background-color:$color-teal-darker;
 
                 &:hover{
                     color:white;
-                    background:@color-teal-dark;
+                    background:$color-teal-dark;
                 }
             }
         }
@@ -182,7 +182,7 @@ ul.listing{
 
     .page-explorer & .index{
         color:white;
-        background-color:@color-header-bg;
+        background-color:$color-header-bg;
 
         .title h2{
             color:white;
@@ -206,7 +206,7 @@ ul.listing{
             position:relative;
         }
         label span{
-            .visuallyhidden();
+            @include visuallyhidden();
         }
         input{
             margin-top:3px;
@@ -220,7 +220,7 @@ ul.listing{
             margin:0;
             font-size:1.1em;
             font-weight:700;
-            color:@color-grey-2;
+            color:$color-grey-2;
             line-height:1.5em;
         
             a{
@@ -228,7 +228,7 @@ ul.listing{
                 text-decoration:none;
 
                 &:hover{
-                    color:@color-link;
+                    color:$color-link;
                 }
             }
         }
@@ -246,7 +246,7 @@ ul.listing{
         li{
             display:inline-block;
             padding:0 0.5em 0 0.8em;
-            border-left:1px solid @color-grey-3;
+            border-left:1px solid $color-grey-3;
             line-height:1em;
             
             &:first-child{
@@ -271,14 +271,14 @@ ul.listing{
     .children,
     .no-children{
         padding:0 !important;
-        border-left:1px dashed @color-input-border;
+        border-left:1px dashed $color-input-border;
         &:hover{
-            background-color:@color-grey-5;
+            background-color:$color-grey-5;
         }
     }
     .children a,
     .no-children a{
-        color:@color-grey-3;
+        color:$color-grey-3;
         display:block;
         padding:2em 0;       
     }
@@ -307,7 +307,7 @@ ul.listing{
         font-size:15px;
     }
     th.ord a:hover:before{
-        color:@color-teal;
+        color:$color-teal;
     }
     .handle{
         cursor:move;
@@ -315,16 +315,16 @@ ul.listing{
 
         &:before{
             font-size:20px;
-            color:@color-grey-3;
+            color:$color-grey-3;
             width:1em;
         }
         &:hover:before{
-            color:@color-text-base;
+            color:$color-text-base;
         }
     }
 
     .ui-sortable-helper{
-        border:1px dashed @color-input-border;
+        border:1px dashed $color-input-border;
         border-width:1px 0;
         
 
@@ -341,10 +341,10 @@ ul.listing{
     }
     .dropzone{
         height:80px;
-        background-color:@color-grey-1;
+        background-color:$color-grey-1;
 
         &:hover{
-            background-color:@color-grey-1;
+            background-color:$color-grey-1;
         }
         td{
             padding: 0 !important;
@@ -353,7 +353,7 @@ ul.listing{
 
 
     td.children:hover{
-        background-color:@color-teal;
+        background-color:$color-teal;
 
         a:before{
             color:white;
@@ -375,7 +375,7 @@ ul.listing{
         margin:0;
     }
     ul{
-        .unlist();
+        @include unlist();
     }
     ul{
         margin-top:-1.7em;
@@ -397,14 +397,14 @@ ul.listing{
     padding:2em 50px 0 50px;
 }
 
-@media screen and (min-width: @breakpoint-mobile){
+@media screen and (min-width: $breakpoint-mobile){
     .listing{
         &.horiz > li{
            float:left;
         }
         &.images {
-            .clearfix();
-            border: 1px solid @color-grey-4;
+            @include clearfix();
+            border: 1px solid $color-grey-4;
             border-width:0 0 0 1px !important;
 
             > li{
@@ -413,7 +413,7 @@ ul.listing{
                 height:220px;
                 text-align:center;
                 margin-top:-1px;
-                border:1px solid @color-grey-4;
+                border:1px solid $color-grey-4;
                 border-width:1px 1px 1px 0px;               
 
                 .image{
@@ -439,7 +439,7 @@ ul.listing{
                     background-color:#FDFDFD;
 
                     img{
-                        border-color:@color-teal;
+                        border-color:$color-teal;
                     }
                 }
             }
@@ -461,11 +461,11 @@ ul.listing{
             border-color:transparent;
         }
         .no-children a{
-            color:@color-teal;
+            color:$color-teal;
             opacity:0;
         }
         .no-children:hover{
-            border-color:@color-input-border;
+            border-color:$color-input-border;
             a{opacity:1;}
         }
 
@@ -487,13 +487,13 @@ ul.listing{
 /* Transitions */
 .listing {
     thead .dropdown ul{
-        .transition(none);
+        @include transition(none);
     }
     .children, .no-children{
-        .transition(background-color 0.2s ease);
+        @include transition(background-color 0.2s ease);
     }
     .children a,
     .no-children a{
-        .transition(all 0.2s ease);
+        @include transition(all 0.2s ease);
     }
 }
\ No newline at end of file
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/messages.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/messages.scss
similarity index 69%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/components/messages.less
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/components/messages.scss
index 9e3fc69e4..b98195a50 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/messages.less
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/messages.scss
@@ -1,10 +1,10 @@
 .messages{
     position:relative;
     z-index:5;
-    background-color:@color-grey-1;
+    background-color:$color-grey-1;
 
     ul{
-        .unlist();
+        @include unlist();
         padding-left:10px;
         position:relative;
         top:-100px;
@@ -17,27 +17,27 @@
         color:white;
     }
     .error{
-        background-color:@color-red;
+        background-color:$color-red;
     }
     .warning{
-        background-color:@color-orange;
+        background-color:$color-orange;
     }
     .success{
-        background-color:@color-teal-dark;
+        background-color:$color-teal-dark;
     }
 }
 .ready .messages ul,
 .messages.appear ul{
-    .transition-immediate(~"top 0.5s ease, opacity 0.5s ease, max-height 1.2s ease");
+    @include transition-immediate("top 0.5s ease, opacity 0.5s ease, max-height 1.2s ease");
     opacity:1;
     top:0;
 }
 .messages.new ul{
-    .transition-immediate(none);
+    @include transition-immediate(none);
     top:-100px;
 }
 
-@media screen and (min-width: @breakpoint-mobile){
+@media screen and (min-width: $breakpoint-mobile){
     .messages{
         ul{
             margin-left:-15px;
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/modals.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/modals.scss
similarity index 76%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/components/modals.less
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/components/modals.scss
index 195acaeb8..d2660e6aa 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/modals.less
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/modals.scss
@@ -1,4 +1,4 @@
-@zindex-modal-background: 500;
+$zindex-modal-background: 500;
 
 // Kill the scroll on the body
 .modal-open {
@@ -12,7 +12,7 @@
 
 // Container that the modal scrolls within
 .modal {
-    .border-box();
+    @include border-box();
     display: none;
     overflow: auto;
     overflow-y: scroll;
@@ -21,17 +21,17 @@
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: @zindex-modal-background;
+    z-index: $zindex-modal-background;
 }
 
 // Shell div to position the modal with bottom padding
 .modal-dialog {
-    .border-box();
+    @include border-box();
     margin-left: auto;
     margin-right: auto;
     width: auto;
     padding: 0px;
-    z-index: (@zindex-modal-background + 10);
+    z-index: ($zindex-modal-background + 10);
     height:90%;
     width:85%;
     
@@ -46,8 +46,8 @@
 
 // Actual modal
 .modal-content {
-    .border-box();
-    .border-radius(3px);
+    @include border-box();
+    @include border-radius(3px);
     width:98.70%;
     position: relative;
     background-color: white;
@@ -66,7 +66,7 @@
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: (@zindex-modal-background - 10);
+    z-index: ($zindex-modal-background - 10);
     background-color: black;
     // Fade for backdrop
     &.fade { opacity:0; }
@@ -93,14 +93,14 @@
     }
 }
 
-@media screen and (min-width: @breakpoint-mobile) {
+@media screen and (min-width: $breakpoint-mobile) {
     .modal-dialog {
-        padding:0px 0 2em @menu-width;
+        padding:0px 0 2em $menu-width;
     }
 }
-@media screen and (min-width: @breakpoint-desktop-larger){
+@media screen and (min-width: $breakpoint-desktop-larger){
     .modal-dialog {
-        max-width:@breakpoint-desktop-larger;
+        max-width:$breakpoint-desktop-larger;
         padding:0 0 2em 0;
     }
 }
\ No newline at end of file
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/components/tabs.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/tabs.scss
similarity index 69%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/components/tabs.less
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/components/tabs.scss
index 380b40a93..f463ca760 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/css/components/tabs.less
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/tabs.scss
@@ -1,5 +1,5 @@
 .tab-nav{
-    .clearfix();
+    @include clearfix();
     padding:0;
 
     li{
@@ -13,8 +13,8 @@
         }
     }
     a{
-        .transition(border-color 0.2s ease);
-        background-color:@color-grey-4;
+        @include transition(border-color 0.2s ease);
+        background-color:$color-grey-4;
         outline:none;
         line-height:3em;
         text-transform:uppercase;
@@ -23,29 +23,29 @@
         text-decoration:none;
         display:block;
         padding:0 20px;
-        color:@color-grey-2;
-        border-top:0.3em solid darken(@color-grey-4,0%);
+        color:$color-grey-2;
+        border-top:0.3em solid darken($color-grey-4,0%);
         border-bottom:1px solid transparent;
 
         &:hover{
             color:inherit;
-            border-top-color:@color-grey-2;
+            border-top-color:$color-grey-2;
         }
     }
 
     a.errors{
-        color:@color-red !important;
+        color:$color-red !important;
     }
 
     li.active a{
-        color:@color-grey-1;
+        color:$color-grey-1;
         background-color:white;
-        border-top:0.3em solid @color-grey-1;      
+        border-top:0.3em solid $color-grey-1;      
     }
 
     /* For cases where tab-nav should merge with header */
     &.merged{
-        background-color:@color-header-bg;
+        background-color:$color-header-bg;
         margin-top:0;
     }
 }
@@ -60,7 +60,7 @@
     }
 }
 
-@media screen and (min-width: @breakpoint-mobile){
+@media screen and (min-width: $breakpoint-mobile){
     .tab-nav li{
         width:auto;
         padding:0;
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/core.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
similarity index 79%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/core.less
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
index 7980d678b..e55bc23ca 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/css/core.less
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
@@ -1,19 +1,19 @@
-@import "variables.less";
-@import "mixins.less";
-@import "grid.less";
+@import "variables.scss";
+@import "mixins.scss";
+@import "grid.scss";
 
-@import "components/explorer.less";
-@import "components/icons.less";
-@import "components/tabs.less";
-@import "components/dropdowns.less";
-@import "components/modals.less";
-@import "components/forms.less";
-@import "components/listing.less";
-@import "components/messages.less";
-@import "components/formatters.less";
+@import "components/explorer.scss";
+@import "components/icons.scss";
+@import "components/tabs.scss";
+@import "components/dropdowns.scss";
+@import "components/modals.scss";
+@import "components/forms.scss";
+@import "components/listing.scss";
+@import "components/messages.scss";
+@import "components/formatters.scss";
 
 html{
-    background:@color-grey-4;
+    background:$color-grey-4;
     height:100%;
 }
 
@@ -22,7 +22,7 @@ body{
     font-family:Open Sans,Arial,sans-serif;
     font-size:80%;
     line-height:1.5em;
-    color:@color-text-base;
+    color:$color-text-base;
     overflow-x: hidden;
     position: relative;
 
@@ -39,7 +39,7 @@ h1{
     line-height:1.3em;
     font-size:1.5em;
     text-transform:uppercase;
-    color:@color-grey-1;
+    color:$color-grey-1;
     font-weight:600;
 
     span{
@@ -56,31 +56,31 @@ h2{
     font-size:1.3em;
     font-family:Open Sans;
     font-weight:600;
-    color:@color-grey-2;
+    color:$color-grey-2;
 
     .page-explorer &{
         text-transform:none;
     }
 }
 a{
-    color:@color-link;
+    color:$color-link;
     text-decoration:none;
 
     &:hover{
-        color:@color-link-hover;
+        color:$color-link-hover;
     }
 }
 
 code{
-    .box-shadow(inset 0px 0px 4px 0px rgba(0, 0, 0, 0.2));
-    background-color:@color-fieldset-hover;
+    @include box-shadow(inset 0px 0px 4px 0px rgba(0, 0, 0, 0.2));
+    background-color:$color-fieldset-hover;
     padding:2px 5px;
 }
 
 kbd{
-    .border-radius(3px);
+    @include border-radius(3px);
     font-family:Open Sans, Arial, sans-serif;
-    border:1px solid @color-grey-2;
+    border:1px solid $color-grey-2;
     border-color:rgba(0,0,0,0.2);
     padding:0.3em 0.5em;
 }
@@ -88,11 +88,11 @@ kbd{
 img{
     max-width:100%;
     height:auto;
-    border: 3px solid @color-grey-4;
+    border: 3px solid $color-grey-4;
 }
 
 .browsermessage{
-    background-color:@color-red;
+    background-color:$color-red;
     color:white;
     padding:1em 2em;
     margin:0;
@@ -108,13 +108,13 @@ img{
 }
 
 .wrapper{
-    .clearfix();
+    @include clearfix();
 }
 
 .nav-wrapper{
-    .box-shadow(inset -2px 0px 10px 0px rgba(0, 0, 0, 0.5));
+    @include box-shadow(inset -2px 0px 10px 0px rgba(0, 0, 0, 0.5));
     position:relative;
-    background: @color-grey-1;
+    background: $color-grey-1;
     margin-left: -100%;
     width: 180px;
     float: left;
@@ -172,15 +172,15 @@ img{
         }
 
         ul{
-            border-top:1px solid @color-grey-1-1;
+            border-top:1px solid $color-grey-1-1;
         }
 
         li{
-            border-bottom:1px solid @color-grey-1-1;
+            border-bottom:1px solid $color-grey-1-1;
             position:relative;
 
             &.selected{
-                background-color:@color-grey-1;
+                background-color:$color-grey-1;
             }
 
             .menu-snippets &.menu-snippets,
@@ -190,7 +190,7 @@ img{
             .menu-images &.menu-images,
             .menu-search &.menu-search,
             .menu-explorer &.menu-explorer{
-                background:darken(@color-grey-1, 10%);
+                background:darken($color-grey-1, 10%);
 
                 a{
                     color:white;
@@ -239,7 +239,7 @@ img{
             }
             font-size:0.8em;
             padding:0.2em 1.2em;
-            background-color:@color-grey-1-1;
+            background-color:$color-grey-1-1;
         }
         .more{
             border:0;
@@ -254,7 +254,7 @@ img{
             position:relative;
 
             .fields{
-                .transition(background-color 0.2s ease);
+                @include transition(background-color 0.2s ease);
                 border:0;
                 li{
                     border:0;
@@ -271,7 +271,7 @@ img{
                 }
             }
             .submit{
-                .visuallyhidden();
+                @include visuallyhidden();
             }
             label{
                 font-weight:normal;
@@ -305,14 +305,14 @@ img{
                     display:none;
                 }
                 .fields{
-                    background-color:@color-grey-4;
+                    background-color:$color-grey-4;
                 }
                 .field{
-                    color: @color-grey-1;
+                    color: $color-grey-1;
                 }
                 input{
                     margin-top:0px;
-                    color:@color-grey-1; 
+                    color:$color-grey-1; 
                 }
             }
         }
@@ -333,16 +333,16 @@ img{
     height:100%; /* this has no effect on desktop, but on mobile it helps aesthetics of menu popout action */
     float: right;
     position: relative;
-    background-color:@color-grey-4;
-    border-bottom:1px solid @color-grey-3;
+    background-color:$color-grey-4;
+    border-bottom:1px solid $color-grey-3;
 
    /* transform: translate3d(0,0,0);
     -webkit-transform: translate3d(0,0,0);*/
 }
     .content{
-        .row();
+        @include row();
         background:white;
-        border-top:0px solid @color-grey-5; /* this top border provides space for the floating logo to toggle the menu */
+        border-top:0px solid $color-grey-5; /* this top border provides space for the floating logo to toggle the menu */
         padding-bottom:4em;
         position:relative; /* yuk. necessary for positions for jquery ui widgets */
     }
@@ -397,7 +397,7 @@ header{
     padding-top:1em;
     padding-bottom:1em;
     padding-left: 4em !important;
-    background-color: @color-header-bg;
+    background-color: $color-header-bg;
     margin-bottom:2em;
     color:white;
 
@@ -424,7 +424,7 @@ header{
     }
 
         .search-bar input{
-            .border-radius(3px);
+           @include border-radius(3px);
             width:auto;
             border-width:0;
         }
@@ -449,9 +449,9 @@ header{
     }
     */
     .button{
-        background-color:@color-teal-darker;
+        background-color:$color-teal-darker;
         &:hover{
-            background-color:@color-teal-dark;
+            background-color:$color-teal-dark;
         }
     }
 }
@@ -463,11 +463,11 @@ header{
 
 
 footer{
-    .row();
-    .border-radius(3px 3px 0 0);
-    .box-shadow(0px 0px 2px rgba(255,255,255,0.5));
-    .transition(bottom 0.5s ease 1s);
-    background: @color-grey-1;
+    @include row();
+    @include border-radius(3px 3px 0 0);
+    @include box-shadow(0px 0px 2px rgba(255,255,255,0.5));
+    @include transition(bottom 0.5s ease 1s);
+    background: $color-grey-1;
     position:fixed;
     bottom:0;
     padding:0.5em;
@@ -476,7 +476,7 @@ footer{
     color:white;
 
     ul{
-        .unlist();
+        @include unlist();
     }
     li{
         float:left;
@@ -484,7 +484,7 @@ footer{
 
     .actions{
         width:250px;
-        margin-right:@grid-gutter-width/2;
+        margin-right:$grid-gutter-width/2;
 
         .button{
             padding-top:1em;
@@ -495,13 +495,13 @@ footer{
     .meta{
         float:right;
         text-align:right;
-        padding-right:@grid-gutter-width/2;
+        padding-right:$grid-gutter-width/2;
         line-height:3.5em;
         font-size:0.85em;
 
         p{  
             margin:0;
-            margin-right:@grid-gutter-width;
+            margin-right:$grid-gutter-width;
             white-space: nowrap;
         }        
     }
@@ -510,19 +510,19 @@ footer{
 ::-webkit-scrollbar {
     height: 10px;
     width: 10px;
-    background: @color-grey-1;
+    background: $color-grey-1;
 }
 ::-webkit-scrollbar-thumb {
-    background: @color-grey-2;
+    background: $color-grey-2;
     -webkit-border-radius: 1ex;
 }
 ::-webkit-scrollbar-corner {
-    background: @color-grey-1;
+    background: $color-grey-1;
 }
 
 .breadcrumb{
-    .unlist();
-    .clearfix();
+    @include unlist();
+    @include clearfix();
 
     padding-top:0.2em;
     font-size:0.85em;
@@ -531,7 +531,7 @@ footer{
     li {
         display: block;
         float: left;
-        background: @color-teal-darker;
+        background: $color-teal-darker;
         padding: 0.4em 1em 0.4em 2em;
         position: relative;
         margin: 0 4px 4px 0; 
@@ -559,7 +559,7 @@ footer{
             border-bottom: 1.2em solid transparent;
         }
         &:after {            
-            border-left: 1em solid @color-teal-darker;
+            border-left: 1em solid $color-teal-darker;
             position: absolute; right: -0.9em; top: 0;
             z-index: 1;
         }
@@ -568,15 +568,15 @@ footer{
             position: absolute; left: 0; top: 0;
         } 
         &:hover {
-            background: @color-teal-dark;
+            background: $color-teal-dark;
         }         
         &:hover:after {
-            border-left-color: @color-teal-dark;
+            border-left-color: $color-teal-dark;
         }
 
         &:first-child {
             padding:0.4em;
-            .border-radius(3px 0px 0px 3px);
+            @include border-radius(3px 0px 0px 3px);
 
             &:before{
                 display:none;
@@ -596,14 +596,14 @@ footer{
 
     header &  li{
         &:before {  
-            border-left: 1em solid @color-header-bg;
+            border-left: 1em solid $color-header-bg;
             position: absolute; left: 0; top: 0;
         } 
     }       
 }
 
 .row{
-    .clearfix();
+    @include clearfix();
 }
 
 .nice-padding{
@@ -627,49 +627,49 @@ footer, .logo{
 }
 
 
-@media screen and (min-width: @breakpoint-mobile){
+@media screen and (min-width: $breakpoint-mobile){
     .col1{
-        .column(1);
+        @include column(1);
     }
     .col2{
-        .column(2);
+        @include column(2);
     }
     .col3{
-        .column(3);
+         @include column(3);
     }
     .col4{
-        .column(4);
+        @include column(4);
     }
     .col5{
-        .column(5);
+        @include column(5);
     }
     .col6{
-        .column(6);
+        @include column(6);
     }
     .col7{
-        .column(7);
+        @include column(7);
     }
     .col8{
-        .column(8);
+        @include column(8);
     }
     .col9{
-        .column(9);
+        @include column(9);
     }
     .col10{
-        .column(10);
+        @include column(10);
     }
     .col11{
-        .column(11);
+        @include column(11);
     }
     .col12{
-        .column(12);
+        @include column(12);
     }
 
     .row{
-        .row();
+        @include row();
     }
     .row-flush{
-        .row-flush();
+        @include row-flush();
     }
 
     .nice-padding{
@@ -678,7 +678,7 @@ footer, .logo{
     }
 
     body{
-        margin-left:@menu-width;
+        margin-left:$menu-width;
     }
 
     .browsermessage{
@@ -695,14 +695,14 @@ footer, .logo{
         position:absolute;
         left:0;
         height:100%;
-        width:@menu-width;
-        margin-left: -@menu-width;
+        width:$menu-width;
+        margin-left: -$menu-width;
         
 
         .inner{ 
             height:100%;
             position:fixed;
-            width:@menu-width;
+            width:$menu-width;
         }
     }
         .logo{
@@ -736,9 +736,9 @@ footer, .logo{
 
         .footer{
             padding-top:1em;
-            background-color:@color-grey-1;
+            background-color:$color-grey-1;
             position:fixed;
-            width:@menu-width - 7;
+            width:$menu-width - 7;
             bottom:0;
             text-align:center;
         }
@@ -752,7 +752,7 @@ footer, .logo{
                 padding:0 0 1em 0;
             }
             &:hover{
-                .box-shadow(0px 0px 6px 0px rgba(0,0,0,1));
+                @include box-shadow(0px 0px 6px 0px rgba(0,0,0,1));
             }
         }
     }
@@ -776,17 +776,17 @@ footer, .logo{
             -webkit-transform: none;       
         }
         .nav-wrapper{
-            margin-left: -@menu-width;
+            margin-left: -$menu-width;
         }
         .nav-wrapper,
         .nav-main{
-            width:@menu-width;
+            width:$menu-width;
         }
     }
   
     body.explorer-open {
         .nav-wrapper{
-            width:@menu-width;
+            width:$menu-width;
         }
         .explorer:before{
             display:none;
@@ -859,14 +859,14 @@ footer, .logo{
 
 @media screen and (min-width: 90em){
     .wrapper{
-        max-width:@breakpoint-desktop-larger;
+        max-width:$breakpoint-desktop-larger;
     }
     .nav-wrapper{
-        .box-shadow(inset -6px 0px 4px 0px rgba(0, 0, 0, 0.2));
+        @include box-shadow(inset -6px 0px 4px 0px rgba(0, 0, 0, 0.2));
 
         .inner{
-            background:@color-grey-1;
-            .box-shadow(inset -6px 0px 4px 0px rgba(0, 0, 0, 0.2));
+            background:$color-grey-1;
+            @include box-shadow(inset -6px 0px 4px 0px rgba(0, 0, 0, 0.2));
         }
     }
 
@@ -881,11 +881,11 @@ footer, .logo{
 #nav-toggle,
 footer,
 .logo{
-    .transition(all 0.2s ease);
+    @include transition(all 0.2s ease);
 }
 .nav-wrapper{    
-    .transition-transform(0.2s ease);
+    @include transition-transform(0.2s ease);
 }
 .nav-main a, a{
-    .transition(~"color 0.2s ease, background-color 0.2s ease");
+    @include transition("color 0.2s ease, background-color 0.2s ease");
 }
\ No newline at end of file
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/fonts/wagtail.eot b/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.eot
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/fonts/wagtail.eot
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.eot
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/fonts/wagtail.svg b/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.svg
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/fonts/wagtail.svg
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.svg
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/fonts/wagtail.ttf b/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.ttf
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/fonts/wagtail.ttf
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.ttf
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/fonts/wagtail.woff b/wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.woff
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/fonts/wagtail.woff
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/fonts/wagtail.woff
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/grid.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/grid.scss
new file mode 100644
index 000000000..d0f0fc98c
--- /dev/null
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/grid.scss
@@ -0,0 +1,79 @@
+/* Utility variable — you should never need to modify this */
+$gridsystem_width: $grid-columns * 1px;
+$padding: $grid-gutter-width*0.5;
+
+/* Ensure grid columns are set to border-boxes. This is essential */
+@mixin border-box(){
+    -webkit-box-sizing: border-box; 
+    -moz-box-sizing: border-box; 
+    box-sizing: border-box;
+}
+
+@mixin content-box(){
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+/* Our row container */
+@mixin row($padding:0){
+    @include clearfix();
+    @include border-box();
+
+    display:block;
+    /*max-width: $grid-max-width; NO MAX WIDTH*/
+    margin-right: auto;
+    margin-left: auto;
+    padding-right: $padding;
+    padding-left: $padding;
+}
+
+@mixin row-flush(){
+    margin-left:-$padding;
+    margin-right:-$padding;
+}
+
+/* Our column container */
+@mixin column($x, $padding:$padding, $grid-columns:$grid-columns){
+    @include border-box();
+
+    display: inline;
+    float: left;
+    width: 100%*($x / $grid-columns);
+    padding-right: $padding;
+    padding-left: $padding;
+}
+
+@mixin table-column($x, $padding:$padding, $grid-columns:$grid-columns){
+    @include border-box();
+
+    width: 100%*($x / $grid-columns);
+}
+
+/* Push adds left padding */
+@mixin push($offset:1, $grid-columns:$grid-columns) {
+    margin-left: 100%*($offset / $grid-columns);
+}
+@mixin push-padding($offset:1, $grid-columns:$grid-columns) {
+    padding-left:100%*($offset / $grid-columns);
+}
+
+/* Pull adds right padding */
+@mixin pull($offset:1, $grid-columns:$grid-columns) {
+    margin-right: 100%*(@offset / $grid-columns);
+}
+@mixin pull-padding($offset:1, $grid-columns:$grid-columns){
+    padding-right: 100%*($offset / $grid-columns);
+}
+
+/* only used in places where padding not applied to same elements as row or row-flush 
+ * most of the time this class should be applied directly to the html elements */
+@mixin nice-padding(){
+    padding-left:20px;
+    padding-right:20px;
+
+    @media screen and (min-width: $breakpoint-mobile){
+        padding-left:50px;
+        padding-right:50px;
+    }
+}
\ No newline at end of file
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/home.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/home.scss
similarity index 71%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/layouts/home.less
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/home.scss
index d6e43555c..8312dc70b 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/home.less
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/home.scss
@@ -1,6 +1,6 @@
-@import "../variables.less";
-@import "../mixins.less";
-@import "../grid.less";
+@import "variables.scss";
+@import "mixins.scss";
+@import "grid.scss";
 
 h1{
     font-weight:300;
@@ -25,24 +25,24 @@ header{
 }
 
 .summary{
-    .row();
-    background-color:@color-grey-5;
+    @include row();
+    background-color:$color-grey-5;
     margin-bottom:2em;
 
     h2{
-        .visuallyhidden();
+        @include visuallyhidden();
     }
     ul{
-        .unlist();
+        @include unlist();
         width:100%;
     }
     li{
-        .column(4);
+        @include column(4);
         padding-top:3em;
         padding-bottom:3em;
     
         &:first-child{
-            .push-padding(@grid-content-indent);
+            @include push-padding($grid-content-indent);
         }
     }
 
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/login.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss
similarity index 80%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/layouts/login.less
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss
index 3c523631c..cc7064eb0 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/login.less
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss
@@ -1,12 +1,12 @@
-@import "../variables.less";
-@import "../mixins.less";
-@import "../grid.less";
+@import "variables.scss";
+@import "mixins.scss";
+@import "grid.scss";
 
-@desktop-padding: 100px;
+$desktop-padding: 100px;
 
 html, body, .content-wrapper{
-    background-color:@color-grey-1;
-    color:@color-grey-3;
+    background-color:$color-grey-1;
+    color:$color-grey-3;
 }
 
 html{
@@ -22,7 +22,7 @@ body{
     border:0;
 }
 .wrapper{
-    .nice-padding();
+    @include nice-padding();
     max-width:none;
 }
 
@@ -37,7 +37,7 @@ h1{
 form{
     width:100%;
     ul{
-        .unlist();
+        @include unlist();
     }
 }
     label{
@@ -66,7 +66,7 @@ form{
                     display:none;
                 }
                 input{
-                    border-top: 1px dashed @color-input-border;
+                    border-top: 1px dashed $color-input-border;
                 }
             }
             &:first-child input{
@@ -85,7 +85,7 @@ form{
         }
 
     .full label{
-        .border-radius(2px);
+        @include border-radius(2px);
         text-transform:uppercase;
         padding:2px 5px;
         position:absolute;
@@ -101,8 +101,8 @@ form{
 
     /* Special full-width, one-off fields i.e a single text or textarea input */
     .full input{
-        .nice-padding();
-        .border-radius(0px);
+        @include nice-padding();
+        @include border-radius(0px);
         font-weight:300;
         border:0;
         padding-top:1.5em;
@@ -131,13 +131,13 @@ form{
         }
 
         li{
-            .border-radius(3px);
+            @include border-radius(3px);
         }
     }
 }
 
 
-@media screen and (min-width: @breakpoint-mobile){
+@media screen and (min-width: $breakpoint-mobile){
     .content-wrapper{
         float:none;
         height:auto;
@@ -150,7 +150,7 @@ form{
     .wrapper{
         position:relative;
         height:100%;
-        padding:0 @desktop-padding;
+        padding:0 $desktop-padding;
         
         &:before {
             content: '';
@@ -168,21 +168,21 @@ form{
     .field.icon:before{
         display:inline-block;
         position: absolute;
-        color:@color-grey-4;
-        border: 2px solid @color-grey-4;
+        color:$color-grey-4;
+        border: 2px solid $color-grey-4;
         border-radius: 100%;
         width: 1em;
         padding: 0.3em;
-        left: @desktop-padding;
+        left: $desktop-padding;
         margin-top: -1em;
         top: 50%;
     }
 
     .full{
-        margin:0 -@desktop-padding;
+        margin:0 -$desktop-padding;
         
         input{
-            padding-left:@desktop-padding + 50px;
+            padding-left:$desktop-padding + 50px;
         }
     }
 }
\ No newline at end of file
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/page-editor.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
similarity index 85%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/layouts/page-editor.less
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
index 69985f606..0cb79e81f 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/css/layouts/page-editor.less
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
@@ -1,24 +1,25 @@
-@import "../variables.less";
-@import "../mixins.less";
-@import "../grid.less";
+@import "variables.scss";
+@import "mixins.scss";
+@import "grid.scss";
+
 .page-editor .content-wrapper{
     margin-bottom:10em;
 }
 
 .objects{
-    background:url(~"@{static-root}bg-dark-diag.svg");
+    background:url("#{$static-root}bg-dark-diag.svg");
 }
 .object{  
     position:relative;
     overflow:hidden;
-    .nice-padding();
+    @include nice-padding();
 
     &:first-child{
         border:0;
     }
 
     &.focused{
-        border-color: darken(@color-input-focus, 40%);
+        border-color: darken($color-input-focus, 40%);
     }        
 
     fieldset{
@@ -32,7 +33,7 @@
         position:relative;
         z-index:1;
         top:1em;
-        padding-right:@grid-gutter-width/2;
+        padding-right:$grid-gutter-width/2;
         margin-top:4em;
         opacity:1;
         padding-left:3em;
@@ -41,9 +42,9 @@
             display:block;
             float:left;
             content:"?";
-            border:1px solid @color-grey-2;
-            color:@color-grey-2;
-            .border-radius(100%);
+            border:1px solid $color-grey-2;
+            color:$color-grey-2;
+            @include border-radius(100%);
             height:15px;
             width:15px;
             line-height:15px;
@@ -60,7 +61,7 @@
 
     > h2, &.single-field label{
         -webkit-font-smoothing: auto;
-        background:@color-grey-3;
+        background:$color-grey-3;
         text-transform:uppercase;
         padding:0.9em 0 0.9em 4em;
         font-size:0.95em;
@@ -73,7 +74,7 @@
         right:0;
         z-index:1;
         text-shadow:1px 1px 1px rgba(255,255,255,0.5);
-        .box-shadow(0 0 7px 0 rgba(0,0,0,0.4));
+        @include box-shadow(0 0 7px 0 rgba(0,0,0,0.4));
 
         &:before{
             font-family:wagtail;
@@ -137,8 +138,8 @@
        
 
         input, textarea, .richtext{
-            .nice-padding();
-            .border-radius(0px);
+            @include nice-padding();
+            @include border-radius(0px);
             font-family:Bitter, Georgia, serif;           
             padding-top:2em;
             padding-bottom:2em;
@@ -158,7 +159,7 @@
         }
 
         .error-message{
-            .nice-padding();
+            @include nice-padding();
             padding-bottom:2em;
         }
 
@@ -166,7 +167,7 @@
         .error input,
         .error textarea,
         .error .richtext{
-            background-color:@color-input-error-bg;
+            background-color:$color-input-error-bg;
         }
     }
 
@@ -213,13 +214,13 @@
 
         /* wrapper around add button for mutliple objects. Default version is wordless plus button for contracted groups of fields */
         .add{
-            .transition(background-color 0.2s ease);
+            @include transition(background-color 0.2s ease);
             position:relative;
             z-index:2;
             top:0px;
             left:0px;
             width:3.3em;
-            background-color:@color-teal;
+            background-color:$color-teal;
             padding:0;
             margin:0 0 0 -20px;
             cursor:pointer;
@@ -256,23 +257,23 @@
     padding-bottom:0.5em;
 }
 
-@media screen and (min-width: @breakpoint-mobile){
+@media screen and (min-width: $breakpoint-mobile){
     .object{
         fieldset{
             max-width:1024px;
-            .column(10);
+            @include column(10);
             padding-left:0;
             padding-right:0;
         }
 
         .object-help{
-            .column(2);
+            @include column(2);
             display:block;
             position:absolute;
             z-index:1;
             right:0;
             top:1em;
-            padding-right:@grid-gutter-width/2;
+            padding-right:$grid-gutter-width/2;
             float:right;
             margin-top:4em;
             opacity:0;
@@ -281,7 +282,7 @@
 
         &.full{
             fieldset{
-                .column(11);
+                @include column(11);
                 margin-left:-51px;
                 padding:3.2em 0 0 0;
             }
@@ -293,7 +294,7 @@
             }
         }
         .multiple{
-            .column(10);
+            @include column(10);
             padding-left:0;
             padding-right:0;
         }
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/mixins.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/mixins.scss
similarity index 51%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/mixins.less
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/mixins.scss
index 4a0a7104e..b4cb42618 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/css/mixins.less
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/mixins.scss
@@ -1,4 +1,4 @@
-.clearfix() {
+@mixin clearfix() {
     &:before,
     &:after {
         content: " "; /* 1 */
@@ -9,7 +9,7 @@
     }
 }
 
-.unlist(){
+@mixin unlist(){
     &, ul, li{
         list-style-type:none;
         font-style: normal;
@@ -21,29 +21,29 @@
     }
 }
 
-.transition(@transition){
+@mixin transition($transition){
     body.ready &{
-        -webkit-transition: @transition;
-        -moz-transition: @transition;
-        -o-transition: @transition;
-        transition: @transition;
+        -webkit-transition: $transition;
+        -moz-transition: $transition;
+        -o-transition: $transition;
+        transition: $transition;
     }
 }
-.transition-immediate(@transition){
-    -webkit-transition: @transition;
-    -moz-transition: @transition;
-    -o-transition: @transition;
-    transition: @transition;
+@mixin transition-immediate($transition){
+    -webkit-transition: $transition;
+    -moz-transition: $transition;
+    -o-transition: $transition;
+    transition: $transition;
 }
 
-.transition-transform(@transition) {
-  -webkit-transition: -webkit-transform @transition;
-     -moz-transition: -moz-transform @transition;
-       -o-transition: -o-transform @transition;
-          transition: transform @transition;
+@mixin transition-transform($transition) {
+  -webkit-transition: -webkit-transform $transition;
+     -moz-transition: -moz-transform $transition;
+       -o-transition: -o-transform $transition;
+          transition: transform $transition;
 }
 
-.notransition() {
+@mixin notransition() {
     -webkit-transition: none !important;
     -moz-transition: none !important;
     -o-transition: none !important;
@@ -51,17 +51,17 @@
     transition: none !important;
 }
 
-.border-radius(@radius){
-    -webkit-border-radius: @radius;
-    border-radius: @radius;
+@mixin border-radius($radius){
+    -webkit-border-radius: $radius;
+    border-radius: $radius;
 }
 
-.box-shadow(@shadow){  
-    -webkit-box-shadow: @shadow; //inset 2px 2px 3px 2px rgba(0, 0, 0, 1)
-    box-shadow: @shadow; //inset 2px 2px 3px 2px rgba(0, 0, 0, 1)
+@mixin box-shadow($shadow){  
+    -webkit-box-shadow: $shadow; //e.g inset 2px 2px 3px 2px rgba(0, 0, 0, 1)
+    box-shadow: $shadow;
 }
 
-.visuallyhidden{
+@mixin visuallyhidden{
     border: 0;
     clip: rect(0 0 0 0);
     height: 1px;
@@ -81,7 +81,7 @@
     }
 }
 
-.visuallyvisible{
+@mixin visuallyvisible{
     clip:none;
     height:auto;
     width:auto;
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/normalize.css b/wagtail/wagtailadmin/static/wagtailadmin/scss/normalize.css
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/normalize.css
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/normalize.css
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/panels/rich-text.less b/wagtail/wagtailadmin/static/wagtailadmin/scss/panels/rich-text.scss
similarity index 95%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/panels/rich-text.less
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/panels/rich-text.scss
index a5359e7b2..b95e0fe6d 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/css/panels/rich-text.less
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/panels/rich-text.scss
@@ -1,5 +1,5 @@
-@import "../variables.less";
-@import "../mixins.less";
+@import "variables.scss";
+@import "mixins.scss";
 
 .hallotoolbar{
     position:absolute;
@@ -14,7 +14,7 @@
     margin-top:0;
 }
 .hallotoolbar button{
-    .border-radius(0);
+    @include border-radius(0);
 }
 
 .richtext {
@@ -149,11 +149,11 @@
     }
 }
 
-@media screen and (min-width: @breakpoint-desktop-larger){
+@media screen and (min-width: $breakpoint-desktop-larger){
    /* .hallotoolbar{
         margin:0 auto;
         position:absolute;
-        left:-@menu-width;
+        left:-$menu-width;
         right:0;
         z-index:5;
         margin-top:3em;
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/variables.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/variables.scss
new file mode 100644
index 000000000..6ed55b896
--- /dev/null
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/variables.scss
@@ -0,0 +1,53 @@
+/* paths */
+$static-root: "/static/wagtailadmin/images/";
+$css-root: "/static/wagtailadmin/scss/";
+
+/* grid settings */
+$grid-columns: 12; 
+$grid-gutter-width: 3%;
+$grid-max-width: 1200px;
+$grid-content-indent:0.7;
+
+/* screen breakpoints */
+$breakpoint-mobile: 50em; /* 800px */
+$breakpoint-desktop-small: 56.25em; /* 900px */
+$breakpoint-desktop-large: 75em; /* 1200px */
+$breakpoint-desktop-larger: 100em; /* 1600px */
+
+/* colours */
+$color-teal: #43b1b0;
+$color-teal-darker: darken($color-teal, 10%);
+$color-teal-dark: #246060;
+$color-red: #f7474e;
+$color-orange:#e9b04d;
+$color-green: #00FF00;
+
+/* darker to lighter */
+$color-grey-1: #333333;
+$color-grey-1-1: #404040;
+$color-grey-2: #666666;
+$color-grey-3: #d9d9d9;
+$color-grey-4: #e6e6e6;
+$color-grey-5: #fafafa;
+
+$color-thead-bg: $color-grey-5;
+$color-header-bg: $color-teal; // #ff6a58;
+$color-fieldset-hover: $color-grey-5;
+$color-input-border: $color-grey-3;
+$color-input-focus: #f4fcfc;
+$color-input-error-bg: #feedee;
+$color-button: $color-teal;
+$color-button-hover: $color-teal-darker;
+$color-button-yes: $color-green;
+$color-button-yes-hover: darken($color-button-yes, 8%);
+$color-button-no: $color-red;
+$color-button-no-hover: darken($color-button-no, 20%);
+$color-link: $color-teal;
+$color-link-hover: $color-teal-dark;
+
+$color-text-base: $color-grey-2;
+$color-text-input: $color-grey-1;
+
+/* misc sizing */
+$thumbnail-width: 130px;
+$menu-width: 150px;
\ No newline at end of file
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/animated-overlay.gif b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/animated-overlay.gif
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/animated-overlay.gif
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/animated-overlay.gif
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_0_aaaaaa_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_0_aaaaaa_40x100.png
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_0_aaaaaa_40x100.png
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_0_aaaaaa_40x100.png
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_246060_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_100_246060_40x100.png
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_246060_40x100.png
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_100_246060_40x100.png
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_49c0c1_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_100_49c0c1_40x100.png
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_49c0c1_40x100.png
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_100_49c0c1_40x100.png
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_e8f8f9_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_100_e8f8f9_40x100.png
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_e8f8f9_40x100.png
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_100_e8f8f9_40x100.png
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_f7474e_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_100_f7474e_40x100.png
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_f7474e_40x100.png
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_100_f7474e_40x100.png
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_ffffff_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_100_ffffff_40x100.png
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_100_ffffff_40x100.png
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_100_ffffff_40x100.png
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_75_ffffff_40x100.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_75_ffffff_40x100.png
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_flat_75_ffffff_40x100.png
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_flat_75_ffffff_40x100.png
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_55_fbf9ee_1x400.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_glass_55_fbf9ee_1x400.png
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_55_fbf9ee_1x400.png
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_glass_55_fbf9ee_1x400.png
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_65_ffffff_1x400.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_glass_65_ffffff_1x400.png
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_65_ffffff_1x400.png
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_glass_65_ffffff_1x400.png
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_75_dadada_1x400.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_glass_75_dadada_1x400.png
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_75_dadada_1x400.png
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_glass_75_dadada_1x400.png
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_95_fef1ec_1x400.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_glass_95_fef1ec_1x400.png
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_glass_95_fef1ec_1x400.png
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_glass_95_fef1ec_1x400.png
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_highlight-soft_75_cccccc_1x100.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_highlight-soft_75_cccccc_1x100.png
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-bg_highlight-soft_75_cccccc_1x100.png
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-bg_highlight-soft_75_cccccc_1x100.png
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_222222_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_222222_256x240.png
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_222222_256x240.png
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_222222_256x240.png
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_2e83ff_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_2e83ff_256x240.png
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_2e83ff_256x240.png
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_2e83ff_256x240.png
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_454545_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_454545_256x240.png
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_454545_256x240.png
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_454545_256x240.png
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_49c0c1_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_49c0c1_256x240.png
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_49c0c1_256x240.png
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_49c0c1_256x240.png
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_888888_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_888888_256x240.png
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_888888_256x240.png
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_888888_256x240.png
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_cd0a0a_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_cd0a0a_256x240.png
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_cd0a0a_256x240.png
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_cd0a0a_256x240.png
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_ffffff_256x240.png b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_ffffff_256x240.png
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/images/ui-icons_ffffff_256x240.png
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/images/ui-icons_ffffff_256x240.png
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/jquery-ui-smoothness.css b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/jquery-ui-smoothness.css
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery-ui/jquery-ui-smoothness.css
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery-ui/jquery-ui-smoothness.css
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery.tagit.css b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery.tagit.css
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery.tagit.css
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery.tagit.css
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery.timepicker.css b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery.timepicker.css
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/jquery.timepicker.css
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/jquery.timepicker.css
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/vendor/tagit.ui-zendesk.css b/wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/tagit.ui-zendesk.css
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/vendor/tagit.ui-zendesk.css
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/vendor/tagit.ui-zendesk.css
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/css/wagtail-userbar.css b/wagtail/wagtailadmin/static/wagtailadmin/scss/wagtail-userbar.css
similarity index 100%
rename from wagtail/wagtailadmin/static/wagtailadmin/css/wagtail-userbar.css
rename to wagtail/wagtailadmin/static/wagtailadmin/scss/wagtail-userbar.css
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/complete.html b/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/complete.html
index 68537aba4..25c85fa84 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/complete.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/complete.html
@@ -5,7 +5,7 @@
 
 {% block extra_css %}
     {% compress css %}
-        <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/layouts/login.less" type="text/less" />
+        <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/layouts/login.scss" type="text/x-scss" />
     {% endcompress %}
 {% endblock %}
 
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/confirm.html b/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/confirm.html
index 966ca0dba..c5cfa958e 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/confirm.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/confirm.html
@@ -5,7 +5,7 @@
 
 {% block extra_css %}
     {% compress css %}
-        <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/layouts/login.less" type="text/less" />
+        <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/layouts/login.scss" type="text/x-scss" />
     {% endcompress %}
 {% endblock %}
 
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/done.html b/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/done.html
index d9df715b1..31ca4ab48 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/done.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/done.html
@@ -5,7 +5,7 @@
 
 {% block extra_css %}
     {% compress css %}
-        <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/layouts/login.less" type="text/less" />
+        <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/layouts/login.scss" type="text/x-scss" />
     {% endcompress %}
 {% endblock %}
 
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/form.html b/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/form.html
index db330566d..231eb6857 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/form.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/account/password_reset/form.html
@@ -5,7 +5,7 @@
 
 {% block extra_css %}
     {% compress css %}
-        <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/layouts/login.less" type="text/less" />
+        <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/layouts/login.scss" type="text/x-scss" />
     {% endcompress %}
 {% endblock %}
 
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/home.html b/wagtail/wagtailadmin/templates/wagtailadmin/home.html
index 870dc252d..1f353d20d 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/home.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/home.html
@@ -5,7 +5,7 @@
 
 {% block extra_css %}
     {% compress css %}
-        <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/layouts/home.less" type="text/less" />
+        <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/layouts/home.scss" type="text/x-scss" />
     {% endcompress %}
 {% endblock %}
 
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/login.html b/wagtail/wagtailadmin/templates/wagtailadmin/login.html
index 40fea931f..5f05c5673 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/login.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/login.html
@@ -5,7 +5,7 @@
 
 {% block extra_css %}
     {% compress css %}
-        <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/layouts/login.less" type="text/less" />
+        <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/layouts/login.scss" type="text/x-scss" />
     {% endcompress %}
 {% endblock %}
 
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/pages/_editor_css.html b/wagtail/wagtailadmin/templates/wagtailadmin/pages/_editor_css.html
index 3e4ba4e32..721037ff6 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/pages/_editor_css.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/pages/_editor_css.html
@@ -10,10 +10,10 @@
 {% endcomment %}
 
 {% compress css %}
-    <link rel="stylesheet" type="text/less" href="{{ STATIC_URL }}wagtailadmin/css/layouts/page-editor.less">
-    <link rel="stylesheet" type="text/less" href="{{ STATIC_URL }}wagtailadmin/css/panels/rich-text.less">
+    <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/layouts/page-editor.scss" type="text/x-scss" />
+    <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/panels/rich-text.scss" type="text/x-scss" />
 
     {# we'll want tag-it included, for the benefit of any modals that use it, like images. #}
     {# TODO: a method of injecting these sorts of things on demand when the modal is spawned #}
-    <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/vendor/jquery.tagit.css">
+    <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/vendor/jquery.tagit.css">
 {% endcompress %}
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/shared/tag_field_css.html b/wagtail/wagtailadmin/templates/wagtailadmin/shared/tag_field_css.html
index b4b5e49ec..8b21e6642 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/shared/tag_field_css.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/shared/tag_field_css.html
@@ -1,4 +1,4 @@
 {% load compress %}
 {% compress css %}
-    <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/vendor/jquery.tagit.css">
+    <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/vendor/jquery.tagit.css">
 {% endcompress %}
diff --git a/wagtail/wagtailadmin/templates/wagtailadmin/skeleton.html b/wagtail/wagtailadmin/templates/wagtailadmin/skeleton.html
index a816e59c1..37390a5b1 100644
--- a/wagtail/wagtailadmin/templates/wagtailadmin/skeleton.html
+++ b/wagtail/wagtailadmin/templates/wagtailadmin/skeleton.html
@@ -18,10 +18,10 @@
         <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Bitter:400,700" /> 
         
         {% compress css %}
-            <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/normalize.css" />
-            <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css" />
-            <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/vendor/jquery.timepicker.css" />
-            <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/css/core.less" type="text/less" />
+            <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/normalize.css" />
+            <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/vendor/jquery-ui/jquery-ui-1.10.3.verdant.css" />
+            <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/vendor/jquery.timepicker.css" />
+            <link rel="stylesheet" href="{{ STATIC_URL }}wagtailadmin/scss/core.scss" type="text/x-scss" />
         {% endcompress %}
 
         {% block extra_css %}{% endblock %}
diff --git a/wagtail/wagtailredirects/templates/wagtailredirects/edit.html b/wagtail/wagtailredirects/templates/wagtailredirects/edit.html
index c34f040d5..8f0e83983 100644
--- a/wagtail/wagtailredirects/templates/wagtailredirects/edit.html
+++ b/wagtail/wagtailredirects/templates/wagtailredirects/edit.html
@@ -5,7 +5,7 @@
 
     {% include "wagtailadmin/shared/header.html" with title="Editing" subtitle=redirect.title %}
 
-    <form action="{% url 'wagtailredirects_edit_redirect' redirect.id %}" method="POST" class="nice-padding">>
+    <form action="{% url 'wagtailredirects_edit_redirect' redirect.id %}" method="POST" class="nice-padding">
         {% csrf_token %}
         {{ edit_handler.render_form_content }}
 

From 3bd7fd1940aa6865cdf3085be395fdc01a1d5419 Mon Sep 17 00:00:00 2001
From: Dave Cranwell <david@torchbox.com>
Date: Tue, 11 Feb 2014 17:23:56 +0000
Subject: [PATCH 02/13] updates

---
 wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss   | 2 +-
 wagtail/wagtailadmin/static/wagtailadmin/scss/mixins.scss | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
index e55bc23ca..05a24082e 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
@@ -850,7 +850,7 @@ footer, .logo{
         }
     }
     .explorer {
-        z-index:@explorer-z-index;
+        z-index:$explorer-z-index;
     }
     .nav-wrapper{
         z-index:auto; /* allows overspill of messages banner onto left menu, but also explorer to spill over main content */
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/mixins.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/mixins.scss
index b4cb42618..05d23455d 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/mixins.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/mixins.scss
@@ -80,6 +80,9 @@
         width: auto; 
     }
 }
+.visuallyhidden{
+    @include visuallyhidden;
+}
 
 @mixin visuallyvisible{
     clip:none;
@@ -88,4 +91,8 @@
     margin:auto;
     overflow:visible;
     position:initial;
+}
+
+.visuallyvisible{
+    @include visuallyvisible;
 }
\ No newline at end of file

From 5e9128fd2adb104b4b5dc9e01e98d39021f62223 Mon Sep 17 00:00:00 2001
From: Dave Cranwell <david@torchbox.com>
Date: Wed, 12 Feb 2014 11:08:15 +0000
Subject: [PATCH 03/13] merging change from master

---
 .../wagtailadmin/scss/components/listing.scss      | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss
index 7949f01c9..cacedcc01 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss
@@ -184,12 +184,18 @@ ul.listing{
         color:white;
         background-color:$color-header-bg;
 
-        .title h2{
-            color:white;
-            font-size:1.3em;
+        .title{
+            padding-top:1.3em;
+            padding-bottom:1.3em;
 
-            a:hover{
+            h2{
                 color:white;
+                font-size:1.8em;
+                font-weight:600;
+
+                a:hover{
+                    color:white;
+                }
             }
         }
     }

From b45472ea00f04e969873cfc797607cb6f06680b9 Mon Sep 17 00:00:00 2001
From: Matt Westcott <matt@west.co.tt>
Date: Thu, 13 Feb 2014 20:16:41 +0000
Subject: [PATCH 04/13] Use staticfiles-ish paths in import lines, to work with
 django-pyscss

---
 .../static/wagtailadmin/scss/core.scss        | 30 +++++++++----------
 .../wagtailadmin/scss/layouts/home.scss       |  6 ++--
 .../wagtailadmin/scss/layouts/login.scss      |  6 ++--
 .../scss/layouts/page-editor.scss             |  6 ++--
 .../wagtailadmin/scss/panels/rich-text.scss   |  4 +--
 5 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
index 05a24082e..8465112c2 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
@@ -1,16 +1,16 @@
-@import "variables.scss";
-@import "mixins.scss";
-@import "grid.scss";
+@import "/wagtailadmin/scss/variables.scss";
+@import "/wagtailadmin/scss/mixins.scss";
+@import "/wagtailadmin/scss/grid.scss";
 
-@import "components/explorer.scss";
-@import "components/icons.scss";
-@import "components/tabs.scss";
-@import "components/dropdowns.scss";
-@import "components/modals.scss";
-@import "components/forms.scss";
-@import "components/listing.scss";
-@import "components/messages.scss";
-@import "components/formatters.scss";
+@import "/wagtailadmin/scss/components/explorer.scss";
+@import "/wagtailadmin/scss/components/icons.scss";
+@import "/wagtailadmin/scss/components/tabs.scss";
+@import "/wagtailadmin/scss/components/dropdowns.scss";
+@import "/wagtailadmin/scss/components/modals.scss";
+@import "/wagtailadmin/scss/components/forms.scss";
+@import "/wagtailadmin/scss/components/listing.scss";
+@import "/wagtailadmin/scss/components/messages.scss";
+@import "/wagtailadmin/scss/components/formatters.scss";
 
 html{
     background:$color-grey-4;
@@ -823,16 +823,16 @@ footer, .logo{
             }
         }
         .col3{
-            .col3();
+            @include col3();
         }
         .col3.addbutton{
             width:auto;
         }
         .col6{
-            .col6();
+            @include col6();
         }
         .col9{
-            .col9();
+            @include col9();
         }
     }
     footer{
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/home.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/home.scss
index 8312dc70b..9dbb1ad15 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/home.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/home.scss
@@ -1,6 +1,6 @@
-@import "variables.scss";
-@import "mixins.scss";
-@import "grid.scss";
+@import "/wagtailadmin/scss/variables.scss";
+@import "/wagtailadmin/scss/mixins.scss";
+@import "/wagtailadmin/scss/grid.scss";
 
 h1{
     font-weight:300;
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss
index cc7064eb0..7ba0eeb37 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss
@@ -1,6 +1,6 @@
-@import "variables.scss";
-@import "mixins.scss";
-@import "grid.scss";
+@import "/wagtailadmin/scss/variables.scss";
+@import "/wagtailadmin/scss/mixins.scss";
+@import "/wagtailadmin/scss/grid.scss";
 
 $desktop-padding: 100px;
 
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
index 0cb79e81f..e36e6f15e 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
@@ -1,6 +1,6 @@
-@import "variables.scss";
-@import "mixins.scss";
-@import "grid.scss";
+@import "/wagtailadmin/scss/variables.scss";
+@import "/wagtailadmin/scss/mixins.scss";
+@import "/wagtailadmin/scss/grid.scss";
 
 .page-editor .content-wrapper{
     margin-bottom:10em;
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/panels/rich-text.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/panels/rich-text.scss
index b95e0fe6d..73b6bebae 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/panels/rich-text.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/panels/rich-text.scss
@@ -1,5 +1,5 @@
-@import "variables.scss";
-@import "mixins.scss";
+@import "/wagtailadmin/scss/variables.scss";
+@import "/wagtailadmin/scss/mixins.scss";
 
 .hallotoolbar{
     position:absolute;

From 530b2b22475a442069d843bec20dc05fba286c5a Mon Sep 17 00:00:00 2001
From: Dave Cranwell <david@torchbox.com>
Date: Fri, 14 Feb 2014 10:01:45 +0000
Subject: [PATCH 05/13] merging changes to less in master

---
 .../wagtailadmin/static/wagtailadmin/scss/components/forms.scss | 2 +-
 wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss         | 1 +
 .../wagtailadmin/static/wagtailadmin/scss/layouts/login.scss    | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
index 416670c95..632df4a8f 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
@@ -378,7 +378,7 @@ li.focused > .help{
     color:$color-red;
     clear:both;
 }
-.error input[type=text], .error input[type=email], .error input[type=tel], .error textarea, .error select, .error .tagit{
+.error input, .error textarea, .error select, .error .tagit{
     border-color:$color-red;
     background-color:$color-input-error-bg;
 }
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
index 8465112c2..8d2acfded 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
@@ -63,6 +63,7 @@ h2{
     }
 }
 a{
+    outline:none;
     color:$color-link;
     text-decoration:none;
 
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss
index 7ba0eeb37..cc1b7de62 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss
@@ -157,7 +157,7 @@ form{
             display: inline-block;
             height: 100%;
             vertical-align: middle;
-            margin-left:-0.3em;
+            margin-left:-0.4em;
         }
     }
     

From 120f8a4abffee110fc5c75b3c4007bf7d52470ee Mon Sep 17 00:00:00 2001
From: Dave Cranwell <david@torchbox.com>
Date: Fri, 14 Feb 2014 11:51:27 +0000
Subject: [PATCH 06/13] various regression fixes

---
 .../scss/components/messages.scss             | 36 +++++++++----------
 .../static/wagtailadmin/scss/core.scss        |  8 ++---
 .../static/wagtailadmin/scss/grid.scss        | 10 +++---
 .../wagtailadmin/scss/layouts/login.scss      | 18 +++++-----
 .../scss/layouts/page-editor.scss             |  5 +--
 .../static/wagtailadmin/scss/variables.scss   |  3 ++
 6 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/messages.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/messages.scss
index b98195a50..849e07991 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/messages.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/messages.scss
@@ -5,15 +5,12 @@
 
     ul{
         @include unlist();
-        padding-left:10px;
         position:relative;
         top:-100px;
         opacity:0;
     }
     li{
-        .nice-padding;
-        padding-top:1.3em;
-        padding-bottom:1.3em;
+        padding: 1.3em $mobile-nice-padding;
         color:white;
     }
     .error{
@@ -38,21 +35,24 @@
 }
 
 @media screen and (min-width: $breakpoint-mobile){
-    .messages{
-        ul{
-            margin-left:-15px;
+    .messages ul{
+        padding-left:0;
+        margin-left:-15px;
 
-            &:before{
-                content: "";
-                height: 0;
-                width: 0;
-                display: block;
-                position: absolute;
-                bottom: -15px;
-                left: 0;
-                border-top: 15px solid #000;
-                border-left: 15px solid transparent;
-            }
+        li{
+            padding-left:$desktop-nice-padding;
+            padding-right:$desktop-nice-padding;
+        }
+        &:before{
+            content: "";
+            height: 0;
+            width: 0;
+            display: block;
+            position: absolute;
+            bottom: -15px;
+            left: 0;
+            border-top: 15px solid #000;
+            border-left: 15px solid transparent;
         }
     }
 }
\ No newline at end of file
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
index 8d2acfded..56d796b96 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
@@ -608,8 +608,8 @@ footer{
 }
 
 .nice-padding{
-    padding-left:20px;
-    padding-right:20px;
+    padding-left:$mobile-nice-padding;
+    padding-right:$mobile-nice-padding;
 }
 
 
@@ -674,8 +674,8 @@ footer, .logo{
     }
 
     .nice-padding{
-        padding-left:50px;
-        padding-right:50px;
+        padding-left:$desktop-nice-padding;
+        padding-right:$desktop-nice-padding;
     }
 
     body{
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/grid.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/grid.scss
index d0f0fc98c..2077b98d5 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/grid.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/grid.scss
@@ -68,12 +68,12 @@ $padding: $grid-gutter-width*0.5;
 
 /* only used in places where padding not applied to same elements as row or row-flush 
  * most of the time this class should be applied directly to the html elements */
-@mixin nice-padding(){
-    padding-left:20px;
-    padding-right:20px;
+@mixin nice-padding{
+    padding-left: $mobile-nice-padding;
+    padding-right: $mobile-nice-padding;
 
     @media screen and (min-width: $breakpoint-mobile){
-        padding-left:50px;
-        padding-right:50px;
+        padding-left: $desktop-nice-padding;
+        padding-right: $desktop-nice-padding;
     }
 }
\ No newline at end of file
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss
index cc1b7de62..1b70e9836 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss
@@ -2,7 +2,8 @@
 @import "/wagtailadmin/scss/mixins.scss";
 @import "/wagtailadmin/scss/grid.scss";
 
-$desktop-padding: 100px;
+// overrides default nice padding defined in variables.scss
+$desktop-nice-padding: 100px;
 
 html, body, .content-wrapper{
     background-color:$color-grey-1;
@@ -22,7 +23,8 @@ body{
     border:0;
 }
 .wrapper{
-    @include nice-padding();
+    padding-left:$mobile-nice-padding;
+    padding-right:$mobile-nice-padding;
     max-width:none;
 }
 
@@ -101,8 +103,9 @@ form{
 
     /* Special full-width, one-off fields i.e a single text or textarea input */
     .full input{
-        @include nice-padding();
         @include border-radius(0px);
+        padding-left:$mobile-nice-padding;
+        padding-right:$mobile-nice-padding;
         font-weight:300;
         border:0;
         padding-top:1.5em;
@@ -136,7 +139,6 @@ form{
     }
 }
 
-
 @media screen and (min-width: $breakpoint-mobile){
     .content-wrapper{
         float:none;
@@ -150,7 +152,7 @@ form{
     .wrapper{
         position:relative;
         height:100%;
-        padding:0 $desktop-padding;
+        padding:0 $desktop-nice-padding;
         
         &:before {
             content: '';
@@ -173,16 +175,16 @@ form{
         border-radius: 100%;
         width: 1em;
         padding: 0.3em;
-        left: $desktop-padding;
+        left: $desktop-nice-padding;
         margin-top: -1em;
         top: 50%;
     }
 
     .full{
-        margin:0 -$desktop-padding;
+        margin:0 -$desktop-nice-padding;
         
         input{
-            padding-left:$desktop-padding + 50px;
+            padding-left:($desktop-nice-padding + 50px);
         }
     }
 }
\ No newline at end of file
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
index e36e6f15e..c5d0de5b7 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
@@ -135,8 +135,6 @@
             padding:0;
         }
 
-       
-
         input, textarea, .richtext{
             @include nice-padding();
             @include border-radius(0px);
@@ -144,8 +142,7 @@
             padding-top:2em;
             padding-bottom:2em;
             font-size:1.2em;
-            line-height:1.6em;
-            
+            line-height:1.6em;   
         }
 
         .richtext{
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/variables.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/variables.scss
index 6ed55b896..e1adba10b 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/variables.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/variables.scss
@@ -8,6 +8,9 @@ $grid-gutter-width: 3%;
 $grid-max-width: 1200px;
 $grid-content-indent:0.7;
 
+$mobile-nice-padding: 20px;
+$desktop-nice-padding: 50px;
+
 /* screen breakpoints */
 $breakpoint-mobile: 50em; /* 800px */
 $breakpoint-desktop-small: 56.25em; /* 900px */

From 47dc71b6fd6ab9e9ed5d0ccc87d032dc785be0ee Mon Sep 17 00:00:00 2001
From: Karl Hobley <karl@torchbox.com>
Date: Fri, 14 Feb 2014 12:47:21 +0000
Subject: [PATCH 07/13] Revert "Change login view to the login_wrapper view"

This reverts commit 193b75e1526ebd5bbc96a4a9639129664c579672.
---
 wagtail/wagtailadmin/urls.py          | 16 ++++++++--------
 wagtail/wagtailadmin/views/account.py |  3 ++-
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/wagtail/wagtailadmin/urls.py b/wagtail/wagtailadmin/urls.py
index 93b78bed3..b26591905 100644
--- a/wagtail/wagtailadmin/urls.py
+++ b/wagtail/wagtailadmin/urls.py
@@ -6,6 +6,13 @@ from wagtail.wagtailadmin.forms import LoginForm, PasswordResetForm
 
 urlpatterns = patterns(
     'django.contrib.auth.views',
+    url(
+        r'^login/$', 'login', {
+            'template_name': 'wagtailadmin/login.html',
+            'authentication_form': LoginForm,
+            'extra_context': {'show_password_reset': getattr(settings, 'WAGTAIL_PASSWORD_MANAGEMENT_ENABLED', True)},
+        } , name='wagtailadmin_login'
+    ),
     url(r'^logout/$', 'logout', {'next_page': 'wagtailadmin_login'}),
 
     # Password reset
@@ -72,11 +79,4 @@ urlpatterns += patterns(
 
     url(r'^account/$', 'account.account', name='wagtailadmin_account'),
     url(r'^account/change_password/$', 'account.change_password', name='wagtailadmin_account_change_password'),
-    url(
-        r'^login/$', 'account.login_wrapper', {
-            'template_name': 'wagtailadmin/login.html',
-            'authentication_form': LoginForm,
-            'extra_context': {'show_password_reset': getattr(settings, 'WAGTAIL_PASSWORD_MANAGEMENT_ENABLED', True)},
-        } , name='wagtailadmin_login'
-    ),
-)
\ No newline at end of file
+)
diff --git a/wagtail/wagtailadmin/views/account.py b/wagtail/wagtailadmin/views/account.py
index 2bac17ac6..7188f37a7 100644
--- a/wagtail/wagtailadmin/views/account.py
+++ b/wagtail/wagtailadmin/views/account.py
@@ -38,4 +38,5 @@ def login_wrapper(request, **kwargs):
     if request.user.is_authenticated():
         return redirect(settings.LOGIN_REDIRECT_URL)
     else:
-        return login(request, **kwargs)
\ No newline at end of file
+        return login(request, **kwargs)
+        

From 703a90feff6e310a69aa534ae58c0eb579cde302 Mon Sep 17 00:00:00 2001
From: Karl Hobley <karl@torchbox.com>
Date: Fri, 14 Feb 2014 12:47:34 +0000
Subject: [PATCH 08/13] Revert "Create login_wrapper view"

This reverts commit 4f914fdc57a835eb692ebfce5ba22d9f4ed7af20.
---
 wagtail/wagtailadmin/views/account.py | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/wagtail/wagtailadmin/views/account.py b/wagtail/wagtailadmin/views/account.py
index 7188f37a7..b352d06b3 100644
--- a/wagtail/wagtailadmin/views/account.py
+++ b/wagtail/wagtailadmin/views/account.py
@@ -2,7 +2,6 @@ from django.conf import settings
 from django.shortcuts import render, redirect
 from django.contrib import messages
 from django.contrib.auth.forms import SetPasswordForm
-from django.contrib.auth.views import login
 
 
 def account(request):
@@ -32,11 +31,3 @@ def change_password(request):
         'form': form,
         'can_change_password': can_change_password,
     })
-
-# Wrap login view to prevent logged in users accessing the page
-def login_wrapper(request, **kwargs):
-    if request.user.is_authenticated():
-        return redirect(settings.LOGIN_REDIRECT_URL)
-    else:
-        return login(request, **kwargs)
-        

From b415bd2d2491c1ec584b669729ad066ced2c8412 Mon Sep 17 00:00:00 2001
From: Matt Westcott <matt@west.co.tt>
Date: Fri, 28 Feb 2014 16:48:33 +0000
Subject: [PATCH 09/13] Fix SASS to be acceptable to the libsass compiler

---
 .../scss/components/formatters.scss           |  4 +++
 .../wagtailadmin/scss/components/forms.scss   | 13 ++++----
 .../wagtailadmin/scss/components/icons.scss   |  4 +--
 .../wagtailadmin/scss/components/listing.scss |  4 +++
 .../static/wagtailadmin/scss/core.scss        | 30 +++++++++----------
 .../static/wagtailadmin/scss/grid.scss        |  4 +--
 .../wagtailadmin/scss/layouts/home.scss       |  6 ++--
 .../wagtailadmin/scss/layouts/login.scss      |  6 ++--
 .../scss/layouts/page-editor.scss             |  6 ++--
 .../wagtailadmin/scss/panels/rich-text.scss   |  4 +--
 10 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss
index 59770d30a..e2dbfea12 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss
@@ -130,11 +130,13 @@
         background:white
     }
 
+    /* FIXME: needs converting to valid SASS
     a&:hover,
     a&.primary:hover{
         border-color:$color-teal;
         color:$color-teal;
     }
+    */
 }
 
 /* free tagging tags from taggit */
@@ -155,10 +157,12 @@
         content:"u";
         padding-right:0.5em;
     }
+    /* FIXME: needs converting to valid SASS
     a&:hover{
         background-color:$color-teal-darker;
         color:white;
     }
+    */
 
     .taglist &{
         margin-right:0.8em;
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
index 7f615fe6f..98b370ef2 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
@@ -535,13 +535,12 @@ ul.inline li:first-child, li.inline:first-child{
     .tagit-choice{
         border:0;
     }
-
-    ul& input[type="text"]{
-        padding: 0.2em 0.5em !important; /* having to use important, FML*/
-    }
-    ul& li.tagit-choice-editable{
-        padding:0 23px 0 0 !important; /* having to use important, FML*/
-    }
+}
+ul.tagit input[type="text"]{
+    padding: 0.2em 0.5em !important; /* having to use important, FML*/
+}
+ul.tagit li.tagit-choice-editable{
+    padding:0 23px 0 0 !important; /* having to use important, FML*/
 }
 
 .tagit-close{
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/icons.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/icons.scss
index 6915a46a5..2a5c8be72 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/icons.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/icons.scss
@@ -12,7 +12,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
     @font-face {
         font-family: 'wagtail';
-        src: url("#{$css-root}fonts/wagtail.svg#wagtail") format("svg"),
+        src: url("#{$css-root}fonts/wagtail.svg#wagtail") format("svg");
     }
 }
 
@@ -60,7 +60,7 @@
 }
 
 
-.icon-cogs:before, {
+.icon-cogs:before {
     content: "a";
 }
 .icon-doc-empty-inverse:before {
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss
index cacedcc01..b15d66235 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss
@@ -5,10 +5,12 @@ ul.listing{
 
 .listing{
     margin-bottom:2em;
+    /* FIXME: needs converting to valid SASS
     ul&{
         border-top:1px dashed $color-input-border;
         margin-bottom:2em;
     }
+    */
     ul{
         @include unlist();
     }
@@ -22,9 +24,11 @@ ul.listing{
         font-size:0.95em;
     }
 
+    /* FIXME: needs converting to valid SASS
     table&{
         width:100%;
     }
+    */
    
     td, th{
         padding:1.5em 1em;
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
index 56d796b96..72dadefd3 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
@@ -1,16 +1,16 @@
-@import "/wagtailadmin/scss/variables.scss";
-@import "/wagtailadmin/scss/mixins.scss";
-@import "/wagtailadmin/scss/grid.scss";
+@import "variables.scss";
+@import "mixins.scss";
+@import "grid.scss";
 
-@import "/wagtailadmin/scss/components/explorer.scss";
-@import "/wagtailadmin/scss/components/icons.scss";
-@import "/wagtailadmin/scss/components/tabs.scss";
-@import "/wagtailadmin/scss/components/dropdowns.scss";
-@import "/wagtailadmin/scss/components/modals.scss";
-@import "/wagtailadmin/scss/components/forms.scss";
-@import "/wagtailadmin/scss/components/listing.scss";
-@import "/wagtailadmin/scss/components/messages.scss";
-@import "/wagtailadmin/scss/components/formatters.scss";
+@import "components/explorer.scss";
+@import "components/icons.scss";
+@import "components/tabs.scss";
+@import "components/dropdowns.scss";
+@import "components/modals.scss";
+@import "components/forms.scss";
+@import "components/listing.scss";
+@import "components/messages.scss";
+@import "components/formatters.scss";
 
 html{
     background:$color-grey-4;
@@ -824,16 +824,16 @@ footer, .logo{
             }
         }
         .col3{
-            @include col3();
+            @include column(3);
         }
         .col3.addbutton{
             width:auto;
         }
         .col6{
-            @include col6();
+            @include column(6);
         }
         .col9{
-            @include col9();
+            @include column(9);
         }
     }
     footer{
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/grid.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/grid.scss
index 2077b98d5..359fe49c8 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/grid.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/grid.scss
@@ -1,4 +1,4 @@
-/* Utility variable — you should never need to modify this */
+/* Utility variable - you should never need to modify this */
 $gridsystem_width: $grid-columns * 1px;
 $padding: $grid-gutter-width*0.5;
 
@@ -60,7 +60,7 @@ $padding: $grid-gutter-width*0.5;
 
 /* Pull adds right padding */
 @mixin pull($offset:1, $grid-columns:$grid-columns) {
-    margin-right: 100%*(@offset / $grid-columns);
+    margin-right: 100%*($offset / $grid-columns);
 }
 @mixin pull-padding($offset:1, $grid-columns:$grid-columns){
     padding-right: 100%*($offset / $grid-columns);
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/home.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/home.scss
index 9dbb1ad15..61f7c34ac 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/home.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/home.scss
@@ -1,6 +1,6 @@
-@import "/wagtailadmin/scss/variables.scss";
-@import "/wagtailadmin/scss/mixins.scss";
-@import "/wagtailadmin/scss/grid.scss";
+@import "../variables.scss";
+@import "../mixins.scss";
+@import "../grid.scss";
 
 h1{
     font-weight:300;
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss
index 471ffb764..a414a44d4 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/login.scss
@@ -1,6 +1,6 @@
-@import "/wagtailadmin/scss/variables.scss";
-@import "/wagtailadmin/scss/mixins.scss";
-@import "/wagtailadmin/scss/grid.scss";
+@import "../variables.scss";
+@import "../mixins.scss";
+@import "../grid.scss";
 
 // overrides default nice padding defined in variables.scss
 $desktop-nice-padding: 100px;
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
index c5d0de5b7..fd195fa89 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss
@@ -1,6 +1,6 @@
-@import "/wagtailadmin/scss/variables.scss";
-@import "/wagtailadmin/scss/mixins.scss";
-@import "/wagtailadmin/scss/grid.scss";
+@import "../variables.scss";
+@import "../mixins.scss";
+@import "../grid.scss";
 
 .page-editor .content-wrapper{
     margin-bottom:10em;
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/panels/rich-text.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/panels/rich-text.scss
index 73b6bebae..f2535b20a 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/panels/rich-text.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/panels/rich-text.scss
@@ -1,5 +1,5 @@
-@import "/wagtailadmin/scss/variables.scss";
-@import "/wagtailadmin/scss/mixins.scss";
+@import "../variables.scss";
+@import "../mixins.scss";
 
 .hallotoolbar{
     position:absolute;

From 15a81d5165441fd1f4dc5a22e09351687936991a Mon Sep 17 00:00:00 2001
From: Dave Cranwell <david@torchbox.com>
Date: Mon, 3 Mar 2014 18:07:25 +0000
Subject: [PATCH 10/13] various syntactic updates that sass requires

---
 .../scss/components/formatters.scss           | 25 ++++++++-----------
 .../wagtailadmin/scss/components/forms.scss   |  2 +-
 .../scss/components/messages.scss             |  4 +--
 .../static/wagtailadmin/scss/core.scss        |  2 +-
 .../static/wagtailadmin/scss/mixins.scss      |  6 ++---
 5 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss
index e2dbfea12..2a3ae2409 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/formatters.scss
@@ -129,14 +129,11 @@
         border:1px solid $color-grey-2;
         background:white
     }
-
-    /* FIXME: needs converting to valid SASS
-    a&:hover,
-    a&.primary:hover{
-        border-color:$color-teal;
-        color:$color-teal;
-    }
-    */
+}
+a.status-tag:hover,
+a.status-tag.primary:hover{
+    border-color:$color-teal;
+    color:$color-teal;
 }
 
 /* free tagging tags from taggit */
@@ -157,17 +154,17 @@
         content:"u";
         padding-right:0.5em;
     }
-    /* FIXME: needs converting to valid SASS
-    a&:hover{
-        background-color:$color-teal-darker;
-        color:white;
-    }
-    */
 
     .taglist &{
         margin-right:0.8em;
     }
 }
+a.tag:hover{
+    background-color:$color-teal-darker;
+    color:white;
+}
+
+
 .taglist {
     font-size:0.9em;
     line-height:2.4em;
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
index 98b370ef2..a44241700 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/forms.scss
@@ -649,7 +649,7 @@ fieldset, input, textarea, select{
     @include transition(background-color 0.2s ease);
 }
 input[type=submit], input[type=reset], input[type=button], .button, button{
-    @include transition("background-color 0.2s ease, color 0.2s ease");
+    @include transition(background-color 0.2s ease, color 0.2s ease);
 }
 .help{
     @include transition(opacity 0.2s ease);
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/messages.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/messages.scss
index ccb905b86..7f58dd869 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/messages.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/messages.scss
@@ -11,7 +11,7 @@
         opacity:0;
     }
     li{
-        @include .nice-padding;
+        @include nice-padding;
         padding-top:1.3em;
         padding-bottom:1.3em;
         color:white;
@@ -34,7 +34,7 @@
 
 .ready .messages ul,
 .messages.appear ul{
-    @include transition-immediate("top 0.5s ease, opacity 0.5s ease, max-height 1.2s ease");
+    @include transition-immediate(top 0.5s ease, opacity 0.5s ease, max-height 1.2s ease);
     opacity:1;
     top:0;
 }
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
index 72dadefd3..97a727799 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss
@@ -888,5 +888,5 @@ footer,
     @include transition-transform(0.2s ease);
 }
 .nav-main a, a{
-    @include transition("color 0.2s ease, background-color 0.2s ease");
+    @include transition(color 0.2s ease, background-color 0.2s ease);
 }
\ No newline at end of file
diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/mixins.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/mixins.scss
index 05d23455d..c990eb43c 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/mixins.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/mixins.scss
@@ -21,7 +21,7 @@
     }
 }
 
-@mixin transition($transition){
+@mixin transition($transition...){
     body.ready &{
         -webkit-transition: $transition;
         -moz-transition: $transition;
@@ -29,14 +29,14 @@
         transition: $transition;
     }
 }
-@mixin transition-immediate($transition){
+@mixin transition-immediate($transition...){
     -webkit-transition: $transition;
     -moz-transition: $transition;
     -o-transition: $transition;
     transition: $transition;
 }
 
-@mixin transition-transform($transition) {
+@mixin transition-transform($transition...) {
   -webkit-transition: -webkit-transform $transition;
      -moz-transition: -moz-transform $transition;
        -o-transition: -o-transform $transition;

From 711cc045bb18bbb4d88be079297bece013a1c901 Mon Sep 17 00:00:00 2001
From: Dave Cranwell <david@torchbox.com>
Date: Tue, 4 Mar 2014 17:03:48 +0000
Subject: [PATCH 11/13] removed transitions on chooser, it looks sloppy and
 delayed in what should be a quick forgettable interface

---
 .../static/wagtailadmin/scss/components/listing.scss           | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss
index 152c87973..5e285ba14 100644
--- a/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss
+++ b/wagtail/wagtailadmin/static/wagtailadmin/scss/components/listing.scss
@@ -99,6 +99,9 @@ ul.listing{
     &.full-width tbody tr:hover{
         background-color:#FDFDFD;
     }
+    &.chooser tr.can-choose a{
+        @include transition(none);
+    }
     &.chooser tr.can-choose:hover{
         background-color:$color-teal;
         color:white;

From f8fae0d9684a1f3352151799a727037bb4fdb780 Mon Sep 17 00:00:00 2001
From: Matt Westcott <matt@west.co.tt>
Date: Wed, 5 Mar 2014 20:02:54 +0000
Subject: [PATCH 12/13] specify django-libsass as a dependency

---
 setup.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/setup.py b/setup.py
index 921f01566..b33576f54 100644
--- a/setup.py
+++ b/setup.py
@@ -42,6 +42,7 @@ setup(
         "Django>=1.6.2",
         "South>=0.8.4",
         "django-compressor>=1.3",
+        "django-libsass>=0.1",
         "django-modelcluster>=0.1",
         "django-taggit>=0.11.2",
         "Pillow>=2.3.0",

From e5e3f000add9a7da346390fb3c1c71d2e979cc21 Mon Sep 17 00:00:00 2001
From: Matt Westcott <matt@west.co.tt>
Date: Wed, 5 Mar 2014 20:05:26 +0000
Subject: [PATCH 13/13] Remove all reference to less/npm in docs and install
 scripts

---
 docs/performance.rst      | 5 -----
 scripts/install/debian.sh | 8 --------
 scripts/install/ubuntu.sh | 4 ----
 3 files changed, 17 deletions(-)

diff --git a/docs/performance.rst b/docs/performance.rst
index cfbcea59e..2f4a834e0 100644
--- a/docs/performance.rst
+++ b/docs/performance.rst
@@ -35,11 +35,6 @@ Database
 
 Wagtail is tested on SQLite, and should work on other Django-supported database backends, but we recommend PostgreSQL for production use.
 
-Asset compression
------------------
-
-The Wagtail editor UI is based on `Less <http://lesscss.org/>`_. We aim to provide support for pure-Python Less compilation, to minimise installation requirements, but the official node.js-based compiler is significantly faster. We recommend installing this in production, and you may also prefer to use it to speed up your development environment.
-
 Public users
 ~~~~~~~~~~~~
 
diff --git a/scripts/install/debian.sh b/scripts/install/debian.sh
index 2b1c04326..93f513d16 100644
--- a/scripts/install/debian.sh
+++ b/scripts/install/debian.sh
@@ -35,14 +35,6 @@ aptitude update
 aptitude -y install git python-pip nginx postgresql redis-server
 aptitude -y install postgresql-server-dev-all python-dev libxml2-dev libxslt-dev libjpeg62-dev
 
-wget -nv http://nodejs.org/dist/v0.10.20/node-v0.10.20.tar.gz
-tar xzf node-v0.10.20.tar.gz
-cd node-v0.10.20
-./configure && make -s && make -s install
-cd ..
-rm -r node-v0.10.20 node-v0.10.20.tar.gz
-npm install -g less
-
 perl -pi -e "s/^(local\s+all\s+postgres\s+)peer$/\1trust/" /etc/postgresql/9.1/main/pg_hba.conf
 service postgresql reload
 
diff --git a/scripts/install/ubuntu.sh b/scripts/install/ubuntu.sh
index ac38d5910..ad7e11a0b 100644
--- a/scripts/install/ubuntu.sh
+++ b/scripts/install/ubuntu.sh
@@ -33,10 +33,6 @@ aptitude update
 aptitude -y install git python-pip nginx postgresql redis-server
 aptitude -y install postgresql-server-dev-all python-dev libxml2-dev libxslt-dev libjpeg62-dev
 
-aptitude -y install npm
-ln -s /usr/bin/nodejs /usr/bin/node
-npm install -g less
-
 perl -pi -e "s/^(local\s+all\s+postgres\s+)peer$/\1trust/" /etc/postgresql/9.1/main/pg_hba.conf
 service postgresql reload