_button.scss (1851B)
1 /// 2 /// Dimension by HTML5 UP 3 /// html5up.net | @ajlkn 4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 /// 6 7 /* Button */ 8 9 input[type="submit"], 10 input[type="reset"], 11 input[type="button"], 12 button, 13 .button { 14 @include vendor('appearance', 'none'); 15 @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out, color #{_duration(transition)} ease-in-out'); 16 background-color: transparent; 17 border-radius: _size(border-radius); 18 border: 0; 19 box-shadow: inset 0 0 0 _size(border-width) _palette(border); 20 color: _palette(fg-bold) !important; 21 cursor: pointer; 22 display: inline-block; 23 font-size: 0.8rem; 24 font-weight: _font(weight); 25 height: _size(element-height); 26 letter-spacing: _font(letter-spacing); 27 line-height: _size(element-height); 28 outline: 0; 29 padding: 0 1.25rem 0 (1.25rem + (_font(letter-spacing) * 0.5)); 30 text-align: center; 31 text-decoration: none; 32 text-transform: uppercase; 33 white-space: nowrap; 34 35 &:hover { 36 background-color: _palette(border-bg); 37 } 38 39 &:active { 40 background-color: _palette(border-bg-alt); 41 } 42 43 &.icon { 44 &:before { 45 margin-right: 0.5em; 46 } 47 } 48 49 &.fit { 50 width: 100%; 51 } 52 53 &.small { 54 font-size: 0.6rem; 55 height: (_size(element-height) * 0.75); 56 line-height: (_size(element-height) * 0.75); 57 } 58 59 &.primary { 60 background-color: _palette(fg-bold); 61 color: _palette(bg) !important; 62 font-weight: _font(weight-bold); 63 64 &:hover { 65 } 66 67 &:active { 68 } 69 } 70 71 &.disabled, 72 &:disabled { 73 @include vendor('pointer-events', 'none'); 74 cursor: default; 75 opacity: 0.25; 76 } 77 } 78 79 input[type="submit"], 80 input[type="reset"], 81 input[type="button"], 82 button { 83 line-height: calc(#{_size(element-height)} - 2px); 84 }