update tabs code and add tab-block

1 files changed, 28 insertions, 9 deletions

diff --git a/dist/spectre.css b/dist/spectre.css
index 69d5c82..99c6bd9 100644
--- a/dist/spectre.css
+++ b/dist/spectre.css
@@ -1232,7 +1232,7 @@ textarea.form-input {
   color: #c5c5c5;
 }
 .tab {
-  display: inline-block;
+  display: block;
   list-style: none;
   margin: .5rem 0;
   border-bottom: 0.1rem solid #c5c5c5;
@@ -1247,26 +1247,45 @@ textarea.form-input {
   display: table;
   clear: both;
 }
-.tab li {
+.tab .tab-item {
   float: left;
+  border-bottom: .1rem solid transparent;
   margin-bottom: -0.1rem;
 }
-.tab li a {
+.tab .tab-item a {
   display: block;
   padding: .5rem 1.5rem;
-  border-bottom: .1rem solid transparent;
   color: #333;
   text-decoration: none;
 }
-.tab li a:hover {
-  color: #5764C6;
+.tab .tab-item:hover,
+.tab .tab-item:focus {
   border-bottom-color: #5764C6;
 }
-.tab li a.active,
-.tab li a:active {
-  color: #3b49af;
+.tab .tab-item:hover a,
+.tab .tab-item:focus a {
+  color: #5764C6;
+}
+.tab .tab-item.active {
   border-bottom-color: #3b49af;
 }
+.tab .tab-item.active a {
+  color: #3b49af;
+}
+.tab.tab-block {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.tab.tab-block .tab-item {
+  float: none;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  text-align: center;
+}
 .tooltip {
   position: relative;
 }