mirror of
https://github.com/discourse/discourse.git
synced 2026-08-07 11:45:21 -05:00
DEV: merge post-action-feedback CSS into common file (#34080)
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).
This commit is contained in:
@@ -36,3 +36,42 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
@import "latest-topic-list";
|
||||
@import "login-signup-page";
|
||||
@import "modal";
|
||||
@import "post-action-feedback";
|
||||
@import "topic";
|
||||
@import "topic-list";
|
||||
@import "topic-post";
|
||||
|
||||
@@ -1,38 +0,0 @@
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,5 @@
|
||||
@import "login-signup-page";
|
||||
@import "modal";
|
||||
@import "post-action-feedback";
|
||||
@import "push-notifications-mobile";
|
||||
@import "topic-list";
|
||||
@import "topic-post";
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
@keyframes d-toast-opening {
|
||||
from {
|
||||
transform: translateY(var(--transform-y, 10px));
|
||||
}
|
||||
}
|
||||
|
||||
.post-action-feedback-alert {
|
||||
--transform-y: 0;
|
||||
position: fixed;
|
||||
top: calc(var(--header-offset) + 0.5rem);
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-inline: 0.5rem;
|
||||
z-index: z("max");
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding: 1em 1.5em;
|
||||
opacity: 1;
|
||||
transition: opacity 0.5s;
|
||||
border-radius: var(--d-border-radius);
|
||||
color: var(--primary);
|
||||
overflow: hidden;
|
||||
background-color: var(--tertiary-very-low);
|
||||
border: 1px solid var(--content-border-color);
|
||||
box-shadow: var(--shadow-dropdown);
|
||||
overflow-wrap: break-word;
|
||||
animation: d-toast-opening 0.3s ease-in-out;
|
||||
will-change: transform;
|
||||
|
||||
&.-fade-out {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.post-action-feedback-alert {
|
||||
--transform-y: 2vh;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user