@mixin btn-default { @include border-radius(3px); border-width: 1px; border-style: solid; font-size: 15px; font-weight: 500; line-height: 18px; padding: 11px $gl-padding; letter-spacing: .4px; &:focus, &:active { outline: none; @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); } } @mixin btn-middle { @include btn-default; @include border-radius(3px); padding: 11px 24px; } @mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color) { background-color: $light; border-color: $border-light; color: $color; &:hover, &:focus { background-color: $normal; border-color: $border-normal; color: $color; } &:active { @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12)); background-color: $dark; border-color: $border-dark; color: $color; } } @mixin btn-green { @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #FFFFFF); } @mixin btn-blue { @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, #FFFFFF); } @mixin btn-blue-medium { @include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, #FFFFFF); } @mixin btn-orange { @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #FFFFFF); } @mixin btn-red { @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #FFFFFF); } @mixin btn-gray { @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-light, $gray-dark, $border-gray-dark, #313236); } @mixin btn-white { @include btn-color($white-light, $border-white-light, $white-normal, $border-white-normal, $white-dark, $border-white-dark, #313236); } .btn { @include btn-default; @include btn-white; &.btn-sm { padding: 5px 10px; } &.btn-nr { padding: 7px 10px; } &.btn-xs { padding: 1px 5px; } &.btn-success, &.btn-new, &.btn-create, &.btn-save, &.btn-green { @include btn-green; } &.btn-gray { @include btn-gray; } &.btn-primary { @include btn-blue-medium; } &.btn-info { @include btn-blue; } &.btn-close, &.btn-warning { @include btn-orange; } &.btn-danger, &.btn-remove, &.btn-red { @include btn-red; } &.btn-cancel { float: right; } &.btn-reopen { /* should be same as parent class for now */ } &.btn-grouped { margin-right: 7px; float: left; &:last-child { margin-right: 0px; } } } .btn-block { width: 100%; margin: 0; margin-bottom: 15px; &.btn { padding: 6px 0; } } .btn-group { &.btn-grouped { margin-right: 7px; float: left; &:last-child { margin-right: 0px; } } } .btn-group-next { .btn { padding: 9px 0px; font-size: 15px; color: #7f8fa4; border-color: #e7e9ed; width: 140px; .badge { font-weight: normal; background-color: #eee; color: #78a; } &.active { border-color: $gl-info; background: $gl-info; color: #fff; .badge { color: $gl-info; background-color: white; } } } } .btn-clipboard { border: none; }