Skip to content

Commit

Permalink
fix(tabstrip): remove at-root rule
Browse files Browse the repository at this point in the history 
#2268
  • Loading branch information
@JoomFX @joneff
JoomFX authored and joneff committed Feb 5, 2021
1 parent 882a397 commit cc29841
Showing 1 changed file with 105 additions and 98 deletions.
203 changes: 105 additions & 98 deletions packages/default/scss/tabstrip/_layout.scss
View file
Expand Up @@ -26,122 +26,124 @@
.k-tabstrip-wrapper > & {
flex: 1 1 auto;
}
}

@at-root .k-tabstrip-items {
border-width: 0;
border-style: solid;
border-color: inherit;
outline: 0;
.k-tabstrip-items {
border-width: 0;
border-style: solid;
border-color: inherit;
outline: 0;
display: flex;
flex-direction: row;
flex: 0 0 auto;
position: relative;

.k-item {
margin: 0;
padding: 0;
border: $tabstrip-item-border-width solid transparent;
position: relative;
flex-shrink: 0;
display: flex;
flex-direction: row;
flex: 0 0 auto;
position: relative;
align-items: stretch;
justify-items: stretch;
outline: 0;
}

.k-item {
margin: 0;
padding: 0;
border: $tabstrip-item-border-width solid transparent;
position: relative;
flex-shrink: 0;
display: flex;
flex-direction: row;
align-items: stretch;
justify-items: stretch;
outline: 0;
}
.k-tab-on-top {
z-index: 1;
}

.k-tab-on-top {
z-index: 1;
}
.k-link {
padding: $tabstrip-item-padding-y $tabstrip-item-padding-x;
color: inherit;
cursor: pointer;
display: inline-flex;
vertical-align: middle;
flex: 1 1 auto;
flex-direction: row;
align-content: center;
align-items: center;
}

.k-link {
padding: $tabstrip-item-padding-y $tabstrip-item-padding-x;
color: inherit;
cursor: pointer;
display: inline-flex;
vertical-align: middle;
flex: 1 1 auto;
flex-direction: row;
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;
}

.k-remove-tab-link,
.k-link[data-type="remove"] {
padding: $tabstrip-item-padding-y;
flex: none;
}
.k-tabstrip-content,
.k-tabstrip > .k-content {
padding: $tabstrip-content-padding-y $tabstrip-content-padding-x;
border-width: $tabstrip-content-border-width;
border-style: solid;
border-color: inherit;
display: none;
overflow: auto;
flex: 1 1 auto;

&.k-state-active {
display: block;
}
@at-root .k-ie11 .k-tabstrip-items {
white-space: nowrap;
}

// Loading
.k-tabstrip-items .k-loading {
width: 20%;
height: 0;
border: 0;
border-top: 1px solid transparent;
border-color: inherit;
background: none;
position: absolute;
top: 0;
left: 0;
transition: width .2s linear;

&.k-complete {
width: 100%;
border-top-width: 0;
}
}


// Scrolling
.k-tabstrip.k-tabstrip-scrollable {
position: relative;

> .k-content {
padding: $tabstrip-content-padding-y $tabstrip-content-padding-x;
> .k-content,
> .k-tabstrip-content {
border-width: $tabstrip-content-border-width;
border-style: solid;
border-color: inherit;
display: none;
overflow: auto;
flex: 1 1 auto;
}

&.k-state-active {
display: block;
}
> .k-tabstrip-items {
border-width: 0;
white-space: nowrap;
overflow: hidden;
}

// Loading
@at-root .k-tabstrip-items .k-loading {
width: 20%;
height: 0;
border: 0;
border-top: 1px solid transparent;
border-color: inherit;
background: none;
> .k-tabstrip-prev {
position: absolute;
top: 0;
left: 0;
transition: width .2s linear;

&.k-complete {
width: 100%;
border-top-width: 0;
}
}

// Scrolling
&.k-tabstrip-scrollable {
position: relative;

> .k-content {
border-width: $tabstrip-content-border-width;
}

> .k-tabstrip-items {
border-width: 0;
white-space: nowrap;
overflow: hidden;
}

> .k-tabstrip-prev {
position: absolute;
left: 0;
}
> .k-tabstrip-next {
position: absolute;
right: 0;
}

// Fixes telerik/kendo-theme-default#476
.k-ie11 & {
> .k-tabstrip-prev,
> .k-tabstrip-next {
position: absolute;
right: 0;
}

// Fixes kendo-theme-default#476
.k-ie11 & {
> .k-tabstrip-prev,
> .k-tabstrip-next {
top: 0;
}
top: 0;
}
}

}


Expand All @@ -164,7 +166,8 @@
}
}

> .k-content {
> .k-content,
> .k-tabstrip-content {
@include border-bottom-radius( $tabstrip-item-border-radius );
border-top-width: 0;
}
Expand All @@ -187,7 +190,8 @@
}
}

> .k-content {
> .k-content,
> .k-tabstrip-content {
@include border-top-radius( $tabstrip-item-border-radius );
border-bottom-width: 0;
}
Expand Down Expand Up @@ -225,7 +229,8 @@
}
}

> .k-content {
> .k-content,
> .k-tabstrip-content {
@include border-right-radius( $tabstrip-item-border-radius );
// sass-lint:disable no-important
margin: 0 !important;
Expand Down Expand Up @@ -256,7 +261,8 @@
}
}

> .k-content {
> .k-content,
> .k-tabstrip-content {
@include border-left-radius( $tabstrip-item-border-radius );
// sass-lint:disable no-important
margin: 0 !important;
Expand Down Expand Up @@ -321,6 +327,7 @@
&.k-tabstrip-right {
> .k-tabstrip-items { order: 1; }
> .k-content { order: 0; }
> .k-tabstrip-content { order: 0; }
}

.k-tabstrip-prev {
Expand Down

0 comments on commit cc29841

Please sign in to comment.