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

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

Browse source 
Include close icon styles in classless
This commit is contained in:
Lucas Larroche 2023-12-28 20:30:54 +07:00 • committed by GitHub
commit 873ad1b015
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 63 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

19
css/pico.classless.css
View file

@ -1831,7 +1831,7 @@ dialog article > header,
dialog article > footer {
padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
}
dialog article > header .close {
dialog article > header a[rel=prev] {
margin: 0;
margin-left: var(--spacing);
float: right;
@ -1848,6 +1848,23 @@ dialog article > footer [role=button]:not(:first-of-type) {
dialog article p:last-of-type {
margin: 0;
}
dialog article a[rel=prev] {
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: 0.5;
transition: opacity var(--transition);
}
dialog article a[rel=prev]:is([aria-current], :hover, :active, :focus) {
opacity: 1;
}
dialog:not([open]), dialog[open=false] {
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

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

File diff suppressed because one or more lines are too long

2
css/pico.css.map
View file

File diff suppressed because one or more lines are too long

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

@ -1801,7 +1801,7 @@ dialog article > header,
dialog article > footer {
padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);
}
dialog article > header .close {
dialog article > header a[rel=prev] {
margin: 0;
margin-left: var(--spacing);
float: right;
@ -1818,6 +1818,23 @@ dialog article > footer [role=button]:not(:first-of-type) {
dialog article p:last-of-type {
margin: 0;
}
dialog article a[rel=prev] {
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: 0.5;
transition: opacity var(--transition);
}
dialog article a[rel=prev]:is([aria-current], :hover, :active, :focus) {
opacity: 1;
}
dialog:not([open]), dialog[open=false] {
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.fluid.classless.min.css.map
View file

File diff suppressed because one or more lines are too long

2
css/pico.min.css.map
View file

File diff suppressed because one or more lines are too long

39
scss/components/_modal.scss
View file

@ -28,6 +28,7 @@ dialog {
// Content
article {
$close-selector: if($enable-classes, ".close", "a[rel='prev']");
max-height: calc(100vh - var(--spacing) * 2);
overflow: auto;
@ -50,7 +51,7 @@ dialog {
}
> header {
.close {
#{$close-selector} {
margin: 0;
margin-left: var(--spacing);
float: right;
@ -76,27 +77,25 @@ dialog {
}
// Close icon
@if $enable-classes {
.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: 0.5;
#{$close-selector} {
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: 0.5;
@if $enable-transitions {
transition: opacity var(--transition);
}
@if $enable-transitions {
transition: opacity var(--transition);
}
&:is([aria-current], :hover, :active, :focus) {
opacity: 1;
}
&:is([aria-current], :hover, :active, :focus) {
opacity: 1;
}
}
}