fix(tabstrip): tab selected styles based on orientation in nested tab…

…strips
telerik · Dec 4, 2019 · e0d5ef4 · e0d5ef4
1 parent 4cc7a9d
commit e0d5ef4
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 13 deletions.
diff --git a/packages/bootstrap/scss/tabstrip/_theme.scss b/packages/bootstrap/scss/tabstrip/_theme.scss
@@ -6,29 +6,29 @@
     // Tabstrip variants
     .k-tabstrip-top {
 
-        .k-tabstrip-items .k-item.k-state-hover,
-        .k-tabstrip-items .k-item.k-state-active {
+        > .k-tabstrip-items .k-item.k-state-hover,
+        > .k-tabstrip-items .k-item.k-state-active {
             border-bottom-color: transparent;
         }
     }
     .k-tabstrip-bottom {
 
-        .k-tabstrip-items .k-item.k-state-hover,
-        .k-tabstrip-items .k-item.k-state-active {
+        > .k-tabstrip-items .k-item.k-state-hover,
+        > .k-tabstrip-items .k-item.k-state-active {
             border-top-color: transparent;
         }
     }
     .k-tabstrip-left {
 
-        .k-tabstrip-items .k-item.k-state-hover,
-        .k-tabstrip-items .k-item.k-state-active {
+        > .k-tabstrip-items .k-item.k-state-hover,
+        > .k-tabstrip-items .k-item.k-state-active {
             border-right-color: transparent;
         }
     }
     .k-tabstrip-right {
 
-        .k-tabstrip-items .k-item.k-state-hover,
-        .k-tabstrip-items .k-item.k-state-active {
+        > .k-tabstrip-items .k-item.k-state-hover,
+        > .k-tabstrip-items .k-item.k-state-active {
             border-left-color: transparent;
         }
     }

diff --git a/packages/default/scss/tabstrip/_layout.scss b/packages/default/scss/tabstrip/_layout.scss
@@ -276,16 +276,16 @@
                 left: 0;
 
                 // Variants
-                .k-tabstrip-top & {
+                .k-tabstrip-top > & {
                     border-bottom-width: $tabstrip-indicator-size;
                 }
-                .k-tabstrip-bottom & {
+                .k-tabstrip-bottom > & {
                     border-top-width: $tabstrip-indicator-size;
                 }
-                .k-tabstrip-left & {
+                .k-tabstrip-left > & {
                     border-right-width: $tabstrip-indicator-size;
                 }
-                .k-tabstrip-right & {
+                .k-tabstrip-right > & {
                     border-left-width: $tabstrip-indicator-size;
                 }
             }

diff --git a/tests/visual/tabstrip.html b/tests/visual/tabstrip.html
@@ -59,7 +59,25 @@
                     </li>
                 </ul>
                 <div class="k-content k-state-active">
-                    <div>Top orientation</div>
+                    <div class="k-tabstrip-wrapper">
+                        <div class="k-widget k-header k-tabstrip k-floatwrap k-tabstrip-left">
+                            <ul class="k-tabstrip-items k-reset">
+                                <li class="k-state-active k-item k-tab-on-top k-state-default k-first">
+                                    <span unselectable="on" class="k-link">
+                                        Inner Tab 1
+                                    </span>
+                                </li>
+                                <li class="k-item k-state-default k-last">
+                                    <span unselectable="on" class="k-link">
+                                        Inner Tab 2
+                                    </span>
+                                </li>
+                            </ul>
+                            <div class="k-content k-state-active" style="display: block; margin-left: 128px; min-height: 68px;">
+                                Left orientation inside Top orientation
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </kendo-tabstrip>
         </section>