mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-21 17:16: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

157
scss/components/_modal.scss
View file

@ -4,6 +4,7 @@
dialog {
display: flex;
z-index: 999;
position: fixed;
top: 0;
right: 0;
@ -19,6 +20,7 @@ dialog {
border: none;
background-color: var(--modal-overlay-background-color);
// Content
article {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
@ -32,54 +34,145 @@ 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 {
text-align: right;
[role="button"]:not(:first-of-type) {
margin-left: calc(var(--spacing) * 0.5);
[role="button"] {
margin-bottom: 0;
&:not(:first-of-type) {
margin-left: calc(var(--spacing) * 0.5);
}
}
}
p {
&:last-of-type {
margin: 0;
}
}
// Close icon
.close {
display: block;
width: 1rem;
height: 1rem;
margin-top: calc(var(--block-spacing-vertical) * -0.5);
margin-bottom: var(--typography-spacing-vertical);
margin-left: auto;
background-image: var(--icon-close);
background-position: center;
background-size: auto 1rem;
background-repeat: no-repeat;
opacity: .5;
@if $enable-transitions {
transition: opacity var(--transition);
}
&:hover,
&:active,
&:focus {
opacity: 1;
}
}
}
&:not([open]) {
// Closed state
&:not([open]),
&[open="false"] {
display: none;
}
.close {
display: block;
width: 1rem;
height: 1rem;
margin-top: -0.5rem;
margin-right: -0.5rem;
margin-bottom: var(--typography-spacing-vertical);
margin-left: auto;
background-image: var(--icon-close);
background-position: center;
background-size: 1rem auto;
background-repeat: no-repeat;
opacity: .5;
@if $enable-transitions {
transition: opacity var(--transition);
}
&:hover,
&:active,
&:focus {
opacity: 1;
}
}
}
.dialog-is-open {
// Utilities
.modal-is-open {
overflow: hidden;
pointer-events: none;
.container {
filter: blur(0.125rem);
body > *:not(dialog) {
filter: blur(0.1875rem);
}
dialog {
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%)};
// Modal (<dialog>)
--modal-overlay-background-color: #{rgba($grey-900, 0.9)};
--modal-overlay-background-color: #{rgba($grey-100, 0.8)};
// Progress
--progress-background-color: #{$grey-100};

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

@ -123,32 +123,21 @@
// Modal
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: var(--spacing);
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
--block-spacing-vertical: calc(var(--spacing) * 1.5);
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
--block-spacing-vertical: calc(var(--spacing) * 2.5);
--block-spacing-horizontal: calc(var(--spacing) * 1.25);
}
}
@if 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-horizontal: calc(var(--spacing) * 3);
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
}
}
}