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 }