Skip to content

Commit

Permalink
Merge pull request #6869 from pjackson28/fixtabnestedlist
Browse files Browse the repository at this point in the history 
Tabbed interface: Fixed display issue with nested lists within nested tabbed interfaces
  • Loading branch information
Paul Jackson authored and Paul Jackson committed Jun 17, 2015
2 parents 9afb661 + c358f72 commit 553fec0
Showing 1 changed file with 143 additions and 137 deletions.
280 changes: 143 additions & 137 deletions src/plugins/tabs/_base.scss
View file
Expand Up @@ -144,72 +144,74 @@ $tab-margin-width: 10px;
padding: 0;
position: relative;

li {
@extend %tabs-display-inline-block;
background: $tablist-bg-color;
border: {
color: $tablist-border-color;
style: $tablist-border-style;
width: $tablist-border-width;
}
color: $carousel-tablist-tabcount-color;
cursor: pointer;
display: table-cell;
left: -$tab-margin-width;
margin: 0 10px 0 0;
position: relative;
text-align: center;

a {
> {
li {
@extend %tabs-display-inline-block;
color: $tablist-color;
// changed padding and margin from em to px to fix web-kit layout issue
padding: 10px;
text-decoration: none;
}
background: $tablist-bg-color;
border: {
color: $tablist-border-color;
style: $tablist-border-style;
width: $tablist-border-width;
}
color: $carousel-tablist-tabcount-color;
cursor: pointer;
display: table-cell;
left: -$tab-margin-width;
margin: 0 10px 0 0;
position: relative;
text-align: center;

&:focus,
&:hover {
background: $tablist-hover-bg-color;
background: transparentize($tablist-hover-bg-color, 0.1);
}
a {
@extend %tabs-display-inline-block;
color: $tablist-color;
// changed padding and margin from em to px to fix web-kit layout issue
padding: 10px;
text-decoration: none;
}

&.active {
background: $tablist-active-bg-color;
border-bottom: 0;
cursor: default;
padding-bottom: 1px;
z-index: 2;
&:focus,
&:hover {
background: $tablist-hover-bg-color;
background: transparentize($tablist-hover-bg-color, 0.1);
}

a {
&.active {
background: $tablist-active-bg-color;
border-bottom: 0;
cursor: default;
padding-top: 6px;
border: {
color: $tablist-active-link-border-color;
style: $tablist-active-link-border-style;
width: $tablist-active-link-border-width;
padding-bottom: 1px;
z-index: 2;

a {
cursor: default;
padding-top: 6px;
border: {
color: $tablist-active-link-border-color;
style: $tablist-active-link-border-style;
width: $tablist-active-link-border-width;
}
}
}
}

&.tab-count {
line-height: normal;
&.tab-count {
line-height: normal;

> {
div {
position: relative;
top: 0.4em;
> {
div {
position: relative;
top: 0.4em;
}
}
}

.curr-count {
font-size: 1.5em;
}
.curr-count {
font-size: 1.5em;
}

&:focus,
&:hover {
background: transparent;
cursor: default;
&:focus,
&:hover {
background: transparent;
cursor: default;
}
}
}
}
Expand Down Expand Up @@ -253,44 +255,46 @@ $tab-margin-width: 10px;
left: 1em;
position: static;

li {
@extend %global-display-none;
@extend %tab-zindex-100;
> {
li {
@extend %global-display-none;
@extend %tab-zindex-100;

&.control {
@extend %tabs-display-inline-block;
}
&.control {
@extend %tabs-display-inline-block;
}

&.prv {
margin-right: 5px;
}
&.prv {
margin-right: 5px;
}

&.tab-count {
background: none;
border: 0;
font-size: 0.9em;
&.tab-count {
background: none;
border: 0;
font-size: 0.9em;

> {
div {
top: 0.7em;
> {
div {
top: 0.7em;
}
}

&.active,
&:focus,
&:hover {
cursor: default;
top: 0;
}
}

&.active,
&:focus,
&:hover {
cursor: default;
top: 0;
}
}
top: 1px;

&.active,
&:focus,
&:hover {
top: 1px;

a {
@extend %tabs-carousel-border-top-none-padding-top-1;
a {
@extend %tabs-carousel-border-top-none-padding-top-1;
}
}
}
}
Expand Down Expand Up @@ -328,81 +332,83 @@ $tab-margin-width: 10px;
position: absolute;
width: 100%;

li {
@extend %global-display-none;
@extend %tab-zindex-100;
background: transparent;
border: 0;
> {
li {
@extend %global-display-none;
@extend %tab-zindex-100;
background: transparent;
border: 0;

&.control {
@extend %tabs-display-inline-block;
}
&.control {
@extend %tabs-display-inline-block;
}

&.prv {
@extend %carousel-s2-prv-nxt-common;
&.prv {
@extend %carousel-s2-prv-nxt-common;

a {
@extend %carousel-s2-prv-nxt-a-common;
@extend %carousel-s2-btn-color;
padding-left: 1em;
a {
@extend %carousel-s2-prv-nxt-a-common;
@extend %carousel-s2-btn-color;
padding-left: 1em;

.glyphicon {
@extend %carousel-s2-btn-common;
@extend %carousel-s2-prv-nxt-glyphicon-common;
}
.glyphicon {
@extend %carousel-s2-btn-common;
@extend %carousel-s2-prv-nxt-glyphicon-common;
}

&:focus,
&:hover {
@extend %tabs-background-transparent;
&:focus,
&:hover {
@extend %tabs-background-transparent;

.glyphicon {
@extend %tabs-box-shadow-none;
.glyphicon {
@extend %tabs-box-shadow-none;
}
}
}
}
}

&.nxt {
@extend %carousel-s2-prv-nxt-common;
&.nxt {
@extend %carousel-s2-prv-nxt-common;

a {
@extend %carousel-s2-prv-nxt-a-common;
@extend %carousel-s2-btn-color;
a {
@extend %carousel-s2-prv-nxt-a-common;
@extend %carousel-s2-btn-color;

.glyphicon {
@extend %carousel-s2-btn-common;
@extend %carousel-s2-prv-nxt-glyphicon-common;
}
.glyphicon {
@extend %carousel-s2-btn-common;
@extend %carousel-s2-prv-nxt-glyphicon-common;
}

&:focus,
&:hover {
@extend %tabs-background-transparent;
&:focus,
&:hover {
@extend %tabs-background-transparent;

.glyphicon {
@extend %tabs-box-shadow-none;
.glyphicon {
@extend %tabs-box-shadow-none;
}
}
}
}
}

&.plypause {
background: none;
border: 0;
float: right;
margin-right: 0;
padding: 2px 0;

a {
@extend %carousel-s2-btn-common;
@extend %carousel-s2-btn-color;
font-size: 1.5em;
margin-top: 0.4em;
margin-right: 0.65em;
padding: 8px 10px 4px;
&.plypause {
background: none;
border: 0;
float: right;
margin-right: 0;
padding: 2px 0;

&:focus,
&:hover {
@extend %tabs-box-shadow-none;
a {
@extend %carousel-s2-btn-common;
@extend %carousel-s2-btn-color;
font-size: 1.5em;
margin-top: 0.4em;
margin-right: 0.65em;
padding: 8px 10px 4px;

&:focus,
&:hover {
@extend %tabs-box-shadow-none;
}
}
}
}
Expand Down

0 comments on commit 553fec0

Please sign in to comment.