diff --git a/framework/core/js/src/forum/components/PostStreamScrubber.js b/framework/core/js/src/forum/components/PostStreamScrubber.js index d45474f05..3963936fa 100644 --- a/framework/core/js/src/forum/components/PostStreamScrubber.js +++ b/framework/core/js/src/forum/components/PostStreamScrubber.js @@ -112,7 +112,6 @@ export default class PostStreamScrubber extends Component { // Now we want to make the scrollbar handle draggable. Let's start by // preventing default browser events from messing things up. - .css({ cursor: 'pointer', 'user-select': 'none' }) .bind('dragstart mousedown touchstart', (e) => e.preventDefault()); // When the mouse is pressed on the scrollbar handle, we capture some @@ -124,7 +123,6 @@ export default class PostStreamScrubber extends Component { this.indexStart = 0; this.$('.Scrubber-handle') - .css('cursor', 'move') .bind('mousedown touchstart', this.onmousedown.bind(this)) // Exempt the scrollbar handle from the 'jump to' click event. diff --git a/framework/core/less/common/mixins/vendor-prefixes.less b/framework/core/less/common/mixins/vendor-prefixes.less index 088986112..80739da30 100644 --- a/framework/core/less/common/mixins/vendor-prefixes.less +++ b/framework/core/less/common/mixins/vendor-prefixes.less @@ -1,227 +1,151 @@ // Vendor Prefixes -// -// All vendor mixins are deprecated as of v3.2.0 due to the introduction of -// Autoprefixer in our Gruntfile. They will be removed in v4. - -// - Animations -// - Backface visibility -// - Box shadow -// - Box sizing -// - Content columns -// - Hyphens -// - Placeholder text -// - Transformations -// - Transitions -// - User Select +// These aim to ensure that Flarum remains compatible with most modern devices. +// The vendor presets below are to try to remain compatible with iOS 9+ and other +// major browsers (Chrome/Firefox/new Edge/Safari desktop). // Animations +// These remain for backwards compatibility with existing styles. .animation(@animation) { - -webkit-animation: @animation; - -o-animation: @animation; - animation: @animation; + animation: @animation; } .animation-name(@name) { - -webkit-animation-name: @name; - animation-name: @name; + animation-name: @name; } .animation-duration(@duration) { - -webkit-animation-duration: @duration; - animation-duration: @duration; + animation-duration: @duration; } .animation-timing-function(@timing-function) { - -webkit-animation-timing-function: @timing-function; - animation-timing-function: @timing-function; + animation-timing-function: @timing-function; } .animation-delay(@delay) { - -webkit-animation-delay: @delay; - animation-delay: @delay; + animation-delay: @delay; } .animation-iteration-count(@iteration-count) { - -webkit-animation-iteration-count: @iteration-count; - animation-iteration-count: @iteration-count; + animation-iteration-count: @iteration-count; } .animation-direction(@direction) { - -webkit-animation-direction: @direction; - animation-direction: @direction; + animation-direction: @direction; } .animation-fill-mode(@fill-mode) { - -webkit-animation-fill-mode: @fill-mode; - animation-fill-mode: @fill-mode; + animation-fill-mode: @fill-mode; } // Backface visibility // Prevent browsers from flickering when using CSS 3D transforms. // Default value is `visible`, but can be changed to `hidden` - -.backface-visibility(@visibility){ +.backface-visibility(@visibility) { + // Safari -webkit-backface-visibility: @visibility; - -moz-backface-visibility: @visibility; - backface-visibility: @visibility; + backface-visibility: @visibility; } // Drop shadows -// -// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's -// supported browsers that have box shadow capabilities now support it. - +// These remain for backwards compatibility with existing styles. .box-shadow(@shadow) { - -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 - box-shadow: @shadow; + box-shadow: @shadow; } // Box sizing +// These remain for backwards compatibility with existing styles. .box-sizing(@boxmodel) { - -webkit-box-sizing: @boxmodel; - -moz-box-sizing: @boxmodel; - box-sizing: @boxmodel; + box-sizing: @boxmodel; } // CSS3 Content Columns .content-columns(@column-count; @column-gap: @grid-gutter-width) { + // Safari -webkit-column-count: @column-count; - -moz-column-count: @column-count; - column-count: @column-count; + column-count: @column-count; + // Safari -webkit-column-gap: @column-gap; - -moz-column-gap: @column-gap; - column-gap: @column-gap; + column-gap: @column-gap; } // Optional hyphenation .hyphens(@mode: auto) { word-wrap: break-word; + // Safari -webkit-hyphens: @mode; - -moz-hyphens: @mode; - -ms-hyphens: @mode; // IE10+ - -o-hyphens: @mode; - hyphens: @mode; + hyphens: @mode; } // Placeholder text .placeholder(@color) { - // Firefox - &::-moz-placeholder { + // Safari + &::-webkit-input-placeholder, + &::placeholder { color: @color; - opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 } - &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ - &::-webkit-input-placeholder { color: @color; } // Safari and Chrome } // Transformations +// These remain for backwards compatibility with existing styles. .scale(@ratio) { - -webkit-transform: scale(@ratio); - -ms-transform: scale(@ratio); // IE9 only - -o-transform: scale(@ratio); - transform: scale(@ratio); + transform: scale(@ratio); } .scale(@ratioX; @ratioY) { - -webkit-transform: scale(@ratioX, @ratioY); - -ms-transform: scale(@ratioX, @ratioY); // IE9 only - -o-transform: scale(@ratioX, @ratioY); - transform: scale(@ratioX, @ratioY); + transform: scale(@ratioX, @ratioY); } .scaleX(@ratio) { - -webkit-transform: scaleX(@ratio); - -ms-transform: scaleX(@ratio); // IE9 only - -o-transform: scaleX(@ratio); - transform: scaleX(@ratio); + transform: scaleX(@ratio); } .scaleY(@ratio) { - -webkit-transform: scaleY(@ratio); - -ms-transform: scaleY(@ratio); // IE9 only - -o-transform: scaleY(@ratio); - transform: scaleY(@ratio); + transform: scaleY(@ratio); } .skew(@x; @y) { - -webkit-transform: skewX(@x) skewY(@y); - -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ - -o-transform: skewX(@x) skewY(@y); - transform: skewX(@x) skewY(@y); + transform: skewX(@x) skewY(@y); } .translate(@x; @y) { - -webkit-transform: translate(@x, @y); - -ms-transform: translate(@x, @y); // IE9 only - -o-transform: translate(@x, @y); - transform: translate(@x, @y); + transform: translate(@x, @y); } .translate3d(@x; @y; @z) { - -webkit-transform: translate3d(@x, @y, @z); - transform: translate3d(@x, @y, @z); + transform: translate3d(@x, @y, @z); } .rotate(@degrees) { - -webkit-transform: rotate(@degrees); - -ms-transform: rotate(@degrees); // IE9 only - -o-transform: rotate(@degrees); - transform: rotate(@degrees); + transform: rotate(@degrees); } .rotateX(@degrees) { - -webkit-transform: rotateX(@degrees); - -ms-transform: rotateX(@degrees); // IE9 only - -o-transform: rotateX(@degrees); - transform: rotateX(@degrees); + transform: rotateX(@degrees); } .rotateY(@degrees) { - -webkit-transform: rotateY(@degrees); - -ms-transform: rotateY(@degrees); // IE9 only - -o-transform: rotateY(@degrees); - transform: rotateY(@degrees); + transform: rotateY(@degrees); } .perspective(@perspective) { - -webkit-perspective: @perspective; - -moz-perspective: @perspective; - perspective: @perspective; + perspective: @perspective; } .perspective-origin(@perspective) { - -webkit-perspective-origin: @perspective; - -moz-perspective-origin: @perspective; - perspective-origin: @perspective; + perspective-origin: @perspective; } .transform-origin(@origin) { - -webkit-transform-origin: @origin; - -moz-transform-origin: @origin; - -ms-transform-origin: @origin; // IE9 only - transform-origin: @origin; + transform-origin: @origin; } - // Transitions - +// These remain for backwards compatibility with existing styles. .transition(@transition) { - -webkit-transition: @transition; - -o-transition: @transition; - transition: @transition; + transition: @transition; } .transition-property(@transition-property) { - -webkit-transition-property: @transition-property; - transition-property: @transition-property; + transition-property: @transition-property; } .transition-delay(@transition-delay) { - -webkit-transition-delay: @transition-delay; - transition-delay: @transition-delay; + transition-delay: @transition-delay; } .transition-duration(@transition-duration) { - -webkit-transition-duration: @transition-duration; - transition-duration: @transition-duration; + transition-duration: @transition-duration; } .transition-timing-function(@timing-function) { - -webkit-transition-timing-function: @timing-function; - transition-timing-function: @timing-function; + transition-timing-function: @timing-function; } .transition-transform(@transition) { - -webkit-transition: -webkit-transform @transition; - -moz-transition: -moz-transform @transition; - -o-transition: -o-transform @transition; - transition: transform @transition; + transition: transform @transition; } - // User select // For selecting text on the page - .user-select(@select) { + // Safari + MS Edge -webkit-user-select: @select; - -moz-user-select: @select; - -ms-user-select: @select; // IE10+ - user-select: @select; + user-select: @select; } diff --git a/framework/core/less/forum/Scrubber.less b/framework/core/less/forum/Scrubber.less index b0cdf94c7..50cd880f1 100644 --- a/framework/core/less/forum/Scrubber.less +++ b/framework/core/less/forum/Scrubber.less @@ -18,6 +18,8 @@ height: 300px; min-height: 50px; // JavaScript sets a max-height position: relative; + cursor: pointer; + .user-select(none); } .Scrubber-before, .Scrubber-after { border-left: 1px solid @control-bg; @@ -42,6 +44,7 @@ background: transparent; width: 100%; padding: 5px 0; + cursor: move; } .Scrubber-bar { height: 100%;