+
×
Heads up! This is an alert that needs your attention, but it’s not a huge priority just yet.
diff --git a/lib/patterns.less b/lib/patterns.less
index 466727cc42..2d946e39db 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -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
// ----------
diff --git a/lib/preboot.less b/lib/preboot.less
index 964f677a68..cec847852d 100644
--- a/lib/preboot.less
+++ b/lib/preboot.less
@@ -170,14 +170,6 @@
column-gap: @columnGap;
}
-// Buttons
-.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 {
.background(@color: @white, @alpha: 1) {
@@ -189,6 +181,49 @@
}
}
+// Gradient Bar Colors for buttons and allerts
+.gradientBar(@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%);
+}
+
+// Shared colors for buttons and alerts
+
+.btn,
+.alert {
+
+ &.danger,
+ &.danger:hover,
+ &.error,
+ &.error:hover,
+ &.success,
+ &.success:hover,
+ &.info,
+ &.info:hover {
+ color: @white
+ }
+
+ &.danger,
+ &.danger:hover,
+ &.error,
+ &.error:hover {
+ .gradientBar(#f56a66, #d6463e);
+ }
+
+ &.success,
+ &.success:hover {
+ .gradientBar(#62c462, #57a957);
+ }
+
+ &.info,
+ &.info:hover {
+ .gradientBar(#6bd0ee, #36b3d9);
+ }
+
+}
+
// Gradients
#gradient {
.horizontal (@startColor: #555, @endColor: #333) {
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index f5bc68868c..ad5cc7644d 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -115,90 +115,4 @@ a {
color: @linkColorHover;
text-decoration: underline;
}
-}
-
-// Buttons
-.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);
-
- // Colored Button Types
- &.primary,
- &.danger,
- &.danger:hover,
- &.primary:hover {
- color: #fff;
- }
-
- &.primary {
- .btnColoring(@blue, @blueDark)
- }
-
- &.danger {
- .btnColoring(lighten(@red, 15%), @red)
- }
-
- // 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);
- }
-
- // 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;
- }
-}
+}
\ No newline at end of file