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 Hide 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 @@
<div class="span4 columns">
<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>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 class="span12 columns">
<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>
<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>
<h3>Alternate sizes</h3>
<p>Fancy larger or smaller buttons? Have at it!</p>
......@@ -1077,15 +1081,15 @@
<a class="close" href="#">&times;</a>
<p><strong>Oh snap!</strong> Change this and that and try again.</p>
</div>
<div class="alert alert-error">
<div class="alert error">
<a class="close" href="#">&times;</a>
<p><strong>Holy gaucamole!</strong> Best check yo self, you’re not looking too good.</p>
</div>
<div class="alert alert-success">
<div class="alert success">
<a class="close" href="#">&times;</a>
<p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>
<div class="alert alert-info">
<div class="alert info">
<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>
</div>
......
lib/patterns.less
View file @ 0e9d7c1c
......@@ -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);
// ERROR STYLES
// ------------
&: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);
}
// 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);
// 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
.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);
}
}
// 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;
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);
}
}
.alert-actions {
margin-top: 5px;
&.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%);
}
}
}
.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%);
}
// NAVIGATION
// ----------
......
lib/preboot.less
View file @ 0e9d7c1c
......@@ -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) {
......
lib/scaffolding.less
View file @ 0e9d7c1c
......@@ -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
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