Tabs adjustments

squidit · Dec 15, 2021 · 336ddaa · 336ddaa
1 parent b77f8fe
commit 336ddaa
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 11 deletions.
diff --git a/dist/css/squid.css b/dist/css/squid.css
@@ -21979,9 +21979,18 @@ i {
   align-items: center;
   margin: 0;
   flex-wrap: wrap;
-  color: var(--black); }
+  color: var(--black);
+  overflow-x: auto;
+  white-space: nowrap;
+  scrollbar-width: none; }
+  .tabs-header::-webkit-scrollbar {
+    display: none; }
+  @media (max-width: 991px) {
+    .tabs-header {
+      flex-wrap: nowrap;
+      width: 100%; } }
   .tabs-header li {
-    flex: 0 1 auto;
+    flex: 0 0 auto;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -21991,6 +22000,7 @@ i {
     text-align: center;
     color: var(--black_light);
     background: var(--white);
+    display: inline-flex;
     cursor: pointer;
     transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, border 0.3s ease; }
     .tabs-header li:hover {
@@ -22011,7 +22021,6 @@ i {
       border-radius: 0;
       color: var(--gray);
       position: relative;
-      display: flex;
       align-items: center;
       padding: 1rem 1rem 0;
       justify-content: center;
@@ -22044,6 +22053,9 @@ i {
       width: initial; }
   .tabs-header.tabs-width li {
     flex: 1 0 0; }
+    @media (max-width: 991px) {
+      .tabs-header.tabs-width li {
+        flex: 0 0 auto; } }
 
 .tabs-wrapper-content {
   display: flex;

diff --git a/dist/css/squid.min.css b/dist/css/squid.min.css
diff --git a/dist/css/squid.min.css.map b/dist/css/squid.min.css.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@squidit/css",
-  "version": "1.2.54",
+  "version": "1.2.6",
   "scripts": {
     "start": "gulp watch",
     "css": "sass src/scss/squid.scss:dist/css/squid.min.css --style compressed",

diff --git a/src/docs/public/css/squid.css b/src/docs/public/css/squid.css
@@ -21979,9 +21979,18 @@ i {
   align-items: center;
   margin: 0;
   flex-wrap: wrap;
-  color: var(--black); }
+  color: var(--black);
+  overflow-x: auto;
+  white-space: nowrap;
+  scrollbar-width: none; }
+  .tabs-header::-webkit-scrollbar {
+    display: none; }
+  @media (max-width: 991px) {
+    .tabs-header {
+      flex-wrap: nowrap;
+      width: 100%; } }
   .tabs-header li {
-    flex: 0 1 auto;
+    flex: 0 0 auto;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -21991,6 +22000,7 @@ i {
     text-align: center;
     color: var(--black_light);
     background: var(--white);
+    display: inline-flex;
     cursor: pointer;
     transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, border 0.3s ease; }
     .tabs-header li:hover {
@@ -22011,7 +22021,6 @@ i {
       border-radius: 0;
       color: var(--gray);
       position: relative;
-      display: flex;
       align-items: center;
       padding: 1rem 1rem 0;
       justify-content: center;
@@ -22044,6 +22053,9 @@ i {
       width: initial; }
   .tabs-header.tabs-width li {
     flex: 1 0 0; }
+    @media (max-width: 991px) {
+      .tabs-header.tabs-width li {
+        flex: 0 0 auto; } }
 
 .tabs-wrapper-content {
   display: flex;

diff --git a/src/scss/components/_tabs.scss b/src/scss/components/_tabs.scss
@@ -8,8 +8,18 @@
   margin: 0;
   flex-wrap: wrap;
   color: var(--black);
+  overflow-x: auto;
+  white-space: nowrap;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  @media (max-width: 991px) {
+    flex-wrap: nowrap;
+    width: 100%;
+  }
   li {
-    flex: 0 1 auto;
+    flex: 0 0 auto;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -19,6 +29,7 @@
     text-align: center;
     color: var(--black_light);
     background: var(--white);
+    display: inline-flex;
     cursor: pointer;
     transition:
       color 0.3s ease,
@@ -50,7 +61,6 @@
       border-radius: 0;
       color: var(--gray);
       position: relative;
-      display: flex;
       align-items: center;
       padding: $gutter $gutter 0;
       justify-content: center;
@@ -93,6 +103,9 @@
   &.tabs-width {
     li {
       flex: 1 0 0;
+      @media (max-width: 991px) {
+        flex: 0 0 auto;
+      }
     }
   }
 }