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

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

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;
}
}
}

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

@ -128,7 +128,8 @@
--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)};
--modal-overlay-backdrop-filter: blur(0.25rem);
// Progress
--progress-background-color: #{mix($grey-900, $grey-800)};

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

@ -118,7 +118,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%)};
@ -128,7 +128,8 @@
--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)};
--modal-overlay-backdrop-filter: blur(0.25rem);
// Progress
--progress-background-color: #{$grey-100};