From 857ebb7f3e1a0d77e8138f6eff7cfdfec845383d Mon Sep 17 00:00:00 2001 From: Sami Mazouz Date: Sat, 21 Aug 2021 19:34:07 +0100 Subject: [PATCH] CSS Code Housekeeping (#3026) * refactor: Avatar classes refactor * refactor: Badge classes refactor * chore: Remove commented dead code * chore: Remove SignUpModal dead CSS code Flarum seem to have had some kind of user display in the sign up modal on successful sign up, which no longer exists. https://github.com/flarum/core/blob/v0.1.0-beta/js/forum/src/components/SignUpModal.js#L111 * chore: Deprecate unneeded vendor mixins * chore: Normalize property values format Co-authored-by: David Wheatley * chore: Remove @-webkit-keyframes * chore: Combine animation properties * chore: Avoid `all` for transition * chore: translate3d is no longer necessary for hardware acceleration * fix: Lost cursor pointer to normalize update * chore: Use CSS variables for more things * chore: Remove unecessary overspecification Co-authored-by: David Wheatley --- framework/core/less/admin/AdminNav.less | 31 ++++-------- framework/core/less/admin/ExtensionPage.less | 21 ++++---- .../core/less/admin/ExtensionWidget.less | 7 +-- .../core/less/admin/PermissionsPage.less | 4 +- framework/core/less/common/Alert.less | 29 ++++++----- framework/core/less/common/AlertManager.less | 2 +- framework/core/less/common/App.less | 14 +++--- framework/core/less/common/Avatar.less | 15 +++--- framework/core/less/common/Badge.less | 23 ++++----- framework/core/less/common/Button.less | 8 ++-- framework/core/less/common/Checkbox.less | 4 +- framework/core/less/common/Dropdown.less | 17 +++---- framework/core/less/common/FormControl.less | 3 +- .../core/less/common/LoadingIndicator.less | 4 +- framework/core/less/common/Modal.less | 18 +++---- framework/core/less/common/Navigation.less | 8 ++-- framework/core/less/common/Search.less | 4 +- framework/core/less/common/Tooltip.less | 2 +- .../less/common/mixins/header-background.less | 2 +- .../less/common/mixins/vendor-prefixes.less | 31 ++++++++++++ framework/core/less/common/scaffolding.less | 4 +- framework/core/less/forum/Composer.less | 8 ++-- framework/core/less/forum/DiscussionPage.less | 6 +-- .../less/forum/NotificationsDropdown.less | 2 +- framework/core/less/forum/Post.less | 4 +- framework/core/less/forum/PostStream.less | 38 ++------------- framework/core/less/forum/SignUpModal.less | 48 ------------------- framework/core/less/forum/Slidable.less | 6 +-- framework/core/less/forum/UserCard.less | 4 +- 29 files changed, 156 insertions(+), 211 deletions(-) diff --git a/framework/core/less/admin/AdminNav.less b/framework/core/less/admin/AdminNav.less index e186ea4cf..74978fe60 100644 --- a/framework/core/less/admin/AdminNav.less +++ b/framework/core/less/admin/AdminNav.less @@ -52,20 +52,12 @@ } @media @phone, @tablet { - .App-nav .AdminNav { + .AdminNav { .Dropdown-menu { > li { - .ExtensionListTitle { - color: @muted-color; - text-transform: uppercase; - margin: 25px 0 10px 15px; - } - .ExtensionIcon { margin: -2px -29px; - width: 25px; - height: 25px; - font-size: 12.5px; + --size: 25px; .icon { margin: 0; @@ -83,7 +75,7 @@ top: @header-height; height: ~"calc(100vh - @{header-height})"; width: @admin-pane-width; - .box-shadow(0 6px 6px @shadow-color); + box-shadow: 0 6px 6px @shadow-color; background: @body-bg; z-index: @zindex-pane; overflow-y: scroll; @@ -157,18 +149,9 @@ margin: 0 auto; } - .ExtensionListTitle { - color: @muted-color; - text-transform: uppercase; - margin: 25px 0 8px 15px; - } - .ExtensionIcon { - width: 25px; - height: 25px; - font-size: 15px; + --size: 25px; margin-left: -29px; - vertical-align: middle; } } } @@ -193,6 +176,12 @@ padding-left: 5px; } +.ExtensionListTitle { + color: @muted-color; + text-transform: uppercase; + margin: 25px 0 8px 15px; +} + .ExtensionListItem-Dot { height: 10px; width: 10px; diff --git a/framework/core/less/admin/ExtensionPage.less b/framework/core/less/admin/ExtensionPage.less index bed00c8a3..5c10862b0 100644 --- a/framework/core/less/admin/ExtensionPage.less +++ b/framework/core/less/admin/ExtensionPage.less @@ -1,13 +1,5 @@ .ExtensionPage { - &-header { - .ExtensionTitle { - display: flex; - align-items: center; - flex-wrap: wrap; - margin: 20px 0 15px; - } - .helpText { margin-bottom: 5px; } @@ -79,11 +71,8 @@ } .ExtensionIcon { - width: 30px; - height: 30px; - font-size: 15px; + --size: 30px; margin-left: 0; - vertical-align: middle; } &TopItems { @@ -123,7 +112,6 @@ } &-permissions { - .PermissionGrid-removeScope { display: none; } @@ -140,6 +128,13 @@ } } +.ExtensionTitle { + display: flex; + align-items: center; + flex-wrap: wrap; + margin: 20px 0 15px; +} + .ExtensionInfo { margin-left: auto; diff --git a/framework/core/less/admin/ExtensionWidget.less b/framework/core/less/admin/ExtensionWidget.less index d3cfd9789..3f5413d6b 100644 --- a/framework/core/less/admin/ExtensionWidget.less +++ b/framework/core/less/admin/ExtensionWidget.less @@ -77,13 +77,14 @@ } .ExtensionIcon { - width: 90px; - height: 90px; + --size: 90px; + width: var(--size); + height: var(--size); background: @control-bg; color: @control-color; border-radius: 6px; display: inline-flex; - font-size: 45px; + font-size: calc(~"var(--size) / 2"); text-align: center; align-items: center; justify-content: center; diff --git a/framework/core/less/admin/PermissionsPage.less b/framework/core/less/admin/PermissionsPage.less index 33e6ec493..7cabef5b5 100644 --- a/framework/core/less/admin/PermissionsPage.less +++ b/framework/core/less/admin/PermissionsPage.less @@ -114,7 +114,7 @@ display: none; } .open .Dropdown-toggle { - .box-shadow(none); + box-shadow: none; } } } @@ -128,7 +128,7 @@ } .Badge { margin: -3px 3px -3px 0; - .box-shadow(none); + box-shadow: none; } } .PermissionGrid-section { diff --git a/framework/core/less/common/Alert.less b/framework/core/less/common/Alert.less index 05495106f..72db46e62 100644 --- a/framework/core/less/common/Alert.less +++ b/framework/core/less/common/Alert.less @@ -3,6 +3,20 @@ border-radius: @border-radius; line-height: 1.5; + background: var(--alert-bg); + + &, + a, + a:hover, + .Button, + .Button:hover, + .Button:active, + .Button.active, + .Button:focus, + .Button.focus { + color: var(--alert-color); + } + .Alert--color(@alert-color, @alert-bg); } .Alert--error { @@ -16,19 +30,8 @@ } } .Alert--color(@color; @background) { - background: @background; - - &, - a, - a:hover, - .Button, - .Button:hover, - .Button:active, - .Button.active, - .Button:focus, - .Button.focus { - color: @color; - } + --alert-bg: @background; + --alert-color: @color; } .Alert-controls { list-style-type: none; diff --git a/framework/core/less/common/AlertManager.less b/framework/core/less/common/AlertManager.less index 854a0b584..d362e06cd 100644 --- a/framework/core/less/common/AlertManager.less +++ b/framework/core/less/common/AlertManager.less @@ -7,6 +7,6 @@ .Alert { display: inline-block; margin-top: 20px; - .box-shadow(0 2px 6px @shadow-color); + box-shadow: 0 2px 6px @shadow-color; } } diff --git a/framework/core/less/common/App.less b/framework/core/less/common/App.less index 7acd8cd75..bf9cd0512 100644 --- a/framework/core/less/common/App.less +++ b/framework/core/less/common/App.less @@ -24,7 +24,7 @@ } .scrolled & { - .box-shadow(0 2px 6px @shadow-color); + box-shadow: 0 2px 6px @shadow-color; } } .App-primaryControl, .App-titleControl, .App-backControl { @@ -40,7 +40,7 @@ > .Button { float: none; background: transparent !important; - .box-shadow(~"none !important"); + box-shadow: none !important; height: @header-height-phone; width: auto; padding: 13px !important; @@ -136,9 +136,9 @@ left: 0; top: 0; bottom: 0; - .box-shadow(0 2px 6px @shadow-color); - .translate3d(-@drawer-width - 6px, 0, 0); - .transition-transform(0.2s); + box-shadow: 0 2px 6px @shadow-color; + transform: translate(-@drawer-width - 6px, 0); + transition: transform 0.2s; z-index: @zindex-modal; .drawerOpen & { @@ -155,7 +155,7 @@ z-index: @zindex-modal-background; background-color: @overlay-bg; opacity: 0; - .transition(0.2s opacity); + transition: opacity 0.2s; &.in { opacity: 0.9; @@ -241,7 +241,7 @@ } .scrolled & { - .box-shadow(0 2px 6px @shadow-color); + box-shadow: 0 2px 6px @shadow-color; } & when (@config-colored-header = true) { diff --git a/framework/core/less/common/Avatar.less b/framework/core/less/common/Avatar.less index 5df0db6bf..520c641f2 100644 --- a/framework/core/less/common/Avatar.less +++ b/framework/core/less/common/Avatar.less @@ -1,12 +1,17 @@ .Avatar { - display: inline-block; + display: inline-flex; + align-items: center; + justify-content: center; box-sizing: content-box; color: #fff; - text-align: center; vertical-align: top; background-color: var(--avatar-bg); font-weight: normal; .Avatar--size(48px); + width: var(--size); + height: var(--size); + border-radius: 100%; + font-size: calc(~"var(--size) / 2"); img { display: inline-block; @@ -18,9 +23,5 @@ } .Avatar--size(@size) { - width: @size; - height: @size; - border-radius: @size; - font-size: @size / 2; - line-height: @size; + --size: @size; } diff --git a/framework/core/less/common/Badge.less b/framework/core/less/common/Badge.less index a43c97baa..5d94cb282 100644 --- a/framework/core/less/common/Badge.less +++ b/framework/core/less/common/Badge.less @@ -1,26 +1,27 @@ .Badge { .Badge--size(22px); + width: var(--size); + height: var(--size); + border-radius: calc(~"var(--size) / 2"); background: var(--badge-bg); color: var(--badge-color); - display: inline-block; + display: inline-flex; + align-items: center; + justify-content: center; vertical-align: middle; - text-align: center; - .box-shadow(0 2px 4px @shadow-color); + box-shadow: 0 2px 4px @shadow-color; .Badge-label { display: none; } + + &, .Badge-icon { + font-size: calc(~"0.56 * var(--size)"); + } } .Badge--size(@size) { - width: @size; - height: @size; - border-radius: @size / 2; - line-height: @size - 1px; - - &, .Badge-icon { - font-size: 0.56 * @size; - } + --size: @size; } .badges { diff --git a/framework/core/less/common/Button.less b/framework/core/less/common/Button.less index 2b6890e06..93c14f8d1 100644 --- a/framework/core/less/common/Button.less +++ b/framework/core/less/common/Button.less @@ -77,7 +77,7 @@ fieldset[disabled] & { cursor: default; opacity: 0.65; - .box-shadow(none); + box-shadow: none; } a& { @@ -88,7 +88,7 @@ } .Button-label { - .transition(margin-right 0.1s); + transition: margin-right 0.1s; } .LoadingIndicator-container { @@ -148,7 +148,7 @@ &.focus, .open > &.Dropdown-toggle { background: transparent !important; - .box-shadow(none); + box-shadow: none; color: @link-color; } } @@ -164,7 +164,7 @@ &:active, &.active, .open > &.Dropdown-toggle { - .box-shadow(none); + box-shadow: none; } } .Button--primary { diff --git a/framework/core/less/common/Checkbox.less b/framework/core/less/common/Checkbox.less index 7826e28c5..ce9d322b7 100644 --- a/framework/core/less/common/Checkbox.less +++ b/framework/core/less/common/Checkbox.less @@ -49,7 +49,7 @@ position: relative; border-radius: 14px; background: @control-bg; - .transition(background-color 0.2s); + transition: background-color 0.2s; .LoadingIndicator { --size: 22px !important; @@ -81,7 +81,7 @@ height: 22px; padding: 0; left: 3px; - .transition(~"opacity 0.2s, left 0.2s"); + transition: opacity 0.2s, left 0.2s; .on& { left: 25px; diff --git a/framework/core/less/common/Dropdown.less b/framework/core/less/common/Dropdown.less index 20edf5f6d..2b206c6f4 100644 --- a/framework/core/less/common/Dropdown.less +++ b/framework/core/less/common/Dropdown.less @@ -12,7 +12,7 @@ margin: 7px 0; background: @body-bg; border-radius: @border-radius; - .box-shadow(0 2px 6px @shadow-color); + box-shadow: 0 2px 6px @shadow-color; list-style: none; text-align: left; color: @text-color; @@ -35,11 +35,12 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - .box-shadow(none); + box-shadow: none; text-align: left; font-size: 13px; font-weight: normal; text-decoration: none; + cursor: pointer; &.hasIcon { padding-left: 40px; @@ -154,7 +155,7 @@ float: none; position: static; background: none; - .box-shadow(none); + box-shadow: none; } } @@ -176,12 +177,12 @@ display: block; max-height: 70vh; border-radius: 0; - .box-shadow(0 2px 6px @shadow-color); + box-shadow: 0 2px 6px @shadow-color; visibility: hidden; overflow: auto; -webkit-overflow-scrolling: touch; - .translate3d(0, 70vh, 0); - .transition-transform(~" 0.3s, visibility 0s 0.3s"); + transform: translate(0, 70vh); + transition: transform 0.3s, visibility 0s 0.3s; > li { > a, > button { @@ -222,8 +223,8 @@ .dropdown-backdrop { background: fade(@secondary-color, 90%); opacity: 0; - .transition(~"opacity 0.3s"); - .translate3d(0, 0, 0); + transition: opacity 0.3s; + transform: translate(0, 0); .open & { opacity: 1; diff --git a/framework/core/less/common/FormControl.less b/framework/core/less/common/FormControl.less index d23c966be..9a403c268 100644 --- a/framework/core/less/common/FormControl.less +++ b/framework/core/less/common/FormControl.less @@ -1,4 +1,5 @@ .FormControl { + --transition: border-color .15s, background .15s; display: block; width: 100%; height: 36px; @@ -9,7 +10,7 @@ background-color: @control-bg; border: 2px solid transparent; border-radius: @border-radius; - .transition(~"border-color .15s, background .15s"); + transition: var(--transition); -webkit-appearance: none; &:focus, diff --git a/framework/core/less/common/LoadingIndicator.less b/framework/core/less/common/LoadingIndicator.less index 4bd88188a..96fa2d980 100644 --- a/framework/core/less/common/LoadingIndicator.less +++ b/framework/core/less/common/LoadingIndicator.less @@ -2,7 +2,7 @@ // Loading Indicators .LoadingIndicator { - @spin-time: 750ms; + --spin-time: 750ms; // Use the value of `color` to maintain backwards compatibility border-color: currentColor; @@ -14,7 +14,7 @@ width: var(--size); height: var(--size); - animation: spin @spin-time linear infinite; + animation: spin var(--spin-time) linear infinite; //
container around the spinner // Used for positioning diff --git a/framework/core/less/common/Modal.less b/framework/core/less/common/Modal.less index b2062e2a2..0fdff8ee8 100644 --- a/framework/core/less/common/Modal.less +++ b/framework/core/less/common/Modal.less @@ -16,7 +16,7 @@ z-index: @zindex-modal-background; background-color: @overlay-bg; opacity: 0; - .transition(0.2s opacity); + transition: opacity 0.2s; &.in { opacity: 1; @@ -37,11 +37,11 @@ // When fading in the modal, animate it to slide down .Modal { - .scale(0.9); - .transition-transform(0.2s ease-out); + transform: scale(0.9); + transition: transform 0.2s ease-out; } &.in .Modal { - .scale(1); + transform: scale(1); } } .modal-open .ModalManager { @@ -126,7 +126,7 @@ opacity: 0; pointer-events: none; border-radius: @border-radius; - .transition(opacity 0.2s); + transition: opacity 0.2s; &.active { opacity: 1; @@ -146,8 +146,8 @@ bottom: 0; top: 0; overflow: auto; - .transition-transform(0.2s); - .translate3d(0, 100vh, 0); + transition: transform 0.2s ease-out; + transform: translate(0, 100vh); &.in { -webkit-transform: none !important; @@ -170,7 +170,7 @@ border: 0; min-height: 100vh; padding-top: @header-height-phone; - .box-shadow(none); + box-shadow: none; } .Modal-header { padding: 0; @@ -193,7 +193,7 @@ border: 0; border-radius: @border-radius; - .box-shadow(0 7px 15px @shadow-color); + box-shadow: 0 7px 15px @shadow-color; } .Modal--small { max-width: 375px; diff --git a/framework/core/less/common/Navigation.less b/framework/core/less/common/Navigation.less index ca29ed68a..c50cb1d40 100644 --- a/framework/core/less/common/Navigation.less +++ b/framework/core/less/common/Navigation.less @@ -1,7 +1,7 @@ .Navigation-back { z-index: 3 !important; // z-index of an active .btn-group .btn is 2 border-radius: @border-radius !important; - .transition(border-radius 0.2s); + transition: border-radius 0.2s; max-width: 150px; overflow: hidden; text-overflow: ellipsis; @@ -17,10 +17,10 @@ opacity: 0; margin-left: -5px !important; border-radius: 0 @border-radius @border-radius 0; - .transition(~"opacity 0.2s, margin-left 0.2s"); + transition: opacity 0.2s, margin-left 0.2s; .icon { - .rotate(45deg); + transform: rotate(45deg); } } @@ -38,7 +38,7 @@ } } .hasPane.panePinned .Navigation-pin .icon { - .rotate(0deg); + transform: rotate(0); } } diff --git a/framework/core/less/common/Search.less b/framework/core/less/common/Search.less index bbd22c5d2..1138438a0 100644 --- a/framework/core/less/common/Search.less +++ b/framework/core/less/common/Search.less @@ -3,7 +3,7 @@ } @media @tablet-up { .Search { - .transition(margin-left 0.4s); + transition: margin-left 0.4s; &.focused { margin-left: -400px; @@ -59,7 +59,7 @@ width: 225px; padding-left: 32px; padding-right: 32px; - .transition(all 0.4s); + transition: var(--transition), width 0.4s; box-sizing: inherit !important; } diff --git a/framework/core/less/common/Tooltip.less b/framework/core/less/common/Tooltip.less index 282c35736..08ac8d498 100644 --- a/framework/core/less/common/Tooltip.less +++ b/framework/core/less/common/Tooltip.less @@ -10,7 +10,7 @@ font-weight: normal; line-height: 1.4; opacity: 0; - .transition(0.15s opacity linear); + transition: opacity 0.15s linear; &.in { opacity: 1; } &.top { margin-top: -3px; padding: @tooltip-arrow-width 0; } diff --git a/framework/core/less/common/mixins/header-background.less b/framework/core/less/common/mixins/header-background.less index 922b4b891..74d98c606 100644 --- a/framework/core/less/common/mixins/header-background.less +++ b/framework/core/less/common/mixins/header-background.less @@ -6,7 +6,7 @@ right: 0; z-index: @zindex-header; border-bottom: 1px solid @control-bg; - .transition(~"box-shadow 0.2s, -webkit-transform 0.2s"); + transition: box-shadow 0.2s, transform 0.2s; @media @phone { height: @header-height-phone; diff --git a/framework/core/less/common/mixins/vendor-prefixes.less b/framework/core/less/common/mixins/vendor-prefixes.less index 80739da30..6286204d5 100644 --- a/framework/core/less/common/mixins/vendor-prefixes.less +++ b/framework/core/less/common/mixins/vendor-prefixes.less @@ -6,27 +6,34 @@ // Animations // These remain for backwards compatibility with existing styles. +/** @deprecated */ .animation(@animation) { animation: @animation; } +/** @deprecated */ .animation-name(@name) { animation-name: @name; } .animation-duration(@duration) { animation-duration: @duration; } +/** @deprecated */ .animation-timing-function(@timing-function) { animation-timing-function: @timing-function; } +/** @deprecated */ .animation-delay(@delay) { animation-delay: @delay; } +/** @deprecated */ .animation-iteration-count(@iteration-count) { animation-iteration-count: @iteration-count; } +/** @deprecated */ .animation-direction(@direction) { animation-direction: @direction; } +/** @deprecated */ .animation-fill-mode(@fill-mode) { animation-fill-mode: @fill-mode; } @@ -34,6 +41,7 @@ // Backface visibility // Prevent browsers from flickering when using CSS 3D transforms. // Default value is `visible`, but can be changed to `hidden` +/** @deprecated */ .backface-visibility(@visibility) { // Safari -webkit-backface-visibility: @visibility; @@ -42,17 +50,20 @@ // Drop shadows // These remain for backwards compatibility with existing styles. +/** @deprecated */ .box-shadow(@shadow) { box-shadow: @shadow; } // Box sizing // These remain for backwards compatibility with existing styles. +/** @deprecated */ .box-sizing(@boxmodel) { box-sizing: @boxmodel; } // CSS3 Content Columns +/** @deprecated */ .content-columns(@column-count; @column-gap: @grid-gutter-width) { // Safari -webkit-column-count: @column-count; @@ -63,6 +74,7 @@ } // Optional hyphenation +/** @deprecated */ .hyphens(@mode: auto) { word-wrap: break-word; // Safari @@ -81,63 +93,82 @@ // Transformations // These remain for backwards compatibility with existing styles. +/** @deprecated */ .scale(@ratio) { transform: scale(@ratio); } +/** @deprecated */ .scale(@ratioX; @ratioY) { transform: scale(@ratioX, @ratioY); } +/** @deprecated */ .scaleX(@ratio) { transform: scaleX(@ratio); } +/** @deprecated */ .scaleY(@ratio) { transform: scaleY(@ratio); } +/** @deprecated */ .skew(@x; @y) { transform: skewX(@x) skewY(@y); } +/** @deprecated */ .translate(@x; @y) { transform: translate(@x, @y); } +/** @deprecated */ .translate3d(@x; @y; @z) { transform: translate3d(@x, @y, @z); } +/** @deprecated */ .rotate(@degrees) { transform: rotate(@degrees); } +/** @deprecated */ .rotateX(@degrees) { transform: rotateX(@degrees); } +/** @deprecated */ .rotateY(@degrees) { transform: rotateY(@degrees); } +/** @deprecated */ .perspective(@perspective) { perspective: @perspective; } +/** @deprecated */ .perspective-origin(@perspective) { perspective-origin: @perspective; } +/** @deprecated */ .transform-origin(@origin) { transform-origin: @origin; } // Transitions // These remain for backwards compatibility with existing styles. +/** @deprecated */ .transition(@transition) { transition: @transition; } +/** @deprecated */ .transition-property(@transition-property) { transition-property: @transition-property; } +/** @deprecated */ .transition-delay(@transition-delay) { transition-delay: @transition-delay; } +/** @deprecated */ .transition-duration(@transition-duration) { transition-duration: @transition-duration; } +/** @deprecated */ .transition-timing-function(@timing-function) { transition-timing-function: @timing-function; } +/** @deprecated */ .transition-transform(@transition) { transition: transform @transition; } diff --git a/framework/core/less/common/scaffolding.less b/framework/core/less/common/scaffolding.less index 3292a18dd..cf6b75d48 100644 --- a/framework/core/less/common/scaffolding.less +++ b/framework/core/less/common/scaffolding.less @@ -2,7 +2,7 @@ &, &:before, &:after { - .box-sizing(border-box); + box-sizing: border-box; } } @@ -114,7 +114,7 @@ input[type="search"] { .fade { opacity: 0; - .transition(opacity .15s linear); + transition: opacity .15s linear; &.in { opacity: 1; } diff --git a/framework/core/less/forum/Composer.less b/framework/core/less/forum/Composer.less index c31b9918e..d33147e86 100644 --- a/framework/core/less/forum/Composer.less +++ b/framework/core/less/forum/Composer.less @@ -3,7 +3,7 @@ .Composer { pointer-events: auto; - .box-shadow(0 2px 6px @shadow-color); + box-shadow: 0 2px 6px @shadow-color; &.minimized { height: 46px; @@ -221,20 +221,20 @@ right: 0; z-index: @zindex-composer; pointer-events: none; - .transition(left 0.2s); + transition: left 0.2s; } .Composer { border-radius: @border-radius @border-radius 0 0; background: fade(@body-bg, 95%); position: relative; height: 300px; - .transition(~"background 0.2s, box-shadow 0.2s"); + transition: background 0.2s, box-shadow 0.2s; &.active, &.fullScreen { background: @body-bg; } &.active:not(.fullScreen) { - .box-shadow(~"0 0 0 2px @{primary-color}, 0 2px 6px @{shadow-color}"); + box-shadow: 0 0 0 2px @primary-color, 0 2px 6px @shadow-color; } &.fullScreen { position: fixed; diff --git a/framework/core/less/forum/DiscussionPage.less b/framework/core/less/forum/DiscussionPage.less index 391869a88..a283d23d8 100644 --- a/framework/core/less/forum/DiscussionPage.less +++ b/framework/core/less/forum/DiscussionPage.less @@ -79,8 +79,8 @@ background: @body-bg; padding-bottom: 40px; border-top: 1px solid @control-bg; - .box-shadow(0 6px 6px @shadow-color); - .transition(left 0.2s); + box-shadow: 0 6px 6px @shadow-color; + transition: left 0.2s; .affix & { position: fixed; @@ -128,7 +128,7 @@ .DiscussionPage-list { .panePinned & { left: 0; - .transition(none); + transition: none; } } // When the pane is pinned, move the other page content inwards diff --git a/framework/core/less/forum/NotificationsDropdown.less b/framework/core/less/forum/NotificationsDropdown.less index 3d3564e11..5b5e9c0f3 100644 --- a/framework/core/less/forum/NotificationsDropdown.less +++ b/framework/core/less/forum/NotificationsDropdown.less @@ -37,7 +37,7 @@ padding: 2px 4px 3px; line-height: 1em; border-radius: 10px; - .box-shadow(0 0 0 1px @header-bg); + box-shadow: 0 0 0 1px @header-bg; min-width: 16px; height: 16px; text-align: center; diff --git a/framework/core/less/forum/Post.less b/framework/core/less/forum/Post.less index f063cad04..e29a2b409 100644 --- a/framework/core/less/forum/Post.less +++ b/framework/core/less/forum/Post.less @@ -65,7 +65,7 @@ top: -10px; left: -100px; z-index: @zindex-dropdown; - .transition(~"opacity 0.2s, transform 0.2s"); + transition: opacity 0.2s, transform 0.2s; transform: scale(0.95); transform-origin: left top; opacity: 0; @@ -297,7 +297,7 @@ float: right; position: relative; - .transition(opacity 0.2s); + transition: opacity 0.2s; .EventPost &, .Post--hidden:not(.revealContent) & { margin-top: -27px; diff --git a/framework/core/less/forum/PostStream.less b/framework/core/less/forum/PostStream.less index 9e649cb3b..400ba77f8 100644 --- a/framework/core/less/forum/PostStream.less +++ b/framework/core/less/forum/PostStream.less @@ -22,14 +22,8 @@ 50% {opacity: 1} 100% {opacity: 0.5} } -@-webkit-keyframes blink { - 0% {opacity: 0.5} - 50% {opacity: 1} - 100% {opacity: 0.5} -} .LoadingPost { - .animation(blink 1s linear); - .animation-iteration-count(infinite); + animation: blink 1s linear infinite; } .fakeText { display: inline-block; @@ -63,46 +57,22 @@ } } -// .item.highlight .post { -// &:before { -// content: ""; -// position: absolute; -// left: -30px; -// top: -5px; -// bottom: -5px; -// width: 5px; -// border-radius: @border-radius; -// background: @fl-primary-color; -// } -// } -@-webkit-keyframes pulsate { - 0% {-webkit-transform: scale(1)} - 50% {-webkit-transform: scale(1.02)} - 100% {-webkit-transform: scale(1)} -} @keyframes pulsate { 0% {transform: scale(1)} 50% {transform: scale(1.02)} 100% {transform: scale(1)} } .pulsate { - .animation(pulsate 1s ease-in-out); - .animation-iteration-count(infinite); + animation: pulsate 1s ease-in-out infinite; } .flash { - .animation(pulsate 0.2s ease-in-out); - .animation-iteration-count(1); + animation: pulsate 0.2s ease-in-out; } -@-webkit-keyframes fadeIn { - 0% {opacity: 0} - 100% {opacity: 1} -} @keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } .fadeIn { - .animation(fadeIn 0.4s ease-in-out); - .animation-iteration-count(1); + animation: fadeIn 0.4s ease-in-out; } diff --git a/framework/core/less/forum/SignUpModal.less b/framework/core/less/forum/SignUpModal.less index d30b57b28..e69de29bb 100644 --- a/framework/core/less/forum/SignUpModal.less +++ b/framework/core/less/forum/SignUpModal.less @@ -1,48 +0,0 @@ -.SignUpModal-welcome { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - border-radius: @border-radius; - text-align: center; - color: #fff; - font-size: 14px; - - .light-contents(); - - .Avatar { - .Avatar--size(96px); - border: 4px solid @body-bg; - .box-shadow(0 2px 6px @shadow-color); - } - h3, p { - margin-bottom: 25px; - } - .Button { - font-size: 15px; - height: 50px; - padding: 15px 20px; - } - .darkenBackground { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - } - .container { - width: auto !important; - padding: 50px 30px !important; - position: relative; - } -} -.SignUpModal--success .Modal-close .Button { - color: #fff; -} - -@media @phone { - .SignUpModal-welcome .container { - padding-top: 56px + 60px; - } -} diff --git a/framework/core/less/forum/Slidable.less b/framework/core/less/forum/Slidable.less index 83d60eefc..f0610d376 100644 --- a/framework/core/less/forum/Slidable.less +++ b/framework/core/less/forum/Slidable.less @@ -23,7 +23,7 @@ color: #fff !important; border: 0; border-radius: 0; - .box-shadow(none); + box-shadow: none; padding: 20px 0; text-align: right; @@ -40,14 +40,14 @@ left: unset; } .Slidable-content { - .transition(~"box-shadow 0.2s, border-radius 0.2s"); + transition: box-shadow 0.2s, border-radius 0.2s; .sliding& { position: relative; background: @control-bg; z-index: 2; border-radius: 2px; - .box-shadow(0 2px 6px @shadow-color); + box-shadow: 0 2px 6px @shadow-color; } } } diff --git a/framework/core/less/forum/UserCard.less b/framework/core/less/forum/UserCard.less index 29b4d4f0f..a19e9682d 100644 --- a/framework/core/less/forum/UserCard.less +++ b/framework/core/less/forum/UserCard.less @@ -13,7 +13,7 @@ } .UserCard--popover { width: 500px; - .box-shadow(0 2px 6px @shadow-color); + box-shadow: 0 2px 6px @shadow-color; &, .darkenBackground { border-radius: @border-radius; @@ -64,7 +64,7 @@ .Avatar { .Avatar--size(96px); border: 4px solid #fff; - .box-shadow(0 2px 6px @shadow-color); + box-shadow: 0 2px 6px @shadow-color; @media @phone { .Avatar--size(64px);