Skip to content

B
bootstrap
Commit b54dc135 authored by Jacob Thornton's avatar Jacob Thornton
Browse files
Options

Merge branch 'misc_css_fixes' 

Conflicts:
	bootstrap-1.0.0.css
	lib/patterns.less
parents 14b77f3a 985ee645
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 624 additions and 521 deletions
bootstrap-1.0.0.css
View file @ b54dc135
This diff is collapsed.
bootstrap-1.0.0.min.css
View file @ b54dc135
This diff is collapsed.
docs/assets/css/docs.css
View file @ b54dc135
...@@ -221,6 +221,9 @@ div.topbar-wrapper { ...@@ -221,6 +221,9 @@ div.topbar-wrapper {
div.topbar-wrapper div.topbar { div.topbar-wrapper div.topbar {
position: absolute; position: absolute;
margin: 0 -20px; margin: 0 -20px;
}
div.topbar-wrapper div.topbar .fill {
padding-left: 20px; padding-left: 20px;
padding-right: 20px; padding-right: 20px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
...@@ -253,4 +256,10 @@ div.popover-well div.popover-menu-wrapper { ...@@ -253,4 +256,10 @@ div.popover-well div.popover-menu-wrapper {
img.large-bird { img.large-bird {
margin: 5px 0 0 310px; margin: 5px 0 0 310px;
opacity: .1; opacity: .1;
}
/* Pretty Print
-------------------------------------------------- */
PRE.prettyprint {
overflow: hidden;
} }
\ No newline at end of file
docs/assets/js/application.js
View file @ b54dc135
...@@ -42,25 +42,12 @@ $(document).ready(function(){ ...@@ -42,25 +42,12 @@ $(document).ready(function(){
// Dropdown example for topbar nav // Dropdown example for topbar nav
// =============================== // ===============================
$("body").bind("click", function(e) { $("body").bind("click", function (e) {
$("ul.menu-dropdown").hide(); $('a.menu').parent("li").removeClass("open");
$('a.menu').parent("li").removeClass("open").children("ul.menu-dropdown").hide();
}); });
$("a.menu").click(function(e) { $("a.menu").click(function (e) {
var $target = $(this); var $li = $(this).parent("li").toggleClass('open');
var $parent = $target.parent("li");
var $siblings = $target.siblings("ul.menu-dropdown");
var $parentSiblings = $parent.siblings("li");
if ($parent.hasClass("open")) {
$parent.removeClass("open");
$siblings.hide();
} else {
$parent.addClass("open");
$siblings.show();
}
$parentSiblings.children("ul.menu-dropdown").hide();
$parentSiblings.removeClass("open");
return false; return false;
}); });
......
docs/index.html
View file @ b54dc135
...@@ -32,21 +32,23 @@ ...@@ -32,21 +32,23 @@
<body onload="prettyPrint();"> <body onload="prettyPrint();">
<div class="topbar"> <div class="topbar">
<div class="container"> <div class="fill">
<h3><a href="#">Bootstrap</a></h3> <div class="container">
<ul> <h3><a href="#">Bootstrap</a></h3>
<li class="active"><a href="#masthead">Overview</a></li> <ul>
<li><a href="#about">About</a></li> <li class="active"><a href="#masthead">Overview</a></li>
<li><a href="#grid-system">Grid</a></li> <li><a href="#about">About</a></li>
<li><a href="#layouts">Layouts</a></li> <li><a href="#grid-system">Grid</a></li>
<li><a href="#typography">Typography</a></li> <li><a href="#layouts">Layouts</a></li>
<li><a href="#tables">Tables</a></li> <li><a href="#typography">Typography</a></li>
<li><a href="#forms">Forms</a></li> <li><a href="#tables">Tables</a></li>
<li><a href="#navigation">Navigation</a></li> <li><a href="#forms">Forms</a></li>
<li><a href="#alerts">Alerts</a></li> <li><a href="#navigation">Navigation</a></li>
<li><a href="#popovers">Popovers</a></li> <li><a href="#alerts">Alerts</a></li>
<li><a href="#less">Less</a></li> <li><a href="#popovers">Popovers</a></li>
</ul> <li><a href="#less">Less</a></li>
</ul>
</div>
</div> </div>
</div> </div>
...@@ -359,64 +361,54 @@ ...@@ -359,64 +361,54 @@
<div class="span4 columns"> <div class="span4 columns">
<h4>Unordered <code>&lt;ul&gt;</code></h4> <h4>Unordered <code>&lt;ul&gt;</code></h4>
<ul> <ul>
<li>Jeremy Bixby</li> <li>Lorem ipsum dolor sit amet</li>
<li>Robert Dezure</li> <li>Consectetur adipiscing elit</li>
<li>Josh Washington</li> <li>Integer molestie lorem at massa</li>
<li>Anton Capresi</li> <li>Facilisis in pretium nisl aliquet</li>
<li>My Team Mates <li>Nulla volutpat aliquam velit
<ul> <ul>
<li>George Castanza</li> <li>Phasellus iaculis neque</li>
<li>Jerry Seinfeld</li> <li>Purus sodales ultricies</li>
<li>Cosmo Kramer</li> <li>Vestibulum laoreet porttitor sem</li>
<li>Elaine Bennis</li> <li>Ac tristique libero volutpat at</li>
<li>Newman</li>
</ul> </ul>
</li> </li>
<li>John Jacob</li> <li>Faucibus porta lacus fringilla vel</li>
<li>Paul Pierce</li> <li>Aenean sit amet erat nunc</li>
<li>Kevin Garnett</li> <li>Eget porttitor lorem</li>
</ul> </ul>
</div> </div>
<div class="span4 columns"> <div class="span4 columns">
<h4>Unstyled <code>&lt;ul.unstyled&gt;</code></h4> <h4>Unstyled <code>&lt;ul.unstyled&gt;</code></h4>
<ul class="unstyled"> <ul class="unstyled">
<li>Jeremy Bixby</li> <li>Lorem ipsum dolor sit amet</li>
<li>Robert Dezure</li> <li>Consectetur adipiscing elit</li>
<li>Josh Washington</li> <li>Integer molestie lorem at massa</li>
<li>Anton Capresi</li> <li>Facilisis in pretium nisl aliquet</li>
<li>My Team Mates <li>Nulla volutpat aliquam velit
<ul> <ul>
<li>George Castanza</li> <li>Phasellus iaculis neque</li>
<li>Jerry Seinfeld</li> <li>Purus sodales ultricies</li>
<li>Cosmo Kramer</li> <li>Vestibulum laoreet porttitor sem</li>
<li>Elaine Bennis</li> <li>Ac tristique libero volutpat at</li>
<li>Newman</li>
</ul> </ul>
</li> </li>
<li>John Jacob</li> <li>Faucibus porta lacus fringilla vel</li>
<li>Paul Pierce</li> <li>Aenean sit amet erat nunc</li>
<li>Kevin Garnett</li> <li>Eget porttitor lorem</li>
</ul> </ul>
</div> </div>
<div class="span4 columns"> <div class="span4 columns">
<h4>Ordered <code>&lt;ol&gt;</code></h4> <h4>Ordered <code>&lt;ol&gt;</code></h4>
<ol> <ol>
<li>Jeremy Bixby</li> <li>Lorem ipsum dolor sit amet</li>
<li>Robert Dezure</li> <li>Consectetur adipiscing elit</li>
<li>Josh Washington</li> <li>Integer molestie lorem at massa</li>
<li>Anton Capresi</li> <li>Facilisis in pretium nisl aliquet</li>
<li>My Team Mates <li>Nulla volutpat aliquam velit</li>
<ol> <li>Faucibus porta lacus fringilla vel</li>
<li>George Castanza</li> <li>Aenean sit amet erat nunc</li>
<li>Jerry Seinfeld</li> <li>Eget porttitor lorem</li>
<li>Cosmo Kramer</li>
<li>Elaine Bennis</li>
<li>Newman</li>
</ol>
</li>
<li>John Jacob</li>
<li>Paul Pierce</li>
<li>Kevin Garnett</li>
</ol> </ol>
</div> </div>
<div class="span4 columns"> <div class="span4 columns">
...@@ -759,8 +751,7 @@ ...@@ -759,8 +751,7 @@
</div> </div>
</div> <!-- /clearfix --> </div> <!-- /clearfix -->
<div class="actions"> <div class="actions">
<button type="submit" class="btn primary">Save Changes</button> <button type="submit" class="btn primary">Save Changes</button>&nbsp;<button type="reset" class="btn">Cancel</button>
<button type="reset" class="btn">Cancel</button>
</div> </div>
</fieldset> </fieldset>
</form> </form>
...@@ -823,8 +814,7 @@ ...@@ -823,8 +814,7 @@
</div> <!-- /clearfix --> </div> <!-- /clearfix -->
</fieldset> </fieldset>
<div class="actions"> <div class="actions">
<button type="submit" class="btn primary">Save Changes</button> <button type="submit" class="btn primary">Save Changes</button>&nbsp;<button type="reset" class="btn">Cancel</button>
<button type="reset" class="btn">Cancel</button>
</div> </div>
</form> </form>
</div> </div>
...@@ -840,8 +830,9 @@ ...@@ -840,8 +830,9 @@
<h3>Example buttons</h3> <h3>Example buttons</h3>
<p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, and select <code>&lt;input&gt;</code> elements. Here’s how it looks:</p> <p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, and select <code>&lt;input&gt;</code> elements. Here’s how it looks:</p>
<div class="well" style="padding: 14px 19px;"> <div class="well" style="padding: 14px 19px;">
<button type="submit" class="btn primary">Submit</button> <form>
<button type="submit" class="btn">Cancel</button> <button type="submit" class="btn primary">Submit</button>&nbsp;<button type="submit" class="btn">Cancel</button>
</form>
</div> </div>
<h3>Alternate sizes</h3> <h3>Alternate sizes</h3>
<p>Fancy larger or smaller buttons? Have at it!</p> <p>Fancy larger or smaller buttons? Have at it!</p>
...@@ -855,6 +846,7 @@ ...@@ -855,6 +846,7 @@
</div> </div>
<h3>Disabled state</h3> <h3>Disabled state</h3>
<p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.</p> <p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.</p>
<p><strong>Note:</strong> If you're developing for older browsers like IE8 or below -- you're going to want to use the <code>.disabled</code> class for <code>&lt;button&gt;</code> elements as well.
<h4>Links</h4> <h4>Links</h4>
<div class="well"> <div class="well">
<a href="#" class="btn large primary disabled">Primary action</a> <a href="#" class="btn large primary disabled">Primary action</a>
...@@ -862,8 +854,9 @@ ...@@ -862,8 +854,9 @@
</div> </div>
<h4>Buttons</h4> <h4>Buttons</h4>
<div class="well"> <div class="well">
<button class="btn large primary" disabled>Primary action</button> <form>
<button class="btn large" disabled>Action</button> <button class="btn large primary disabled" disabled>Primary action</button>&nbsp;<button class="btn large disabled" disabled>Action</button>
</form>
</div> </div>
</div> </div>
</div> </div>
...@@ -878,28 +871,30 @@ ...@@ -878,28 +871,30 @@
<h2>Fixed topbar</h2> <h2>Fixed topbar</h2>
<div class="topbar-wrapper" style="z-index: 5;"> <div class="topbar-wrapper" style="z-index: 5;">
<div class="topbar"> <div class="topbar">
<div class="container fixed"> <div class="fill">
<h3><a href="#">Project Name</a></h3> <div class="container fixed">
<ul> <h3><a href="#">Project Name</a></h3>
<li class="active"><a href="#">Home</a></li> <ul>
<li><a href="#">Link</a></li> <li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
<li><a href="#">Link</a></li> <li><a href="#">Link</a></li>
</ul> <li><a href="#">Link</a></li>
<form action=""> </ul>
<input type="text" placeholder="Search" /> <form action="">
</form> <input type="text" placeholder="Search" />
<ul class="nav secondary-nav"> </form>
<li class="menu"> <ul class="nav secondary-nav">
<a href="#" class="menu">Dropdown</a> <li class="menu">
<ul class="menu-dropdown"> <a href="#" class="menu">Dropdown</a>
<li><a href="#">Secondary link</a></li> <ul class="menu-dropdown">
<li><a href="#">Something else here</a></li> <li><a href="#">Secondary link</a></li>
<li class="divider"></li> <li><a href="#">Something else here</a></li>
<li><a href="#">Another link</a></li> <li class="divider"></li>
</ul> <li><a href="#">Another link</a></li>
</li> </ul>
</ul> </li>
</ul>
</div>
</div> </div>
</div> </div>
</div> <!-- topbar-wrapper --> </div> <!-- topbar-wrapper -->
...@@ -1098,7 +1093,7 @@ ...@@ -1098,7 +1093,7 @@
<p>Modals&mdash;dialogs or lightboxes&mdash;are great for contextual actions in situations where it’s important that the background context be maintained.</p> <p>Modals&mdash;dialogs or lightboxes&mdash;are great for contextual actions in situations where it’s important that the background context be maintained.</p>
</div> </div>
<div class="span12 columns"> <div class="span12 columns">
<div class="well" style="background-color: rgba(0,0,0,0.5); border: none; padding: 40px;"> <div class="well" style="background-color: #888; border: none; padding: 40px;">
<!-- Modal --> <!-- Modal -->
<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">
...@@ -1166,13 +1161,11 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita ...@@ -1166,13 +1161,11 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</div> </div>
</div> </div>
</div> </div>
<img class="large-bird" src="assets/img/bird.png" width="220px" height="48px"> <img class="large-bird" src="assets/img/bird.png" width="220px" height="145px">
</div> </div>
</div> </div>
</div> </div>
</div> <!-- /row --> </div> <!-- /row -->
</section> </section>
......
lib/forms.less
View file @ b54dc135
...@@ -18,12 +18,14 @@ form { ...@@ -18,12 +18,14 @@ form {
margin-left: 150px; margin-left: 150px;
font-size: 20px; font-size: 20px;
line-height: 1; line-height: 1;
*margin: 0 0 5px 145px; /* IE6-7 */
*line-height: 1.5; /* IE6-7 */
color: @grayDark; color: @grayDark;
} }
} }
// Parent element that clears floats and wraps labels and fields together // Parent element that clears floats and wraps labels and fields together
div.clearfix { .clearfix {
margin-bottom: @baseline; margin-bottom: @baseline;
} }
...@@ -112,7 +114,7 @@ form { ...@@ -112,7 +114,7 @@ form {
} }
// Error styles // Error styles
div.error { .error {
background: lighten(@red, 57%); background: lighten(@red, 57%);
padding: 10px 0; padding: 10px 0;
margin: -10px 0 10px; margin: -10px 0 10px;
...@@ -133,8 +135,8 @@ form { ...@@ -133,8 +135,8 @@ form {
.box-shadow(0 0 6px rgba(171,41,32,.5)); .box-shadow(0 0 6px rgba(171,41,32,.5));
} }
} }
div.input-prepend, .input-prepend,
div.input-append { .input-append {
span.add-on { span.add-on {
background: lighten(@red, 50%); background: lighten(@red, 50%);
border-color: @error-text; border-color: @error-text;
...@@ -177,14 +179,14 @@ form { ...@@ -177,14 +179,14 @@ form {
} }
// Actions (the buttons) // Actions (the buttons)
div.actions { .actions {
background: #f5f5f5; background: #f5f5f5;
margin-top: @baseline; margin-top: @baseline;
margin-bottom: @baseline; margin-bottom: @baseline;
padding: (@baseline - 1) 20px @baseline 150px; padding: (@baseline - 1) 20px @baseline 150px;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
.border-radius(0 0 3px 3px); .border-radius(0 0 3px 3px);
div.secondary-action { .secondary-action {
float: right; float: right;
a { a {
line-height: 30px; line-height: 30px;
...@@ -204,6 +206,8 @@ div.actions { ...@@ -204,6 +206,8 @@ div.actions {
} }
.help-inline { .help-inline {
padding-left: 5px; padding-left: 5px;
*position: relative; /* IE6-7 */
*top: -5px; /* IE6-7 */
} }
// Big blocks of help text // Big blocks of help text
...@@ -213,7 +217,7 @@ div.actions { ...@@ -213,7 +217,7 @@ div.actions {
} }
// Inline Fields (input fields that appear as inline objects // Inline Fields (input fields that appear as inline objects
div.inline-inputs { .inline-inputs {
color: @gray; color: @gray;
span, input[type=text] { span, input[type=text] {
display: inline-block; display: inline-block;
...@@ -230,8 +234,8 @@ div.inline-inputs { ...@@ -230,8 +234,8 @@ div.inline-inputs {
} }
// Allow us to put symbols and text within the input field for a cleaner look // Allow us to put symbols and text within the input field for a cleaner look
div.input-prepend, .input-prepend,
div.input-append { .input-append {
input[type=text] { input[type=text] {
.border-radius(0 3px 3px 0); .border-radius(0 3px 3px 0);
} }
...@@ -257,7 +261,14 @@ div.input-append { ...@@ -257,7 +261,14 @@ div.input-append {
border-color: @green; border-color: @green;
} }
} }
div.input-append {
.input-prepend {
.add-on {
*margin-top: 1px; /* IE6-7 */
}
}
.input-append {
input[type=text] { input[type=text] {
float: left; float: left;
.border-radius(3px 0 0 3px); .border-radius(3px 0 0 3px);
...@@ -270,7 +281,7 @@ div.input-append { ...@@ -270,7 +281,7 @@ div.input-append {
} }
// Stacked options for forms (radio buttons or checkboxes) // Stacked options for forms (radio buttons or checkboxes)
ul.inputs-list { .inputs-list {
margin: 0 0 5px; margin: 0 0 5px;
width: 100%; width: 100%;
li { li {
...@@ -326,13 +337,13 @@ form.form-stacked { ...@@ -326,13 +337,13 @@ form.form-stacked {
line-height: 20px; line-height: 20px;
padding-top: 0; padding-top: 0;
} }
div.clearfix { .clearfix {
margin-bottom: @baseline / 2; margin-bottom: @baseline / 2;
div.input { div.input {
margin-left: 0; margin-left: 0;
} }
} }
ul.inputs-list { .inputs-list {
margin-bottom: 0; margin-bottom: 0;
li { li {
padding-top: 0; padding-top: 0;
...@@ -342,7 +353,7 @@ form.form-stacked { ...@@ -342,7 +353,7 @@ form.form-stacked {
} }
} }
} }
div.actions { .actions {
margin-left: -20px; margin-left: -20px;
padding-left: 20px; padding-left: 20px;
} }
......
lib/patterns.less
View file @ b54dc135
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
// ------ // ------
// Topbar for Branding and Nav // Topbar for Branding and Nav
div.topbar { .topbar {
#gradient > .vertical(#333, #222); #gradient > .vertical(#333, #222);
height: 40px; height: 40px;
position: fixed; position: fixed;
...@@ -16,8 +16,14 @@ div.topbar { ...@@ -16,8 +16,14 @@ div.topbar {
right: 0; right: 0;
z-index: 10000; z-index: 10000;
overflow: visible; overflow: visible;
@shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
.box-shadow(@shadow); // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
.fill {
background:#222;
#gradient > .vertical(#333, #222);
@shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
.box-shadow(@shadow);
}
// Links get text shadow // Links get text shadow
a { a {
...@@ -35,15 +41,18 @@ div.topbar { ...@@ -35,15 +41,18 @@ div.topbar {
} }
// Website name // Website name
h3 a { h3 {
float: left; position:relative;
display: block; a {
padding: 8px 20px 12px; float: left;
margin-left: -20px; // negative indent to left-align the text down the page display: block;
color: @white; padding: 8px 20px 12px;
font-size: 20px; margin-left: -20px; // negative indent to left-align the text down the page
font-weight: 200; color: @white;
line-height: 1; font-size: 20px;
font-weight: 200;
line-height: 1;
}
} }
// Search Form // Search Form
...@@ -53,7 +62,7 @@ div.topbar { ...@@ -53,7 +62,7 @@ div.topbar {
position: relative; position: relative;
.opacity(100); .opacity(100);
input { input {
background-color: @grayLight; background-color: #444;
background-color: rgba(255,255,255,.3); background-color: rgba(255,255,255,.3);
#font > .sans-serif(13px, normal, 1); #font > .sans-serif(13px, normal, 1);
width: 220px; width: 220px;
...@@ -73,11 +82,13 @@ div.topbar { ...@@ -73,11 +82,13 @@ div.topbar {
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
color: @grayLighter; color: @grayLighter;
} }
// Hover states
&:hover { &:hover {
background-color: #444; background-color: @grayLight;
background-color: rgba(255,255,255,.5); background-color: rgba(255,255,255,.5);
color: #fff; color: #fff;
} }
// Focus states (we use .focused since IE8 and down doesn't support :focus)
&:focus, &:focus,
&.focused { &.focused {
outline: none; outline: none;
...@@ -151,7 +162,7 @@ div.topbar { ...@@ -151,7 +162,7 @@ div.topbar {
&.open { &.open {
a.menu, a.menu,
a:hover { a:hover {
background-color: lighten(#00a0d1,5); background-color: #444;
background-color: rgba(255,255,255,.1); background-color: rgba(255,255,255,.1);
color: #fff; color: #fff;
} }
...@@ -215,6 +226,7 @@ div.topbar { ...@@ -215,6 +226,7 @@ div.topbar {
&.divider { &.divider {
height: 1px; height: 1px;
overflow: hidden; overflow: hidden;
background: #222;
background: rgba(0,0,0,.2); background: rgba(0,0,0,.2);
border-bottom: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1);
margin: 5px 0; margin: 5px 0;
...@@ -261,7 +273,7 @@ div.topbar { ...@@ -261,7 +273,7 @@ div.topbar {
// PAGE HEADERS // PAGE HEADERS
// ------------ // ------------
div.page-header { .page-header {
margin-bottom: @baseline - 1; margin-bottom: @baseline - 1;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
.box-shadow(0 1px 0 rgba(255,255,255,.5)); .box-shadow(0 1px 0 rgba(255,255,255,.5));
...@@ -275,14 +287,17 @@ div.page-header { ...@@ -275,14 +287,17 @@ div.page-header {
// ------------ // ------------
// One-liner alert bars // One-liner alert bars
div.alert-message { .alert-message {
// TODO: Ask cloudhead how to do this fancy filter elegantly. Less eval is returning strings with quotes ;_;
#gradient > .vertical(transparent, rgba(0,0,0,0.15)); #gradient > .vertical(transparent, rgba(0,0,0,0.15));
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#15000000')";
filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#15000000')";
background-color: @grayLighter; background-color: @grayLighter;
margin-bottom: @baseline; margin-bottom: @baseline;
padding: 8px 15px; padding: 8px 15px;
color: #fff; color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.25); text-shadow: 0 -1px 0 rgba(0,0,0,.3);
border-bottom: 1px solid rgba(0,0,0,.25); border-bottom: 1px solid rgba(0,0,0,.3);
.border-radius(4px); .border-radius(4px);
p { p {
color: #fff; color: #fff;
...@@ -292,44 +307,49 @@ div.alert-message { ...@@ -292,44 +307,49 @@ div.alert-message {
} }
} }
&.error { &.error {
background-color: lighten(@red, 25%); #gradient > .vertical(lighten(@red, 30%), lighten(@red, 15%));
border-bottom-color: lighten(@red, 5%);
} }
&.warning { &.warning {
background-color: lighten(@yellow, 15%); #gradient > .vertical(lighten(@yellow, 25%), lighten(@yellow, 10%));
border-bottom-color: @yellow;
} }
&.success { &.success {
background-color: lighten(@green, 15%); #gradient > .vertical(lighten(@green, 25%), lighten(@green, 10%));
border-bottom-color: @green;
} }
&.info { &.info {
background-color: lighten(@blue, 15%); #gradient > .vertical(lighten(@blue, 25%), lighten(@blue, 5%));
border-bottom-color: @blue;
} }
a.close { .close {
float: right; float: right;
margin-top: -2px; margin-top: -2px;
color: #fff; color: #000;
font-size: 20px; font-size: 20px;
font-weight: bold; font-weight: bold;
text-shadow: 0 1px 0 rgba(0,0,0,.5); text-shadow: 0 1px 0 rgba(255,255,255,1);
.opacity(50); .opacity(20);
.border-radius(3px);
&:hover { &:hover {
text-decoration: none; text-decoration: none;
.opacity(50); .opacity(40);
} }
} }
} }
// Block-level Alerts // Block-level Alerts
div.block-message { .block-message {
margin-bottom: @baseline; margin-bottom: @baseline;
padding: 14px; padding: 14px;
color: @grayDark; color: @grayDark;
color: rgba(0,0,0,.8); color: rgba(0,0,0,.8);
*color: @grayDark; /* IE 6-7 */
text-shadow: 0 1px 0 rgba(255,255,255,.25); text-shadow: 0 1px 0 rgba(255,255,255,.25);
.border-radius(6px); .border-radius(6px);
p { p {
color: @grayDark; color: @grayDark;
color: rgba(0,0,0,.8); color: rgba(0,0,0,.8);
*color: @grayDark; /* IE 6-7 */
margin-right: 30px; margin-right: 30px;
margin-bottom: 0; margin-bottom: 0;
} }
...@@ -339,12 +359,6 @@ div.block-message { ...@@ -339,12 +359,6 @@ div.block-message {
strong { strong {
display: block; display: block;
} }
a.close {
display: block;
color: @grayDark;
color: rgba(0,0,0,.5);
text-shadow: 0 1px 1px rgba(255,255,255,.75);
}
&.error { &.error {
background: lighten(@red, 55%); background: lighten(@red, 55%);
border: 1px solid lighten(@red, 50%); border: 1px solid lighten(@red, 50%);
...@@ -368,8 +382,8 @@ div.block-message { ...@@ -368,8 +382,8 @@ div.block-message {
// ---------- // ----------
// Common tab and pill styles // Common tab and pill styles
ul.tabs, .tabs,
ul.pills { .pills {
margin: 0 0 20px; margin: 0 0 20px;
padding: 0; padding: 0;
.clearfix(); .clearfix();
...@@ -383,7 +397,7 @@ ul.pills { ...@@ -383,7 +397,7 @@ ul.pills {
} }
// Basic Tabs // Basic Tabs
ul.tabs { .tabs {
width: 100%; width: 100%;
border-bottom: 1px solid @grayLight; border-bottom: 1px solid @grayLight;
li { li {
...@@ -409,7 +423,7 @@ ul.tabs { ...@@ -409,7 +423,7 @@ ul.tabs {
} }
// Basic pill nav // Basic pill nav
ul.pills { .pills {
li { li {
a { a {
margin: 5px 3px 5px 0; margin: 5px 3px 5px 0;
...@@ -436,22 +450,26 @@ ul.pills { ...@@ -436,22 +450,26 @@ ul.pills {
// PAGINATION // PAGINATION
// ---------- // ----------
div.pagination { .pagination {
height: @baseline * 2; height: @baseline * 2;
margin: @baseline 0; margin: @baseline 0;
ul { ul {
float: left; float: left;
margin: 0; margin: 0;
border: 1px solid #ddd;
border: 1px solid rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.15);
.border-radius(3px); .border-radius(3px);
.box-shadow(0 1px 2px rgba(0,0,0,.075)); .box-shadow(0 1px 2px rgba(0,0,0,.05);
li { li {
display: inline; display: inline;
a { a {
float: left; float: left;
padding: 0 14px; padding: 0 14px;
line-height: (@baseline * 2) - 2; line-height: (@baseline * 2) - 2;
border-right: 1px solid rgba(0,0,0,.15); border-right: 1px solid;
border-right-color: #ddd;
border-right-color: rgba(0,0,0,.15);
*border-right-color: #ddd; /* IE6-7 */
text-decoration: none; text-decoration: none;
} }
a:hover, a:hover,
...@@ -463,8 +481,7 @@ div.pagination { ...@@ -463,8 +481,7 @@ div.pagination {
background-color: none; background-color: none;
color: @grayLight; color: @grayLight;
} }
&.next a, &.next a {
&:last-child a {
border: 0; border: 0;
} }
} }
...@@ -490,7 +507,7 @@ div.pagination { ...@@ -490,7 +507,7 @@ div.pagination {
// MODALS // MODALS
// ------ // ------
div.modal-backdrop { .modal-backdrop {
background-color: rgba(0,0,0,.5); background-color: rgba(0,0,0,.5);
position: fixed; position: fixed;
top: 0; top: 0;
...@@ -499,7 +516,7 @@ div.modal-backdrop { ...@@ -499,7 +516,7 @@ div.modal-backdrop {
bottom: 0; bottom: 0;
z-index: 1000; z-index: 1000;
} }
div.modal { .modal {
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
...@@ -507,10 +524,11 @@ div.modal { ...@@ -507,10 +524,11 @@ div.modal {
width: 560px; width: 560px;
margin: -280px 0 0 -250px; margin: -280px 0 0 -250px;
background-color: @white; background-color: @white;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.3); border: 1px solid rgba(0,0,0,.3);
.border-radius(6px); .border-radius(6px);
.box-shadow(0 3px 7px rgba(0,0,0,0.3)); .box-shadow(0 3px 7px rgba(0,0,0,0.3));
.background-clip(padding); .background-clip(padding-box);
.modal-header { .modal-header {
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
padding: 5px 20px; padding: 5px 20px;
...@@ -582,7 +600,7 @@ div.modal { ...@@ -582,7 +600,7 @@ div.modal {
// TWIPSY // TWIPSY
// ------ // ------
div.twipsy { .twipsy {
display: block; display: block;
position: absolute; position: absolute;
visibility: visible; visibility: visible;
...@@ -631,7 +649,9 @@ div.twipsy { ...@@ -631,7 +649,9 @@ div.twipsy {
height: 0; height: 0;
} }
.inner { .inner {
background: rgba(0,0,0,.8); background-color: #333;
background-color: rgba(0,0,0,.8);
*background-color: #333; /* IE 6-7 */
padding: 3px; padding: 3px;
overflow: hidden; overflow: hidden;
width: 280px; width: 280px;
...@@ -639,7 +659,7 @@ div.twipsy { ...@@ -639,7 +659,7 @@ div.twipsy {
.box-shadow(0 3px 7px rgba(0,0,0,0.3)); .box-shadow(0 3px 7px rgba(0,0,0,0.3));
} }
.title { .title {
background: #f5f5f5; background-color: #f5f5f5;
padding: 9px 15px; padding: 9px 15px;
line-height: 1; line-height: 1;
.border-radius(3px 3px 0 0); .border-radius(3px 3px 0 0);
...@@ -649,7 +669,7 @@ div.twipsy { ...@@ -649,7 +669,7 @@ div.twipsy {
background-color: @white; background-color: @white;
padding: 14px; padding: 14px;
.border-radius(0 0 3px 3px); .border-radius(0 0 3px 3px);
.background-clip(padding); .background-clip(padding-box);
p, ul, ol { p, ul, ol {
margin-bottom: 0; margin-bottom: 0;
} }
......
lib/preboot.less
View file @ b54dc135
...@@ -189,8 +189,9 @@ ...@@ -189,8 +189,9 @@
color: @textColor; color: @textColor;
font-size: @fontSize; font-size: @fontSize;
line-height: @baseline; line-height: @baseline;
border: 1px solid @borderColor; border: 1px solid;
border-bottom-color: fadein(@borderColor, 15%); border-color: #ccc #ccc #bbb;
border-color: borderColor borderColor fadein(@borderColor, 15%);
.border-radius(@borderRadius); .border-radius(@borderRadius);
@shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow); .box-shadow(@shadow);
...@@ -223,8 +224,6 @@ ...@@ -223,8 +224,6 @@
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); // IE8+
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE6 & IE7
background-image: linear-gradient(left, @startColor, @endColor); // Le standard background-image: linear-gradient(left, @startColor, @endColor); // Le standard
} }
.vertical (@startColor: #555, @endColor: #333) { .vertical (@startColor: #555, @endColor: #333) {
...@@ -236,8 +235,6 @@ ...@@ -236,8 +235,6 @@
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10 background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
-ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); // IE8+
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE6 & IE7
background-image: linear-gradient(@startColor, @endColor); // The standard background-image: linear-gradient(@startColor, @endColor); // The standard
} }
.directional (@startColor: #555, @endColor: #333, @deg: 45deg) { .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
......
lib/scaffolding.less
View file @ b54dc135
...@@ -101,6 +101,8 @@ a { ...@@ -101,6 +101,8 @@ a {
#gradient > .vertical(@blue, @blueDark); #gradient > .vertical(@blue, @blueDark);
color: #fff; color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.25); text-shadow: 0 -1px 0 rgba(0,0,0,.25);
border-color: @blueDark @blueDark darken(@blueDark, 15%);
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
&:hover { &:hover {
color: #fff; color: #fff;
} }
...@@ -115,12 +117,18 @@ a { ...@@ -115,12 +117,18 @@ a {
padding-left: 9px; padding-left: 9px;
font-size: 11px; font-size: 11px;
} }
&:disabled,
&.disabled { &.disabled {
background-image: none; background-image: none;
.opacity(65); .opacity(65);
cursor: default; cursor: default;
} }
// this can't be included with the .disabled def because IE8 and below will drop it ;_;
&:disabled {
background-image: none;
.opacity(65);
cursor: default;
}
&:active { &:active {
@shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05); @shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow); .box-shadow(@shadow);
......
lib/tables.less
View file @ b54dc135
...@@ -11,12 +11,12 @@ table { ...@@ -11,12 +11,12 @@ table {
width: 100%; width: 100%;
margin-bottom: @baseline; margin-bottom: @baseline;
padding: 0; padding: 0;
text-align: left;
border-collapse: separate; border-collapse: separate;
font-size: 13px; font-size: 13px;
th, td { th, td {
padding: 10px 10px 9px; padding: 10px 10px 9px;
line-height: @baseline * .75; line-height: @baseline * .75;
text-align: left;
vertical-align: middle; vertical-align: middle;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
...@@ -32,7 +32,7 @@ table { ...@@ -32,7 +32,7 @@ table {
// -------------- // --------------
// Default zebra-stripe styles (alternating gray and transparent backgrounds) // Default zebra-stripe styles (alternating gray and transparent backgrounds)
table.zebra-striped { .zebra-striped {
tbody { tbody {
tr:nth-child(odd) td { tr:nth-child(odd) td {
background-color: #f9f9f9; background-color: #f9f9f9;
...@@ -43,7 +43,7 @@ table.zebra-striped { ...@@ -43,7 +43,7 @@ table.zebra-striped {
} }
// Tablesorting styles w/ jQuery plugin // Tablesorting styles w/ jQuery plugin
th.header { .header {
cursor: pointer; cursor: pointer;
&:after { &:after {
content: ""; content: "";
...@@ -55,36 +55,29 @@ table.zebra-striped { ...@@ -55,36 +55,29 @@ table.zebra-striped {
visibility: hidden; visibility: hidden;
} }
} }
// Style the sorted column headers (THs) // Style the sorted column headers (THs)
th.headerSortUp, .headerSortUp,
th.headerSortDown { .headerSortDown {
background-color: rgba(141,192,219,.25); background-color: rgba(141,192,219,.25);
text-shadow: 0 1px 1px rgba(255,255,255,.75); text-shadow: 0 1px 1px rgba(255,255,255,.75);
.border-radius(3px 3px 0 0); .border-radius(3px 3px 0 0);
} }
// Style the ascending (reverse alphabetical) column header // Style the ascending (reverse alphabetical) column header
th.header:hover { .header:hover {
&:after { &:after {
visibility:visible; visibility:visible;
} }
} }
th.actions:hover {
background-image: none;
}
// Style the descending (alphabetical) column header // Style the descending (alphabetical) column header
th.headerSortDown, .headerSortDown,
th.headerSortDown:hover { .headerSortDown:hover {
&:after { &:after {
visibility:visible; visibility:visible;
.opacity(60); .opacity(60);
} }
} }
// Style the ascending (reverse alphabetical) column header // Style the ascending (reverse alphabetical) column header
th.headerSortUp { .headerSortUp {
&:after { &:after {
border-bottom: none; border-bottom: none;
border-left: 4px solid transparent; border-left: 4px solid transparent;
...@@ -95,58 +88,61 @@ table.zebra-striped { ...@@ -95,58 +88,61 @@ table.zebra-striped {
.opacity(60); .opacity(60);
} }
} }
}
table {
// Blue Table Headings // Blue Table Headings
th.blue { .blue {
color: @blue; color: @blue;
border-bottom-color: @blue; border-bottom-color: @blue;
} }
th.headerSortUp.blue, th.headerSortDown.blue { .headerSortUp.blue,
.headerSortDown.blue {
background-color: lighten(@blue, 40%); background-color: lighten(@blue, 40%);
} }
// Green Table Headings // Green Table Headings
th.green { .green {
color: @green; color: @green;
border-bottom-color: @green; border-bottom-color: @green;
} }
th.headerSortUp.green, th.headerSortDown.green { // backround color is 20% of border color .headerSortUp.green,
.headerSortDown.green {
background-color: lighten(@green, 40%); background-color: lighten(@green, 40%);
} }
// Red Table Headings // Red Table Headings
th.red { .red {
color: @red; color: @red;
border-bottom-color: @red; border-bottom-color: @red;
} }
th.headerSortUp.red, th.headerSortDown.red { .headerSortUp.red,
.headerSortDown.red {
background-color: lighten(@red, 50%); background-color: lighten(@red, 50%);
} }
// Yellow Table Headings // Yellow Table Headings
th.yellow { .yellow {
color: @yellow; color: @yellow;
border-bottom-color: @yellow; border-bottom-color: @yellow;
} }
th.headerSortUp.yellow, th.headerSortDown.yellow { .headerSortUp.yellow,
.headerSortDown.yellow {
background-color: lighten(@yellow, 40%); background-color: lighten(@yellow, 40%);
} }
// Orange Table Headings // Orange Table Headings
th.orange { .orange {
color: @orange; color: @orange;
border-bottom-color: @orange; border-bottom-color: @orange;
} }
th.headerSortUp.orange, th.headerSortDown.orange { .headerSortUp.orange,
.headerSortDown.orange {
background-color: lighten(@orange, 40%); background-color: lighten(@orange, 40%);
} }
// Purple Table Headings // Purple Table Headings
th.purple { .purple {
color: @purple; color: @purple;
border-bottom-color: @purple; border-bottom-color: @purple;
} }
th.headerSortUp.purple, th.headerSortDown.purple { .headerSortUp.purple,
.headerSortDown.purple {
background-color: lighten(@purple, 40%); background-color: lighten(@purple, 40%);
} }
} }
\ No newline at end of file
Markdown is supported
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