Skip to content

Commit c1b55d8

Browse files
committed
feat: notification component
1 parent 6dc6489 commit c1b55d8

File tree

239 files changed

+4883
-118
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

239 files changed

+4883
-118
lines changed

css/pico.amber.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2747,6 +2747,46 @@ progress::-moz-progress-bar {
27472747
}
27482748
}
27492749

2750+
/**
2751+
* Notification (<dialog>)
2752+
*/
2753+
dialog[role=alert] {
2754+
position: fixed;
2755+
top: unset;
2756+
right: var(--pico-spacing);
2757+
bottom: var(--pico-spacing);
2758+
left: unset;
2759+
width: auto;
2760+
min-width: unset;
2761+
height: auto;
2762+
min-height: unset;
2763+
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
2764+
border: var(--pico-border-width) solid var(--pico-border-color);
2765+
border-radius: var(--pico-border-radius);
2766+
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
2767+
backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
2768+
background-color: var(--pico-primary-background);
2769+
box-shadow: var(--pico-box-shadow);
2770+
color: var(--pico-primary-inverse);
2771+
font-weight: var(--pico-font-weight);
2772+
font-size: var(--pico-font-size);
2773+
line-height: var(--pico-line-height);
2774+
opacity: 0;
2775+
transition: opacity var(--pico-transition);
2776+
-webkit-user-select: none;
2777+
-moz-user-select: none;
2778+
user-select: none;
2779+
}
2780+
2781+
dialog[data-backdrop=false][role=alert]::backdrop {
2782+
display: none;
2783+
}
2784+
2785+
dialog[role=alert][open] {
2786+
opacity: 1;
2787+
transition: opacity var(--pico-transition);
2788+
}
2789+
27502790
/**
27512791
* Accessibility & User interaction
27522792
*/

css/pico.amber.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

css/pico.blue.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2747,6 +2747,46 @@ progress::-moz-progress-bar {
27472747
}
27482748
}
27492749

2750+
/**
2751+
* Notification (<dialog>)
2752+
*/
2753+
dialog[role=alert] {
2754+
position: fixed;
2755+
top: unset;
2756+
right: var(--pico-spacing);
2757+
bottom: var(--pico-spacing);
2758+
left: unset;
2759+
width: auto;
2760+
min-width: unset;
2761+
height: auto;
2762+
min-height: unset;
2763+
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
2764+
border: var(--pico-border-width) solid var(--pico-border-color);
2765+
border-radius: var(--pico-border-radius);
2766+
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
2767+
backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
2768+
background-color: var(--pico-primary-background);
2769+
box-shadow: var(--pico-box-shadow);
2770+
color: var(--pico-primary-inverse);
2771+
font-weight: var(--pico-font-weight);
2772+
font-size: var(--pico-font-size);
2773+
line-height: var(--pico-line-height);
2774+
opacity: 0;
2775+
transition: opacity var(--pico-transition);
2776+
-webkit-user-select: none;
2777+
-moz-user-select: none;
2778+
user-select: none;
2779+
}
2780+
2781+
dialog[data-backdrop=false][role=alert]::backdrop {
2782+
display: none;
2783+
}
2784+
2785+
dialog[role=alert][open] {
2786+
opacity: 1;
2787+
transition: opacity var(--pico-transition);
2788+
}
2789+
27502790
/**
27512791
* Accessibility & User interaction
27522792
*/

css/pico.blue.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

css/pico.classless.amber.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2376,6 +2376,46 @@ progress::-moz-progress-bar {
23762376
}
23772377
}
23782378

2379+
/**
2380+
* Notification (<dialog>)
2381+
*/
2382+
dialog[role=alert] {
2383+
position: fixed;
2384+
top: unset;
2385+
right: var(--pico-spacing);
2386+
bottom: var(--pico-spacing);
2387+
left: unset;
2388+
width: auto;
2389+
min-width: unset;
2390+
height: auto;
2391+
min-height: unset;
2392+
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
2393+
border: var(--pico-border-width) solid var(--pico-border-color);
2394+
border-radius: var(--pico-border-radius);
2395+
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
2396+
backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
2397+
background-color: var(--pico-primary-background);
2398+
box-shadow: var(--pico-box-shadow);
2399+
color: var(--pico-primary-inverse);
2400+
font-weight: var(--pico-font-weight);
2401+
font-size: var(--pico-font-size);
2402+
line-height: var(--pico-line-height);
2403+
opacity: 0;
2404+
transition: opacity var(--pico-transition);
2405+
-webkit-user-select: none;
2406+
-moz-user-select: none;
2407+
user-select: none;
2408+
}
2409+
2410+
dialog[data-backdrop=false][role=alert]::backdrop {
2411+
display: none;
2412+
}
2413+
2414+
dialog[role=alert][open] {
2415+
opacity: 1;
2416+
transition: opacity var(--pico-transition);
2417+
}
2418+
23792419
/**
23802420
* Accessibility & User interaction
23812421
*/

