Permalink
Browse files

optimize btn for outputted code + line-height: normal for firefox wit…

…h adjusted padding
  • Loading branch information...
1 parent 7d7156b commit 0739583a46833b4813524e69726f79fe1b009542 @fat fat committed Aug 24, 2011
Showing with 69 additions and 76 deletions.
  1. +21 −21 bootstrap-1.1.0.css
  2. +6 −6 bootstrap-1.1.0.min.css
  3. +6 −20 lib/preboot.less
  4. +36 −29 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: Tue Aug 23 20:13:44 PDT 2011
+ * Date: Wed Aug 24 15:54:36 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).
@@ -297,11 +297,11 @@ a:hover {
background-image: -ms-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
background-image: -o-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
background-image: linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);
- padding: 4px 14px;
+ padding: 5px 14px 6px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
color: #333;
font-size: 13px;
- line-height: 18px;
+ line-height: normal;
border: 1px solid #ccc;
border-bottom-color: #bbb;
-webkit-border-radius: 4px;
@@ -319,10 +319,10 @@ a:hover {
color: #333;
text-decoration: none;
}
-.btn.primary, .btn.danger {
- color: #fff;
-}
-.btn.primary:hover, .btn.danger:hover {
+.btn.primary,
+.btn.danger,
+.btn.danger:hover,
+.btn.primary:hover {
color: #fff;
}
.btn.primary {
@@ -353,39 +353,39 @@ a:hover {
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;
- 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 {
+ cursor: default;
background-image: none;
filter: alpha(opacity=65);
-khtml-opacity: 0.65;
-moz-opacity: 0.65;
opacity: 0.65;
- cursor: default;
}
.btn:disabled {
+ cursor: default;
background-image: none;
filter: alpha(opacity=65);
-khtml-opacity: 0.65;
-moz-opacity: 0.65;
opacity: 0.65;
- cursor: default;
}
.btn:active {
-webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
}
+.btn.large {
+ font-size: 16px;
+ line-height: normal;
+ padding: 9px 14px 9px;
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+}
+.btn.small {
+ padding: 7px 9px 7px;
+ font-size: 11px;
+}
button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
padding: 0;
border: 0;
View

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

Oops, something went wrong.
View
@@ -171,26 +171,12 @@
}
// Buttons
-// .button(@color: #fff, @padding: 4px 14px, @textColor: #333, @textShadow: 0 1px 1px rgba(255,255,255,.75), @fontSize: 13px, @borderColor: rgba(0,0,0,.1), @borderRadius: 4px) {
-// display: inline-block;
-// #gradient > .vertical-three-colors(@color, @color, 0.25, darken(@color, 10%));
-// padding: @padding;
-// text-shadow: @textShadow;
-// color: @textColor;
-// font-size: @fontSize;
-// line-height: @baseline;
-// border: 1px solid;
-// border-color: #ccc #ccc #bbb;
-// border-color: borderColor borderColor fadein(@borderColor, 15%);
-// .border-radius(@borderRadius);
-// @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-// .box-shadow(@shadow);
-// &:hover {
-// background-position: 0 -15px;
-// color: @textColor;
-// text-decoration: none;
-// }
-// }
+.btnColoring(@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%);
+}
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent {
View
@@ -118,73 +118,80 @@ 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);
+ // Button Base
cursor: pointer;
display: inline-block;
#gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%));
- padding: 4px 14px;
+ padding: 5px 14px 6px;
text-shadow: 0 1px 1px rgba(255,255,255,.75);
color: #333;
font-size: 13px;
- line-height: @baseline;
+ line-height: normal;
border: 1px solid #ccc;
border-bottom-color: #bbb;
.border-radius(4px);
@shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
+
&:hover {
background-position: 0 -15px;
color: #333;
text-decoration: none;
}
+
+ // Transitions
.transition(.1s linear all);
+
+ // Colored Button Types
&.primary,
- &.danger {
+ &.danger,
+ &.danger:hover,
+ &.primary:hover {
color: #fff;
- &:hover {
- color: #fff;
- }
}
+
&.primary {
- .btnColor(@blue, @blueDark)
+ .btnColoring(@blue, @blueDark)
}
+
&.danger {
- .btnColor(lighten(@red, 15%), @red)
- }
- &.large {
- font-size: 16px;
- line-height: 28px;
- .border-radius(6px);
- }
- &.small {
- padding-right: 9px;
- padding-left: 9px;
- font-size: 11px;
+ .btnColoring(lighten(@red, 15%), @red)
}
+
+ // Active and Disabled states
&.disabled {
+ cursor: default;
background-image: none;
.opacity(65);
- cursor: default;
}
- // this can't be included with the .disabled def because IE8 and below will drop it ;_;
&:disabled {
+ // disabled pseudo can't be included with .disabled
+ // def because IE8 and below will drop it ;_;
+ cursor: default;
background-image: none;
.opacity(65);
- cursor: default;
}
+
&:active {
@shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05);
.box-shadow(@shadow);
}
+
+ // Button Sizes
+ &.large {
+ font-size: 16px;
+ line-height: normal;
+ padding: 9px 14px 9px;
+ .border-radius(6px);
+ }
+
+ &.small {
+ padding: 7px 9px 7px;
+ font-size: 11px;
+ }
+
}
// Help Firefox not be a jerk about adding extra padding to buttons

0 comments on commit 0739583

Please sign in to comment.