mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 18:56:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #208 from picocss/ll/modal/backdrop

Browse source 
Style: Modal backdrop-filter
This commit is contained in:
Lucas Larroche 2022-09-11 16:03:26 +07:00 • committed by GitHub
commit b0b4c3f10d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 65 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

9
css/pico.classless.css
View file

@ -28,6 +28,7 @@
--nav-link-spacing-horizontal: 0.5rem; --nav-link-spacing-horizontal: 0.5rem;
--form-label-font-weight: var(--font-weight); --form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
--modal-overlay-backdrop-filter: blur(0.25rem);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
:root { :root {
@ -282,7 +283,7 @@ 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);
--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;
@ -389,7 +390,7 @@ 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);
--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;
@ -495,7 +496,7 @@ 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);
--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;
@ -1837,6 +1838,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

43
css/pico.css
View file

@ -30,6 +30,7 @@
--nav-link-spacing-horizontal: 0.5rem; --nav-link-spacing-horizontal: 0.5rem;
--form-label-font-weight: var(--font-weight); --form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
--modal-overlay-backdrop-filter: blur(0.25rem);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
:root { :root {
@ -287,7 +288,7 @@ 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);
--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;
@ -394,7 +395,7 @@ 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);
--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;
@ -500,7 +501,7 @@ 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);
--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;
@ -1943,6 +1944,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);
} }
@ -2023,14 +2026,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,
@ -2040,42 +2043,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 slideInDown { @-webkit-keyframes modal {
from { from {
transform: translateY(-100%); transform: translateY(-100%);
opacity: 0; opacity: 0;
} }
to {
transform: translateY(0);
opacity: 1;
}
} }
@keyframes slideInDown { @keyframes modal {
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

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

@ -28,6 +28,7 @@
--nav-link-spacing-horizontal: 0.5rem; --nav-link-spacing-horizontal: 0.5rem;
--form-label-font-weight: var(--font-weight); --form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
--modal-overlay-backdrop-filter: blur(0.25rem);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
:root { :root {
@ -282,7 +283,7 @@ 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);
--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;
@ -389,7 +390,7 @@ 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);
--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;
@ -495,7 +496,7 @@ 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);
--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;
@ -1807,6 +1808,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

7
css/pico.slim.css
View file

@ -32,6 +32,7 @@
--nav-link-spacing-horizontal: 0.5rem; --nav-link-spacing-horizontal: 0.5rem;
--form-label-font-weight: var(--font-weight); --form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
--modal-overlay-backdrop-filter: blur(0.25rem);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
:root { :root {
@ -218,7 +219,7 @@ 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);
--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;
@ -325,7 +326,7 @@ 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);
--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;
@ -431,7 +432,7 @@ 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);
--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

7
css/themes/default.css
View file

@ -25,6 +25,7 @@
--nav-link-spacing-horizontal: 0.5rem; --nav-link-spacing-horizontal: 0.5rem;
--form-label-font-weight: var(--font-weight); --form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
--modal-overlay-backdrop-filter: blur(0.25rem);
} }
@media (min-width: 576px) { @media (min-width: 576px) {
:root { :root {
@ -282,7 +283,7 @@ 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);
--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;
@ -389,7 +390,7 @@ 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);
--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;
@ -495,7 +496,7 @@ 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);
--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;
}
} }
} }

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

@ -126,7 +126,7 @@
--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)};
// Progress // Progress
--progress-background-color: #{mix($grey-900, $grey-800)}; --progress-background-color: #{mix($grey-900, $grey-800)};

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

@ -116,7 +116,7 @@
#{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($grey-900, ($box-shadow-opacity * 0.717))}, #{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{($box-shadow-blur-strengh * 0.417)} #{rgba($grey-900, ($box-shadow-opacity * 0.717))},
#{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($grey-900, $box-shadow-opacity)}, #{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba($grey-900, $box-shadow-opacity)},
0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25) )}; 0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25) )};
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)}; --card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
// Dropdown (<details role="list">) // Dropdown (<details role="list">)
--dropdown-background-color: #{mix($grey-50, $white, 25%)}; --dropdown-background-color: #{mix($grey-50, $white, 25%)};
@ -126,7 +126,7 @@
--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)};
// Progress // Progress
--progress-background-color: #{$grey-100}; --progress-background-color: #{$grey-100};

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

@ -70,6 +70,9 @@
// Transitions // Transitions
--transition: 0.2s ease-in-out; --transition: 0.2s ease-in-out;
// Modal (<dialog>)
--modal-overlay-backdrop-filter: blur(0.25rem);
} }
// Responsives spacings // Responsives spacings