mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-02 14:37:49 +02:00
Code Issues Releases Wiki Activity

Add less changes from #1950

Browse Source 
They got lost when I dropped the commits
This commit is contained in:
David Sevilla Martin
2020-04-20 15:44:53 -04:00
parent 81b2f4a74e
commit 2c2f6fd4ed
6 changed files with 67 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
less/common/LoadingIndicator.less
View File

@@ -12,3 +12,12 @@
.LoadingIndicator--block { .LoadingIndicator--block {
height: 100px; height: 100px;
} }
@keyframes spinner-line-fade-default {
0%, 100% {
opacity: 0.22; /* minimum opacity */
}
1% {
opacity: 1;
}
}

34
less/common/Modal.less
View File

@@ -15,12 +15,19 @@
left: 0; left: 0;
z-index: @zindex-modal-background; z-index: @zindex-modal-background;
background-color: @overlay-bg; background-color: @overlay-bg;
opacity: 0; .animation(fadeIn 0.2s);
.transition(0.2s opacity); }
&.in { @keyframes modalScaleIn {
opacity: 1; from { .scale(.9); }
} 40% { .scale(.9); }
to { .scale(1) }
}
@keyframes modalFadeIn {
from { opacity: 0 }
40% { opacity: 0 }
to { opacity: 1 }
} }
// Container that the modal scrolls within // Container that the modal scrolls within
@@ -40,8 +47,21 @@
.scale(0.9); .scale(0.9);
.transition-transform(0.2s ease-out); .transition-transform(0.2s ease-out);
} }
&.in .Modal {
.scale(1); &[aria-hidden="false"] {
.animation(e("modalFadeIn .5s, modalScaleIn .4s"));
.Modal {
.scale(1);
}
}
&[aria-hidden="true"] {
.animation(fadeOut .3s);
}
&.is-open {
display: block;
} }
} }
.modal-open .ModalManager { .modal-open .ModalManager {

38
less/common/Tooltip.less
View File

@@ -10,13 +10,14 @@
font-weight: normal; font-weight: normal;
line-height: 1.4; line-height: 1.4;
opacity: 0; opacity: 0;
.transition(0.15s opacity linear); .transition(e("0.15s visibility linear, 0.15s opacity linear"));
.animation(fadeIn 0.15s);
&.in { opacity: 1; } &[aria-hidden="false"] { opacity: 1; }
&.top { margin-top: -3px; padding: @tooltip-arrow-width 0; } &[x-placement="top"] { margin-top: -3px; padding: @tooltip-arrow-width 0; }
&.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; } &[x-placement="right"] { margin-left: 3px; padding: 0 @tooltip-arrow-width; }
&.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; } &[x-placement="bottom"] { margin-top: 3px; padding: @tooltip-arrow-width 0; }
&.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; } &[x-placement="left"] { margin-left: -3px; padding: 0 @tooltip-arrow-width; }
} }
// Wrapper for the tooltip content // Wrapper for the tooltip content
@@ -40,31 +41,32 @@
border-color: transparent; border-color: transparent;
border-style: solid; border-style: solid;
} }
.tooltip { .tooltip {
&.top .tooltip-arrow { &[x-placement="top"] .tooltip-arrow {
bottom: 0; bottom: 0.2px;
left: 50%; left: 50% !important;
margin-left: -@tooltip-arrow-width; margin-left: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width 0; border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
border-top-color: @tooltip-bg; border-top-color: @tooltip-bg;
} }
&.right .tooltip-arrow { &[x-placement="right"] .tooltip-arrow {
top: 50%; top: 50% !important;
left: 0; left: 0.2px;
margin-top: -@tooltip-arrow-width; margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0; border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
border-right-color: @tooltip-bg; border-right-color: @tooltip-bg;
} }
&.left .tooltip-arrow { &[x-placement="left"] .tooltip-arrow {
top: 50%; top: 50% !important;
right: 0; right: 0.2px;
margin-top: -@tooltip-arrow-width; margin-top: -@tooltip-arrow-width;
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width; border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
border-left-color: @tooltip-bg; border-left-color: @tooltip-bg;
} }
&.bottom .tooltip-arrow { &[x-placement="bottom"] .tooltip-arrow {
top: 0; top: 0.2px;
left: 50%; left: 50% !important;
margin-left: -@tooltip-arrow-width; margin-left: -@tooltip-arrow-width;
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
border-bottom-color: @tooltip-bg; border-bottom-color: @tooltip-bg;

1
less/common/common.less
View File

@@ -8,6 +8,7 @@
@import "print"; @import "print";
@import "scaffolding"; @import "scaffolding";
@import "sideNav"; @import "sideNav";
@import "keyframes";
@import "App"; @import "App";
@import "Alert"; @import "Alert";

9
less/common/keyframes.less Normal file
View File

@@ -0,0 +1,9 @@
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}

2
less/forum/Composer.less
View File

@@ -222,7 +222,7 @@
transform: translateZ(0); // Fix for Chrome bug where a transparent white background is actually gray transform: translateZ(0); // Fix for Chrome bug where a transparent white background is actually gray
position: relative; position: relative;
height: 300px; height: 300px;
.transition(~"background 0.2s, box-shadow 0.2s"); .transition(~"background 0.2s, box-shadow 0.2s, bottom 0.2s, height 0.2s");
&.active, &.fullScreen { &.active, &.fullScreen {
background: @body-bg; background: @body-bg;