mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-25 10:46:14 -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;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out;
--modal-overlay-backdrop-filter: blur(0.25rem);
}
@media (min-width: 576px) {
:root {
@ -282,7 +283,7 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--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-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -389,7 +390,7 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--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-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -495,7 +496,7 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--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-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -1837,6 +1838,8 @@ dialog {
min-height: 100%;
padding: var(--spacing);
border: 0;
-webkit-backdrop-filter: var(--modal-overlay-backdrop-filter);
backdrop-filter: var(--modal-overlay-backdrop-filter);
background-color: var(--modal-overlay-background-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;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out;
--modal-overlay-backdrop-filter: blur(0.25rem);
}
@media (min-width: 576px) {
:root {
@ -287,7 +288,7 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--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-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -394,7 +395,7 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--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-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -500,7 +501,7 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--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-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -1943,6 +1944,8 @@ dialog {
min-height: 100%;
padding: var(--spacing);
border: 0;
-webkit-backdrop-filter: var(--modal-overlay-backdrop-filter);
backdrop-filter: var(--modal-overlay-backdrop-filter);
background-color: var(--modal-overlay-background-color);
color: var(--color);
}
@ -2023,14 +2026,14 @@ dialog:not([open]), dialog[open=false] {
:where(.modal-is-opening, .modal-is-closing) dialog {
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
-webkit-animation-name: modalOverlay;
animation-name: modalOverlay;
}
:where(.modal-is-opening, .modal-is-closing) dialog > article {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
-webkit-animation-name: modal;
animation-name: modal;
}
.modal-is-closing dialog,
@ -2040,42 +2043,32 @@ dialog:not([open]), dialog[open=false] {
animation-direction: reverse;
}
@-webkit-keyframes fadeIn {
@-webkit-keyframes modalOverlay {
from {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: transparent;
}
to {
background-color: var(--modal-overlay-background-color);
}
}
@keyframes fadeIn {
@keyframes modalOverlay {
from {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-color: transparent;
}
to {
background-color: var(--modal-overlay-background-color);
}
}
@-webkit-keyframes slideInDown {
@-webkit-keyframes modal {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes slideInDown {
@keyframes modal {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
/**
* 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;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out;
--modal-overlay-backdrop-filter: blur(0.25rem);
}
@media (min-width: 576px) {
:root {
@ -282,7 +283,7 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--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-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -389,7 +390,7 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--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-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -495,7 +496,7 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--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-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -1807,6 +1808,8 @@ dialog {
min-height: 100%;
padding: var(--spacing);
border: 0;
-webkit-backdrop-filter: var(--modal-overlay-backdrop-filter);
backdrop-filter: var(--modal-overlay-backdrop-filter);
background-color: var(--modal-overlay-background-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;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out;
--modal-overlay-backdrop-filter: blur(0.25rem);
}
@media (min-width: 576px) {
:root {
@ -218,7 +219,7 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--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-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -325,7 +326,7 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--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-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -431,7 +432,7 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--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-color: var(--primary);
--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;
--form-label-font-weight: var(--font-weight);
--transition: 0.2s ease-in-out;
--modal-overlay-backdrop-filter: blur(0.25rem);
}
@media (min-width: 576px) {
:root {
@ -282,7 +283,7 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--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-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -389,7 +390,7 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--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-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -495,7 +496,7 @@ kbd {
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--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-color: var(--primary);
--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%;
padding: var(--spacing);
border: 0;
backdrop-filter: var(--modal-overlay-backdrop-filter);
background-color: var(--modal-overlay-background-color);
color: var(--color);
@ -134,11 +135,11 @@ dialog {
dialog {
animation-duration: ($animation-duration * 4);
animation-name: fadeIn;
animation-name: modalOverlay;
> article {
animation-delay: $animation-duration;
animation-name: slideInDown;
animation-name: modal;
}
}
}
@ -151,23 +152,17 @@ dialog {
}
}
@keyframes fadeIn {
@keyframes modalOverlay {
from {
backdrop-filter: none;
background-color: transparent;
}
to {
background-color: var(--modal-overlay-background-color);
}
}
@keyframes slideInDown {
@keyframes modal {
from {
transform: translateY(-100%);
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)};
// 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-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)} #{$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) )};
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
// Dropdown (<details role="list">)
--dropdown-background-color: #{mix($grey-50, $white, 25%)};
@ -126,7 +126,7 @@
--dropdown-hover-background-color: #{$grey-50};
// Modal (<dialog>)
--modal-overlay-background-color: #{rgba($grey-100, 0.8)};
--modal-overlay-background-color: #{rgba($grey-100, 0.7)};
// Progress
--progress-background-color: #{$grey-100};

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

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