rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-17 14:54:30 +01:00
Code Issues Actions Packages Releases Activity

optimize btn for outputted code + line-height: normal for firefox with adjusted padding

Browse Source
This commit is contained in:
Jacob Thornton 2011-08-24 15:55:08 -07:00
parent 7d7156bff9
commit 0739583a46
4 changed files with 78 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
bootstrap-1.1.0.css vendored
View File

@ -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;

12
bootstrap-1.1.0.min.css vendored
View File

@ -48,15 +48,15 @@ div.container-fluid:after{clear:both;}
div.container-fluid div.sidebar{float:left;width:220px;}
div.container-fluid div.content{min-width:700px;max-width:1180px;margin-left:240px;}
a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a:hover{color:#0050a3;text-decoration:underline;}
.btn{cursor:pointer;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, #ffffff 0.25, #e6e6e6);background-image:-moz-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);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;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:18px;border:1px solid #ccc;border-bottom-color:#bbb;-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);-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;}
.btn.primary,.btn.danger{color:#fff;}.btn.primary:hover,.btn.danger:hover{color:#fff;}
.btn{cursor:pointer;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, #ffffff 0.25, #e6e6e6);background-image:-moz-linear-gradient(#ffffff, #ffffff 0.25, #e6e6e6);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:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-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);-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;}
.btn.primary,.btn.danger,.btn.danger:hover,.btn.primary: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));background-image:-moz-linear-gradient(#049cdb, #0064cd);background-image:-ms-linear-gradient(#049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(#049cdb, #0064cd);background-image:-o-linear-gradient(#049cdb, #0064cd);background-image:linear-gradient(#049cdb, #0064cd);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.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;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{background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;cursor:default;}
.btn:disabled{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;}
.btn:disabled{cursor:default;background-image:none;filter:alpha(opacity=65);-khtml-opacity:0.65;-moz-opacity:0.65;opacity:0.65;}
.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;}
p{font-size:13px;font-weight:normal;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;}
h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;}

26
lib/preboot.less
View File

@ -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 {

83
lib/scaffolding.less
View File

@ -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)
}
&.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;
}
&.disabled {
background-image: none;
.opacity(65);
cursor: default;
}
// this can't be included with the .disabled def because IE8 and below will drop it ;_;
&:disabled {
&.primary {
.btnColoring(@blue, @blueDark)
}
&.danger {
.btnColoring(lighten(@red, 15%), @red)
}
// Active and Disabled states
&.disabled {
cursor: default;
background-image: none;
.opacity(65);
cursor: default;
}
&:disabled {
// disabled pseudo can't be included with .disabled
// def because IE8 and below will drop it ;_;
cursor: default;
background-image: none;
.opacity(65);
}
&: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