Permalink
Browse files

add delete button + give .btn cursor:pointer

  • Loading branch information...
fat committed Aug 23, 2011
1 parent 411b90e commit 0bfce13983ada3029d98916b01703d5c0cef2104
Showing with 49 additions and 46 deletions.
  1. +25 −20 bootstrap-1.1.0.css
  2. +5 −4 bootstrap-1.1.0.min.css
  3. +2 −2 docs/index.html
  4. +17 −20 lib/scaffolding.less
View
@@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Mon Aug 22 22:02:17 PDT 2011
+ * Date: Mon Aug 22 23:50:35 PDT 2011
*/
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -382,6 +382,7 @@ a:hover {
text-decoration: underline;
}
.btn {
+ cursor: pointer;
display: inline-block;
background-color: #e6e6e6;
background-repeat: no-repeat;
@@ -404,13 +405,22 @@ a:hover {
-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);
+ -webkit-transition: 0.1s linear all;
+ -moz-transition: 0.1s linear all;
+ transition: 0.1s linear all;
}
.btn:hover {
background-position: 0 -15px;
color: #333;
text-decoration: none;
}
-.primary {
+.btn.primary, .btn.danger {
+ color: #fff;
+}
+.btn.primary:hover, .btn.danger:hover {
+ color: #fff;
+}
+.btn.primary {
background-color: #0064cd;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
@@ -420,27 +430,23 @@ a:hover {
background-image: -webkit-linear-gradient(#049cdb, #0064cd);
background-image: -o-linear-gradient(#049cdb, #0064cd);
background-image: linear-gradient(#049cdb, #0064cd);
- color: #fff;
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
- border: 1px solid #004b9a;
- border-bottom-color: #003f81;
-}
-.primary:hover {
- color: #fff;
-}
-.btn {
- -webkit-transition: 0.1s linear all;
- -moz-transition: 0.1s linear all;
- transition: 0.1s linear all;
-}
-.btn.primary {
- color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
border-color: #0064cd #0064cd #003f81;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
-.btn.primary:hover {
- color: #fff;
+.btn.danger {
+ background-color: #9d261d;
+ background-repeat: repeat-x;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#d83a2e), to(#9d261d));
+ background-image: -moz-linear-gradient(#d83a2e, #9d261d);
+ background-image: -ms-linear-gradient(#d83a2e, #9d261d);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d83a2e), color-stop(100%, #9d261d));
+ background-image: -webkit-linear-gradient(#d83a2e, #9d261d);
+ background-image: -o-linear-gradient(#d83a2e, #9d261d);
+ background-image: linear-gradient(#d83a2e, #9d261d);
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ border-color: #9d261d #9d261d #5c1611;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.btn.large {
font-size: 16px;
@@ -469,7 +475,6 @@ a:hover {
-moz-opacity: 0.65;
opacity: 0.65;
cursor: default;
- color: #fff;
}
.btn:active {
-webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -858,13 +858,13 @@ <h2>Stacked forms</h2>
<div class="span4 columns">
<h2>Buttons</h2>
<p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
- <p>All buttons default to a light gray style, but a blue <code>.primary</code> class is available. Plus, rolling your own styles is easy peasy.</p>
+ <p>All buttons default to a light gray style, but a blue <code>.primary</code> class and a red <code>.danger</code> class is available. Plus, rolling your own styles is easy peasy.</p>
</div>
<div class="span12 columns">
<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>
<div class="well" style="padding: 14px 19px;">
- <button type="submit" class="btn primary">Submit</button>&nbsp;<button type="submit" class="btn">Cancel</button>
+ <button type="submit" class="btn primary">Submit</button>&nbsp;<button type="submit" class="btn">Cancel</button>&nbsp;<button class="btn danger">Delete</button>
</div>
<h3>Alternate sizes</h3>
<p>Fancy larger or smaller buttons? Have at it!</p>
View
@@ -95,7 +95,16 @@ a {
}
// Buttons
+.btnColor(@primaryColor, @secondaryColor) {
+ #gradient > .vertical(@primaryColor, @secondaryColor);
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+ border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
+}
+
.btn {
+ // .button(#1174C6);
+ cursor: pointer;
display: inline-block;
#gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%));
padding: 4px 14px;
@@ -113,31 +122,20 @@ a {
color: #333;
text-decoration: none;
}
-}
-.primary {
- #gradient > .vertical(#049CDB, #0064CD);
- color: #fff;
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
- border: 1px solid darken(#0064CD, 10%);
- border-bottom-color: darken(#0064CD, 15%);
- &:hover {
- color: #fff;
- }
-}
-
-.btn {
- // .button(#1174C6);
.transition(.1s linear all);
- &.primary {
- // #gradient > .vertical(@blue, @blueDark);
+ &.primary,
+ &.danger {
color: #fff;
- 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 {
color: #fff;
}
}
+ &.primary {
+ .btnColor(@blue, @blueDark)
+ }
+ &.danger {
+ .btnColor(lighten(@red, 15%), @red)
+ }
&.large {
font-size: 16px;
line-height: 28px;
@@ -159,7 +157,6 @@ a {
background-image: none;
.opacity(65);
cursor: default;
- color: #fff;
}
&:active {
@shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05);

0 comments on commit 0bfce13

Please sign in to comment.