53960d9c25
This port adds semantic win and color customization to your blueprint button styles. It also let's you choose whether you want to float them right, left, or leave them inline-block. To install this plugin into your project run the following command. compass -f blueprint -p buttons Or if you have a rails project: compass --rails -f blueprint -p buttons
50 lines
1.6 KiB
Sass
50 lines
1.6 KiB
Sass
@import compass/utilities/general/float.sass
|
|
@import blueprint/modules/buttons.sass
|
|
|
|
//
|
|
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.
|
|
+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/modules/buttons.sass
|
|
// the last one defaults to a shade lighter than the border color.
|
|
+button-colors
|
|
+button-hover-colors
|
|
+button-active-colors
|
|
|
|
button
|
|
// The +button-button mixin is just like the +anchor-button mixin, but for <button> elements.
|
|
+button-button("left")
|
|
+button-colors
|
|
+button-hover-colors
|
|
+button-active-colors
|
|
|
|
// We can change the colors for buttons of certain classes, etc.
|
|
a.positive, button.positive
|
|
:color #529214
|
|
+button-hover-colors(#529214, #E6EFC2, #C6D880)
|
|
+button-active-colors(#FFF, #529214, #529214)
|
|
|
|
a.negative, button.negative
|
|
:color #D12F19
|
|
+button-hover-colors(#D12F19, #FBE3E4, #FBC2C4)
|
|
+button-active-colors(#FFF, #D12F19, #D12F19)
|
|
|