github.com/kardianos/nomad@v0.1.3-0.20151022182107-b13df73ee850/website/source/assets/stylesheets/_buttons.scss (about)

     1  //
     2  // Button Styles
     3  // --------------------------------------------------
     4  
     5  .h-btn{
     6  	display: inline-block;
     7  	background-color: transparent;
     8  	color: $black;
     9  	@include transition(color .3s ease-in-out);
    10  	//@include btn-shadow();
    11  	font-family: $font-family-blanc-reg;
    12  	text-transform: uppercase;
    13  	border-radius: 3px;
    14  
    15  	&.has-caret{
    16  		span.h-caret{
    17  			display: inline-block;
    18  			width: 8px;
    19  			height: 12px;
    20  			margin-left: 10px;
    21  			@include transition(all 300ms ease-in);
    22  		}
    23  	}
    24  
    25  	&.lrg{
    26  		font-size: $font-size-reg;
    27  		padding: 10px 24px;
    28  	}
    29  
    30  	&.sml{
    31  		padding: 8px 14px;
    32  		font-size: $font-size-reg - 2;
    33  	    line-height: 14px;
    34  
    35  		&.has-caret{
    36  			span.h-caret{
    37  				background-size: 6px 9px !important;
    38  				margin-bottom: -2px;
    39  				margin-right: -3px;
    40  			}
    41  		}
    42  	}
    43  
    44  	&.light{
    45  		color: $green-light;
    46  
    47  		&.has-border{
    48  			border: 2px solid $green-light;
    49  		}
    50  
    51  		&.has-caret{
    52  			span.h-caret{
    53  				background: image-url('../images/caret-light.png') 0 0 no-repeat;
    54  				@include img-retina("../images/caret-light.png", "../images/caret-light@2x.png", 8px, 12px);
    55  			}
    56  		}
    57  	}
    58  
    59  	&.green{
    60  		color: $green;
    61  
    62  		&.has-border{
    63  			border: 2px solid $green;
    64  		}
    65  
    66  		span.h-caret{
    67  			background: image-url('../images/caret-green.png') 0 0 no-repeat;
    68  			@include img-retina("../images/caret-green.png", "../images/caret-green@2x.png", 8px, 12px);
    69  		}
    70  
    71  		&.fill{
    72  			background-color: $green;
    73  			color: $white;
    74  
    75  			span.h-caret{
    76  				background: image-url('../images/caret-white.png') 0 0 no-repeat;
    77  				@include img-retina("../images/caret-white.png", "../images/caret-white@2x.png", 8px, 12px);
    78  			}
    79  		}
    80  	}
    81  
    82  	&.gray{
    83  		color: $blue-light;
    84  
    85  		&.border{
    86  			border: 2px solid $blue-light;
    87  		}
    88  
    89  		&.fill{
    90  			background-color: $blue-light;
    91  			color: $white;
    92  
    93  			span.h-caret{
    94  				background: image-url('../images/caret-white.png') 0 0 no-repeat;
    95  				@include img-retina("../images/caret-white.png", "../images/caret-white@2x.png", 8px, 12px);
    96  			}
    97  		}
    98  	}
    99  
   100  	&.dark{
   101  		color: $green-dark;
   102  
   103  		&.border{
   104  			border: 2px solid $green-dark;
   105  		}
   106  	}
   107  
   108  	&:hover{
   109  		text-decoration: none;
   110  		@include transition(color 200ms ease-in);
   111  
   112  		&.has-caret{
   113  			span.h-caret{
   114  				@include translate(4px, 0);
   115  				@include transition(all 200ms ease-in);
   116  			}
   117  		}
   118  	}
   119  }