.button {
border-radius: 4px; @include primary-font; display: inline-block; font-weight: normal; text-align: center; vertical-align: middle; cursor: pointer; color: white; background-image: none; border: 2px solid transparent; white-space: nowrap; padding: 10px 20px; margin: 0 3px; font-size: 14px; line-height: 1.42857143; -webkit-appearance: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; transition: .2s all linear; a { color: white; } @include button-theme($medium-grey); &.primary { @include button-theme($orange); } &.success { @include button-theme($green); } &.warning { @include button-theme($yellow); } &.info { @include button-theme($blue); } &.danger { @include button-theme($red); } &.disabled { @include button-theme($light-grey); color: $medium-grey; cursor: inherit; } &.ghost { background-color: transparent; border: 2px solid $light-grey; color: $light-grey; } &.signout { border-radius: 0; background-color: transparent; border: 1px solid $orange; color: $orange; font-size: 10px; font-weight: 600; margin-left: 10px; padding: 5px 10px; } &.large { padding: 15px 30px; } &.small { padding: 5px 10px; font-size: 12px; } &.xsmall { padding: 0 4px; font-size: 75%; } &.fullwide { width: 100%; margin: 0; //10px 0 0 0; display: block; }
}
.button-group {
position: relative; display: inline-block; vertical-align: middle; > .button { position: relative; float: left; &:first-child { margin-right: 0; &:not(:last-child) { border-right-radius: 0; } } &:not(:first-child):not(:last-child) { margin-left: 0; margin-right: 0; border-radius: 0; } &:last-child { margin-left: 0; &:not(:first-child) { border-left-radius: 0; } } }
}