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

Feat modal: Global styles

Browse source
This commit is contained in:
Lucas Larroche 2021-10-24 15:24:57 +07:00
parent fff088f459
commit 7552bda6fd
16 changed files with 372 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

101
css/pico.classless.css
View file

@ -100,6 +100,31 @@ section {
}
}
@media (min-width: 576px) {
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 1.5);
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
}
}
@media (min-width: 768px) {
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
}
@media (min-width: 992px) {
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
--block-spacing-horizontal: calc(var(--spacing) * 2.5);
}
}
@media (min-width: 1200px) {
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 3);
--block-spacing-horizontal: calc(var(--spacing) * 3);
}
}
a {
--text-decoration: none;
}
@ -251,6 +276,7 @@ kbd {
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fbfbfc;
--modal-overlay-background-color: rgba(27, 40, 50, 0.9);
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -342,6 +368,7 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -432,6 +459,7 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -1700,28 +1728,6 @@ template {
display: none !important;
}
dialog {
display: block;
position: absolute;
right: 0;
left: 0;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
margin: auto;
padding: 1em;
border: solid;
background-color: white;
color: black;
}
dialog:not([open]) {
display: none;
}
canvas {
display: inline-block;
}
@ -1819,6 +1825,57 @@ article > footer {
border-top: var(--border-width) solid var(--card-border-color);
}
/**
* Modal (<dialog>)
*/
dialog {
position: fixed;
width: inherit;
min-width: 100%;
height: inherit;
min-height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--modal-overlay-background-color);
padding: var(--spacing);
border: none;
}
@media (min-width: 576px) {
dialog article {
max-width: 510px;
}
}
@media (min-width: 768px) {
dialog article {
max-width: 700px;
}
}
dialog article > footer {
text-align: right;
}
dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--spacing) * 0.5);
}
dialog:not([open]) {
display: none;
}
.dialog-is-open {
pointer-events: none;
overflow: hidden;
}
.dialog-is-open .container {
filter: blur(0.125rem);
}
.dialog-is-open dialog {
pointer-events: auto;
}
/**
* Nav
*/

2
css/pico.classless.min.css vendored
View file

File diff suppressed because one or more lines are too long

101
css/pico.css
View file

@ -100,6 +100,31 @@ section {
}
}
@media (min-width: 576px) {
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 1.5);
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
}
}
@media (min-width: 768px) {
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
}
@media (min-width: 992px) {
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
--block-spacing-horizontal: calc(var(--spacing) * 2.5);
}
}
@media (min-width: 1200px) {
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 3);
--block-spacing-horizontal: calc(var(--spacing) * 3);
}
}
a {
--text-decoration: none;
}
@ -251,6 +276,7 @@ kbd {
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fbfbfc;
--modal-overlay-background-color: rgba(27, 40, 50, 0.9);
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -342,6 +368,7 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -432,6 +459,7 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -1879,28 +1907,6 @@ template {
display: none !important;
}
dialog {
display: block;
position: absolute;
right: 0;
left: 0;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
margin: auto;
padding: 1em;
border: solid;
background-color: white;
color: black;
}
dialog:not([open]) {
display: none;
}
canvas {
display: inline-block;
}
@ -1998,6 +2004,57 @@ article > footer {
border-top: var(--border-width) solid var(--card-border-color);
}
/**
* Modal (<dialog>)
*/
dialog {
position: fixed;
width: inherit;
min-width: 100%;
height: inherit;
min-height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--modal-overlay-background-color);
padding: var(--spacing);
border: none;
}
@media (min-width: 576px) {
dialog article {
max-width: 510px;
}
}
@media (min-width: 768px) {
dialog article {
max-width: 700px;
}
}
dialog article > footer {
text-align: right;
}
dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--spacing) * 0.5);
}
dialog:not([open]) {
display: none;
}
.dialog-is-open {
pointer-events: none;
overflow: hidden;
}
.dialog-is-open .container {
filter: blur(0.125rem);
}
.dialog-is-open dialog {
pointer-events: auto;
}
/**
* Nav
*/

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

@ -100,6 +100,31 @@ section {
}
}
@media (min-width: 576px) {
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 1.5);
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
}
}
@media (min-width: 768px) {
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
}
@media (min-width: 992px) {
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
--block-spacing-horizontal: calc(var(--spacing) * 2.5);
}
}
@media (min-width: 1200px) {
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 3);
--block-spacing-horizontal: calc(var(--spacing) * 3);
}
}
a {
--text-decoration: none;
}
@ -251,6 +276,7 @@ kbd {
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fbfbfc;
--modal-overlay-background-color: rgba(27, 40, 50, 0.9);
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -342,6 +368,7 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -432,6 +459,7 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -1670,28 +1698,6 @@ template {
display: none !important;
}
dialog {
display: block;
position: absolute;
right: 0;
left: 0;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
margin: auto;
padding: 1em;
border: solid;
background-color: white;
color: black;
}
dialog:not([open]) {
display: none;
}
canvas {
display: inline-block;
}
@ -1789,6 +1795,57 @@ article > footer {
border-top: var(--border-width) solid var(--card-border-color);
}
/**
* Modal (<dialog>)
*/
dialog {
position: fixed;
width: inherit;
min-width: 100%;
height: inherit;
min-height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--modal-overlay-background-color);
padding: var(--spacing);
border: none;
}
@media (min-width: 576px) {
dialog article {
max-width: 510px;
}
}
@media (min-width: 768px) {
dialog article {
max-width: 700px;
}
}
dialog article > footer {
text-align: right;
}
dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--spacing) * 0.5);
}
dialog:not([open]) {
display: none;
}
.dialog-is-open {
pointer-events: none;
overflow: hidden;
}
.dialog-is-open .container {
filter: blur(0.125rem);
}
.dialog-is-open dialog {
pointer-events: auto;
}
/**
* Nav
*/

