feat(tabstrip): extend scrollable and sortable tabs styles

#2628
telerik · Aug 12, 2021 · 29ae422 · 29ae422
1 parent de24660
commit 29ae422
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 62 deletions.
diff --git a/packages/bootstrap/scss/tabstrip/_variables.scss b/packages/bootstrap/scss/tabstrip/_variables.scss
@@ -79,6 +79,8 @@ $tabstrip-item-selected-gradient: null !default;
 
 $tabstrip-item-focused-shadow: $list-item-focused-shadow !default;
 
+$tabstrip-item-dragging-shadow: 0px 3px 4px rgba(0, 0, 0, .15) !default;
+
 $tabstrip-indicator-size: null !default;
 $tabstrip-indicator-color: null !default;
 

diff --git a/packages/classic/scss/tabstrip/_variables.scss b/packages/classic/scss/tabstrip/_variables.scss
@@ -79,6 +79,8 @@ $tabstrip-item-selected-gradient: false !default;
 
 $tabstrip-item-focused-shadow: $list-item-focused-shadow !default;
 
+$tabstrip-item-dragging-shadow: 0px 3px 4px rgba(0, 0, 0, .15) !default;
+
 $tabstrip-indicator-size: null !default;
 $tabstrip-indicator-color: null !default;
 

diff --git a/packages/default/scss/tabstrip/_layout.scss b/packages/default/scss/tabstrip/_layout.scss
@@ -28,10 +28,13 @@
         }
     }
 
