Leahnaya/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2026-08-23 13:34:51 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Create reusable Alert/Snackbar component (#36141)
Some checks failed
Check i18n / check-i18n (push) Waiting to run
Details
Chromatic / Run Chromatic (push) Waiting to run
Details
CodeQL / Analyze (javascript) (push) Waiting to run
Details
CodeQL / Analyze (ruby) (push) Waiting to run
Details
Check formatting / lint (push) Waiting to run
Details
CSS Linting / lint (push) Waiting to run
Details
JavaScript Linting / lint (push) Waiting to run
Details
Ruby Linting / lint (push) Waiting to run
Details
JavaScript Testing / test (push) Waiting to run
Details
Historical data migration test / test (14-alpine) (push) Waiting to run
Details
Historical data migration test / test (15-alpine) (push) Waiting to run
Details
Historical data migration test / test (16-alpine) (push) Waiting to run
Details
Historical data migration test / test (17-alpine) (push) Waiting to run
Details
Ruby Testing / build (production) (push) Waiting to run
Details
Ruby Testing / build (test) (push) Waiting to run
Details
Ruby Testing / test (.ruby-version) (push) Blocked by required conditions
Details
Ruby Testing / test (3.2) (push) Blocked by required conditions
Details
Ruby Testing / test (3.3) (push) Blocked by required conditions
Details
Ruby Testing / ImageMagick tests (.ruby-version) (push) Blocked by required conditions
Details
Ruby Testing / ImageMagick tests (3.2) (push) Blocked by required conditions
Details
Ruby Testing / ImageMagick tests (3.3) (push) Blocked by required conditions
Details
Ruby Testing / End to End testing (.ruby-version) (push) Blocked by required conditions
Details
Ruby Testing / End to End testing (3.2) (push) Blocked by required conditions
Details
Ruby Testing / End to End testing (3.3) (push) Blocked by required conditions
Details
Ruby Testing / Elastic Search integration testing (.ruby-version, docker.elastic.co/elasticsearch/elasticsearch:7.17.13) (push) Blocked by required conditions
Details
Ruby Testing / Elastic Search integration testing (.ruby-version, docker.elastic.co/elasticsearch/elasticsearch:8.10.2) (push) Blocked by required conditions
Details
Ruby Testing / Elastic Search integration testing (.ruby-version, opensearchproject/opensearch:2) (push) Blocked by required conditions
Details
Ruby Testing / Elastic Search integration testing (3.2, docker.elastic.co/elasticsearch/elasticsearch:7.17.13) (push) Blocked by required conditions
Details
Ruby Testing / Elastic Search integration testing (3.3, docker.elastic.co/elasticsearch/elasticsearch:7.17.13) (push) Blocked by required conditions
Details
Bundler Audit / security (push) Has been cancelled
Details
Haml Linting / lint (push) Has been cancelled
Details

Browse Source
This commit is contained in:
diondiondion
2025-09-17 17:24:39 +02:00
committed by GitHub
parent db0cd9489c
commit 085e9ea676
5 changed files with 232 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
app/javascript/styles/mastodon/components.scss
View File

@@ -10294,7 +10294,7 @@ noscript {
.notification-list {
position: fixed;
bottom: 2rem;
inset-inline-start: 0;
inset-inline-start: 1rem;
z-index: 9999;
display: flex;
flex-direction: column;
@@ -10302,9 +10302,11 @@ noscript {
}
.notification-bar {
--alert-edge-spacing: 1rem;
display: flex;
gap: 10px;
flex: 0 0 auto;
position: relative;
inset-inline-start: -100%;
width: auto;
padding: 15px;
margin: 0;
@@ -10320,33 +10322,43 @@ noscript {
font-size: 15px;
line-height: 21px;
&.notification-bar-active {
inset-inline-start: 1rem;
&.from-side {
translate: calc(
-1 * (100% + var(--alert-edge-spacing)) * var(--text-x-direction)
);
}
&.from-below {
translate: 0 calc(100% + var(--alert-edge-spacing));
}
&.notification-bar--active {
translate: none;
}
.no-reduce-motion & {
transition: 0.5s cubic-bezier(0.89, 0.01, 0.5, 1.1);
transform: translateZ(0);
will-change: translate;
}
}
.notification-bar-title {
margin-inline-end: 5px;
.notification-bar__content {
margin-inline-end: auto;
}
.notification-bar-title,
.notification-bar-action {
.notification-bar__title {
margin-inline-end: 5px;
font-weight: 700;
}
.notification-bar-action {
.notification-bar__action {
display: inline-block;
border: 0;
background: transparent;
text-transform: uppercase;
margin-inline-start: 10px;
cursor: pointer;
color: $blurple-300;
font-weight: 700;
border-radius: 4px;
padding: 0 4px;
@@ -10357,6 +10369,17 @@ noscript {
}
}
.notification-bar__dismiss-button {
margin-top: -2px;
color: rgb(from currentColor r g b / 85%);
&:hover,
&:focus,
&:active {
color: currentColor;
}
}
.hashtag-header {
border-bottom: 1px solid var(--background-border-color);
padding: 15px;