Created
October 20, 2014 23:20
-
-
Save lightstrike/ac6d7446fc514a750f9c to your computer and use it in GitHub Desktop.
Adapting base Parsley CSS into SASS mixins
This file contains 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
/* Adapting base Parsley CSS into SASS mixins - http://parsleyjs.org/src/parsley.css */ | |
/* | |
Use this mixin to define success and error classes | |
Default class names: parsley-success, parsley-error | |
*/ | |
@mixin parsleyValidated($name, $textColor, $bgColor, $borderColor) { | |
input.#{$name}, | |
select.#{$name}, | |
textarea.#{$name} { | |
color: $textColor; | |
background-color: $bgColor; | |
border: 1px solid $borderColor; | |
} | |
} | |
/* | |
Uncomment to use default Parsley classes | |
@include parsleyValidated('parsley-success', #468847, #DFF0D8, #D6E9C6); | |
@include parsleyValidated('parsley-error', #B94A48, #F2DEDE, #EED3D7); | |
*/ | |
/* use this mixin to define error list styling */ | |
@mixin parsleyErrors($name:'parsley-errors-list', $margin:2px 0 3px 0, $fontSize:0.9em) { | |
.#{$name} { | |
margin: 2px 0 3px 0; | |
padding: 0; | |
list-style-type: none; | |
font-size: 0.9em; | |
line-height: 0.9em; | |
opacity: 0; | |
-moz-opacity: 0; | |
-webkit-opacity: 0; | |
/* add optional transitions boolean */ | |
transition: all .3s ease-in; | |
-o-transition: all .3s ease-in; | |
-ms-transition: all .3s ease-in; | |
-moz-transition: all .3s ease-in; | |
-webkit-transition: all .3s ease-in; | |
} | |
.#{$name}.filled { | |
opacity: 1; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment