Forked from chantastic/SassMeister-input-HTML.haml
Created
December 10, 2013 00:50
-
-
Save kevinthompson/7883959 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
%form.comment__form | |
%button Submit | |
%form.product__form | |
%button Submit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ---- | |
// Sass (v3.3.0.rc.1) | |
// Compass (v0.13.alpha.10) | |
// ---- | |
// MIXINS | |
@mixin btn-border($color) | |
border: 1px solid darken($color, 10%) | |
border-top-color: darken($color, 5%) | |
border-bottom-width: 3px | |
box-shadow: inset 0 1px 0 lighten($color, 15%) | |
@mixin mouse_interactions($color) | |
&:hover | |
background-color: lighten($color, 15%) | |
&:active | |
background-color: darken($color, 15%) | |
@mixin default_button($color) | |
+btn-border($color) | |
+mouse_interactions($color) | |
background: $color | |
border-radius: 3px | |
// BTN - BASE RESET | |
%btn | |
border: none | |
padding: 10px 20px | |
+default_button(lightgray) | |
&.btn--primary | |
+default_button(blue) | |
color: white | |
&.btn--warning | |
+default_button(orange) | |
&.btn--danger | |
+default_button(red) | |
color: white | |
&.btn--link | |
+default_button(transparent) | |
color: blue | |
font-weight: bold | |
form | |
@at-root .comment__#{&} | |
button, .button | |
@extend %btn.btn--primary | |
@at-root .product__#{&} | |
button, .button | |
@extend %btn.btn--warning |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.comment__form button, .comment__form .button { | |
border: 1px solid #0000cc; | |
border-top-color: #0000e6; | |
border-bottom-width: 3px; | |
box-shadow: inset 0 1px 0 #4d4dff; | |
background: blue; | |
border-radius: 3px; | |
color: white; | |
} | |
.comment__form button:hover, .comment__form .button:hover { | |
background-color: #4d4dff; | |
} | |
.comment__form button:active, .comment__form .button:active { | |
background-color: #0000b3; | |
} | |
.product__form button, .product__form .button { | |
border: 1px solid #cc8400; | |
border-top-color: #e69500; | |
border-bottom-width: 3px; | |
box-shadow: inset 0 1px 0 #ffc04d; | |
background: orange; | |
border-radius: 3px; | |
} | |
.product__form button:hover, .product__form .button:hover { | |
background-color: #ffc04d; | |
} | |
.product__form button:active, .product__form .button:active { | |
background-color: #b37300; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<form class='comment__form'> | |
<button>Submit</button> | |
</form> | |
<form class='product__form'> | |
<button>Submit</button> | |
</form> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment