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

Style: Modal

Browse source
This commit is contained in:
Lucas Larroche 2021-11-08 00:02:42 +07:00
parent c66f9911e2
commit 5bb7346728
3 changed files with 133 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

111
scss/components/_modal.scss
View file

@ -4,6 +4,7 @@
dialog { dialog {
display: flex; display: flex;
z-index: 999;
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
@ -19,6 +20,7 @@ dialog {
border: none; border: none;
background-color: var(--modal-overlay-background-color); background-color: var(--modal-overlay-background-color);
// Content
article { article {
@if map-get($breakpoints, "sm") { @if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {
@ -32,30 +34,48 @@ dialog {
} }
} }
> header,
> footer {
padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
}
> header {
.close {
margin: 0;
margin-left: var(--spacing);
float: right;
}
}
> footer { > footer {
text-align: right; text-align: right;
[role="button"]:not(:first-of-type) { [role="button"] {
margin-bottom: 0;
&:not(:first-of-type) {
margin-left: calc(var(--spacing) * 0.5); margin-left: calc(var(--spacing) * 0.5);
} }
} }
} }
&:not([open]) { p {
display: none; &:last-of-type {
margin: 0;
}
} }
// Close icon
.close { .close {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
margin-top: -0.5rem; margin-top: calc(var(--block-spacing-vertical) * -0.5);
margin-right: -0.5rem;
margin-bottom: var(--typography-spacing-vertical); margin-bottom: var(--typography-spacing-vertical);
margin-left: auto; margin-left: auto;
background-image: var(--icon-close); background-image: var(--icon-close);
background-position: center; background-position: center;
background-size: 1rem auto; background-size: auto 1rem;
background-repeat: no-repeat; background-repeat: no-repeat;
opacity: .5; opacity: .5;
@ -69,17 +89,90 @@ dialog {
opacity: 1; opacity: 1;
} }
} }
}
// Closed state
&:not([open]),
&[open="false"] {
display: none;
}
} }
.dialog-is-open { // Utilities
.modal-is-open {
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
.container { body > *:not(dialog) {
filter: blur(0.125rem); filter: blur(0.1875rem);
} }
dialog { dialog {
pointer-events: auto; pointer-events: auto;
} }
} }
// Animations
@if $enable-transitions {
$animation-duration: .2s;
.modal-is-opening,
.modal-is-closing {
body > *:not(dialog),
dialog,
dialog > article {
animation-duration: $animation-duration;
animation-fill-mode: both;
}
body > *:not(dialog) {
animation-name: blurIn;
}
dialog {
animation-name: fadeIn;
> article {
animation-name: slideInDown;
}
}
}
.modal-is-closing {
body > *:not(dialog),
dialog,
dialog > article {
animation-direction: reverse;
}
}
@keyframes blurIn {
from {
filter: blur(0);
}
to {
filter: blur(0.1875rem);
}
}
@keyframes fadeIn {
from {
background-color: transparent;
}
to {
background-color: var(--modal-overlay-background-color);
}
}
@keyframes slideInDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
}

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

@ -111,7 +111,7 @@
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)}; --card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
// Modal (<dialog>) // Modal (<dialog>)
--modal-overlay-background-color: #{rgba($grey-900, 0.9)}; --modal-overlay-background-color: #{rgba($grey-100, 0.8)};
// Progress // Progress
--progress-background-color: #{$grey-100}; --progress-background-color: #{$grey-100};

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

@ -124,31 +124,20 @@
// Modal // Modal
dialog > article { dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: var(--spacing);
@if map-get($breakpoints, "sm") { @if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) { @media (min-width: map-get($breakpoints, "sm")) {
--block-spacing-vertical: calc(var(--spacing) * 1.5); --block-spacing-vertical: calc(var(--spacing) * 2.5);
--block-spacing-horizontal: calc(var(--spacing) * 1.5); --block-spacing-horizontal: calc(var(--spacing) * 1.25);
} }
} }
@if map-get($breakpoints, "md") { @if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) { @media (min-width: map-get($breakpoints, "md")) {
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
--block-spacing-horizontal: calc(var(--spacing) * 2.5);
}
}
@if map-get($breakpoints, "xl") {
@media (min-width: map-get($breakpoints, "xl")) {
--block-spacing-vertical: calc(var(--spacing) * 3); --block-spacing-vertical: calc(var(--spacing) * 3);
--block-spacing-horizontal: calc(var(--spacing) * 3); --block-spacing-horizontal: calc(var(--spacing) * 1.5);
} }
} }
} }