-    .k-tabstrip-items {
+    .k-tabstrip-items-wrapper {
         border-width: 0;
         border-style: solid;
         border-color: inherit;
+    }
+
+    .k-tabstrip-items {
         outline: 0;
         display: flex;
         flex-direction: row;
@@ -66,12 +69,6 @@
             align-content: center;
             align-items: center;
         }
-
-        .k-remove-tab-link,
-        .k-link[data-type="remove"] {
-            padding: $tabstrip-item-padding-y;
-            flex: none;
-        }
     }
     .k-ie11 .k-tabstrip-items {
         white-space: nowrap;
@@ -121,42 +118,43 @@
 
     // Scrolling
     .k-tabstrip.k-tabstrip-scrollable {
-        position: relative;
+        > .k-tabstrip-items-wrapper {
+            border-width: 0;
 
-        > .k-content,
-        > .k-tabstrip-content {
-            border-width: $tabstrip-content-border-width;
-        }
+            > .k-tabstrip-items {
+                flex: 1 1 auto;
+                white-space: nowrap;
+                overflow: hidden;
+            }
 
-        > .k-tabstrip-items {
-            border-width: 0;
-            white-space: nowrap;
-            overflow: hidden;
-        }
+            > .k-button {
+                flex-shrink: 0;
+                align-self: stretch;
+            }
 
-        > .k-tabstrip-prev {
-            position: absolute;
-            left: 0;
-        }
+            &.k-hstack {
+                > .k-button {
+                    height: auto;
+                }
+            }
 
-        > .k-tabstrip-next {
-            position: absolute;
-            right: 0;
+            &.k-vstack {
+                > .k-button {
+                    width: auto;
+                }
+            }
         }
 
-        // Fixes telerik/kendo-theme-default#476
-        .k-ie11 & {
-            > .k-tabstrip-prev,
-            > .k-tabstrip-next {
-                top: 0;
-            }
+        > .k-content,
+        > .k-tabstrip-content {
+            border-width: $tabstrip-content-border-width;
         }
     }
 
 
     // Tabstrip variants
     .k-tabstrip-top {
-        > .k-tabstrip-items {
+        > .k-tabstrip-items-wrapper {
             border-bottom-width: $tabstrip-border-width;
 
             .k-item {
@@ -180,7 +178,7 @@
         }
     }
     .k-tabstrip-bottom {
-        > .k-tabstrip-items {
+        > .k-tabstrip-items-wrapper {
             border-top-width: $tabstrip-border-width;
 
             .k-item {
@@ -202,25 +200,17 @@
             @include border-top-radius( $tabstrip-item-border-radius );
             border-bottom-width: 0;
         }
-
-        &.k-tabstrip-scrollable {
-            .k-tabstrip-prev,
-            .k-tabstrip-next {
-                bottom: 0;
-
-                .k-ie11 & {
-                    top: auto;
-                }
-            }
-        }
     }
     .k-tabstrip-left {
         flex-direction: row;
 
-        > .k-tabstrip-items {
+        > .k-tabstrip-items-wrapper {
             border-right-width: $tabstrip-border-width;
-            display: inline-flex;
-            flex-direction: column;
+
+            > .k-tabstrip-items {
+                display: inline-flex;
+                flex-direction: column;
+            }
 
             .k-item {
                 @include border-left-radius( $tabstrip-item-border-radius );
@@ -249,10 +239,13 @@
     .k-tabstrip-right {
         flex-direction: row-reverse;
 
-        > .k-tabstrip-items {
+        > .k-tabstrip-items-wrapper {
             border-left-width: $tabstrip-border-width;
-            display: inline-flex;
-            flex-direction: column;
+
+            > .k-tabstrip-items {
+                display: inline-flex;
+                flex-direction: column;
+            }
 
             .k-item {
                 @include border-right-radius( $tabstrip-item-border-radius );
@@ -282,7 +275,7 @@
     // Selected indicator
     @if ($tabstrip-indicator-size) {
 
-        .k-tabstrip-items {
+        .k-tabstrip-items-wrapper {
 
             .k-item::after {
                 content: "";
@@ -332,20 +325,16 @@
 
         &.k-tabstrip-left,
         &.k-tabstrip-right {
-            > .k-tabstrip-items { order: 1; }
+            > .k-tabstrip-items-wrapper {
+                order: 1;
+            }
+
             > .k-content { order: 0; }
             > .k-tabstrip-content { order: 0; }
         }
 
-        .k-tabstrip-prev {
-            left: auto;
-            right: 0;
-            transform: scaleX(-1);
-        }
-
+        .k-tabstrip-prev,
         .k-tabstrip-next {
-            left: 0;
-            right: auto;
             transform: scaleX(-1);
         }
 

diff --git a/packages/default/scss/tabstrip/_theme.scss b/packages/default/scss/tabstrip/_theme.scss
@@ -11,7 +11,7 @@
 
 
     // Items
-    .k-tabstrip-items {
+    .k-tabstrip-items-wrapper {
         @include fill(
             $tabstrip-text,
             $tabstrip-bg,
@@ -49,6 +49,10 @@
             &.k-state-focused {
                 @include box-shadow( $tabstrip-item-focused-shadow );
             }
+
+            &.k-tabstrip-dragging {
+                @include box-shadow( $tabstrip-item-dragging-shadow );
+            }
         }
 
     }
@@ -72,7 +76,7 @@
     // Selected indicator
     @if ($tabstrip-indicator-size) {
 
-        .k-tabstrip-items {
+        .k-tabstrip-items-wrapper {
             .k-item.k-state-active::after {
                 border-color: $tabstrip-indicator-color;
             }

diff --git a/packages/default/scss/tabstrip/_variables.scss b/packages/default/scss/tabstrip/_variables.scss
@@ -79,6 +79,8 @@ $tabstrip-item-selected-gradient: null !default;
 
 $tabstrip-item-focused-shadow: $list-item-focused-shadow !default;
 
+$tabstrip-item-dragging-shadow: 0px 3px 4px rgba(0, 0, 0, .15) !default;
+
 $tabstrip-indicator-size: null !default;
 $tabstrip-indicator-color: null !default;
 

diff --git a/packages/material/scss/spreadsheet/_theme.scss b/packages/material/scss/spreadsheet/_theme.scss
@@ -13,7 +13,7 @@
     // Spreadsheet header
     .k-spreadsheet > .k-tabstrip-wrapper {
 
-        .k-tabstrip-items {
+        .k-tabstrip-items-wrapper {
             color: $primary-contrast;
             background-color: $primary;
         }

diff --git a/packages/material/scss/tabstrip/_variables.scss b/packages/material/scss/tabstrip/_variables.scss
@@ -79,6 +79,8 @@ $tabstrip-item-selected-gradient: null !default;
 
 $tabstrip-item-focused-shadow: $list-item-focused-shadow !default;
 
+$tabstrip-item-dragging-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12), 0 2px 4px -1px rgba(0, 0, 0, .2) !default;
+
 $tabstrip-indicator-size: 2px !default;
 $tabstrip-indicator-color: $primary !default;