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

feat: include the close icon styles in classless

Browse source
This commit is contained in:
Asbjørn Ulsberg 2023-12-28 14:29:56 +01:00
parent 357ab1f1a0
commit 49d289b626
No known key found for this signature in database
GPG key ID: 34616339C3D5E883
10 changed files with 75 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

47
scss/components/_modal.scss
View file

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