mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-08 17:22:31 +03:00
overhauled dropdowns now require use of .caret for dropdown arrow, redid the button group docs section, added the split button dropdown docs section
This commit is contained in:
Mark Otto
+95
-44
@@ -1,65 +1,116 @@
|
||||
// BUTTON GROUPS
|
||||
// -------------
|
||||
|
||||
// Group multiple button groups together for a toolbar
|
||||
|
||||
// Make the div behave like a button
|
||||
.btn-group {
|
||||
position: relative;
|
||||
.clearfix(); // clears the floated buttons
|
||||
}
|
||||
|
||||
// Space out series of button groups
|
||||
.btn-group + .btn-group {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
// Optional: Group multiple button groups together for a toolbar
|
||||
.btn-toolbar {
|
||||
.clearfix();
|
||||
.btn-group {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
// Clear the float
|
||||
.btn-group {
|
||||
.clearfix();
|
||||
}
|
||||
// Float them, remove border radius, then re-add to first and last elements
|
||||
.btn-group .btn {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-left: -1px;
|
||||
.border-radius(0);
|
||||
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
-webkit-border-top-left-radius: 4px;
|
||||
-moz-border-radius-topleft: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
&:last-child {
|
||||
-webkit-border-top-right-radius: 4px;
|
||||
-moz-border-radius-topright: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
// Reset corners for large buttons
|
||||
&.large:first-child {
|
||||
margin-left: 0;
|
||||
-webkit-border-top-left-radius: 6px;
|
||||
-moz-border-radius-topleft: 6px;
|
||||
border-top-left-radius: 6px;
|
||||
-webkit-border-bottom-left-radius: 6px;
|
||||
-moz-border-radius-bottomleft: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
&.large:last-child {
|
||||
-webkit-border-top-right-radius: 6px;
|
||||
-moz-border-radius-topright: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
-webkit-border-bottom-right-radius: 6px;
|
||||
-moz-border-radius-bottomright: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
}
|
||||
// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
|
||||
.btn-group .btn:first-child {
|
||||
margin-left: 0;
|
||||
-webkit-border-top-left-radius: 4px;
|
||||
-moz-border-radius-topleft: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
.btn-group .btn:last-child,
|
||||
.btn-group .dropdown-toggle {
|
||||
-webkit-border-top-right-radius: 4px;
|
||||
-moz-border-radius-topright: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
// Reset corners for large buttons
|
||||
.btn-group .btn.large:first-child {
|
||||
margin-left: 0;
|
||||
-webkit-border-top-left-radius: 6px;
|
||||
-moz-border-radius-topleft: 6px;
|
||||
border-top-left-radius: 6px;
|
||||
-webkit-border-bottom-left-radius: 6px;
|
||||
-moz-border-radius-bottomleft: 6px;
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
.btn-group .btn.large:last-child,
|
||||
.btn-group .large.dropdown-toggle {
|
||||
-webkit-border-top-right-radius: 6px;
|
||||
-moz-border-radius-topright: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
-webkit-border-bottom-right-radius: 6px;
|
||||
-moz-border-radius-bottomright: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
// On hover/focus/active, bring the proper btn to front
|
||||
.btn-group .btn:hover,
|
||||
.btn-group .btn:focus,
|
||||
.btn-group .btn:active {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
|
||||
// Split button dropdowns
|
||||
// ----------------------
|
||||
|
||||
// Give the line between buttons some depth
|
||||
.btn-group .dropdown-toggle {
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
@shadow: inset 1px 0 0 rgba(255,255,255,.125), 0 1px 2px rgba(0,0,0,.05);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
|
||||
// Reposition menu on open and round all corners
|
||||
.btn-group.open .dropdown-menu {
|
||||
display: block;
|
||||
top: 30px;
|
||||
.border-radius(5px);
|
||||
}
|
||||
.btn-group.open .dropdown-toggle {
|
||||
background-image: none;
|
||||
@shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
|
||||
// Reposition the caret
|
||||
.btn .caret {
|
||||
margin-top: 6px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Account for other colors
|
||||
.primary,
|
||||
.danger,
|
||||
.info,
|
||||
.success {
|
||||
.caret {
|
||||
border-top-color: #fff;
|
||||
.opacity(75);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+27
-31
@@ -3,22 +3,24 @@
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
// The link that is clicked to toggle the dropdown
|
||||
.dropdown-toggle:after {
|
||||
// Dropdown arrow/caret
|
||||
.caret {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: 8px;
|
||||
margin-left: 6px;
|
||||
text-indent: -99999px;
|
||||
vertical-align: top;
|
||||
border-left: 4px solid transparent;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 4px solid @white;
|
||||
border-top: 4px solid #000;
|
||||
.opacity(30);
|
||||
content: "\2193";
|
||||
}
|
||||
.dropdown:hover .dropdown-toggle:after {
|
||||
.dropdown .caret {
|
||||
margin-top: 8px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.dropdown:hover .caret {
|
||||
.opacity(100);
|
||||
}
|
||||
// The dropdown menu (ul)
|
||||
@@ -27,55 +29,49 @@
|
||||
top: 40px;
|
||||
z-index: 900;
|
||||
float: left;
|
||||
display: none; // None by default, but block on "open" of the menu
|
||||
display: none; // none by default, but block on "open" of the menu
|
||||
min-width: 160px;
|
||||
max-width: 220px;
|
||||
_width: 160px;
|
||||
padding: 6px 0;
|
||||
margin-left: 0; // override default ul styles
|
||||
margin-right: 0;
|
||||
padding: 5px 0;
|
||||
margin: 0; // override default ul
|
||||
list-style: none;
|
||||
background-color: @white;
|
||||
border-color: #999;
|
||||
border-color: rgba(0,0,0,.2);
|
||||
border-color: rgba(0,0,0,.1);
|
||||
border-style: solid;
|
||||
border-width: 0 1px 1px;
|
||||
.border-radius(0 0 6px 6px);
|
||||
.box-shadow(0 2px 4px rgba(0,0,0,.2));
|
||||
.background-clip(padding-box);
|
||||
border-width: 1px;
|
||||
.border-radius(0 0 5px 5px);
|
||||
.box-shadow(0 5px 10px rgba(0,0,0,.2));
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
zoom: 1; // do we need this?
|
||||
|
||||
// Unfloat any li's to make them stack
|
||||
li {
|
||||
float: none;
|
||||
display: block;
|
||||
background-color: none;
|
||||
}
|
||||
// Dividers (basically an hr) within the dropdown
|
||||
.divider {
|
||||
height: 1px;
|
||||
margin: 5px 0;
|
||||
margin: 5px 1px;
|
||||
overflow: hidden;
|
||||
background-color: #eee;
|
||||
background-color: #e5e5e5;
|
||||
border-bottom: 1px solid @white;
|
||||
}
|
||||
}
|
||||
|
||||
.topbar .dropdown-menu, .dropdown-menu {
|
||||
// Links within the dropdown menu
|
||||
a {
|
||||
display: block;
|
||||
padding: 4px 15px;
|
||||
padding: 2px 15px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
color: @gray;
|
||||
text-shadow: 0 1px 0 @white;
|
||||
// Hover state
|
||||
&:hover {
|
||||
color: @grayDark;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
#gradient > .vertical(#eeeeee, #dddddd);
|
||||
@shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
#gradient > .vertical(@blue, @blueDark);
|
||||
@shadow: inset 0 1px 0 rgba(0,0,0,.075), inset 0 -1px rgba(0,0,0,.075);
|
||||
.box-shadow(@shadow);
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -116,7 +116,7 @@ dl {
|
||||
|
||||
// Horizontal rules
|
||||
hr {
|
||||
margin: @baseLineHeight * 1.5 0;
|
||||
margin: @baseLineHeight 0;
|
||||
border: 0;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
border-bottom: 1px solid #fff;
|
||||
|
||||
Reference in New Issue
Block a user