Merge branch '2.0-wip' of https://github.com/twitter/bootstrap into 2.0-wip
This commit is contained in:
commit
dc5bedda14
|
@ -1128,7 +1128,7 @@
|
||||||
<h3>Rewritten base class</h3>
|
<h3>Rewritten base class</h3>
|
||||||
<p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup—no <code><p></code> is required by default, just the outter <code><div></code>.</p>
|
<p>With Bootstrap 2, we've simplified the base class: <code>.alert</code> instead of <code>.alert-message</code>. We've also reduced the minimum required markup—no <code><p></code> is required by default, just the outter <code><div></code>.</p>
|
||||||
<h3>Single alert message</h3>
|
<h3>Single alert message</h3>
|
||||||
<p>For a more durable component with less code, we've removed the differentiating look for block alerts, messages that com with more padding and typically more text. The class also has changed to <code>.alert-block</code>.</p>
|
<p>For a more durable component with less code, we've removed the differentiating look for block alerts, messages that come with more padding and typically more text. The class also has changed to <code>.alert-block</code>.</p>
|
||||||
<hr>
|
<hr>
|
||||||
<h3>Goes great with javascript</h3>
|
<h3>Goes great with javascript</h3>
|
||||||
<p>Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.</p>
|
<p>Bootstrap comes with a great jQuery plugin that supports alert messages, making dismissing them quick and easy.</p>
|
||||||
|
|
|
@ -240,7 +240,7 @@
|
||||||
<div class="well" style="background-color: #888; border: none;">
|
<div class="well" style="background-color: #888; border: none;">
|
||||||
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
|
<div class="modal" style="position: relative; top: auto; left: auto; margin: 0 auto; z-index: 1">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<a href="#" class="close js-dismiss">×</a>
|
<a href="#" class="close" data-dismiss="modal">×</a>
|
||||||
<h3>Modal header</h3>
|
<h3>Modal header</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body">
|
<div class="modal-body">
|
||||||
|
@ -489,12 +489,12 @@ $('#myModal').on('hidden', function () {
|
||||||
<pre class="prettyprint linenums">
|
<pre class="prettyprint linenums">
|
||||||
<ul class="nav pills">
|
<ul class="nav pills">
|
||||||
<li class="active"><a href="#">Regular link</a></li>
|
<li class="active"><a href="#">Regular link</a></li>
|
||||||
<li class="dropdown">
|
<li class="dropdown" id="menu1">
|
||||||
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
|
||||||
Dropdown
|
Dropdown
|
||||||
<b class="caret"></b>
|
<b class="caret"></b>
|
||||||
</a>
|
</a>
|
||||||
<ul id="menu1" class="dropdown-menu">
|
<ul class="dropdown-menu">
|
||||||
<li><a href="#">Action</a></li>
|
<li><a href="#">Action</a></li>
|
||||||
<li><a href="#">Another action</a></li>
|
<li><a href="#">Another action</a></li>
|
||||||
<li><a href="#">Something else here</a></li>
|
<li><a href="#">Something else here</a></li>
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
padding: 7px 14px;
|
padding: 7px 14px;
|
||||||
margin: 0 0 @baseLineHeight;
|
margin: 0 0 @baseLineHeight;
|
||||||
#gradient > .vertical(#ffffff, #f5f5f5);
|
#gradient > .vertical(@white, #f5f5f5);
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
.border-radius(3px);
|
.border-radius(3px);
|
||||||
.box-shadow(inset 0 1px 0 @white);
|
.box-shadow(inset 0 1px 0 @white);
|
||||||
|
|
|
@ -110,7 +110,7 @@
|
||||||
.info,
|
.info,
|
||||||
.success {
|
.success {
|
||||||
.caret {
|
.caret {
|
||||||
border-top-color: #fff;
|
border-top-color: @white;
|
||||||
.opacity(75);
|
.opacity(75);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -34,9 +34,9 @@
|
||||||
padding: 5px 10px 6px;
|
padding: 5px 10px 6px;
|
||||||
font-size: @baseFontSize;
|
font-size: @baseFontSize;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
color: #333;
|
color: @grayDark;
|
||||||
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
||||||
#gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
|
#gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
border-bottom-color: #bbb;
|
border-bottom-color: #bbb;
|
||||||
.border-radius(4px);
|
.border-radius(4px);
|
||||||
|
|
|
@ -70,7 +70,7 @@
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: #999;
|
background: @grayLight;
|
||||||
background: rgba(0,0,0,.5);
|
background: rgba(0,0,0,.5);
|
||||||
.border-radius(20px);
|
.border-radius(20px);
|
||||||
|
|
||||||
|
@ -82,9 +82,9 @@
|
||||||
|
|
||||||
// Hover state
|
// Hover state
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #fff;
|
color: @white;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background: #333;
|
background: @grayDark;
|
||||||
background: rgba(0,0,0,.75);
|
background: rgba(0,0,0,.75);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -98,10 +98,10 @@
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
padding: 10px 15px 5px;
|
padding: 10px 15px 5px;
|
||||||
background: #333;
|
background: @grayDark;
|
||||||
background: rgba(0,0,0,.75);
|
background: rgba(0,0,0,.75);
|
||||||
}
|
}
|
||||||
.carousel-caption h4,
|
.carousel-caption h4,
|
||||||
.carousel-caption p {
|
.carousel-caption p {
|
||||||
color: #fff;
|
color: @white;
|
||||||
}
|
}
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
border-left: 4px solid transparent;
|
border-left: 4px solid transparent;
|
||||||
border-right: 4px solid transparent;
|
border-right: 4px solid transparent;
|
||||||
border-top: 4px solid #000;
|
border-top: 4px solid @black;
|
||||||
.opacity(30);
|
.opacity(30);
|
||||||
content: "\2193";
|
content: "\2193";
|
||||||
}
|
}
|
||||||
|
@ -79,7 +79,7 @@
|
||||||
.dropdown-menu li > a:hover,
|
.dropdown-menu li > a:hover,
|
||||||
.dropdown-menu .active > a,
|
.dropdown-menu .active > a,
|
||||||
.dropdown-menu .active > a:hover {
|
.dropdown-menu .active > a:hover {
|
||||||
color: #fff;
|
color: @white;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: @linkColor;
|
background-color: @linkColor;
|
||||||
}
|
}
|
||||||
|
|
|
@ -164,7 +164,7 @@
|
||||||
.navbar .nav .active > a {
|
.navbar .nav .active > a {
|
||||||
color: @white;
|
color: @white;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: #222;
|
background-color: @grayDarker;
|
||||||
background-color: rgba(0,0,0,.5);
|
background-color: rgba(0,0,0,.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -174,7 +174,7 @@
|
||||||
width: 1px;
|
width: 1px;
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: #222;
|
background-color: @grayDarker;
|
||||||
border-right: 1px solid #444;
|
border-right: 1px solid #444;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -209,7 +209,7 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border-left: 6px solid transparent;
|
border-left: 6px solid transparent;
|
||||||
border-right: 6px solid transparent;
|
border-right: 6px solid transparent;
|
||||||
border-bottom: 6px solid #fff;
|
border-bottom: 6px solid @white;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -6px;
|
top: -6px;
|
||||||
left: 10px;
|
left: 10px;
|
||||||
|
@ -219,7 +219,7 @@
|
||||||
// Dropdown toggle caret
|
// Dropdown toggle caret
|
||||||
.navbar .nav .dropdown-toggle .caret,
|
.navbar .nav .dropdown-toggle .caret,
|
||||||
.navbar .nav .open.dropdown .caret {
|
.navbar .nav .open.dropdown .caret {
|
||||||
border-top-color: #fff;
|
border-top-color: @white;
|
||||||
}
|
}
|
||||||
.navbar .nav .active .caret {
|
.navbar .nav .active .caret {
|
||||||
.opacity(100);
|
.opacity(100);
|
||||||
|
@ -234,7 +234,7 @@
|
||||||
|
|
||||||
// Dropdown link on hover
|
// Dropdown link on hover
|
||||||
.navbar .nav .active > .dropdown-toggle:hover {
|
.navbar .nav .active > .dropdown-toggle:hover {
|
||||||
color: #fff;
|
color: @white;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Right aligned menus need alt position
|
// Right aligned menus need alt position
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
}
|
}
|
||||||
.nav > li > a:hover {
|
.nav > li > a:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: #eee;
|
background-color: @grayLighter;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -97,7 +97,7 @@
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
.border-radius(4px 4px 0 0);
|
.border-radius(4px 4px 0 0);
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: #eee #eee #ddd;
|
border-color: @grayLighter @grayLighter #ddd;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Active state, and it's :hover to override normal :hover
|
// Active state, and it's :hover to override normal :hover
|
||||||
|
@ -201,13 +201,13 @@
|
||||||
// -------------------------
|
// -------------------------
|
||||||
.tabs .active .dropdown-toggle .caret,
|
.tabs .active .dropdown-toggle .caret,
|
||||||
.pills .active .dropdown-toggle .caret {
|
.pills .active .dropdown-toggle .caret {
|
||||||
border-top-color: #333;
|
border-top-color: @grayDark;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Active:hover dropdown links
|
// Active:hover dropdown links
|
||||||
// -------------------------
|
// -------------------------
|
||||||
.nav > .dropdown.active > a:hover {
|
.nav > .dropdown.active > a:hover {
|
||||||
color: #000;
|
color: @black;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -216,20 +216,20 @@
|
||||||
.tabs .open .dropdown-toggle,
|
.tabs .open .dropdown-toggle,
|
||||||
.pills .open .dropdown-toggle,
|
.pills .open .dropdown-toggle,
|
||||||
.nav > .open.active > a:hover {
|
.nav > .open.active > a:hover {
|
||||||
color: #fff;
|
color: @white;
|
||||||
background-color: #999;
|
background-color: @grayLight;
|
||||||
border-color: #999;
|
border-color: @grayLight;
|
||||||
}
|
}
|
||||||
.nav .open .caret,
|
.nav .open .caret,
|
||||||
.nav .open.active .caret,
|
.nav .open.active .caret,
|
||||||
.nav .open a:hover .caret {
|
.nav .open a:hover .caret {
|
||||||
border-top-color: #fff;
|
border-top-color: @white;
|
||||||
.opacity(100);
|
.opacity(100);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Dropdowns in stacked tabs
|
// Dropdowns in stacked tabs
|
||||||
.tabs.stacked .open > a:hover {
|
.tabs.stacked .open > a:hover {
|
||||||
border-color: #999;
|
border-color: @grayLight;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -312,7 +312,7 @@
|
||||||
.border-radius(4px 0 0 4px);
|
.border-radius(4px 0 0 4px);
|
||||||
}
|
}
|
||||||
.tabs-left .tabs > li > a:hover {
|
.tabs-left .tabs > li > a:hover {
|
||||||
border-color: #eee #ddd #eee #eee;
|
border-color: @grayLighter #ddd @grayLighter @grayLighter;
|
||||||
}
|
}
|
||||||
.tabs-left .tabs .active > a,
|
.tabs-left .tabs .active > a,
|
||||||
.tabs-left .tabs .active > a:hover {
|
.tabs-left .tabs .active > a:hover {
|
||||||
|
@ -330,7 +330,7 @@
|
||||||
.border-radius(0 4px 4px 0);
|
.border-radius(0 4px 4px 0);
|
||||||
}
|
}
|
||||||
.tabs-right .tabs > li > a:hover {
|
.tabs-right .tabs > li > a:hover {
|
||||||
border-color: #eee #eee #eee #ddd;
|
border-color: @grayLighter @grayLighter @grayLighter #ddd;
|
||||||
}
|
}
|
||||||
.tabs-right .tabs .active > a,
|
.tabs-right .tabs .active > a,
|
||||||
.tabs-right .tabs .active > a:hover {
|
.tabs-right .tabs .active > a:hover {
|
||||||
|
|
|
@ -24,9 +24,9 @@ body {
|
||||||
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
|
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
|
||||||
.fluid-container {
|
.fluid-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-width: 940px;
|
min-width: @siteWidth;
|
||||||
padding-left: 20px;
|
padding-left: @gridGutterWidth;
|
||||||
padding-right: 20px;
|
padding-right: @gridGutterWidth;
|
||||||
.clearfix();
|
.clearfix();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -35,17 +35,17 @@ body {
|
||||||
width: @fluidSidebarWidth;
|
width: @fluidSidebarWidth;
|
||||||
margin: 0 20px 18px;
|
margin: 0 20px 18px;
|
||||||
}
|
}
|
||||||
.sidebar-left { padding-left: @fluidSidebarWidth + 40; }
|
.sidebar-left { padding-left: @fluidSidebarWidth + @gridGutterWidth * 2; }
|
||||||
.sidebar-right { padding-right: @fluidSidebarWidth + 40; }
|
.sidebar-right { padding-right: @fluidSidebarWidth + @gridGutterWidth * 2; }
|
||||||
|
|
||||||
// Float the sidebars accordingly
|
// Float the sidebars accordingly
|
||||||
.sidebar-left .fluid-sidebar {
|
.sidebar-left .fluid-sidebar {
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: (@fluidSidebarWidth + 20) * -1;
|
margin-left: (@fluidSidebarWidth + @gridGutterWidth) * -1;
|
||||||
}
|
}
|
||||||
.sidebar-right .fluid-sidebar {
|
.sidebar-right .fluid-sidebar {
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: (@fluidSidebarWidth + 20) * -1;
|
margin-right: (@fluidSidebarWidth + @gridGutterWidth) * -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
// The main content area
|
// The main content area
|
||||||
|
|
|
@ -144,7 +144,7 @@ table {
|
||||||
margin-top: 7px;
|
margin-top: 7px;
|
||||||
border-width: 0 4px 4px;
|
border-width: 0 4px 4px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: #000 transparent;
|
border-color: @black transparent;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -174,7 +174,7 @@ table {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
border-left: 4px solid transparent;
|
border-left: 4px solid transparent;
|
||||||
border-right: 4px solid transparent;
|
border-right: 4px solid transparent;
|
||||||
border-top: 4px solid #000;
|
border-top: 4px solid @black;
|
||||||
visibility:visible;
|
visibility:visible;
|
||||||
.box-shadow(none); //can't add boxshadow to downward facing arrow :(
|
.box-shadow(none); //can't add boxshadow to downward facing arrow :(
|
||||||
.opacity(60);
|
.opacity(60);
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
.tooltip-inner {
|
.tooltip-inner {
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
padding: 3px 8px;
|
padding: 3px 8px;
|
||||||
color: white;
|
color: @white;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
background-color: @black;
|
background-color: @black;
|
||||||
|
|
|
@ -119,7 +119,7 @@ hr {
|
||||||
margin: @baseLineHeight 0;
|
margin: @baseLineHeight 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-top: 1px solid #e5e5e5;
|
border-top: 1px solid #e5e5e5;
|
||||||
border-bottom: 1px solid #fff;
|
border-bottom: 1px solid @white;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Emphasis
|
// Emphasis
|
||||||
|
@ -148,7 +148,7 @@ abbr {
|
||||||
blockquote {
|
blockquote {
|
||||||
padding-left: 15px;
|
padding-left: 15px;
|
||||||
margin-bottom: @baseLineHeight;
|
margin-bottom: @baseLineHeight;
|
||||||
border-left: 5px solid #eee;
|
border-left: 5px solid @grayLighter;
|
||||||
p {
|
p {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
#font > .shorthand(16px,300,@baseLineHeight * 1.25);
|
#font > .shorthand(16px,300,@baseLineHeight * 1.25);
|
||||||
|
@ -168,7 +168,7 @@ blockquote {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-right: 15px;
|
padding-right: 15px;
|
||||||
border-left: 0;
|
border-left: 0;
|
||||||
border-right: 5px solid #eee;
|
border-right: 5px solid @grayLighter;
|
||||||
p,
|
p,
|
||||||
small {
|
small {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|
|
@ -13,6 +13,7 @@
|
||||||
|
|
||||||
// Grays
|
// Grays
|
||||||
@black: #000;
|
@black: #000;
|
||||||
|
@grayDarker: #222;
|
||||||
@grayDark: #333;
|
@grayDark: #333;
|
||||||
@gray: #555;
|
@gray: #555;
|
||||||
@grayLight: #999;
|
@grayLight: #999;
|
||||||
|
@ -65,7 +66,7 @@
|
||||||
|
|
||||||
// Navbar
|
// Navbar
|
||||||
@navBarHeight: 40px;
|
@navBarHeight: 40px;
|
||||||
@navbarBackground: #222;
|
@navbarBackground: @grayDarker;
|
||||||
@navbarBackgroundHighlight: #333;
|
@navbarBackgroundHighlight: @grayDark;
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue