1.btn { 2 font-weight: 600; 3 white-space: normal; 4 5 &.btn-default { 6 &, 7 i { 8 color: $medium-gray; 9 transition: 0.25s ease-out; 10 } 11 12 &:hover { 13 color: $btn-secondary-color; 14 background-color: $btn-secondary-hover; 15 border-color: $btn-secondary-hover; 16 } 17 18 &:active, 19 &:focus { 20 color: $btn-secondary-color; 21 background-color: $btn-secondary-active-color; 22 border-color: $btn-secondary-active-color !important; 23 outline: none; 24 box-shadow: 0 0 0 0.2rem rgba($btn-secondary-active-color, 0.5); 25 26 i { 27 color: $btn-secondary-color; 28 } 29 } 30 } 31 32 &-group { 33 .btn-default { 34 i { 35 display: block; 36 width: 20px; 37 height: 20px; 38 margin-right: 2px; 39 font-size: 16px; 40 } 41 42 &:hover { 43 color: $btn-primary-color; 44 background: $primary-light-color; 45 border-color: $primary-light-color; 46 } 47 48 &:focus, 49 &:active { 50 color: $btn-primary-color; 51 background: $btn-primary-active-bg; 52 border-color: $btn-primary-active-bg; 53 box-shadow: 0 0 0 0.2rem rgba(70, 196, 221, 0.5); 54 } 55 } 56 } 57 58 &-primary { 59 display: inline-flex; 60 align-items: center; 61 justify-content: center; 62 color: $btn-primary-color; 63 background: $primary-color; 64 border-color: $primary-color; 65 66 &:hover { 67 color: $btn-primary-color; 68 background: $primary-light-color; 69 border-color: $primary-light-color; 70 } 71 72 &:focus, 73 &:active { 74 color: $btn-primary-color; 75 background: $btn-primary-active-bg; 76 // stylelint-disable-next-line 77 border-color: $btn-primary-active-bg !important; 78 box-shadow: 0 0 0 0.2rem rgba(70, 196, 221, 0.5); 79 } 80 } 81} 82