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

feat: include the close icon styles in classless

Author: lucaslarroche

css/pico.classless.css

@@ -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;
-
-          @if $enable-transitions {
-            transition: opacity var(#{$css-var-prefix}transition);
-          }
+      #{$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);
+        }
 
-          &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-            opacity: 1;
-          }
+        &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+          opacity: 1;
         }
       }
     }