rei-mirrors/pico
1
0
Fork 0
mirror of https://github.com/picocss/pico synced 2025-11-04 06:07:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #421 from asbjornu/v2-include-close-button-in-classless

Browse Source 
feat: include the close icon styles in classless
This commit is contained in:
Lucas Larroche 2023-12-28 20:37:17 +07:00 committed by GitHub
commit 02a9ca8664
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 75 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
css/pico.classless.css
View File

@ -2108,6 +2108,11 @@ dialog article > footer {
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header a[rel=prev] {
margin: 0;
margin-left: var(--pico-spacing);
float: right;
}
dialog article > footer { dialog article > footer {
text-align: right; text-align: right;
} }
@ -2119,6 +2124,23 @@ dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article a[rel=prev] {
display: block;
width: 1rem;
height: 1rem;
margin-top: calc(var(--pico-spacing) * -1);
margin-bottom: var(--pico-spacing);
margin-left: auto;
background-image: var(--pico-icon-close);
background-position: center;
background-size: auto 1rem;
background-repeat: no-repeat;
opacity: 0.5;
transition: opacity var(--pico-transition);
}
dialog article a[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1;
}
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; display: none;
} }

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

6
css/pico.css
View File

@ -2417,7 +2417,7 @@ dialog article > footer {
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header .close { dialog article > header .close, dialog article > header a[rel=prev] {
margin: 0; margin: 0;
margin-left: var(--pico-spacing); margin-left: var(--pico-spacing);
float: right; float: right;
@ -2433,7 +2433,7 @@ dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article .close { dialog article .close, dialog article a[rel=prev] {
display: block; display: block;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
@ -2447,7 +2447,7 @@ dialog article .close {
opacity: 0.5; opacity: 0.5;
transition: opacity var(--pico-transition); transition: opacity var(--pico-transition);
} }
dialog article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) { dialog article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), dialog article a[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
} }
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {

2
css/pico.css.map
View File

File diff suppressed because one or more lines are too long

22
css/pico.fluid.classless.css
View File

@ -2071,6 +2071,11 @@ dialog article > footer {
dialog article > header > * { dialog article > header > * {
margin-bottom: 0; margin-bottom: 0;
} }
dialog article > header a[rel=prev] {
margin: 0;
margin-left: var(--pico-spacing);
float: right;
}
dialog article > footer { dialog article > footer {
text-align: right; text-align: right;
} }
@ -2082,6 +2087,23 @@ dialog article > footer button:not(:first-of-type),
dialog article > footer [role=button]:not(:first-of-type) { dialog article > footer [role=button]:not(:first-of-type) {
margin-left: calc(var(--pico-spacing) * 0.5); margin-left: calc(var(--pico-spacing) * 0.5);
} }
dialog article a[rel=prev] {
display: block;
width: 1rem;
height: 1rem;
margin-top: calc(var(--pico-spacing) * -1);
margin-bottom: var(--pico-spacing);
margin-left: auto;
background-image: var(--pico-icon-close);
background-position: center;
background-size: auto 1rem;
background-repeat: no-repeat;
opacity: 0.5;
transition: opacity var(--pico-transition);
}
dialog article a[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
opacity: 1;
}
dialog:not([open]), dialog[open=false] { dialog:not([open]), dialog[open=false] {
display: none; display: none;
} }

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.min.css vendored
View File

File diff suppressed because one or more lines are too long

47
scss/components/_modal.scss
View File

@ -31,6 +31,7 @@
// Content // Content
article { article {
$close-selector: if($enable-classes, ".close, a[rel='prev']", "a[rel='prev']");
width: 100%; width: 100%;
max-height: calc(100vh - var(#{$css-var-prefix}spacing) * 2); max-height: calc(100vh - var(#{$css-var-prefix}spacing) * 2);
margin: var(#{$css-var-prefix}spacing); margin: var(#{$css-var-prefix}spacing);
@ -59,12 +60,10 @@
margin-bottom: 0; margin-bottom: 0;
} }
@if $enable-classes { #{$close-selector} {
.close { margin: 0;
margin: 0; margin-left: var(#{$css-var-prefix}spacing);
margin-left: var(#{$css-var-prefix}spacing); float: right;
float: right;
}
} }
} }
@ -82,27 +81,25 @@
} }
// Close icon // Close icon
@if $enable-classes { #{$close-selector} {
.close { display: block;
display: block; width: 1rem;
width: 1rem; height: 1rem;
height: 1rem; margin-top: calc(var(#{$css-var-prefix}spacing) * -1);
margin-top: calc(var(#{$css-var-prefix}spacing) * -1); margin-bottom: var(#{$css-var-prefix}spacing);
margin-bottom: var(#{$css-var-prefix}spacing); margin-left: auto;
margin-left: auto; background-image: var(#{$css-var-prefix}icon-close);
background-image: var(#{$css-var-prefix}icon-close); background-position: center;
background-position: center; background-size: auto 1rem;
background-size: auto 1rem; background-repeat: no-repeat;
background-repeat: no-repeat; opacity: 0.5;
opacity: 0.5;
@if $enable-transitions { @if $enable-transitions {
transition: opacity var(#{$css-var-prefix}transition); transition: opacity var(#{$css-var-prefix}transition);
} }
&:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) { &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
opacity: 1; opacity: 1;
}
} }
} }
} }