github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-25 20:18:10 +08:00
Code Issues Actions1 Packages Projects Releases Wiki Activity

UX: update ring animation to avoid scroll ()

Browse Source
This commit is contained in:
Kris 2023-04-19 09:13:50 -04:00 committed by GitHub
parent 9a34625cb8
commit af58dbeb24
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 7 deletions
app/assets/stylesheets
color_definitions.scss
common/base
discourse.scssheader.scss

1
app/assets/stylesheets/color_definitions.scss

@ -25,6 +25,7 @@
--header_background-rgb: #{hexToRGB($header_background)};
--tertiary-rgb: #{hexToRGB($tertiary)};
--highlight-rgb: #{hexToRGB($highlight)};
--success-rgb: #{hexToRGB($success)};
--primary-very-low: #{$primary-very-low};
--primary-low: #{$primary-low};

16
app/assets/stylesheets/common/base/discourse.scss

@ -5,13 +5,17 @@
// Animation Keyframes
@keyframes ping {
from {
transform: scale(0.25);
opacity: 1;
0% {
transform: scale(0.6);
box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0.7);
}
to {
transform: scale(2);
opacity: 0;
70% {
transform: scale(1);
box-shadow: 0 0 0 10px rgba(var(--success-rgb), 0);
}
100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(var(--success-rgb), 0);
}
}

3
app/assets/stylesheets/common/base/header.scss

@ -210,10 +210,11 @@
right: 23.5px;
z-index: z("base");
margin-left: 0;
background: radial-gradient(transparent, var(--success));
border-radius: 100%;
width: 20px;
height: 20px;
box-shadow: 0 0 0 rgba(var(--success-rgb), 1);
transform: scale(1);
transform-origin: center;
animation-iteration-count: infinite;
animation-duration: 3s;