Skip to content

Commit

Permalink
Merge pull request #400 from asbjornu/include-close-button-in-classless
Browse files Browse the repository at this point in the history
Include close icon styles in classless
lucaslarroche authored Dec 28, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents a88ad87 + d85d2f1 commit 873ad1b
Showing 11 changed files with 64 additions and 31 deletions.
19 changes: 18 additions & 1 deletion css/pico.classless.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion css/pico.classless.css.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.min.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.classless.min.css.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.css.map

Large diffs are not rendered by default.

19 changes: 18 additions & 1 deletion css/pico.fluid.classless.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.css.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.min.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.fluid.classless.min.css.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion css/pico.min.css.map

Large diffs are not rendered by default.

41 changes: 20 additions & 21 deletions scss/components/_modal.scss
Original file line number Diff line number Diff line change
@@ -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;

@if $enable-transitions {
transition: opacity var(--transition);
}
#{$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);
}

&:is([aria-current], :hover, :active, :focus) {
opacity: 1;
}
&:is([aria-current], :hover, :active, :focus) {
opacity: 1;
}
}
}

0 comments on commit 873ad1b

Please sign in to comment.