mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-11 18:02:28 +03:00
optimize btn for outputted code + line-height: normal for firefox with adjusted padding
This commit is contained in:
+6
-20
@@ -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 {
|
||||
|
||||
+45
-38
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user