css/pico.classless.amber.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

css/pico.classless.blue.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2376,6 +2376,46 @@ progress::-moz-progress-bar {
23762376
}
23772377
}
23782378

2379+
/**
2380+
* Notification (<dialog>)
2381+
*/
2382+
dialog[role=alert] {
2383+
position: fixed;
2384+
top: unset;
2385+
right: var(--pico-spacing);
2386+
bottom: var(--pico-spacing);
2387+
left: unset;
2388+
width: auto;
2389+
min-width: unset;
2390+
height: auto;
2391+
min-height: unset;
2392+
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
2393+
border: var(--pico-border-width) solid var(--pico-border-color);
2394+
border-radius: var(--pico-border-radius);
2395+
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
2396+
backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
2397+
background-color: var(--pico-primary-background);
2398+
box-shadow: var(--pico-box-shadow);
2399+
color: var(--pico-primary-inverse);
2400+
font-weight: var(--pico-font-weight);
2401+
font-size: var(--pico-font-size);
2402+
line-height: var(--pico-line-height);
2403+
opacity: 0;
2404+
transition: opacity var(--pico-transition);
2405+
-webkit-user-select: none;
2406+
-moz-user-select: none;
2407+
user-select: none;
2408+
}
2409+
2410+
dialog[data-backdrop=false][role=alert]::backdrop {
2411+
display: none;
2412+
}
2413+
2414+
dialog[role=alert][open] {
2415+
opacity: 1;
2416+
transition: opacity var(--pico-transition);
2417+
}
2418+
23792419
/**
23802420
* Accessibility & User interaction
23812421
*/

css/pico.classless.blue.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

css/pico.classless.conditional.amber.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2376,6 +2376,46 @@ main {
23762376
}
23772377
}
23782378

2379+
/**
2380+
* Notification (<dialog>)
2381+
*/
2382+
dialog[role=alert] {
2383+
position: fixed;
2384+
top: unset;
2385+
right: var(--pico-spacing);
2386+
bottom: var(--pico-spacing);
2387+
left: unset;
2388+
width: auto;
2389+
min-width: unset;
2390+
height: auto;
2391+
min-height: unset;
2392+
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
2393+
border: var(--pico-border-width) solid var(--pico-border-color);
2394+
border-radius: var(--pico-border-radius);
2395+
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
2396+
backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
2397+
background-color: var(--pico-primary-background);
2398+
box-shadow: var(--pico-box-shadow);
2399+
color: var(--pico-primary-inverse);
2400+
font-weight: var(--pico-font-weight);
2401+
font-size: var(--pico-font-size);
2402+
line-height: var(--pico-line-height);
2403+
opacity: 0;
2404+
transition: opacity var(--pico-transition);
2405+
-webkit-user-select: none;
2406+
-moz-user-select: none;
2407+
user-select: none;
2408+
}
2409+
2410+
dialog[data-backdrop=false][role=alert]::backdrop {
2411+
display: none;
2412+
}
2413+
2414+
dialog[role=alert][open] {
2415+
opacity: 1;
2416+
transition: opacity var(--pico-transition);
2417+
}
2418+
23792419
/**
23802420
* Accessibility & User interaction
23812421
*/

css/pico.classless.conditional.amber.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

css/pico.classless.conditional.blue.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2376,6 +2376,46 @@ main {
23762376
}
23772377
}
23782378

