mixins which only do prefixing removed in favour of depending more on…

… autoprefixer
ashwoods · Dec 2, 2015 · 7bc1c24 · 7bc1c24
1 parent e671a83
commit 7bc1c24
Show file tree

Hide file tree

Showing 18 changed files with 73 additions and 132 deletions.
diff --git a/gulpfile.js/tasks/styles.js b/gulpfile.js/tasks/styles.js
@@ -32,7 +32,7 @@ gulp.task('styles:sass', function () {
             outputStyle: 'expanded'
         }))
         .pipe(autoprefixer({
-            browsers: ['last 2 versions'],
+            browsers: ['last 3 versions', 'not ie <= 8'],
             cascade: false
         }))
         .pipe(gulp.dest(function(file) {

diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/dropdowns.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/dropdowns.scss
@@ -77,7 +77,7 @@
         input[type=button], 
         .button, 
         button {
-            @include border-radius(0);
+            border-radius: 0;
             font-size: 0.95em;
             -webkit-font-smoothing: auto;
         }
@@ -97,7 +97,7 @@
     }
 
     &.open ul {
-        @include box-shadow(0 3px 3px 0 rgba(0, 0, 0, 0.2));
+        box-shadow(0 3px 3px 0 rgba(0, 0, 0, 0.2);
         opacity: 1;
         left: 0;
         display: block;
@@ -112,9 +112,8 @@
         }
     }
 
-
     &.dropup ul {
-        @include box-shadow(0 -3px 3px 0 rgba(0, 0, 0, 0.2));
+        box-shadow(0 -3px 3px 0 rgba(0, 0, 0, 0.2);
         top: auto;
         bottom: 100%;
 
@@ -159,19 +158,19 @@
 
     &.dropdown-button {
         .dropdown-toggle {
-            @include border-radius(0 3px 3px 0);
+            border-radius: 0 3px 3px 0;
         }
 
         &.open {
             > input[type=button], 
             > input[type=submit], 
             > button, 
             > .button {
-                @include border-radius(3px 3px 0 0);
+                border-radius: 3px 3px 0 0;
             }
 
             .dropdown-toggle {
-                @include border-radius(0 3px 0 0);
+                border-radius: 0 3px 0 0;
             }
         }
     }
@@ -182,11 +181,11 @@
             > input[type=submit], 
             > button, 
             > .button {
-                @include border-radius(0 0 3px 3px);
+                border-radius: 0 0 3px 3px;
             }
 
             .dropdown-toggle {
-                @include border-radius(0 0 3px 0);
+                border-radius: 0 0 3px 0;
             }
         }
     }

diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/formatters.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/formatters.scss
@@ -1,6 +1,6 @@
 // user avatars, with fallback to placeholder graphic if no gravatar exists
 .avatar {
-    @include border-radius(100%);
+    border-radius: 100%;
     position: relative;
     display: inline-block;
     vertical-align: middle;
@@ -10,7 +10,7 @@
     height: 50px;
 
     img {
-        @include border-radius(100%);
+        border-radius: 100%;
         position: absolute;
         z-index: 2;
         top: 0;
@@ -20,7 +20,7 @@
     }
 
     &:before {
-        @include border-radius(100%);
+        border-radius: 100%;
         color: $color-grey-3;
         border: 2px solid $color-grey-3;
         text-align: center;
@@ -108,7 +108,7 @@
 
 // Status tags
 .status-tag {
-    @include border-radius(2px);
+    border-radius: 2px;
     text-align: center;
     display: inline-block;
     text-transform: uppercase;
@@ -162,10 +162,9 @@ form.status-tag:hover {
     }
 }
 
-
 // free tagging tags from taggit
 .tag {
-    @include border-radius(2px);
+    border-radius: 2px;
     background-color: $color-teal;
     padding-right: 0.5em;
     padding: 0.2em 0.5em;

diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/forms.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/forms.scss
@@ -47,8 +47,8 @@ textarea,
 select, 
 .richtext, 
 .tagit {
-    @include border-radius(6px);
-    @include border-box();
+    box-sizing: border-box;
+    border-radius: 6px;
     width: 100%;
     font-family: Open Sans,Arial,sans-serif;
     border: 1px solid $color-input-border;
@@ -92,7 +92,7 @@ select,
 
     // Add select arrow back on browsers where native ui has been removed
     select ~ span:after {
-        @include border-radius(0 6px 6px 0);
+        border-radius: 0 6px 6px 0;
         z-index: 0;
         position: absolute;
         right: 0;
@@ -122,7 +122,7 @@ select,
 // radio and check boxes
 input[type=radio], 
 input[type=checkbox] {
-    @include border-radius(0);
+    border-radius: 0;
     cursor: pointer;
     border: 0;
 }
@@ -135,7 +135,7 @@ input[type=radio] {
 }
 
 input[type=radio]:before {
-    @include border-radius(100%);
+    border-radius: 100%;
     font-family: wagtail;
     font-style: normal;
     text-align: center;
@@ -195,7 +195,7 @@ input[type=reset],
 input[type=button], 
 .button, 
 button {
-    @include border-radius(3px);
+    border-radius: 3px;
     font-family: Open Sans,Arial,sans-serif;
     width: auto;
     height: 2.4em;
@@ -216,7 +216,6 @@ button {
     box-sizing: border-box;
     -webkit-font-smoothing: auto;
     -moz-appearance: none;
-    -moz-box-sizing: border-box;
 
     &.button-small {
         padding: 0 0.8em;
@@ -336,7 +335,7 @@ button {
 
     // A completely unstyled button
     &.unbutton {
-        @include border-radius(0);
+        border-radius: 0;
         width: auto;
         height: auto;
         padding: 0;
@@ -356,7 +355,6 @@ button {
         box-sizing: border-box;
         -webkit-font-smoothing: auto;
         -moz-appearance: none;
-        -moz-box-sizing: border-box;
     }
 
     &:hover {
@@ -372,7 +370,7 @@ button {
     &.button-longrunning {
         span {
             @include transition(all 0.3s ease);
-            @include transform(scale(0.9));
+            transform: scale(0.9);
             display: inline-block;
             height: 0.9em;
             position: relative;
@@ -388,7 +386,7 @@ button {
         }
 
         &.button-longrunning-active span {
-            @include transform(scale(1));
+            transform: scale(1);
             visibility: visible;
             width: 1em;
             opacity: 0.8;
@@ -509,21 +507,21 @@ button {
     input[type=button], 
     .button, 
     button {
-        @include border-radius(0);
+        border-radius: 0;
         float: left;
         margin-right: 1px;
         margin-left: 0;
 
         &:only-child {
-            @include border-radius(3);
+            border-radius: 3px;
         }
 
         &:first-child {
-            @include border-radius(3px 0 0 3px);
+            border-radius: 3px 0 0 3px;
         }
 
         &:last-child {
-            @include border-radius(0 3px 3px 0);
+            border-radius: 0 3px 3px 0;
             margin-right: 0;
         }
     }
@@ -535,7 +533,7 @@ button {
         input[type=button], 
         .button, 
         button {
-            @include border-radius(0);
+            border-radius: 0;
         }
     }
 }
@@ -548,7 +546,7 @@ button {
 
     > li {
         @include row();
-        @include border-radius(2px);
+        border-radius: 2px;
         position: relative;
         overflow: hidden;
         background-color: $color-white;
@@ -778,7 +776,7 @@ li.focused > .help {
     select, 
     .richtext, 
     .tagit {
-        @include border-radius(3px);
+        border-radius: 3px;
         padding: 0.4em 1em;
     }
 }
@@ -1012,7 +1010,7 @@ li.inline:first-child {
 
 // file drop zones
 .drop-zone {
-    @include border-radius(5px);
+    border-radius: 5px;
     border: 2px dashed $color-grey-4;
     padding: $mobile-nice-padding;
     background-color: $color-grey-5;

diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/main-nav.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/main-nav.scss
@@ -155,7 +155,7 @@ $submenu-color: darken($color-grey-1, 5%);
 
     input, 
     button {
-        @include border-radius(0);
+        border-radius: 0;
         font-size: 1em;
         border: 0;
     }
@@ -371,8 +371,8 @@ body.explorer-open {
         }
 
         .nav-submenu {
-            @include box-shadow(2px 0 2px rgba(0, 0, 0, 0.35));
             @include transition(width 0.2s ease);
+            box-shadow: 2px 0 2px rgba(0, 0, 0, 0.35);
             width: $menu-width;
             padding: 0 0 1.5em;
 
@@ -431,15 +431,15 @@ body.explorer-open {
 
     body.nav-open {
         .wrapper {
-            @include transform(none);
+            transform: none;
             left: $menu-width;
             position: relative;
         }
     }
 
     body.explorer-open {
         .wrapper {
-            @include transform(none);
+            transform: none;
             left: $menu-width*2;
         }
 

diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/messages.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/messages.scss
@@ -78,13 +78,13 @@
 }
 
 .messages.new ul {
-    @include transition-immediate(none);
+    transition: none;
     top: -100px;
 }
 
 .ready .messages ul,
 .messages.appear ul {
-    @include transition-immediate(top 0.5s ease, opacity 0.5s ease, max-height 1.2s ease);
+    transition: top 0.5s ease, opacity 0.5s ease, max-height 1.2s ease;
     opacity: 1;
     top: 0;
 }

diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/modals.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/modals.scss
@@ -9,7 +9,6 @@ $zindex-modal-background: 500;
     }
 }
 
-
 // Kill the scroll on the body
 .modal-open {
     overflow: hidden;
@@ -22,7 +21,7 @@ $zindex-modal-background: 500;
 
 // Container that the modal scrolls within
 .modal {
-    @include border-box();
+    box-sizing: border-box;
     display: none;
     overflow: auto;
     overflow-y: scroll;
@@ -36,7 +35,7 @@ $zindex-modal-background: 500;
 
 // Shell div to position the modal with bottom padding
 .modal-dialog {
-    @include border-box();
+    box-sizing: border-box;
     margin-left: auto;
     margin-right: auto;
     padding: 0;
@@ -55,8 +54,8 @@ $zindex-modal-background: 500;
 
 // Actual modal
 .modal-content {
-    @include border-box();
-    @include border-radius(3px);
+    box-sizing: border-box;
+    border-radius: 3px;
     width: 98.7%;
     position: relative;
     background-color: $color-white;

diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/progressbar.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/progressbar.scss
@@ -1,5 +1,5 @@
 .progress {
-    @include border-radius(1.2em);
+    border-radius: 1.2em;
     background-color: $color-teal-dark;
     border: 1px solid $color-teal;
     opacity: 0;
@@ -10,8 +10,8 @@
     } 
 
     .bar {
-        @include border-radius(1.5em);
         @include transition(width 0.3s ease);
+        border-radius: 1.5em;
         overflow: hidden;
         box-sizing: border-box;
         text-align: right;