diff --git a/less/admin/AdminNav.less b/less/admin/AdminNav.less
index 74978fe60f..e186ea4cf7 100644
--- a/less/admin/AdminNav.less
+++ b/less/admin/AdminNav.less
@@ -52,12 +52,20 @@
}
@media @phone, @tablet {
- .AdminNav {
+ .App-nav .AdminNav {
.Dropdown-menu {
> li {
+ .ExtensionListTitle {
+ color: @muted-color;
+ text-transform: uppercase;
+ margin: 25px 0 10px 15px;
+ }
+
.ExtensionIcon {
margin: -2px -29px;
- --size: 25px;
+ width: 25px;
+ height: 25px;
+ font-size: 12.5px;
.icon {
margin: 0;
@@ -75,7 +83,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;
@@ -149,9 +157,18 @@
margin: 0 auto;
}
+ .ExtensionListTitle {
+ color: @muted-color;
+ text-transform: uppercase;
+ margin: 25px 0 8px 15px;
+ }
+
.ExtensionIcon {
- --size: 25px;
+ width: 25px;
+ height: 25px;
+ font-size: 15px;
margin-left: -29px;
+ vertical-align: middle;
}
}
}
@@ -176,12 +193,6 @@
padding-left: 5px;
}
-.ExtensionListTitle {
- color: @muted-color;
- text-transform: uppercase;
- margin: 25px 0 8px 15px;
-}
-
.ExtensionListItem-Dot {
height: 10px;
width: 10px;
diff --git a/less/admin/ExtensionPage.less b/less/admin/ExtensionPage.less
index 5c10862b08..bed00c8a3b 100644
--- a/less/admin/ExtensionPage.less
+++ b/less/admin/ExtensionPage.less
@@ -1,5 +1,13 @@
.ExtensionPage {
+
&-header {
+ .ExtensionTitle {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ margin: 20px 0 15px;
+ }
+
.helpText {
margin-bottom: 5px;
}
@@ -71,8 +79,11 @@
}
.ExtensionIcon {
- --size: 30px;
+ width: 30px;
+ height: 30px;
+ font-size: 15px;
margin-left: 0;
+ vertical-align: middle;
}
&TopItems {
@@ -112,6 +123,7 @@
}
&-permissions {
+
.PermissionGrid-removeScope {
display: none;
}
@@ -128,13 +140,6 @@
}
}
-.ExtensionTitle {
- display: flex;
- align-items: center;
- flex-wrap: wrap;
- margin: 20px 0 15px;
-}
-
.ExtensionInfo {
margin-left: auto;
diff --git a/less/admin/ExtensionWidget.less b/less/admin/ExtensionWidget.less
index 3f5413d6b6..d3cfd9789f 100644
--- a/less/admin/ExtensionWidget.less
+++ b/less/admin/ExtensionWidget.less
@@ -77,14 +77,13 @@
}
.ExtensionIcon {
- --size: 90px;
- width: var(--size);
- height: var(--size);
+ width: 90px;
+ height: 90px;
background: @control-bg;
color: @control-color;
border-radius: 6px;
display: inline-flex;
- font-size: calc(~"var(--size) / 2");
+ font-size: 45px;
text-align: center;
align-items: center;
justify-content: center;
diff --git a/less/admin/PermissionsPage.less b/less/admin/PermissionsPage.less
index 39ba8047e7..7f9f4c130a 100644
--- a/less/admin/PermissionsPage.less
+++ b/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/less/common/Alert.less b/less/common/Alert.less
index 72db46e62b..05495106f5 100644
--- a/less/common/Alert.less
+++ b/less/common/Alert.less
@@ -3,20 +3,6 @@
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 {
@@ -30,8 +16,19 @@
}
}
.Alert--color(@color; @background) {
- --alert-bg: @background;
- --alert-color: @color;
+ background: @background;
+
+ &,
+ a,
+ a:hover,
+ .Button,
+ .Button:hover,
+ .Button:active,
+ .Button.active,
+ .Button:focus,
+ .Button.focus {
+ color: @color;
+ }
}
.Alert-controls {
list-style-type: none;
diff --git a/less/common/AlertManager.less b/less/common/AlertManager.less
index d362e06cd1..854a0b584f 100644
--- a/less/common/AlertManager.less
+++ b/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/less/common/App.less b/less/common/App.less
index bf9cd05127..7acd8cd75e 100644
--- a/less/common/App.less
+++ b/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;
- transform: translate(-@drawer-width - 6px, 0);
- transition: transform 0.2s;
+ .box-shadow(0 2px 6px @shadow-color);
+ .translate3d(-@drawer-width - 6px, 0, 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: opacity 0.2s;
+ .transition(0.2s opacity);
&.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/less/common/Avatar.less b/less/common/Avatar.less
index 520c641f2c..5df0db6bf0 100644
--- a/less/common/Avatar.less
+++ b/less/common/Avatar.less
@@ -1,17 +1,12 @@
.Avatar {
- display: inline-flex;
- align-items: center;
- justify-content: center;
+ display: inline-block;
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;
@@ -23,5 +18,9 @@
}
.Avatar--size(@size) {
- --size: @size;
+ width: @size;
+ height: @size;
+ border-radius: @size;
+ font-size: @size / 2;
+ line-height: @size;
}
diff --git a/less/common/Badge.less b/less/common/Badge.less
index 5d94cb282b..a43c97baab 100644
--- a/less/common/Badge.less
+++ b/less/common/Badge.less
@@ -1,27 +1,26 @@
.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-flex;
- align-items: center;
- justify-content: center;
+ display: inline-block;
vertical-align: middle;
- box-shadow: 0 2px 4px @shadow-color;
+ text-align: center;
+ .box-shadow(0 2px 4px @shadow-color);
.Badge-label {
display: none;
}
-
- &, .Badge-icon {
- font-size: calc(~"0.56 * var(--size)");
- }
}
.Badge--size(@size) {
- --size: @size;
+ width: @size;
+ height: @size;
+ border-radius: @size / 2;
+ line-height: @size - 1px;
+
+ &, .Badge-icon {
+ font-size: 0.56 * @size;
+ }
}
.badges {
diff --git a/less/common/Button.less b/less/common/Button.less
index 3165f9af4b..438c55e3ca 100644
--- a/less/common/Button.less
+++ b/less/common/Button.less
@@ -71,7 +71,7 @@
fieldset[disabled] & {
cursor: default;
opacity: 0.65;
- box-shadow: none;
+ .box-shadow(none);
}
a& {
@@ -82,7 +82,7 @@
}
.Button-label {
- transition: margin-right 0.1s;
+ .transition(margin-right 0.1s);
}
.LoadingIndicator-container {
@@ -142,7 +142,7 @@
&.focus,
.open > &.Dropdown-toggle {
background: transparent !important;
- box-shadow: none;
+ .box-shadow(none);
color: @link-color;
}
}
@@ -158,7 +158,7 @@
&:active,
&.active,
.open > &.Dropdown-toggle {
- box-shadow: none;
+ .box-shadow(none);
}
}
.Button--primary {
diff --git a/less/common/Checkbox.less b/less/common/Checkbox.less
index ce9d322b72..7826e28c53 100644
--- a/less/common/Checkbox.less
+++ b/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/less/common/Dropdown.less b/less/common/Dropdown.less
index f94851226a..97c9d90736 100644
--- a/less/common/Dropdown.less
+++ b/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,12 +35,11 @@
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;
@@ -152,7 +151,7 @@
float: none;
position: static;
background: none;
- box-shadow: none;
+ .box-shadow(none);
}
}
@@ -174,12 +173,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;
- transform: translate(0, 70vh);
- transition: transform 0.3s, visibility 0s 0.3s;
+ .translate3d(0, 70vh, 0);
+ .transition-transform(~" 0.3s, visibility 0s 0.3s");
> li {
> a, > button {
@@ -220,8 +219,8 @@
.dropdown-backdrop {
background: fade(@secondary-color, 90%);
opacity: 0;
- transition: opacity 0.3s;
- transform: translate(0, 0);
+ .transition(~"opacity 0.3s");
+ .translate3d(0, 0, 0);
.open & {
opacity: 1;
diff --git a/less/common/FormControl.less b/less/common/FormControl.less
index 20f99f1f3d..9c1d1167f3 100644
--- a/less/common/FormControl.less
+++ b/less/common/FormControl.less
@@ -1,5 +1,4 @@
.FormControl {
- --transition: border-color .15s, background .15s;
display: block;
width: 100%;
height: 36px;
@@ -10,7 +9,7 @@
background-color: @control-bg;
border: 2px solid transparent;
border-radius: @border-radius;
- transition: var(--transition);
+ .transition(~"border-color .15s, background .15s");
-webkit-appearance: none;
&:focus {
diff --git a/less/common/LoadingIndicator.less b/less/common/LoadingIndicator.less
index 96fa2d980e..4bd88188a1 100644
--- a/less/common/LoadingIndicator.less
+++ b/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 var(--spin-time) linear infinite;
+ animation: spin @spin-time linear infinite;
//
container around the spinner
// Used for positioning
diff --git a/less/common/Modal.less b/less/common/Modal.less
index 0fdff8ee85..b2062e2a20 100644
--- a/less/common/Modal.less
+++ b/less/common/Modal.less
@@ -16,7 +16,7 @@
z-index: @zindex-modal-background;
background-color: @overlay-bg;
opacity: 0;
- transition: opacity 0.2s;
+ .transition(0.2s opacity);
&.in {
opacity: 1;
@@ -37,11 +37,11 @@
// When fading in the modal, animate it to slide down
.Modal {
- transform: scale(0.9);
- transition: transform 0.2s ease-out;
+ .scale(0.9);
+ .transition-transform(0.2s ease-out);
}
&.in .Modal {
- transform: scale(1);
+ .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 ease-out;
- transform: translate(0, 100vh);
+ .transition-transform(0.2s);
+ .translate3d(0, 100vh, 0);
&.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/less/common/Navigation.less b/less/common/Navigation.less
index c50cb1d403..ca29ed68a9 100644
--- a/less/common/Navigation.less
+++ b/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 {
- transform: rotate(45deg);
+ .rotate(45deg);
}
}
@@ -38,7 +38,7 @@
}
}
.hasPane.panePinned .Navigation-pin .icon {
- transform: rotate(0);
+ .rotate(0deg);
}
}
diff --git a/less/common/Search.less b/less/common/Search.less
index 42bf633caf..cb819b3321 100644
--- a/less/common/Search.less
+++ b/less/common/Search.less
@@ -14,7 +14,7 @@
}
@media @tablet-up {
.Search {
- transition: margin-left 0.4s;
+ .transition(margin-left 0.4s);
&.focused {
margin-left: -400px;
@@ -70,7 +70,7 @@
width: 225px;
padding-left: 32px;
padding-right: 32px;
- transition: var(--transition), width 0.4s;
+ .transition(all 0.4s);
box-sizing: inherit !important;
}
diff --git a/less/common/Tooltip.less b/less/common/Tooltip.less
index 08ac8d498c..282c357363 100644
--- a/less/common/Tooltip.less
+++ b/less/common/Tooltip.less
@@ -10,7 +10,7 @@
font-weight: normal;
line-height: 1.4;
opacity: 0;
- transition: opacity 0.15s linear;
+ .transition(0.15s opacity linear);
&.in { opacity: 1; }
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; }
diff --git a/less/common/mixins/header-background.less b/less/common/mixins/header-background.less
index 74d98c606e..922b4b891d 100644
--- a/less/common/mixins/header-background.less
+++ b/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, transform 0.2s;
+ .transition(~"box-shadow 0.2s, -webkit-transform 0.2s");
@media @phone {
height: @header-height-phone;
diff --git a/less/common/mixins/vendor-prefixes.less b/less/common/mixins/vendor-prefixes.less
index 6286204d51..80739da302 100644
--- a/less/common/mixins/vendor-prefixes.less
+++ b/less/common/mixins/vendor-prefixes.less
@@ -6,34 +6,27 @@
// 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;
}
@@ -41,7 +34,6 @@
// 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;
@@ -50,20 +42,17 @@
// 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;
@@ -74,7 +63,6 @@
}
// Optional hyphenation
-/** @deprecated */
.hyphens(@mode: auto) {
word-wrap: break-word;
// Safari
@@ -93,82 +81,63 @@
// 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/less/common/scaffolding.less b/less/common/scaffolding.less
index cf6b75d48a..3292a18dd6 100644
--- a/less/common/scaffolding.less
+++ b/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/less/forum/Composer.less b/less/forum/Composer.less
index d33147e868..c31b9918ee 100644
--- a/less/forum/Composer.less
+++ b/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/less/forum/DiscussionPage.less b/less/forum/DiscussionPage.less
index a283d23d8b..391869a886 100644
--- a/less/forum/DiscussionPage.less
+++ b/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/less/forum/NotificationsDropdown.less b/less/forum/NotificationsDropdown.less
index 5b5e9c0f31..3d3564e11b 100644
--- a/less/forum/NotificationsDropdown.less
+++ b/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/less/forum/Post.less b/less/forum/Post.less
index e29a2b4094..f063cad048 100644
--- a/less/forum/Post.less
+++ b/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/less/forum/PostStream.less b/less/forum/PostStream.less
index 400ba77f88..9e649cb3ba 100644
--- a/less/forum/PostStream.less
+++ b/less/forum/PostStream.less
@@ -22,8 +22,14 @@
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 infinite;
+ .animation(blink 1s linear);
+ .animation-iteration-count(infinite);
}
.fakeText {
display: inline-block;
@@ -57,22 +63,46 @@
}
}
+// .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 infinite;
+ .animation(pulsate 1s ease-in-out);
+ .animation-iteration-count(infinite);
}
.flash {
- animation: pulsate 0.2s ease-in-out;
+ .animation(pulsate 0.2s ease-in-out);
+ .animation-iteration-count(1);
}
+@-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(fadeIn 0.4s ease-in-out);
+ .animation-iteration-count(1);
}
diff --git a/less/forum/SignUpModal.less b/less/forum/SignUpModal.less
index e69de29bb2..d30b57b284 100644
--- a/less/forum/SignUpModal.less
+++ b/less/forum/SignUpModal.less
@@ -0,0 +1,48 @@
+.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/less/forum/Slidable.less b/less/forum/Slidable.less
index f0610d3760..83d60eefc3 100644
--- a/less/forum/Slidable.less
+++ b/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/less/forum/UserCard.less b/less/forum/UserCard.less
index a19e9682d4..29b4d4f0f6 100644
--- a/less/forum/UserCard.less
+++ b/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);