Skip to content

Commit

Permalink
Refined styles
Browse files Browse the repository at this point in the history
  • Loading branch information
cheton committed Sep 6, 2017
1 parent 5ddc407 commit e0ffd05
Show file tree
Hide file tree
Showing 9 changed files with 182 additions and 188 deletions.
7 changes: 5 additions & 2 deletions src/index.styl
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,10 @@
@import "navbar-nav";
@import "navbar-default";
@import "nav-tabs";
@import "nav-tabs-justified";
@import "nav-tabs-stacked";
@import "nav-light-tabs";
@import "nav-light-tabs-justified";
@import "nav-light-tabs-stacked";
@import "nav-panel-tabs";
@import "nav-justified";
@import "nav-stacked";
@import "nav-panel-tabs-justified";
38 changes: 38 additions & 0 deletions src/nav-light-tabs-justified.styl
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
.nav-light-tabs.nav-justified {
width: 100%;

> li {
float: none;
display: table-cell;
width: 1%;

> a {
background-color: #fff;
padding-bottom: 12px;
border-bottom: 0;

&:hover {
color: #777;
background-color: #fff;
border-bottom: 2px solid #bbb;
padding-bottom: 10px;
}
}

&.active > a,
&.active > a:hover,
&.active > a:focus {
color: #222;
font-weight: bold;
background-color: #fff;
border-bottom: 2px solid #db3d44;
padding-bottom: 10px;
}
}

> li + li > a,
> li + li > a:focus,
> li + li > a:hover {
border-left: 0;
}
}
27 changes: 27 additions & 0 deletions src/nav-light-tabs-stacked.styl
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.nav-light-tabs.nav-stacked {
> li {
float: none;
}
> li > a {
background: inherit;
border: none;
padding: 9px 16px;
}
> li > a:hover,
> li > a:focus {
background: #f4f4f4;
}
> li + li {
margin-top: 1px;
margin-left: 0;
}
> li.active > a,
> li.active > a:hover,
> li.active > a:focus {
background-color: inherit;
border: none;
color: #db3d44;
font-weight: bold;
padding: 9px 16px;
}
}
86 changes: 34 additions & 52 deletions src/nav-light-tabs.styl
Original file line number Diff line number Diff line change
@@ -1,54 +1,36 @@
.nav-light-tabs > li {
float: left;
}
.nav-light-tabs > li > a {
font-size: 13px;
color: #777777;
padding: 12px 16px;
min-width: 80px;
}
.nav-light-tabs > li > a:hover {
color: #777777;
background-color: #fff;
border-bottom: 2px solid #bbb;
padding-bottom: 10px;
}
.nav-light-tabs > li > a:focus {
background-color: #fff;
}
.nav-light-tabs > li + li {
margin-left: 1px;
}
.nav-light-tabs > li.active > a,
.nav-light-tabs > li.active > a:hover,
.nav-light-tabs > li.active > a:focus {
color: #222222;
font-weight: bold;
background-color: #ffffff;
border-bottom: 2px solid #db3d44;
padding-bottom: 10px;
}
.nav-light-tabs {
> li {
float: left;

.nav-light-tabs.nav-justified > li > a:hover {
color: #777777;
background-color: #fff;
border-bottom: 2px solid #bbb;
padding-bottom: 10px;
}
.nav-light-tabs.nav-justified > li.active > a,
.nav-light-tabs.nav-justified > li.active > a:hover,
.nav-light-tabs.nav-justified > li.active > a:focus {
color: #222222;
font-weight: bold;
background-color: #ffffff;
border-bottom: 2px solid #db3d44;
padding-bottom: 10px;
}
.nav-light-tabs.nav-justified > li > a {
background-color: #ffffff;
padding-bottom: 12px;
border-bottom: 0;
}
.nav-light-tabs.nav-justified > li + li > a {
border-left: 0;
> a {
font-size: 13px;
color: #777777;
padding: 12px 16px;
min-width: 80px;

&:focus {
background-color: #fff;
}
&:hover {
color: #777777;
background-color: #fff;
border-bottom: 2px solid #bbb;
padding-bottom: 10px;
}
}

&.active > a,
&.active > a:focus,
&.active > a:hover {
color: #222222;
font-weight: bold;
background-color: #ffffff;
border-bottom: 2px solid #db3d44;
padding-bottom: 10px;
}
}

> li + li {
margin-left: 1px;
}
}
46 changes: 12 additions & 34 deletions src/nav-justified.styl → src/nav-panel-tabs-justified.styl
Original file line number Diff line number Diff line change
@@ -1,26 +1,4 @@
.nav-tabs.nav-justified {
border: none;
> li {
margin: 0;
}
> li + li > a,
> li + li > a:focus,
> li + li > a:hover {
border-left: none;
}
}

.nav-panel-tabs.nav-justified {
> li + li > a {
&,
&:focus,
&:hover {
border-left: 1px solid #ddd;
}
}
}

.nav-justified {
width: 100%;

> li {
Expand All @@ -43,20 +21,20 @@
}
}

&.active > a {
&,
&:focus,
&:hover {
color: #222;
font-weight: bold;
background-color: #ffffff;
cursor: default;
}
&.active > a,
&.active > a:focus,
&.active > a:hover {
color: #222;
font-weight: bold;
background-color: #ffffff;
border-bottom: 0;
cursor: default;
}
}

> .dropdown .dropdown-menu {
top: auto;
left: auto;
> li + li > a,
> li + li > a:focus,
> li + li > a:hover {
border-left: 1px solid #ddd;
}
}
5 changes: 0 additions & 5 deletions src/nav-panel-tabs.styl
Original file line number Diff line number Diff line change
@@ -1,5 +0,0 @@
.nav-panel-tabs.nav-justified > li.active > a,
.nav-panel-tabs.nav-justified > li.active > a:hover,
.nav-panel-tabs.nav-justified > li.active > a:focus {
border-bottom: 0;
}
38 changes: 16 additions & 22 deletions src/nav-tabs-justified.styl
Original file line number Diff line number Diff line change
@@ -1,23 +1,17 @@
.nav-tabs-justified {
border-bottom: 0;
}
.nav-tabs-justified > li > a {
margin-right: 0;
border-radius: 3px;
}
.nav-tabs-justified > .active > a,
.nav-tabs-justified > .active > a:hover,
.nav-tabs-justified > .active > a:focus {
border: 1px solid #cccccc;
}
@media (min-width: 768px) {
.nav-tabs-justified > li > a {
border-bottom: 1px solid #cccccc;
border-radius: 3px 3px 0 0;
}
.nav-tabs-justified > .active > a,
.nav-tabs-justified > .active > a:hover,
.nav-tabs-justified > .active > a:focus {
border-bottom-color: #ffffff;
}
.nav-tabs.nav-justified {
border: none;
width: 100%;

> li {
float: none;
display: table-cell;
width: 1%;
margin: 0;
}

> li + li > a,
> li + li > a:focus,
> li + li > a:hover {
border-left: 0;
}
}
28 changes: 0 additions & 28 deletions src/nav-stacked.styl → src/nav-tabs-stacked.styl
Original file line number Diff line number Diff line change
Expand Up @@ -33,31 +33,3 @@
padding-left: 14px;
}
}

.nav-light-tabs.nav-stacked {
> li {
float: none;
}
> li > a {
background: inherit;
border: none;
padding: 9px 16px;
}
> li > a:hover,
> li > a:focus {
background: #f4f4f4;
}
> li + li {
margin-top: 1px;
margin-left: 0;
}
> li.active > a,
> li.active > a:hover,
> li.active > a:focus {
background-color: inherit;
border: none;
color: #db3d44;
font-weight: bold;
padding: 9px 16px;
}
}
Loading

0 comments on commit e0ffd05

Please sign in to comment.