style: modal

This commit is contained in:
Lucas Larroche 2023-03-25 12:35:22 +07:00
parent d7d11308af
commit 32f65f1f64
12 changed files with 24 additions and 17 deletions

View file

@ -103,7 +103,7 @@
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #eff1f4;
--pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(239, 241, 244, 0.7);
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background);
@ -233,7 +233,7 @@
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.85);
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75);
--pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background);
@ -356,7 +356,7 @@
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.85);
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75);
--pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background);
@ -2164,9 +2164,11 @@ dialog article > header .close {
dialog article > footer {
text-align: right;
}
dialog article > footer button,
dialog article > footer [role=button] {
margin-bottom: 0;
}
dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5);
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -103,7 +103,7 @@
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #eff1f4;
--pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(239, 241, 244, 0.7);
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background);
@ -233,7 +233,7 @@
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.85);
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75);
--pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background);
@ -356,7 +356,7 @@
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.85);
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75);
--pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background);
@ -2267,9 +2267,11 @@ dialog article > header .close {
dialog article > footer {
text-align: right;
}
dialog article > footer button,
dialog article > footer [role=button] {
margin-bottom: 0;
}
dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5);
}

File diff suppressed because one or more lines are too long

View file

@ -103,7 +103,7 @@
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #eff1f4;
--pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(239, 241, 244, 0.7);
--pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
--pico-progress-background-color: #dfe3eb;
--pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background);
@ -233,7 +233,7 @@
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.85);
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75);
--pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background);
@ -356,7 +356,7 @@
--pico-dropdown-color: var(--pico-color);
--pico-dropdown-hover-background-color: #202632;
--pico-loading-spinner-opacity: 0.5;
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.85);
--pico-modal-overlay-background-color: rgba(8, 9, 10, 0.75);
--pico-progress-background-color: #202632;
--pico-progress-color: var(--pico-primary-background);
--pico-tooltip-background-color: var(--pico-contrast-background);
@ -2127,9 +2127,11 @@ dialog article > header .close {
dialog article > footer {
text-align: right;
}
dialog article > footer button,
dialog article > footer [role=button] {
margin-bottom: 0;
}
dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5);
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored

File diff suppressed because one or more lines are too long

View file

@ -64,6 +64,7 @@
> footer {
text-align: right;
button,
[role="button"] {
margin-bottom: 0;

View file

@ -183,7 +183,7 @@
// Modal (<dialog>)
@if map.get($modules, "components/modal") {
#{$✨}modal-overlay-background-color: #{rgba(mix($black, $zinc-950), 0.85)};
#{$✨}modal-overlay-background-color: #{rgba(mix($black, $zinc-950), 0.75)};
}
// Progress

View file

@ -183,7 +183,7 @@
// Modal (<dialog>)
@if map.get($modules, "components/modal") {
#{$✨}modal-overlay-background-color: #{rgba($slate-50, 0.7)};
#{$✨}modal-overlay-background-color: #{rgba(mix($zinc-100, $zinc-50), 0.75)};
}
// Progress