1button, .button, .submit { 2 font-size: 1em; 3 @include fontFamilyBold; 4 text-transform: none; 5 border-radius: 3px; 6 padding: .5rem 2rem .5rem; 7 height: auto; 8 border: 0; 9 overflow: hidden; 10 &:hover { 11 cursor: pointer; 12 } 13 &.disabled { 14 opacity: 0.2; 15 color: $btn__disabled-txt; 16 &:hover { 17 cursor: default; 18 background: transparent; 19 text-decoration: none; 20 } 21 } 22} 23 24.btn-primary { 25 color: $primebtn__text; 26 background: $primebtn__bg; 27 min-height: 40px; 28 &:hover { 29 background: lighten($primebtn__bg, 8%); 30 @include fastTransition-all; 31 } 32 &.disabled { 33 background: $btn__disabled-bg; 34 color: $btn__disabled-txt; 35 @include fastTransition-all; 36 &:hover { 37 cursor: default; 38 } 39 } 40 i { //button symbol 41 font-style: normal; 42 text-transform: none; 43 font-size: 1.5em; 44 transform: rotate(80deg); 45 display: inline-block; 46 } 47 img{ 48 width: 18px; 49 height: 18px; 50 display: inline-block; 51 } 52} 53.btn-secondary { 54 color: $secbtn__text; 55 background: transparent; 56 border: 2px solid $secbtn__border; 57 min-height: 40px; 58 &:hover { 59 color: $secbtn__text; 60 cursor: pointer; 61 background: $secbtn__bg; 62 @include fastTransition-all; 63 } 64 &.disabled { 65 border: 2px solid $lightgrey; 66 background: $btn__disabled-bg; 67 @include fastTransition-all; 68 &:hover { 69 background: $btn__disabled-bg; 70 } 71 } 72 i { // button symbol 73 font-style: normal; 74 font-weight: 400; 75 text-transform: none; 76 font-size: 1.5em; 77 transform: rotate(80deg) translate(-2px); 78 display: inline-block; 79 vertical-align: middle; 80 } 81 img{ 82 width: 18px; 83 height: 18px; 84 display: inline-block; 85 margin-right: .5em; 86 margin-top: -3px; 87 } 88} 89 90.btn-pop-out { 91 position: relative; 92 padding: 0 0 1em 2em; 93 color: $black; 94 &:hover { 95 text-decoration: underline; 96 } 97 &:before { 98 content: ''; 99 position: absolute; 100 left: 0; 101 top: 0px; 102 width: 25px; 103 height: 20px; 104 display: inline-block; 105 border: 1px solid $black; 106 border-top: 4px solid $black; 107 } 108 &:after { 109 content: '\2794'; 110 position: absolute; 111 transform: rotate(-45deg); 112 font-size: .9em; 113 font-weight: 700; 114 vertical-align: middle; 115 display: inline-block; 116 left: 11px; 117 top: 0px; 118 } 119}