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