mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-20 16:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(modal): Add backdrop-filter

Browse source
This commit is contained in:
Lucas Larroche 2022-06-05 10:37:48 +07:00
parent a9ab53feb6
commit ecba574e49
23 changed files with 74 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

11
css/pico.classless.css
View file

@ -283,7 +283,8 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: hsl(205deg, 20%, 94%); --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
--modal-overlay-background-color: rgba(213, 220, 226, 0.8); --modal-overlay-background-color: rgba(213, 220, 226, 0.7);
--modal-overlay-backdrop-filter: blur(0.25rem);
--progress-background-color: hsl(205deg, 18%, 86%); --progress-background-color: hsl(205deg, 18%, 86%);
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
@ -390,7 +391,8 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--modal-overlay-backdrop-filter: blur(0.25rem);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
@ -496,7 +498,8 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--modal-overlay-backdrop-filter: blur(0.25rem);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
@ -1838,6 +1841,8 @@ dialog {
min-height: 100%; min-height: 100%;
padding: var(--spacing); padding: var(--spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--modal-overlay-backdrop-filter);
backdrop-filter: var(--modal-overlay-backdrop-filter);
background-color: var(--modal-overlay-background-color); background-color: var(--modal-overlay-background-color);
color: var(--color); color: var(--color);
} }

2
css/pico.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

45
css/pico.css
View file

