vbatts/mastodon
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

WIP

Browse source
This commit is contained in:
Eugen Rochko 2020-06-16 00:41:27 +02:00
parent b1484cf3ce
commit 4d996426ac
19 changed files with 548 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/javascript/styles/application.scss
View file

@ -24,5 +24,6 @@
@import 'mastodon/tables';
@import 'mastodon/admin';
@import 'mastodon/dashboard';
@import 'mastodon/tooltips';
@import 'mastodon/rtl';
@import 'mastodon/accessibility';

3
app/javascript/styles/mastodon/components.scss
View file

@ -1076,8 +1076,7 @@
}
.status__info .status__display-name {
display: block;
max-width: 100%;
display: inline-flex;
padding-right: 25px;
}

233
app/javascript/styles/mastodon/tooltips.scss Normal file
View file

@ -0,0 +1,233 @@
//
// Tooltips
// --------------------------------------------------
$font-size-base: 14px;
$line-height-base: 1.5;
$border-radius-base: 5px;
$overlay-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
//** Tooltip text color
$tooltip-color: #fff;
//** Tooltip background color
$tooltip-bg: #000;
$tooltip-opacity: 0.9;
//** Tooltip arrow width
$tooltip-arrow-width: 5px;
//** Tooltip distance with trigger
$tooltip-distance: $tooltip-arrow-width + 4;
//** Tooltip arrow color
$tooltip-arrow-color: $tooltip-bg;
// Base class
.rc-tooltip {
position: absolute;
z-index: 1070;
display: block;
visibility: visible;
// remove left/top by yiminghe
// left: -9999px;
// top: -9999px;
font-size: $font-size-base;
line-height: $line-height-base;
font-weight: 500;
opacity: $tooltip-opacity;
will-change: opacity, transform;
pointer-events: none;
&-hidden {
display: none;
}
&-placement-top, &-placement-topLeft, &-placement-topRight {
padding: $tooltip-arrow-width 0 $tooltip-distance 0;
}
&-placement-right, &-placement-rightTop, &-placement-rightBottom {
padding: 0 $tooltip-arrow-width 0 $tooltip-distance;
}
&-placement-bottom, &-placement-bottomLeft, &-placement-bottomRight {
padding: $tooltip-distance 0 $tooltip-arrow-width 0;
}
&-placement-left, &-placement-leftTop, &-placement-leftBottom {
padding: 0 $tooltip-distance 0 $tooltip-arrow-width;
}
}
// Wrapper for the tooltip content
.rc-tooltip-inner {
padding: 8px 12px;
color: $tooltip-color;
text-align: left;
text-decoration: none;
background-color: $tooltip-bg;
border-radius: $border-radius-base;
box-shadow: $overlay-shadow;
max-width: 290px;
box-sizing: border-box;
min-height: 34px;
}
// Arrows
.rc-tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.rc-tooltip {
&-placement-top &-arrow,
&-placement-topLeft &-arrow,
&-placement-topRight &-arrow {
bottom: $tooltip-distance - $tooltip-arrow-width;
margin-left: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
border-top-color: $tooltip-arrow-color;
}
&-placement-top &-arrow {
left: 50%;
}
&-placement-topLeft &-arrow {
left: 15%;
}
&-placement-topRight &-arrow {
right: 15%;
}
&-placement-right &-arrow,
&-placement-rightTop &-arrow,
&-placement-rightBottom &-arrow {
left: $tooltip-distance - $tooltip-arrow-width;
margin-top: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
border-right-color: $tooltip-arrow-color;
}
&-placement-right &-arrow {
top: 50%;
}
&-placement-rightTop &-arrow {
top: 15%;
margin-top: 0;
}
&-placement-rightBottom &-arrow {
bottom: 15%;
}
&-placement-left &-arrow,
&-placement-leftTop &-arrow,
&-placement-leftBottom &-arrow {
right: $tooltip-distance - $tooltip-arrow-width;
margin-top: -$tooltip-arrow-width;
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
border-left-color: $tooltip-arrow-color;
}
&-placement-left &-arrow {
top: 50%;
}
&-placement-leftTop &-arrow {
top: 15%;
margin-top: 0;
}
&-placement-leftBottom &-arrow {
bottom: 15%;
}
&-placement-bottom &-arrow,
&-placement-bottomLeft &-arrow,
&-placement-bottomRight &-arrow {
top: $tooltip-distance - $tooltip-arrow-width;
margin-left: -$tooltip-arrow-width;
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
border-bottom-color: $tooltip-arrow-color;
}
&-placement-bottom &-arrow {
left: 50%;
}
&-placement-bottomLeft &-arrow {
left: 15%;
}
&-placement-bottomRight &-arrow {
right: 15%;
}
@mixin effect(){
animation-duration: 50ms;
animation-fill-mode: both;
}
& {
&-zoom-enter,
&-zoom-leave {
display: block;
}
}
&-zoom-enter,
&-zoom-appear {
opacity: 0;
@include effect();
animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
animation-play-state: paused;
}
&-zoom-leave {
@include effect();
animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
animation-play-state: paused;
}
&-zoom-enter,
&-zoom-appear {
&-active {
animation-name: rcToolTipZoomIn;
animation-play-state: running;
}
}
&-zoom-leave {
&-active {
animation-name: rcToolTipZoomOut;
animation-play-state: running;
}
}
@keyframes rcToolTipZoomIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0, 0);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
}
}
@keyframes rcToolTipZoomOut {
0% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
}
100% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0, 0);
}
}
}