mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-27 14:46:01 +03:00
update alert and button styling aproach
This commit is contained in:
Jacob Thornton
+132
-63
@@ -288,21 +288,96 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
// BUTTON STYLES
|
||||
// -------------
|
||||
|
||||
|
||||
// Base .btn styles
|
||||
.btn {
|
||||
// Button Base
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
#gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%));
|
||||
padding: 5px 14px 6px;
|
||||
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
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);
|
||||
|
||||
// Active and Disabled states
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
background-image: none;
|
||||
.opacity(65);
|
||||
}
|
||||
|
||||
&: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);
|
||||
}
|
||||
|
||||
// Primary Button Type
|
||||
&.primary,
|
||||
&.primary:hover {
|
||||
color:#fff;
|
||||
.gradientBar(@blue, @blueDark)
|
||||
}
|
||||
|
||||
|
||||
// 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
|
||||
button.btn,
|
||||
input[type=submit].btn {
|
||||
&::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// ERROR STYLES
|
||||
// ------------
|
||||
|
||||
// Setup a mixin to colorize different alerts
|
||||
.alertTheme(@primaryColor, @secondaryColor) {
|
||||
#gradient > .vertical(@primaryColor, @secondaryColor);
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
||||
border-color: darken(@secondaryColor, 10%) darken(@secondaryColor, 10%) darken(@secondaryColor, 15%);
|
||||
border-color: rgba(0,0,0,.05) rgba(0,0,0,.075) rgba(0,0,0,.125);
|
||||
}
|
||||
|
||||
// Base alert styles
|
||||
.alert {
|
||||
.alertTheme(#fceec1, #eedc94);
|
||||
.gradientBar(#fceec1, #eedc94); // warning by default
|
||||
margin-bottom: @baseline;
|
||||
padding: 7px 14px;
|
||||
color: @grayDark;
|
||||
@@ -311,6 +386,7 @@ footer {
|
||||
border-style: solid;
|
||||
.border-radius(4px);
|
||||
.box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
|
||||
|
||||
// Remove extra margin from content
|
||||
h5 {
|
||||
line-height: @baseline;
|
||||
@@ -323,66 +399,59 @@ footer {
|
||||
margin-bottom: 2px;
|
||||
line-height: 28px;
|
||||
}
|
||||
// Provide actions with buttons
|
||||
.btn {
|
||||
// Provide actions with buttons
|
||||
.box-shadow(0 1px 0 rgba(255,255,255,.25));
|
||||
}
|
||||
}
|
||||
// Alternate alerts
|
||||
.alert-error,
|
||||
.alert-success,
|
||||
.alert-info,
|
||||
.alert-error h5,
|
||||
.alert-success h5,
|
||||
.alert-info h5 {
|
||||
color: #fff;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
|
||||
}
|
||||
.alert-error { .alertTheme(#f56a66, #d6463e); }
|
||||
.alert-success { .alertTheme(#62c462, #57a957); }
|
||||
.alert-info { .alertTheme(#6bd0ee, #36b3d9); }
|
||||
// Close action
|
||||
.close {
|
||||
float: right;
|
||||
margin-top: -2px;
|
||||
color: @black;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
||||
.opacity(20);
|
||||
&:hover {
|
||||
.close {
|
||||
float: right;
|
||||
margin-top: -2px;
|
||||
color: @black;
|
||||
text-decoration: none;
|
||||
.opacity(40);
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
||||
.opacity(20);
|
||||
&:hover {
|
||||
color: @black;
|
||||
text-decoration: none;
|
||||
.opacity(40);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Block-level alerts
|
||||
.alert-block {
|
||||
background-image: none;
|
||||
background-color: lighten(#fceec1, 5%);
|
||||
padding: 14px;
|
||||
border-color: #fceec1;
|
||||
.box-shadow(none);
|
||||
p {
|
||||
margin-right: 30px;
|
||||
}
|
||||
.alert-actions {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
.alert-block.error {
|
||||
background-color: lighten(#f56a66, 25%);
|
||||
border-color: lighten(#f56a66, 20%);
|
||||
}
|
||||
.alert-block.success {
|
||||
background-color: lighten(#62c462, 30%);
|
||||
border-color: lighten(#62c462, 25%);
|
||||
}
|
||||
.alert-block.info {
|
||||
background-color: lighten(#6bd0ee, 25%);
|
||||
border-color: lighten(#6bd0ee, 20%);
|
||||
}
|
||||
|
||||
&.alert-block,
|
||||
&.alert-block:hover {
|
||||
background-image: none;
|
||||
background-color: lighten(#fceec1, 5%);
|
||||
padding: 14px;
|
||||
border-color: #fceec1;
|
||||
.box-shadow(none);
|
||||
|
||||
p {
|
||||
margin-right: 30px;
|
||||
}
|
||||
.alert-actions {
|
||||
margin-top: 5px;
|
||||
}
|
||||
&.error,
|
||||
&.success,
|
||||
&.info {
|
||||
color: @grayDark;
|
||||
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
||||
}
|
||||
&.error {
|
||||
background-color: lighten(#f56a66, 25%);
|
||||
border-color: lighten(#f56a66, 20%);
|
||||
}
|
||||
&.success {
|
||||
background-color: lighten(#62c462, 30%);
|
||||
border-color: lighten(#62c462, 25%);
|
||||
}
|
||||
&.info {
|
||||
background-color: lighten(#6bd0ee, 25%);
|
||||
border-color: lighten(#6bd0ee, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// NAVIGATION
|
||||
// ----------
|
||||
|
||||
Reference in New Issue
Block a user