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