48 lines
1.7 KiB
SCSS
48 lines
1.7 KiB
SCSS
|
@import "compass/utilities/general/float";
|
||
|
|
@import "blueprint/buttons";
|
||
|
|
|
||
|
|
// Use the following HTML code to place the buttons on your site:
|
||
|
|
//
|
||
|
|
// <button type="submit" class="button positive">
|
||
|
|
// <img src="css/blueprint/plugins/buttons/icons/tick.png" alt=""/> Save
|
||
|
|
// </button>
|
||
|
|
//
|
||
|
|
// <a class="button" href="/password/reset/">
|
||
|
|
// <img src="css/blueprint/plugins/buttons/icons/key.png" alt=""/> Change Password
|
||
|
|
// </a>
|
||
|
|
//
|
||
|
|
// <a href="#" class="button negative">
|
||
|
|
// <img src="css/blueprint/plugins/buttons/icons/cross.png" alt=""/> Cancel
|
||
|
|
// </a>
|
||
|
|
|
||
|
|
a.button {
|
||
|
|
// you can pass "left" or "right" to +anchor-button to float it in that direction
|
||
|
|
// or you can pass no argument to leave it inline-block (cross browser safe!) within
|
||
|
|
// the flow of your page.
|
||
|
|
@include anchor-button(left);
|
||
|
|
// All the button color mixins take 4 optional arguments:
|
||
|
|
// font color, background color, border color, border highlight color
|
||
|
|
// the first three default to constants set in blueprint/buttons
|
||
|
|
// the last one defaults to a shade lighter than the border color.
|
||
|
|
@include button-colors;
|
||
|
|
@include button-hover-colors;
|
||
|
|
@include button-active-colors; }
|
||
|
|
|
||
|
|
button {
|
||
|
|
// The +button-button mixin is just like the +anchor-button mixin, but for <button> elements.
|
||
|
|
@include button-button(left);
|
||
|
|
@include button-colors;
|
||
|
|
@include button-hover-colors;
|
||
|
|
@include button-active-colors; }
|
||
|
|
|
||
|
|
// We can change the colors for buttons of certain classes, etc.
|
||
|
|
a.positive, button.positive {
|
||
|
|
color: #529214;
|
||
|
|
@include button-hover-colors(#529214, #e6efc2, #c6d880);
|
||
|
|
@include button-active-colors(white, #529214, #529214); }
|
||
|
|
|
||
|
|
a.negative, button.negative {
|
||
|
|
color: #d12f19;
|
||
|
|
@include button-hover-colors(#d12f19, #fbe3e4, #fbc2c4);
|
||
|
|
@include button-active-colors(white, #d12f19, #d12f19); }
|