diff --git a/gulpfile.js/tasks/styles.js b/gulpfile.js/tasks/styles.js index 6ea893d26..87b813bfc 100644 --- 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 index 4ccdb6d29..57a75b26e 100644 --- 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,7 +158,7 @@ &.dropdown-button { .dropdown-toggle { - @include border-radius(0 3px 3px 0); + border-radius: 0 3px 3px 0; } &.open { @@ -167,11 +166,11 @@ > 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 index da6b57942..575167d54 100644 --- 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 index 2434ffeb6..88a5e81a9 100644 --- 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 index 7073814b0..7a63bc77f 100644 --- 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,7 +431,7 @@ body.explorer-open { body.nav-open { .wrapper { - @include transform(none); + transform: none; left: $menu-width; position: relative; } @@ -439,7 +439,7 @@ body.explorer-open { 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 index 2159cea68..c6adaf71a 100644 --- 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 index 1bf8300bd..61f31a2f5 100644 --- 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 index 1b3aec5bc..871a2d592 100644 --- 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; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/streamfield.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/streamfield.scss index bf4147ca8..6a98e1120 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/streamfield.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/streamfield.scss @@ -135,8 +135,8 @@ li.sequence-member { // Controls for ordering and deletion of items in a sequence .sequence-controls { - @include border-radius(2px 0 0); @include transition(opacity 0.2s ease); + border-radius: 2px 0 0; border: 1px solid darken($color-input-focus, 10%); border-width: 1px 1px 0; opacity: 0; @@ -195,7 +195,7 @@ li.sequence-member { // list controls are slightly different as they require closer proximity to their associated fields .list-controls { - @include border-radius(0); + border-radius: 0; background: transparent; top: 1.5em; border: 0; @@ -211,7 +211,7 @@ li.sequence-member { // Menu of other blocks to be added at each position .stream-menu { @include transition(all 0.2s ease); - @include box-shadow(inset 0 0 45px rgba(0, 0, 0, 0.3)); + box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.3); position: relative; background-color: $color-grey-1; opacity: 1; @@ -219,7 +219,7 @@ li.sequence-member { .toggle { @include transition(color 0.2s ease); - @include border-radius(50px); + border-radius: 50px; position: absolute; top: -0.5em; left: 0; @@ -240,7 +240,7 @@ li.sequence-member { } &:before { - @include transform(rotate(-45deg)); + transform: rotate(-45deg); position: absolute; font-family: wagtail; content: 'B'; @@ -250,17 +250,16 @@ li.sequence-member { } .stream-menu-inner { - @include transform(translate3d(0, 0, 0)); + transform: translate3d(0, 0, 0); max-width: 50em; margin: auto; overflow: hidden; } ul { - @include transform(translate3d(0, 0, 0)); @include transition(all 0.2s ease); - @include transform(scale(1)); @include clearfix; + transform: translate3d(0, 0, 0) scale(1); visibility: visible; opacity: 1; padding: 1em 1em 0; @@ -318,10 +317,10 @@ li.sequence-member { } &.stream-menu-closed { - @include box-shadow(none); + box-shadow: none; .stream-menu-inner ul { - @include transform(scale(0.9)); + transform: scale(0.9); opacity: 0; } @@ -330,7 +329,7 @@ li.sequence-member { background-color: $color-white; &:before { - @include transform(rotate(0deg)); + transform: rotate(0deg); } &:focus { diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/tabs.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/tabs.scss index 56fcbf3e3..c9822584b 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/tabs.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/tabs.scss @@ -35,8 +35,8 @@ a.errors { &:after { - @include border-radius(50px); - @include box-shadow(1px 2px 2px rgba(0, 0, 0, 0.1)); + border-radius: 50px; + box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.1); position: absolute; right: -0.5em; top: -0.5em; @@ -53,7 +53,7 @@ } li.active a { - @include box-shadow(none); + box-shadow: none; color: $color-grey-1; background-color: $color-white; border-top: 0.3em solid $color-grey-1; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/typography.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/typography.scss index 90235ac9b..da6ec2d0c 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/typography.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/typography.scss @@ -52,13 +52,13 @@ a { } code { - @include box-shadow(inset 0 0 4px 0 rgba(0, 0, 0, 0.2)); + box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.2); background-color: $color-fieldset-hover; padding: 2px 5px; } kbd { - @include border-radius(3px); + border-radius: 3px; font-family: Open Sans, Arial, sans-serif; border: 1px solid $color-grey-2; border-color: rgba(0, 0, 0, 0.2); @@ -110,7 +110,7 @@ dd { .help-info, .help-warning, .help-critical { - @include border-radius(3px); + border-radius: 3px; padding-left: 3.5em; position: relative; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss index b9d4247d2..4b4e1adeb 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/core.scss @@ -55,8 +55,8 @@ body { } .wrapper { - @include transition-transform(0.2s ease); @include clearfix(); + transition: transform 0.2s ease; } .nav-wrapper { @@ -104,10 +104,10 @@ body { footer { @include transition(all 0.2s ease); - @include row(); - @include border-radius(3px 3px 0 0); - @include box-shadow(0 0 2px rgba(255, 255, 255, 0.5)); @include transition(bottom 0.5s ease 1s); + @include row(); + border-radius: 3px 3px 0 0; + box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.5); background: $color-grey-1; position: fixed; bottom: 0; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/login.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/login.scss index 0f8985797..d84779d1e 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/login.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/login.scss @@ -106,7 +106,7 @@ form { // Special full-width, one-off fields i.e a single text or textarea input .full input { - @include border-radius(0); + border-radius: 0px; padding-left: $mobile-nice-padding; padding-right: $mobile-nice-padding; font-weight: 300; @@ -138,7 +138,7 @@ form { } li { - @include border-radius(3px); + border-radius: 3px; } } } diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss index dff556602..c59390aa9 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/page-editor.scss @@ -62,7 +62,7 @@ padding-left: 3em; &:before { - @include border-radius(100%); + border-radius: 100%; display: block; float: left; content: '?'; @@ -267,7 +267,7 @@ cursor: pointer; .button { - @include border-radius(0); + border-radius: 0; overflow: visible; background-color: $color-salmon-light; font-size: 0; // helps fake the effect of t.ext-replace class, which can't be used here. @@ -322,7 +322,7 @@ .full textarea, .full .richtext { @include nice-padding(); - @include border-radius(0); + border-radius: 0; padding-top: 2em; padding-bottom: 2em; font-size: 1.2em; diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/mixins.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/mixins.scss index 634a04b69..8e34b1b4e 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/mixins.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/mixins.scss @@ -26,65 +26,12 @@ } } - -@mixin filter($filter...) { - -webkit-filter: $filter; - -moz-filter: $filter; - -ms-filter: $filter; - -o-filter: $filter; - filter: $filter; -} - -@mixin transition($transition...) { - body.ready & { - -webkit-transition: $transition; - -moz-transition: $transition; - -o-transition: $transition; +@mixin transition($transition...){ + body.ready &{ transition: $transition; } } -@mixin transition-immediate($transition...) { - -webkit-transition: $transition; - -moz-transition: $transition; - -o-transition: $transition; - transition: $transition; -} - -@mixin transition-transform($transition...) { - -webkit-transition: -webkit-transform $transition; - -moz-transition: -moz-transform $transition; - -o-transition: -o-transform $transition; - transition: transform $transition; -} - -@mixin transition-delay($delay...) { - body.ready & { - -webkit-transition-delay: $delay; - -moz-transition-delay: $delay; - -o-transition-delay: $delay; - transition-delay: $delay; - } -} - -@mixin transform($transform) { - -moz-transform: $transform; - -webkit-transform: $transform; - -o-transform: $transform; - -ms-transform: $transform; - transform: $transform; -} - -@mixin border-radius($radius) { - -webkit-border-radius: $radius; - border-radius: $radius; -} - -@mixin box-shadow($shadow) { - -webkit-box-shadow: $shadow; // e.g inset 2px 2px 3px 2px rgba(0, 0, 0, 1) - box-shadow: $shadow; -} - @mixin visuallyhidden { border: 0; clip: rect(0 0 0 0); diff --git a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/panels/rich-text.scss b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/panels/rich-text.scss index 681878f10..06b357af6 100644 --- a/wagtail/wagtailadmin/static_src/wagtailadmin/scss/panels/rich-text.scss +++ b/wagtail/wagtailadmin/static_src/wagtailadmin/scss/panels/rich-text.scss @@ -33,7 +33,7 @@ // Some of this is copied from the jQuery UI style, forcing those styles to apply to // this selector. Without it, if your cursor is placed above a button while it's // appearing, the CSS from jQuery UI won't immediately be applied. - @include border-radius(0); + border-radius: 0; height: 2.4em; border: 1px solid $color-grey-3; background: $color-white; diff --git a/wagtail/wagtailimages/static_src/wagtailimages/scss/add-multiple.scss b/wagtail/wagtailimages/static_src/wagtailimages/scss/add-multiple.scss index 5677fcf22..010e83ffa 100644 --- a/wagtail/wagtailimages/static_src/wagtailimages/scss/add-multiple.scss +++ b/wagtail/wagtailimages/static_src/wagtailimages/scss/add-multiple.scss @@ -62,7 +62,7 @@ } .progress { - @include box-shadow(0 0 5px 2px rgba(255, 255, 255, 0.4)); + box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.4); z-index: 4; top: 60%; left: 20%; diff --git a/wagtail/wagtailimages/static_src/wagtailimages/scss/focal-point-chooser.scss b/wagtail/wagtailimages/static_src/wagtailimages/scss/focal-point-chooser.scss index 72cf2c9dd..432f59500 100644 --- a/wagtail/wagtailimages/static_src/wagtailimages/scss/focal-point-chooser.scss +++ b/wagtail/wagtailimages/static_src/wagtailimages/scss/focal-point-chooser.scss @@ -6,7 +6,7 @@ .current-focal-point-indicator { @include transition(opacity 0.2s ease); - @include box-shadow(1px 1px 10px 0 rgba(0, 0, 0, 1)); + box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 1); position: absolute; border: 1px solid $color-teal; opacity: 0.5;