update grid bg to 18px baseline, updated docs for disabled buttons

This commit is contained in:
Mark Otto 2011-06-28 15:54:25 -07:00
parent b11784fec0
commit 25d9a2f2b8
6 changed files with 41 additions and 13 deletions

10
bootstrap-1.0.0.css vendored
View File

@ -396,7 +396,7 @@ a:hover {
}
.btn.large {
font-size: 16px;
line-height: 30px;
line-height: 28px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
@ -406,6 +406,14 @@ a:hover {
padding-left: 9px;
font-size: 11px;
}
.btn:disabled, .btn.disabled {
background-image: none;
filter: alpha(opacity=65);
-khtml-opacity: 0.65;
-moz-opacity: 0.65;
opacity: 0.65;
cursor: default;
}
button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
padding: 0;
border: 0;

View File

@ -33,8 +33,9 @@ div.container-fluid div.content{min-width:700px;max-width:1180px;margin-left:240
a{color:#0069d6;text-decoration:none;line-height:inherit;}a:hover{color:#0050a3;text-decoration:underline;}
.btn{display:inline-block;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(0.25, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, color-stop(0.25, #ffffff), #e6e6e6);background-image:-moz-linear-gradient(#ffffff, color-stop(#ffffff, 0.25), #e6e6e6);padding:4px 14px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333333;font-size:13px;line-height:18px;border:1px solid rgba(0, 0, 0, 0.1);border-bottom-color:rgba(0, 0, 0, 0.25);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);}.btn:hover{background-position:0 -15px;color:#333333;text-decoration:none;}
.btn.primary{background-color:#0069d6;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#08b5fb), to(#0069d6));background-image:-moz-linear-gradient(#08b5fb, #0069d6);background-image:-ms-linear-gradient(#08b5fb, #0069d6);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #08b5fb), color-stop(100%, #0069d6));background-image:-webkit-linear-gradient(#08b5fb, #0069d6);background-image:-o-linear-gradient(#08b5fb, #0069d6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#08b5fb', endColorstr='#0069d6', GradientType=0);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#08b5fb', endColorstr='#0069d6', GradientType=0)";background-image:linear-gradient(#08b5fb, #0069d6);color:#fff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);}.btn.primary:hover{color:#fff;}
.btn.large{font-size:16px;line-height:30px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.btn.large{font-size:16px;line-height:28px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.btn.small{padding-right:9px;padding-left:9px;font-size:11px;}
.btn:disabled,.btn.disabled{background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;cursor:default;}
button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;border:0;}
p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:18px;}p small{font-size:12px;color:#b3b3b3;}
h1,h2,h3,h4,h5,h6{font-weight:500;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#b3b3b3;}

View File

@ -1,8 +1,8 @@
/* Add additional stylesheets below
-------------------------------------------------- */
/*
Baseline's documentation styles
Special styles for presenting Baseline's documentation and examples
Bootstrap's documentation styles
Special styles for presenting Bootstrap's documentation and examples
*/
/* Body and structure
-------------------------------------------------- */
@ -26,8 +26,8 @@ section {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#0056b0', EndColorStr='#049cd9', GradientType=0))";
}
#masthead div.inner, #footer div.inner {
background: transparent url(../img/grid-20px.png) 0 -1px;
padding: 40px 0;
background: transparent url(../img/grid-18px.png) 0 -1px;
padding: 36px 0;
-webkit-box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.25);
@ -49,9 +49,9 @@ section {
margin-bottom: 0;
}
#masthead p.lead {
font-size: 20px;
font-size: 18px;
font-weight: 300;
line-height: 30px;
line-height: 27px;
margin: 0;
}
#masthead a.btn {
@ -65,8 +65,9 @@ section {
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#7a43b6', EndColorStr='#552e7e', GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7a43b6', EndColorStr='#552e7e', GradientType=0))";
display: block;
margin-bottom: 20px;
margin-bottom: 18px;
text-align: center;
font-weight: bold;
border: 0;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.4);
@ -79,8 +80,8 @@ section {
display: block;
text-align: center;
font-size: 13px;
line-height: 20px;
color: rgba(255, 255, 255, 0.5);
line-height: 18px;
color: rgba(255,255,255,0.5);
}
#masthead small a {
color: #fff;

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -48,7 +48,7 @@
<p class="lead">Bootstrap is Twitter's toolkit for kickstarting CSS for websites, apps, and more. It includes base CSS styles for typography, forms, buttons, tables, grids, navigation, alerts, and more.</p>
</div>
<div class="span5 columns">
<a href="" class="btn large primary">Download Zip &raquo;</a>
<a href="" class="btn large primary">Download Bootstrap ZIP &raquo;</a>
<small>
<a href="">Visit project page on Github &raquo;</a><br />
(Current version: 1.0.0)
@ -954,6 +954,18 @@
<a href="#" class="btn small primary">Primary action</a>
<a href="#" class="btn small">Action</a>
</div>
<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>button</code> elements.</p>
<h4>Links</h4>
<div class="well">
<a href="#" class="btn large primary disabled">Primary action</a>
<a href="#" class="btn large disabled">Action</a>
</div>
<h4>Buttons</h4>
<div class="well">
<button class="btn large primary" disabled>Primary action</button>
<button class="btn large" disabled>Action</button>
</div>
</div>
</div>
</section>

View File

@ -89,7 +89,7 @@ a {
}
&.large {
font-size: 16px;
line-height: 30px;
line-height: 28px;
.border-radius(6px);
}
&.small {
@ -97,6 +97,12 @@ a {
padding-left: 9px;
font-size: 11px;
}
&:disabled,
&.disabled {
background-image: none;
.opacity(65);
cursor: default;
}
}
// Help Firefox not be a douche about adding extra padding to buttons
button.btn,