2379+
/**
2380+
* Notification (<dialog>)
2381+
*/
2382+
dialog[role=alert] {
2383+
position: fixed;
2384+
top: unset;
2385+
right: var(--pico-spacing);
2386+
bottom: var(--pico-spacing);
2387+
left: unset;
2388+
width: auto;
2389+
min-width: unset;
2390+
height: auto;
2391+
min-height: unset;
2392+
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
2393+
border: var(--pico-border-width) solid var(--pico-border-color);
2394+
border-radius: var(--pico-border-radius);
2395+
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
2396+
backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
2397+
background-color: var(--pico-primary-background);
2398+
box-shadow: var(--pico-box-shadow);
2399+
color: var(--pico-primary-inverse);
2400+
font-weight: var(--pico-font-weight);
2401+
font-size: var(--pico-font-size);
2402+
line-height: var(--pico-line-height);
2403+
opacity: 0;
2404+
transition: opacity var(--pico-transition);
2405+
-webkit-user-select: none;
2406+
-moz-user-select: none;
2407+
user-select: none;
2408+
}
2409+
2410+
dialog[data-backdrop=false][role=alert]::backdrop {
2411+
display: none;
2412+
}
2413+
2414+
dialog[role=alert][open] {
2415+
opacity: 1;
2416+
transition: opacity var(--pico-transition);
2417+
}
2418+
23792419
/**
23802420
* Accessibility & User interaction
23812421
*/

css/pico.classless.conditional.blue.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

css/pico.classless.conditional.cyan.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2376,6 +2376,46 @@ main {
23762376
}
23772377
}
23782378

2379+
/**
2380+
* Notification (<dialog>)
2381+
*/
2382+
dialog[role=alert] {
2383+
position: fixed;
2384+
top: unset;
2385+
right: var(--pico-spacing);
2386+
bottom: var(--pico-spacing);
2387+
left: unset;
2388+
width: auto;
2389+
min-width: unset;
2390+
height: auto;
2391+
min-height: unset;
2392+
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
2393+
border: var(--pico-border-width) solid var(--pico-border-color);
2394+
border-radius: var(--pico-border-radius);
2395+
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
2396+
backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
2397+
background-color: var(--pico-primary-background);
2398+
box-shadow: var(--pico-box-shadow);
2399+
color: var(--pico-primary-inverse);
2400+
font-weight: var(--pico-font-weight);
2401+
font-size: var(--pico-font-size);
2402+
line-height: var(--pico-line-height);
2403+
opacity: 0;
2404+
transition: opacity var(--pico-transition);
2405+
-webkit-user-select: none;
2406+
-moz-user-select: none;
2407+
user-select: none;
2408+
}
2409+
2410+
dialog[data-backdrop=false][role=alert]::backdrop {
2411+
display: none;
2412+
}
2413+
2414+
dialog[role=alert][open] {
2415+
opacity: 1;
2416+
transition: opacity var(--pico-transition);
2417+
}
2418+
23792419
/**
23802420
* Accessibility & User interaction
23812421
*/

css/pico.classless.conditional.cyan.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

css/pico.classless.conditional.fuchsia.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2376,6 +2376,46 @@ main {
23762376
}
23772377
}
23782378

2379+
/**
2380+
* Notification (<dialog>)
2381+
*/
2382+
dialog[role=alert] {
2383+
position: fixed;
2384+
top: unset;
2385+
right: var(--pico-spacing);
2386+
bottom: var(--pico-spacing);
2387+
left: unset;
2388+
width: auto;
2389+
min-width: unset;
2390+
height: auto;
2391+
min-height: unset;
2392+
padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
2393+
border: var(--pico-border-width) solid var(--pico-border-color);
2394+
border-radius: var(--pico-border-radius);
2395+
-webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
2396+
backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
2397+
background-color: var(--pico-primary-background);
2398+
box-shadow: var(--pico-box-shadow);
2399+
color: var(--pico-primary-inverse);
2400+
font-weight: var(--pico-font-weight);
2401+
font-size: var(--pico-font-size);
2402+
line-height: var(--pico-line-height);
2403+
opacity: 0;
2404+
transition: opacity var(--pico-transition);
2405+
-webkit-user-select: none;
2406+
-moz-user-select: none;
2407+
user-select: none;
2408+
}
2409+
2410+
dialog[data-backdrop=false][role=alert]::backdrop {
2411+
display: none;
2412+
}
2413+
2414+
dialog[role=alert][open] {
2415+
opacity: 1;
2416+
transition: opacity var(--pico-transition);
2417+
}
2418+
23792419
/**
23802420
* Accessibility & User interaction
23812421
*/

css/pico.classless.conditional.fuchsia.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)