d045e1be56
roots-actions.php: added responsive css framework file roots-options.php: changed default css classes for bootstrap v2.0.0 roots-scripts.php: updated less to v1.2.1, changed the load order and added new scripts for bootstrap v2.0.0 Added all of the new css, js, less asset files and updated all of the previous ones for bootstrap v2.0.0
166 lines
3.4 KiB
Plaintext
166 lines
3.4 KiB
Plaintext
// BUTTON STYLES
|
|
// -------------
|
|
|
|
|
|
// Base styles
|
|
// --------------------------------------------------
|
|
|
|
// Core
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 4px 10px 4px;
|
|
font-size: @baseFontSize;
|
|
line-height: @baseLineHeight;
|
|
color: @grayDark;
|
|
text-align: center;
|
|
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
|
#gradient > .vertical-three-colors(@white, @white, 25%, darken(@white, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
|
|
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);
|
|
cursor: pointer;
|
|
|
|
// Give IE7 some love
|
|
.ie7-restore-left-whitespace();
|
|
}
|
|
|
|
// Hover state
|
|
.btn:hover {
|
|
color: @grayDark;
|
|
text-decoration: none;
|
|
background-color: darken(@white, 10%);
|
|
background-position: 0 -15px;
|
|
|
|
// transition is only when going to hover, otherwise the background
|
|
// behind the gradient (there for IE<=9 fallback) gets mismatched
|
|
.transition(background-position .1s linear);
|
|
}
|
|
|
|
// Focus state for keyboard and accessibility
|
|
.btn:focus {
|
|
.tab-focus();
|
|
}
|
|
|
|
// Active state
|
|
.btn.active,
|
|
.btn:active {
|
|
background-image: none;
|
|
@shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
|
|
.box-shadow(@shadow);
|
|
background-color: darken(@white, 10%);
|
|
background-color: darken(@white, 15%) e("\9");
|
|
color: rgba(0,0,0,.5);
|
|
outline: 0;
|
|
}
|
|
|
|
// Disabled state
|
|
.btn.disabled,
|
|
.btn[disabled] {
|
|
cursor: default;
|
|
background-image: none;
|
|
background-color: darken(@white, 10%);
|
|
.opacity(65);
|
|
.box-shadow(none);
|
|
}
|
|
|
|
|
|
// Button Sizes
|
|
// --------------------------------------------------
|
|
|
|
// Large
|
|
.btn-large {
|
|
padding: 9px 14px;
|
|
font-size: @baseFontSize + 2px;
|
|
line-height: normal;
|
|
.border-radius(5px);
|
|
}
|
|
.btn-large .icon {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
// Small
|
|
.btn-small {
|
|
padding: 5px 9px;
|
|
font-size: @baseFontSize - 2px;
|
|
line-height: @baseLineHeight - 2px;
|
|
}
|
|
.btn-small .icon {
|
|
margin-top: -1px;
|
|
}
|
|
|
|
|
|
// Alternate buttons
|
|
// --------------------------------------------------
|
|
|
|
// Set text color
|
|
// -------------------------
|
|
.btn-primary,
|
|
.btn-primary:hover,
|
|
.btn-warning,
|
|
.btn-warning:hover,
|
|
.btn-danger,
|
|
.btn-danger:hover,
|
|
.btn-success,
|
|
.btn-success:hover,
|
|
.btn-info,
|
|
.btn-info:hover {
|
|
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
|
color: @white
|
|
}
|
|
// Provide *some* extra contrast for those who can get it
|
|
.btn-primary.active,
|
|
.btn-warning.active,
|
|
.btn-danger.active,
|
|
.btn-success.active,
|
|
.btn-info.active {
|
|
color: rgba(255,255,255,.75);
|
|
}
|
|
|
|
// Set the backgrounds
|
|
// -------------------------
|
|
.btn-primary {
|
|
.buttonBackground(@primaryButtonBackground, spin(@primaryButtonBackground, 20));
|
|
}
|
|
// Warning appears are orange
|
|
.btn-warning {
|
|
.buttonBackground(lighten(@orange, 15%), @orange);
|
|
}
|
|
// Danger and error appear as red
|
|
.btn-danger {
|
|
.buttonBackground(#ee5f5b, #bd362f);
|
|
}
|
|
// Success appears as green
|
|
.btn-success {
|
|
.buttonBackground(#62c462, #51a351);
|
|
}
|
|
// Info appears as a neutral blue
|
|
.btn-info {
|
|
.buttonBackground(#5bc0de, #2f96b4);
|
|
}
|
|
|
|
|
|
// Cross-browser Jank
|
|
// --------------------------------------------------
|
|
|
|
button.btn,
|
|
input[type="submit"].btn {
|
|
&::-moz-focus-inner {
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
// IE7 has some default padding on button controls
|
|
*padding-top: 2px;
|
|
*padding-bottom: 2px;
|
|
&.large {
|
|
*padding-top: 7px;
|
|
*padding-bottom: 7px;
|
|
}
|
|
&.small {
|
|
*padding-top: 3px;
|
|
*padding-bottom: 3px;
|
|
}
|
|
}
|