Fix tabs

Author: niutech

dist/spectre.css

@@ -2768,7 +2768,7 @@ summary.accordion-header::-webkit-details-marker {
   padding-right: 0;
 }
 .tab > input[type=radio] {
-  opacity: 0;
+  left: -100%;
   position: absolute;
 }
 .tab > input[type=radio]:checked + .tab-item {

dist/spectre.min.css

@@ -210,11 +210,17 @@ <h3 class="s-title">Panels<a class="anchor" href="#panels" aria-hidden="true">#<
                     <div class="panel-subtitle">THE HULK</div>
                   </div>
                   <nav class="panel-nav">
-                    <ul class="tab tab-block">
-                      <li class="tab-item active"><a href="#panels">Profile</a></li>
-                      <li class="tab-item"><a href="#panels">Files</a></li>
-                      <li class="tab-item"><a href="#panels">Tasks</a></li>
-                    </ul>
+                    <div class="tab tab-block">
+                      <input type="radio" name="tab" id="tab-1" checked>
+                      <div class="tab-item" for="tab-1">Profile</div>
+                      <input type="radio" name="tab" id="tab-2">
+                      <div class="tab-item" for="tab-2">Files</div>
+                      <input type="radio" name="tab" id="tab-3">
+                      <div class="tab-item" for="tab-3">Tasks</div>
+                      <div class="tab-panel"></div>
+                      <div class="tab-panel"></div>
+                      <div class="tab-panel"></div>
+                    </div>
                   </nav>
                   <div class="panel-body">
                     <div class="tile tile-centered">

docs/components/panels.html

@@ -2769,7 +2769,7 @@ summary.accordion-header::-webkit-details-marker {
   padding-right: 0;
 }
 .tab > input[type=radio] {
-  opacity: 0;
+  left: -100%;
   position: absolute;
 }
 .tab > input[type=radio]:checked + .tab-item {

docs/dist/spectre-rtl.css

@@ -2768,7 +2768,7 @@ summary.accordion-header::-webkit-details-marker {
   padding-right: 0;
 }
 .tab > input[type=radio] {
-  opacity: 0;
+  left: -100%;
   position: absolute;
 }
 .tab > input[type=radio]:checked + .tab-item {

docs/dist/spectre-rtl.min.css

@@ -21,16 +21,19 @@ block docs-content
             .panel-title.h5.mt-10 Bruce Banner
             .panel-subtitle THE HULK
           nav.panel-nav
-            ul.tab.tab-block
-              li.tab-item.active
-                a(href="#panels")
-                  | Profile
-              li.tab-item
-                a(href="#panels")
-                  | Files
-              li.tab-item
-                a(href="#panels")
-                  | Tasks
+            .tab.tab-block
+              input(type="radio" name="tab" id="tab-1" checked)
+              .tab-item(for="tab-1")
+                | Profile
+              input(type="radio" name="tab" id="tab-2")
+              .tab-item(for="tab-2")
+                | Files
+              input(type="radio" name="tab" id="tab-3")
+              .tab-item(for="tab-3")
+                | Tasks
+              .tab-panel
+              .tab-panel
+              .tab-panel
           .panel-body
             .tile.tile-centered
               .tile-content
@@ -127,4 +130,4 @@ block docs-content
 
     include ../_layout/_ad-c.pug
 
-  include ../_layout/_footer.pug
+  include ../_layout/_footer.pug

docs/dist/spectre.css

@@ -18,31 +18,37 @@
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
+
   &:visited {
     color: $primary-color-dark;
   }
+
   &:focus {
     @include control-shadow();
   }
+
   &:focus,
   &:hover {
     background: $secondary-color;
     border-color: $primary-color-dark;
     text-decoration: none;
   }
+
   &:active,
   &.active {
     background: $primary-color-dark;
     border-color: darken($primary-color-dark, 5%);
     color: $light-color;
     text-decoration: none;
+
     &.loading {
       &::after {
         border-bottom-color: $light-color;
         border-left-color: $light-color;
       }
     }
   }
+
   &[disabled],
   &:disabled,
   &.disabled {
@@ -56,21 +62,25 @@
     background: $primary-color;
     border-color: $primary-color-dark;
     color: $light-color;
+
     &:visited {
       color: $light-color;
     }
+
     &:focus,
     &:hover {
       background: darken($primary-color-dark, 2%);
       border-color: darken($primary-color-dark, 5%);
       color: $light-color;
     }
+
     &:active,
     &.active {
       background: darken($primary-color-dark, 4%);
       border-color: darken($primary-color-dark, 7%);
       color: $light-color;
     }
+
     &.loading {
       &::after {
         border-bottom-color: $light-color;
@@ -93,6 +103,7 @@
     background: transparent;
     border-color: transparent;
     color: $link-color;
+
     &:visited,
     &:focus,
     &:hover,
@@ -169,19 +180,23 @@
 
   .btn {
     flex: 1 0 auto;
+
     &:first-child:not(:last-child) {
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
     }
+
     &:not(:first-child):not(:last-child) {
       border-radius: 0;
       margin-left: -$border-width;
     }
+
     &:last-child:not(:first-child) {
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
       margin-left: -$border-width;
     }
+
     &:focus,
     &:hover,
     &:active,

docs/dist/spectre.min.css

@@ -8,11 +8,11 @@
   .tab-item {
     border-bottom: $border-width-lg solid transparent;
     color: inherit;
+    cursor: pointer;
     display: block;
     margin: 0 $unit-2 0 0;
     padding: $unit-2 $unit-1 $unit-2 - $border-width-lg $unit-1;
     text-decoration: none;
-    cursor: pointer;
 
     &:focus,
     &:hover {
@@ -54,7 +54,7 @@
 
   > input[type="radio"] {
     position: absolute;
-    opacity: 0;
+    left: -100%;
 
     &:checked + .tab-item {
       border-bottom-color: $primary-color;
@@ -69,8 +69,8 @@
   }
 
   .tab-panel {
+    border-top: $border-width solid $border-color;
     display: none;
     flex-basis: 100%;
-    border-top: $border-width solid $border-color;
   }
 }