Skip to content

B
bootstrap
Commit 0e9d7c1c authored by Jacob Thornton's avatar Jacob Thornton
Browse files
Options

update alert and button styling aproach

parent 50f484ee
Expand all Show whitespace changes
Inline Side-by-side
Showing with 382 additions and 349 deletions
bootstrap-1.1.0.css
View file @ 0e9d7c1c
This diff is collapsed.
bootstrap-1.1.0.min.css
View file @ 0e9d7c1c
This diff is collapsed.
docs/index.html
View file @ 0e9d7c1c
...@@ -859,13 +859,17 @@ ...@@ -859,13 +859,17 @@
<div class="span4 columns"> <div class="span4 columns">
<h2>Buttons</h2> <h2>Buttons</h2>
<p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p> <p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
<p>All buttons default to a light gray style, but a blue <code>.primary</code> class and a red <code>.danger</code> class is available. Plus, rolling your own styles is easy peasy.</p> <p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class. Plus, rolling your own styles is easy peasy.</p>
</div> </div>
<div class="span12 columns"> <div class="span12 columns">
<h3>Example buttons</h3> <h3>Example buttons</h3>
<p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, and select <code>&lt;input&gt;</code> elements. Here’s how it looks:</p> <p>Button styles can be applied to anything with the <code>.btn</code> applied. Typically you’ll want to apply these to only <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, and select <code>&lt;input&gt;</code> elements. Here’s how it looks:</p>
<div class="well" style="padding: 14px 19px;"> <div class="well" style="padding: 14px 19px;">
<button type="submit" class="btn primary">Submit</button>&nbsp;<button type="submit" class="btn">Cancel</button>&nbsp;<button class="btn danger">Delete</button> <button class="btn primary">Primary</button>
<button class="btn">Default</button>
<button class="btn info">Info</button>
<button class="btn success">Success</button>
<button class="btn danger">Danger</button>
</div> </div>
<h3>Alternate sizes</h3> <h3>Alternate sizes</h3>
<p>Fancy larger or smaller buttons? Have at it!</p> <p>Fancy larger or smaller buttons? Have at it!</p>
...@@ -1077,15 +1081,15 @@ ...@@ -1077,15 +1081,15 @@
<a class="close" href="#">&times;</a> <a class="close" href="#">&times;</a>
<p><strong>Oh snap!</strong> Change this and that and try again.</p> <p><strong>Oh snap!</strong> Change this and that and try again.</p>
</div> </div>
<div class="alert alert-error"> <div class="alert error">
<a class="close" href="#">&times;</a> <a class="close" href="#">&times;</a>
<p><strong>Holy gaucamole!</strong> Best check yo self, you’re not looking too good.</p> <p><strong>Holy gaucamole!</strong> Best check yo self, you’re not looking too good.</p>
</div> </div>
<div class="alert alert-success"> <div class="alert success">
<a class="close" href="#">&times;</a> <a class="close" href="#">&times;</a>
<p><strong>Well done!</strong> You successfully read this alert message.</p> <p><strong>Well done!</strong> You successfully read this alert message.</p>
</div> </div>
<div class="alert alert-info"> <div class="alert info">
<a class="close" href="#">&times;</a> <a class="close" href="#">&times;</a>
<p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p> <p><strong>Heads up!</strong> This is an alert that needs your attention, but it’s not a huge priority just yet.</p>
</div> </div>
......
lib/patterns.less
View file @ 0e9d7c1c
...@@ -288,21 +288,96 @@ footer { ...@@ -288,21 +288,96 @@ footer {
} }
} }
// BUTTON STYLES
// -------------
// ERROR STYLES
// ------------
// Setup a mixin to colorize different alerts // Base .btn styles
.alertTheme(@primaryColor, @secondaryColor) { .btn {
#gradient > .vertical(@primaryColor, @secondaryColor); // Button Base
text-shadow: 0 -1px 0 rgba(0,0,0,.25); cursor: pointer;
border-color: darken(@secondaryColor, 10%) darken(@secondaryColor, 10%) darken(@secondaryColor, 15%); display: inline-block;
border-color: rgba(0,0,0,.05) rgba(0,0,0,.075) rgba(0,0,0,.125); #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
// ------------
// Base alert styles // Base alert styles
.alert { .alert {
.alertTheme(#fceec1, #eedc94); .gradientBar(#fceec1, #eedc94); // warning by default
margin-bottom: @baseline; margin-bottom: @baseline;
padding: 7px 14px; padding: 7px 14px;
color: @grayDark; color: @grayDark;
...@@ -311,6 +386,7 @@ footer { ...@@ -311,6 +386,7 @@ footer {
border-style: solid; border-style: solid;
.border-radius(4px); .border-radius(4px);
.box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); .box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
// Remove extra margin from content // Remove extra margin from content
h5 { h5 {
line-height: @baseline; line-height: @baseline;
...@@ -323,26 +399,11 @@ footer { ...@@ -323,26 +399,11 @@ footer {
margin-bottom: 2px; margin-bottom: 2px;
line-height: 28px; line-height: 28px;
} }
// Provide actions with buttons
.btn { .btn {
// Provide actions with buttons
.box-shadow(0 1px 0 rgba(255,255,255,.25)); .box-shadow(0 1px 0 rgba(255,255,255,.25));
} }
} .close {
// 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; float: right;
margin-top: -2px; margin-top: -2px;
color: @black; color: @black;
...@@ -355,35 +416,43 @@ footer { ...@@ -355,35 +416,43 @@ footer {
text-decoration: none; text-decoration: none;
.opacity(40); .opacity(40);
} }
} }
// Block-level alerts
.alert-block { &.alert-block,
&.alert-block:hover {
background-image: none; background-image: none;
background-color: lighten(#fceec1, 5%); background-color: lighten(#fceec1, 5%);
padding: 14px; padding: 14px;
border-color: #fceec1; border-color: #fceec1;
.box-shadow(none); .box-shadow(none);
p { p {
margin-right: 30px; margin-right: 30px;
} }
.alert-actions { .alert-actions {
margin-top: 5px; margin-top: 5px;
} }
} &.error,
.alert-block.error { &.success,
&.info {
color: @grayDark;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
&.error {
background-color: lighten(#f56a66, 25%); background-color: lighten(#f56a66, 25%);
border-color: lighten(#f56a66, 20%); border-color: lighten(#f56a66, 20%);
} }
.alert-block.success { &.success {
background-color: lighten(#62c462, 30%); background-color: lighten(#62c462, 30%);
border-color: lighten(#62c462, 25%); border-color: lighten(#62c462, 25%);
} }
.alert-block.info { &.info {
background-color: lighten(#6bd0ee, 25%); background-color: lighten(#6bd0ee, 25%);
border-color: lighten(#6bd0ee, 20%); border-color: lighten(#6bd0ee, 20%);
}
}
} }
// NAVIGATION // NAVIGATION
// ---------- // ----------
......
lib/preboot.less
View file @ 0e9d7c1c
...@@ -170,14 +170,6 @@ ...@@ -170,14 +170,6 @@
column-gap: @columnGap; 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) // Add an alphatransparency value to any background or border color (via Elyse Holladay)
#translucent { #translucent {
.background(@color: @white, @alpha: 1) { .background(@color: @white, @alpha: 1) {
...@@ -189,6 +181,49 @@ ...@@ -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 // Gradients
#gradient { #gradient {
.horizontal (@startColor: #555, @endColor: #333) { .horizontal (@startColor: #555, @endColor: #333) {
......
lib/scaffolding.less
View file @ 0e9d7c1c
...@@ -116,89 +116,3 @@ a { ...@@ -116,89 +116,3 @@ a {
text-decoration: underline; 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;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment