diff options
author | Eugen Rochko <eugen@zeonfederated.com> | 2020-01-25 05:23:05 +0100 |
---|---|---|
committer | Thibaut Girka <thib@sitedethib.com> | 2020-01-25 10:36:27 +0100 |
commit | f1e4738f8111a11005b1f00affb6678c16059ee5 (patch) | |
tree | c441cb104b88cb0f6e45c4cd4c7568a9b6c0ca6d /app/javascript/flavours/glitch/styles/components | |
parent | 3c4bd039495ed542d8f928c051f51e8bcd5e3392 (diff) |
[Glitch] Add number animations
Port 76f1ed834efd3b58b6ebc8e951b661bbc1b7bf9b to glitch-soc Signed-off-by: Thibaut Girka <thib@sitedethib.com>
Diffstat (limited to 'app/javascript/flavours/glitch/styles/components')
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/announcements.scss | 4 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/index.scss | 8 |
2 files changed, 10 insertions, 2 deletions
diff --git a/app/javascript/flavours/glitch/styles/components/announcements.scss b/app/javascript/flavours/glitch/styles/components/announcements.scss index 2e559b1d7..11d29931d 100644 --- a/app/javascript/flavours/glitch/styles/components/announcements.scss +++ b/app/javascript/flavours/glitch/styles/components/announcements.scss @@ -168,10 +168,10 @@ &.active { transition: all 100ms ease-in; transition-property: background-color, color; - background-color: mix(lighten($ui-base-color, 12%), $ui-highlight-color, 90%); + background-color: mix(lighten($ui-base-color, 12%), $ui-highlight-color, 80%); .reactions-bar__item__count { - color: $highlight-text-color; + color: lighten($highlight-text-color, 8%); } } } diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index abe933860..d97ab436d 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -3,6 +3,14 @@ -ms-overflow-style: -ms-autohiding-scrollbar; } +.animated-number { + display: inline-flex; + flex-direction: column; + align-items: stretch; + overflow: hidden; + position: relative; +} + .link-button { display: block; font-size: 15px; |