2
css/pico.fluid.classless.min.css vendored
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

3
css/pico.slim.css
View file

@ -200,6 +200,7 @@ kbd {
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fbfbfc;
--modal-overlay-background-color: rgba(27, 40, 50, 0.9);
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -291,6 +292,7 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -381,6 +383,7 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: 0.5;

2
css/pico.slim.min.css vendored
View file

File diff suppressed because one or more lines are too long

28
css/themes/default.css
View file

@ -96,6 +96,31 @@ section {
}
}
@media (min-width: 576px) {
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 1.5);
--block-spacing-horizontal: calc(var(--spacing) * 1.5);
}
}
@media (min-width: 768px) {
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 2);
--block-spacing-horizontal: calc(var(--spacing) * 2);
}
}
@media (min-width: 992px) {
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 2.5);
--block-spacing-horizontal: calc(var(--spacing) * 2.5);
}
}
@media (min-width: 1200px) {
dialog > article {
--block-spacing-vertical: calc(var(--spacing) * 3);
--block-spacing-horizontal: calc(var(--spacing) * 3);
}
}
a {
--text-decoration: none;
}
@ -247,6 +272,7 @@ kbd {
0 0.125rem 2rem rgba(27, 40, 50, 0.08),
0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
--card-sectionning-background-color: #fbfbfc;
--modal-overlay-background-color: rgba(27, 40, 50, 0.9);
--progress-background-color: #d5dce2;
--progress-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -338,6 +364,7 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: 0.5;
@ -428,6 +455,7 @@ kbd {
0 0.125rem 2rem rgba(0, 0, 0, 0.12),
0 0 0 0.0625rem rgba(0, 0, 0, 0.036);
--card-sectionning-background-color: #18232c;
--modal-overlay-background-color: rgba(36, 51, 62, 0.9);
--progress-background-color: #24333e;
--progress-color: var(--primary);
--loading-spinner-opacity: 0.5;

2
css/themes/default.min.css vendored
View file

File diff suppressed because one or more lines are too long

60
scss/components/_modal.scss Normal file
View file

@ -0,0 +1,60 @@
/**
* Modal (<dialog>)
*/
dialog {
position: fixed;
width: inherit;
min-width: 100%;
height: inherit;
min-height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--modal-overlay-background-color);
padding: var(--spacing);
border: none;
article {
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
max-width: map-get($viewports, "sm");
}
}
@if map-get($breakpoints, "md") {
@media (min-width: map-get($breakpoints, "md")) {
max-width: map-get($viewports, "md");
}
}
> footer {
text-align: right;
[role="button"]:not(:first-of-type) {
margin-left: calc(var(--spacing) * 0.5);
}
}
}
&:not([open]) {
display: none;
}
}
.dialog-is-open {
pointer-events: none;
overflow: hidden;
.container {
filter: blur(0.125rem);
}
dialog {
pointer-events: auto;
}
}

23
scss/content/_miscs.scss
View file

@ -27,29 +27,6 @@ template {
}
}
// Add the correct styles in Edge 18-, IE, and Safari
dialog {
display: block;
position: absolute;
right: 0;
left: 0;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
margin: auto;
padding: 1em;
border: solid;
background-color: white;
color: black;
}
dialog:not([open]) {
display: none;
}
// Add the correct display in IE 9-
canvas {
display: inline-block;

1
scss/pico.scss
View file

@ -31,6 +31,7 @@
// Components
@import "components/accordion"; // details, summary
@import "components/card"; // article
@import "components/modal"; // dialog
@import "components/nav"; // nav
@import "components/progress"; // progress

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

@ -110,6 +110,9 @@
0 0 0 0.0625rem #{rgba($black, 0.036)};
--card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};
// Modal (<dialog>)
--modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.9)};
// Progress
--progress-background-color: #{mix($grey-900, $grey-800)};
--progress-color: var(--primary);

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

@ -110,6 +110,9 @@
0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
--card-sectionning-background-color: #{mix($grey-50, $white, 25%)};
// Modal (<dialog>)
--modal-overlay-background-color: #{rgba($grey-900, 0.9)};
// Progress
--progress-background-color: #{$grey-100};
--progress-color: var(--primary);

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

@ -120,6 +120,38 @@
}
}
}
// Modal
dialog > article {
@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);
}
}
@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);
}
}
}
}
// Link