@ -288,7 +288,8 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: hsl(205deg, 20%, 94%); --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
--modal-overlay-background-color: rgba(213, 220, 226, 0.8); --modal-overlay-background-color: rgba(213, 220, 226, 0.7);
--modal-overlay-backdrop-filter: blur(0.25rem);
--progress-background-color: hsl(205deg, 18%, 86%); --progress-background-color: hsl(205deg, 18%, 86%);
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
@ -395,7 +396,8 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--modal-overlay-backdrop-filter: blur(0.25rem);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
@ -501,7 +503,8 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--modal-overlay-backdrop-filter: blur(0.25rem);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
@ -1944,6 +1947,8 @@ dialog {
min-height: 100%; min-height: 100%;
padding: var(--spacing); padding: var(--spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--modal-overlay-backdrop-filter);
backdrop-filter: var(--modal-overlay-backdrop-filter);
background-color: var(--modal-overlay-background-color); background-color: var(--modal-overlay-background-color);
color: var(--color); color: var(--color);
} }
@ -2024,14 +2029,14 @@ dialog:not([open]), dialog[open=false] {
:where(.modal-is-opening, .modal-is-closing) dialog { :where(.modal-is-opening, .modal-is-closing) dialog {
-webkit-animation-duration: 0.8s; -webkit-animation-duration: 0.8s;
animation-duration: 0.8s; animation-duration: 0.8s;
-webkit-animation-name: fadeIn; -webkit-animation-name: modalOverlay;
animation-name: fadeIn; animation-name: modalOverlay;
} }
:where(.modal-is-opening, .modal-is-closing) dialog > article { :where(.modal-is-opening, .modal-is-closing) dialog > article {
-webkit-animation-delay: 0.2s; -webkit-animation-delay: 0.2s;
animation-delay: 0.2s; animation-delay: 0.2s;
-webkit-animation-name: slideInDown; -webkit-animation-name: modal;
animation-name: slideInDown; animation-name: modal;
} }
.modal-is-closing dialog, .modal-is-closing dialog,
@ -2041,42 +2046,32 @@ dialog:not([open]), dialog[open=false] {
animation-direction: reverse; animation-direction: reverse;
} }
@-webkit-keyframes fadeIn { @-webkit-keyframes modalOverlay {
from { from {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: transparent; background-color: transparent;
} }
to {
background-color: var(--modal-overlay-background-color);
}
} }
@keyframes fadeIn { @keyframes modalOverlay {
from { from {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: transparent; background-color: transparent;
} }
to {
background-color: var(--modal-overlay-background-color);
} }
} @-webkit-keyframes modal {
@-webkit-keyframes slideInDown {
from { from {
transform: translateY(-100%); transform: translateY(-100%);
opacity: 0; opacity: 0;
} }
to {
transform: translateY(0);
opacity: 1;
} }
} @keyframes modal {
@keyframes slideInDown {
from { from {
transform: translateY(-100%); transform: translateY(-100%);
opacity: 0; opacity: 0;
} }
to {
transform: translateY(0);
opacity: 1;
}
} }
/** /**
* Nav * Nav

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

11
css/pico.fluid.classless.css
View file

@ -283,7 +283,8 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: hsl(205deg, 20%, 94%); --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
--modal-overlay-background-color: rgba(213, 220, 226, 0.8); --modal-overlay-background-color: rgba(213, 220, 226, 0.7);
--modal-overlay-backdrop-filter: blur(0.25rem);
--progress-background-color: hsl(205deg, 18%, 86%); --progress-background-color: hsl(205deg, 18%, 86%);
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
@ -390,7 +391,8 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--modal-overlay-backdrop-filter: blur(0.25rem);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
@ -496,7 +498,8 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--modal-overlay-backdrop-filter: blur(0.25rem);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
@ -1808,6 +1811,8 @@ dialog {
min-height: 100%; min-height: 100%;
padding: var(--spacing); padding: var(--spacing);
border: 0; border: 0;
-webkit-backdrop-filter: var(--modal-overlay-backdrop-filter);
backdrop-filter: var(--modal-overlay-backdrop-filter);
background-color: var(--modal-overlay-background-color); background-color: var(--modal-overlay-background-color);
color: var(--color); color: var(--color);
} }

2
css/pico.fluid.classless.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

9
css/pico.slim.css
View file

@ -219,7 +219,8 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: hsl(205deg, 20%, 94%); --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
--modal-overlay-background-color: rgba(213, 220, 226, 0.8); --modal-overlay-background-color: rgba(213, 220, 226, 0.7);
--modal-overlay-backdrop-filter: blur(0.25rem);
--progress-background-color: hsl(205deg, 18%, 86%); --progress-background-color: hsl(205deg, 18%, 86%);
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
@ -326,7 +327,8 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--modal-overlay-backdrop-filter: blur(0.25rem);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
@ -432,7 +434,8 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--modal-overlay-backdrop-filter: blur(0.25rem);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;

2
css/pico.slim.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/pico.slim.min.css.map
View file

File diff suppressed because one or more lines are too long

9
css/themes/default.css
View file

@ -283,7 +283,8 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: hsl(205deg, 20%, 94%); --dropdown-hover-background-color: hsl(205deg, 20%, 94%);
--modal-overlay-background-color: rgba(213, 220, 226, 0.8); --modal-overlay-background-color: rgba(213, 220, 226, 0.7);
--modal-overlay-backdrop-filter: blur(0.25rem);
--progress-background-color: hsl(205deg, 18%, 86%); --progress-background-color: hsl(205deg, 18%, 86%);
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
@ -390,7 +391,8 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--modal-overlay-backdrop-filter: blur(0.25rem);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;
@ -496,7 +498,8 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow); --dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color); --dropdown-color: var(--color);
--dropdown-hover-background-color: rgba(36, 51, 62, 0.75); --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);
--modal-overlay-background-color: rgba(36, 51, 62, 0.9); --modal-overlay-background-color: rgba(36, 51, 62, 0.8);
--modal-overlay-backdrop-filter: blur(0.25rem);
--progress-background-color: #24333e; --progress-background-color: #24333e;
--progress-color: var(--primary); --progress-color: var(--primary);
--loading-spinner-opacity: 0.5; --loading-spinner-opacity: 0.5;

2
css/themes/default.css.map
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
css/themes/default.min.css.map
View file

File diff suppressed because one or more lines are too long

17
scss/components/_modal.scss
View file

@ -22,6 +22,7 @@ dialog {
min-height: 100%; min-height: 100%;
padding: var(--spacing); padding: var(--spacing);
border: 0; border: 0;
backdrop-filter: var(--modal-overlay-backdrop-filter);
background-color: var(--modal-overlay-background-color); background-color: var(--modal-overlay-background-color);
color: var(--color); color: var(--color);
@ -134,11 +135,11 @@ dialog {
dialog { dialog {
animation-duration: ($animation-duration * 4); animation-duration: ($animation-duration * 4);
animation-name: fadeIn; animation-name: modalOverlay;
> article { > article {
animation-delay: $animation-duration; animation-delay: $animation-duration;
animation-name: slideInDown; animation-name: modal;
} }
} }
} }
@ -151,23 +152,17 @@ dialog {
} }
} }
@keyframes fadeIn { @keyframes modalOverlay {
from { from {
backdrop-filter: none;
background-color: transparent; background-color: transparent;
} }
to {
background-color: var(--modal-overlay-background-color);
}
} }
@keyframes slideInDown { @keyframes modal {
from { from {
transform: translateY(-100%); transform: translateY(-100%);
opacity: 0; opacity: 0;
} }
to {
transform: translateY(0);
opacity: 1;
}
} }
} }

3
scss/themes/default/_dark.scss
View file

@ -128,7 +128,8 @@
--dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)}; --dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
// Modal (<dialog>) // Modal (<dialog>)
--modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.9)}; --modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.8)};
--modal-overlay-backdrop-filter: blur(0.25rem);
// Progress // Progress
--progress-background-color: #{mix($grey-900, $grey-800)}; --progress-background-color: #{mix($grey-900, $grey-800)};

3
scss/themes/default/_light.scss
View file

@ -128,7 +128,8 @@
--dropdown-hover-background-color: #{$grey-50}; --dropdown-hover-background-color: #{$grey-50};
// Modal (<dialog>) // Modal (<dialog>)
--modal-overlay-background-color: #{rgba($grey-100, 0.8)}; --modal-overlay-background-color: #{rgba($grey-100, 0.7)};
--modal-overlay-backdrop-filter: blur(0.25rem);
// Progress // Progress
--progress-background-color: #{$grey-100}; --progress-background-color: #{$grey-100};