mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-28 09:18:55 +08:00
37ebaf4c3c
Concerns this button feedback <img width="190" height="152" alt="image" src="https://github.com/user-attachments/assets/805a9258-2130-4e2e-99d4-50d9638c825b" /> This change is pretty straightforward, the desktop css includes all styling for the `.post-action-feedback-alert`, so that can be simply moved to common. The mobile alert was removed by https://github.com/discourse/discourse/pull/31375 (because we open a link modal instead)... so the mobile styles aren't actually applied anywhere (no plugins either).
77 lines
1.2 KiB
SCSS
Vendored
77 lines
1.2 KiB
SCSS
Vendored
@keyframes draw {
|
|
to {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
|
|
.post-controls {
|
|
.post-action-feedback-button {
|
|
position: relative;
|
|
height: 100%;
|
|
|
|
&.--activated,
|
|
&.--activated:hover {
|
|
.d-icon-d-post-share {
|
|
color: var(--success);
|
|
}
|
|
}
|
|
}
|
|
|
|
.post-action-feedback-svg {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
display: block;
|
|
stroke: var(--success);
|
|
opacity: 0;
|
|
|
|
path {
|
|
stroke: var(--success);
|
|
stroke-width: 4;
|
|
stroke-dasharray: 100;
|
|
stroke-dashoffset: 100;
|
|
animation: draw 1s forwards;
|
|
}
|
|
}
|
|
}
|
|
|
|
.post-action-feedback-alert {
|
|
position: absolute;
|
|
top: -1.5rem;
|
|
left: 60%;
|
|
transform: translateX(-50%);
|
|
color: var(--success);
|
|
padding: 0.25rem 0.5rem;
|
|
white-space: nowrap;
|
|
font-size: var(--font-down-2);
|
|
opacity: 0;
|
|
z-index: calc(z("timeline") + 1);
|
|
}
|
|
|
|
.--transition {
|
|
.post-action-feedback-alert,
|
|
.post-action-feedback-svg {
|
|
transition:
|
|
opacity 0.25s,
|
|
color 0.25s;
|
|
}
|
|
}
|
|
|
|
.--activated {
|
|
.post-action-feedback-alert,
|
|
.post-action-feedback-svg {
|
|
opacity: 1;
|
|
}
|
|
|
|
.post-action-feedback-alert {
|
|
&.-success {
|
|
color: var(--success);
|
|
}
|
|
|
|
&.-fail {
|
|
color: var(--danger);
|
|
}
|
|
}
|
|
}
|
