feat: include the close icon styles in classless

picocss · Dec 28, 2023 · d85d2f1 · d85d2f1
1 parent a88ad87
commit d85d2f1
Show file tree

Hide file tree

Showing 11 changed files with 64 additions and 31 deletions.
diff --git a/css/pico.classless.css b/css/pico.classless.css
diff --git a/css/pico.classless.css.map b/css/pico.classless.css.map
diff --git a/css/pico.classless.min.css b/css/pico.classless.min.css
diff --git a/css/pico.classless.min.css.map b/css/pico.classless.min.css.map
diff --git a/css/pico.css.map b/css/pico.css.map
diff --git a/css/pico.fluid.classless.css b/css/pico.fluid.classless.css
diff --git a/css/pico.fluid.classless.css.map b/css/pico.fluid.classless.css.map
diff --git a/css/pico.fluid.classless.min.css b/css/pico.fluid.classless.min.css
diff --git a/css/pico.fluid.classless.min.css.map b/css/pico.fluid.classless.min.css.map
diff --git a/css/pico.min.css.map b/css/pico.min.css.map
diff --git a/scss/components/_modal.scss b/scss/components/_modal.scss
@@ -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;
       }
     }
   }