Skip to content
GitLab
Commit da35a6b4 authored by Mark Otto's avatar Mark Otto
Browse files

Merge pull request #7590 from Fowowski/3.0.0-wip 

more nested less rules - navs component
parents 5b38a1a3 dc97a196
Hide whitespace changes
Inline Side-by-side
Showing
with 173 additions and 151 deletions
+173 -151
docs/assets/css/bootstrap.css
+ 51
- 46
View file @ da35a6b4
...@@ -3262,10 +3262,34 @@ button.close { ...@@ -3262,10 +3262,34 @@ button.close {
background-color: #eeeeee; background-color: #eeeeee;
} }
.nav > li.disabled > a {
color: #999999;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
color: #999999;
text-decoration: none;
cursor: default;
background-color: transparent;
}
.nav > li + .nav-header {
margin-top: 9px;
}
.nav > .pull-right { .nav > .pull-right {
float: right; float: right;
} }
.nav .divider {
height: 2px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
}
.nav-tabs { .nav-tabs {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
...@@ -3286,9 +3310,9 @@ button.close { ...@@ -3286,9 +3310,9 @@ button.close {
border-color: #eeeeee #eeeeee #dddddd; border-color: #eeeeee #eeeeee #dddddd;
} }
.nav-tabs > .active > a, .nav-tabs > li.active > a,
.nav-tabs > .active > a:hover, .nav-tabs > li.active > a:hover,
.nav-tabs > .active > a:focus { .nav-tabs > li.active > a:focus {
color: #555555; color: #555555;
cursor: default; cursor: default;
background-color: #ffffff; background-color: #ffffff;
...@@ -3296,6 +3320,27 @@ button.close { ...@@ -3296,6 +3320,27 @@ button.close {
border-bottom-color: transparent; border-bottom-color: transparent;
} }
.nav-tabs.nav-justified {
width: 100%;
border-bottom: 0;
}
.nav-tabs.nav-justified > li {
display: table-cell;
float: none;
width: 1%;
text-align: center;
}
.nav-tabs.nav-justified > li > a {
margin-right: 0;
border-bottom: 1px solid #ddd;
}
.nav-tabs.nav-justified > .active > a {
border-bottom-color: #ffffff;
}
.nav-pills > li { .nav-pills > li {
float: left; float: left;
} }
...@@ -3308,9 +3353,9 @@ button.close { ...@@ -3308,9 +3353,9 @@ button.close {
margin-left: 2px; margin-left: 2px;
} }
.nav-pills > .active > a, .nav-pills > li.active > a,
.nav-pills > .active > a:hover, .nav-pills > li.active > a:hover,
.nav-pills > .active > a:focus { .nav-pills > li.active > a:focus {
color: #fff; color: #fff;
background-color: #428bca; background-color: #428bca;
} }
...@@ -3335,34 +3380,6 @@ button.close { ...@@ -3335,34 +3380,6 @@ button.close {
text-align: center; text-align: center;
} }
.nav-justified.nav-tabs {
border-bottom: 0;
}
.nav-justified.nav-tabs > li > a {
border-bottom: 1px solid #ddd;
}
.nav-justified.nav-tabs > .active > a {
border-bottom-color: #ffffff;
}
.nav-justified > li > a {
margin-right: 0;
}
.nav > .disabled > a {
color: #999999;
}
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
color: #999999;
text-decoration: none;
cursor: default;
background-color: transparent;
}
.nav-header { .nav-header {
display: block; display: block;
padding: 3px 15px; padding: 3px 15px;
...@@ -3374,18 +3391,6 @@ button.close { ...@@ -3374,18 +3391,6 @@ button.close {
text-transform: uppercase; text-transform: uppercase;
} }
.nav li + .nav-header {
margin-top: 9px;
}
.nav .divider {
height: 2px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
border-bottom: 1px solid #ffffff;
}
.tabbable:before, .tabbable:before,
.tabbable:after { .tabbable:after {
display: table; display: table;
......
less/navs.less
+ 122
- 105
View file @ da35a6b4
...@@ -12,25 +12,53 @@ ...@@ -12,25 +12,53 @@
padding-left: 0; // Override default ul/ol padding-left: 0; // Override default ul/ol
list-style: none; list-style: none;
.clearfix(); .clearfix();
} > li {
.nav > li { display: block;
display: block; > a {
} position: relative;
.nav > li > a { display: block;
position: relative; padding: 10px 15px;
display: block; &:hover,
padding: 10px 15px; &:focus {
} text-decoration: none;
.nav > li > a:hover, background-color: @grayLighter;
.nav > li > a:focus { }
text-decoration: none; }
background-color: @grayLighter;
} // Nav states and addons
// --------------------------------------------------
// Disabled state
// -------------------------
// Gray out text
&.disabled > a {
color: @grayLight;
}
// Nuke hover effects
&.disabled > a:hover,
&.disabled > a:focus {
color: @grayLight;
text-decoration: none;
background-color: transparent;
cursor: default;
}
// Space the headers out when they follow another list item (link)
&+ .nav-header {
margin-top: 9px;
}
}
// Redeclare pull classes because of specifity // Redeclare pull classes because of specifity
// Todo: consider making these utilities !important to avoid this bullshit // Todo: consider making these utilities !important to avoid this bullshit
.nav > .pull-right { > .pull-right {
float: right; float: right;
}
// Dividers (basically an hr) within the dropdown
.divider {
.nav-divider();
}
} }
...@@ -44,63 +72,79 @@ ...@@ -44,63 +72,79 @@
// Give the tabs something to sit on // Give the tabs something to sit on
.nav-tabs { .nav-tabs {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} > li {
.nav-tabs > li { float: left;
float: left; // Make the list-items overlay the bottom border
// Make the list-items overlay the bottom border margin-bottom: -1px;
margin-bottom: -1px;
} // Actual tabs (as links)
// Actual tabs (as links) > a {
.nav-tabs > li > a { margin-right: 2px;
margin-right: 2px; line-height: @line-height-base;
line-height: @line-height-base; border: 1px solid transparent;
border: 1px solid transparent; border-radius: @border-radius-base @border-radius-base 0 0;
border-radius: @border-radius-base @border-radius-base 0 0; &:hover {
&:hover { border-color: @grayLighter @grayLighter #ddd;
border-color: @grayLighter @grayLighter #ddd; }
}
// Active state, and it's :hover to override normal :hover
&.active > a,
&.active > a:hover,
&.active > a:focus {
color: @gray;
background-color: @body-bg;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
}
// pulling this in mainly for less shorthand
&.nav-justified {
.nav-justified;
.nav-tabs-justified;
} }
}
// Active state, and it's :hover to override normal :hover
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
color: @gray;
background-color: @body-bg;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
} }
// Pills // Pills
// ------------------------- // -------------------------
.nav-pills {
.nav-pills > li { > li {
float: left; float: left;
}
// Links rendered as pills
// Links rendered as pills > a {
.nav-pills > li > a { border-radius: 5px;
border-radius: 5px; }
} + li {
.nav-pills > li + li > a { > a {
margin-left: 2px; margin-left: 2px;
}
}
// Active state
&.active > a,
&.active > a:hover,
&.active > a:focus {
color: #fff;
background-color: @component-active-bg;
}
}
} }
// Active state
.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
color: #fff;
background-color: @component-active-bg;
}
// Stacked pills // Stacked pills
.nav-stacked > li { .nav-stacked {
float: none; > li {
} float: none;
.nav-stacked > li + li > a { + li {
margin-top: 2px; > a {
margin-left: 0; // no need for this gap between nav items margin-top: 2px;
margin-left: 0; // no need for this gap between nav items
}
}
}
} }
// Justified nav links // Justified nav links
...@@ -108,48 +152,30 @@ ...@@ -108,48 +152,30 @@
.nav-justified { .nav-justified {
width: 100%; width: 100%;
> li {
float: none;
display: table-cell;
width: 1%;
text-align: center;
}
} }
.nav-justified > li {
float: none;
display: table-cell;
width: 1%;
text-align: center;
}
// Move borders to anchors instead of bottom of list // Move borders to anchors instead of bottom of list
.nav-justified.nav-tabs { .nav-tabs-justified () {
border-bottom: 0; border-bottom: 0;
> li > a { > li > a {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
// Override margin from .nav-tabs
margin-right: 0;
} }
> .active > a { > .active > a {
border-bottom-color: @body-bg; border-bottom-color: @body-bg;
} }
}
// Override margin from .nav-tabs
.nav-justified > li > a {
margin-right: 0;
}
// Nav states and addons }
// --------------------------------------------------
// Disabled state
// -------------------------
// Gray out text
.nav > .disabled > a {
color: @grayLight;
}
// Nuke hover effects
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
color: @grayLight;
text-decoration: none;
background-color: transparent;
cursor: default;
}
// Nav headers (for dropdowns and lists) // Nav headers (for dropdowns and lists)
// ------------------------- // -------------------------
...@@ -164,15 +190,6 @@ ...@@ -164,15 +190,6 @@
text-shadow: 0 1px 0 rgba(255,255,255,.5); text-shadow: 0 1px 0 rgba(255,255,255,.5);
text-transform: uppercase; text-transform: uppercase;
} }
// Space them out when they follow another list item (link)
.nav li + .nav-header {
margin-top: 9px;
}
// Dividers (basically an hr) within the dropdown
.nav .divider {
.nav-divider();
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment