mirror of
https://github.com/flarum/framework.git
synced 2025-01-20 23:55:32 +08:00
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 <hi@davwheat.dev> * 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 <hi@davwheat.dev>
This commit is contained in:
Sami Mazouz
GitHub
parent
3d7ce95256
commit
857ebb7f3e
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
// <div> container around the spinner
|
||||
// Used for positioning
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user