ru-se.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

_mixins.scss (825B)

      1 /*
      2  * Button mixin- creates a button effect with correct
      3  * highlights/shadows, based on a base color.
      4  */
      5 @mixin button( $button-color, $button-text-color: #fff ) {
      6 	background: $button-color;
      7 	border-color: $button-color;
      8 	color: $button-text-color;
      9 
     10 	&:hover,
     11 	&:focus {
     12 		background: lighten( $button-color, 3% );
     13 		border-color: darken( $button-color, 3% );
     14 		color: $button-text-color;
     15 	}
     16 
     17 	&:focus {
     18 		box-shadow:
     19 			0 0 0 1px #fff,
     20 			0 0 0 3px $button-color;
     21 	}
     22 
     23 	&:active {
     24 		background: darken( $button-color, 5% );
     25 		border-color: darken( $button-color, 5% );
     26 		color: $button-text-color;
     27 	}
     28 
     29 	&.active,
     30 	&.active:focus,
     31 	&.active:hover {
     32 		background: $button-color;
     33 		color: $button-text-color;
     34 		border-color: darken( $button-color, 15% );
     35 		box-shadow: inset 0 2px 5px -3px darken( $button-color, 50% );
     36 	}
     37 }