// stylelint-disable selector-max-type, block-opening-brace-space-before, no-duplicate-selectors // Base button styles .btn { position: relative; display: inline-block; // stylelint-disable-next-line primer/spacing padding: 5px $spacer-3; font-size: $body-font-size; font-weight: $font-weight-semibold; // stylelint-disable-next-line primer/typography line-height: 20px; // Specifically not inherit our `` default white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; border: $border-width $border-style; border-radius: $border-radius; appearance: none; // Corrects inability to style clickable `input` types in iOS. &:hover { text-decoration: none; } &:disabled, &.disabled, &[aria-disabled="true"] { cursor: default; .octicon { color: inherit; } } i { font-style: normal; font-weight: $font-weight-semibold; opacity: 0.75; } .octicon { margin-right: $spacer-1; color: $text-gray-light; vertical-align: text-bottom; &:only-child { margin-right: 0; } } .Counter { // stylelint-disable-next-line primer/spacing margin-left: 2px; color: inherit; text-shadow: none; vertical-align: top; // stylelint-disable-next-line primer/colors background-color: rgba( $black, 0.08 ); // Darken for just a tad more contrast against the button background } .dropdown-caret { margin-left: $spacer-1; opacity: 0.8; } } // Default button .btn { $bg-default: $bg-gray-light; $bg-hover: #f3f4f6; // custom gray $bg-active: darken($bg-hover, 2%); $bg-disabled: $bg-default; color: $text-gray-dark; background-color: $bg-default; border-color: $border-color-button; box-shadow: $box-shadow, $box-shadow-highlight; transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1); &:hover, &.hover, [open] > & { background-color: $bg-hover; transition-duration: 0.1s; } &:active, &.selected, &[aria-selected="true"] { background-color: $bg-active; box-shadow: $box-shadow-inset; transition: none; } &:disabled, &.disabled, &[aria-disabled="true"] { // stylelint-disable-next-line primer/colors color: $gray-400; background-color: $bg-disabled; border-color: $border-color-button; } // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons &:focus, &.focus { outline: 1px dotted transparent; // Support Firfox custom colors outline-offset: 2px; box-shadow: $box-shadow-focus; } } // Primary button .btn-primary { $bg-default: #2ea44f; // custom green $bg-hover: #2c974b; // custom green $bg-active: darken($bg-hover, 2%); $bg-disabled: #94d3a2; // custom green $shadow: $green-900; $box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03); color: $text-white; background-color: $bg-default; // stylelint-disable-next-line primer/borders border-color: rgba($black, 0.15); box-shadow: $box-shadow; &:hover, &.hover, [open] > & { background-color: $bg-hover; } &:active, &.selected, &[aria-selected="true"] { background-color: $bg-active; // stylelint-disable-next-line primer/box-shadow box-shadow: inset 0 1px 0 rgba($shadow, 0.2); } &:disabled, &.disabled, &[aria-disabled="true"] { // stylelint-disable-next-line primer/colors color: rgba($text-white, 0.8); background-color: $bg-disabled; // stylelint-disable-next-line primer/borders border-color: rgba($black, 0.1); box-shadow: $box-shadow; } &:focus, &.focus { // stylelint-disable-next-line primer/box-shadow box-shadow: 0 0 0 3px rgba($bg-default, 0.4); } .Counter { color: inherit; // stylelint-disable-next-line primer/colors background-color: rgba($bg-white, 0.2); } .octicon { // stylelint-disable-next-line primer/colors color: rgba($text-white, 0.8); } } // Mixin: btn-inverse-on-hover @mixin btn-inverse-on-hover($color, $bg-hover, $bg-active, $shadow) { color: $color; transition: none; &:hover, [open] > & { color: $text-white; background-color: $bg-hover; border-color: rgba($black, 0.15); box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03); .Counter { background-color: rgba($bg-white, 0.2); } .octicon { color: inherit; } } &:active, &.selected, &[aria-selected="true"] { color: $text-white; background-color: $bg-active; border-color: rgba($black, 0.15); box-shadow: inset 0 1px 0 rgba($shadow, 0.2); } &:disabled, &.disabled, &[aria-disabled="true"] { color: rgba($color, 0.5); background-color: $bg-gray-light; border-color: $border-color-button; box-shadow: $box-shadow, $box-shadow-highlight; .Counter { background-color: rgba($color, 0.05); } } &:focus { box-shadow: 0 0 0 3px rgba($bg-hover, 0.4); } .Counter { color: inherit; background-color: rgba($color, 0.1); } } // Danger button .btn-danger { @include btn-inverse-on-hover( $color: $text-red, $bg-hover: $red-600, $bg-active: darken($red-600, 3%), $shadow: $red-900 ); } // Outline button .btn-outline { @include btn-inverse-on-hover( $color: $blue-500, $bg-hover: $blue-500, $bg-active: darken($blue-500, 3%), $shadow: $blue-900 ); } // Solid buttons TODO: Deprecate? // // .btn-blue { @include btn-solid( $text-white, lighten($blue-500, 8%), darken($blue-500, 2%) ); } // Sizes // // Tweak `line-height` to make them smaller. .btn-sm { // stylelint-disable-next-line primer/spacing padding: 3px 12px; font-size: $font-size-small; // stylelint-disable-next-line primer/typography line-height: 20px; .octicon { vertical-align: text-top; } } // Large button adds more padding around text. Use font-size utils to increase font-size.. e.g,

.btn-large { padding: $em-spacer-6 1.5em; font-size: inherit; line-height: $lh-default; // stylelint-disable-next-line primer/borders border-radius: 0.5em; } // Full-width button // // These buttons expand to the full width of their parent container .btn-block { display: block; width: 100%; text-align: center; }