// 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: 6px 12px;
font-size: $body-font-size;
font-weight: $font-weight-bold;
// 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;
background-repeat: repeat-x;
background-position: -1px -1px;
background-size: 110% 110%;
border: $border-width $border-style $border-color-button;
// stylelint-disable-next-line primer/borders
border-radius: 0.25em;
appearance: none; // Corrects inability to style clickable `input` types in iOS.
i {
font-style: normal;
font-weight: $font-weight-semibold;
opacity: 0.75;
}
.octicon {
vertical-align: text-top;
}
// Darken for just a tad more contrast against the button background
.Counter {
color: $text-gray;
text-shadow: none;
// stylelint-disable-next-line primer/colors
background-color: rgba($black, 0.1);
}
&:hover {
text-decoration: none;
background-repeat: repeat-x;
}
&:focus {
outline: 0;
}
&:disabled,
&.disabled,
&[aria-disabled=true] {
cursor: default;
// Repeat `background-position` because `:hover`
background-position: 0 0;
}
&:active,
&.selected,
&[aria-selected=true] {
background-image: none;
}
}
.btn { @include btn-solid($text-gray-dark, $gray-000, darken($gray-100, 2%)); }
.btn-primary { @include btn-solid($text-white, $green-400, $green-500); }
.btn-blue { @include btn-solid($text-white, lighten($blue-500, 8%), darken($blue-500, 2%)); }
.btn-danger { @include btn-inverse($red-600, $gray-000, darken($gray-100, 2%)); }
// Outline button
//
// For when we need a linky-action that's not too heavy in busier
// areas like conversation timelines.
.btn-outline {
@include btn-outline($text-blue);
}
// Social button count
.btn-with-count {
float: left;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
// Minibutton overrides
//
// Tweak `line-height` to make them smaller.
.btn-sm {
// stylelint-disable-next-line primer/spacing
padding: 3px 10px;
font-size: $font-size-small;
// stylelint-disable-next-line primer/typography
line-height: 20px;
}
// Large button adds more padding around text. Use font-size utils to increase font-size.. e.g,
.btn-large {
padding: $em-spacer-6 1.25em;
font-size: inherit;
// stylelint-disable-next-line primer/borders
border-radius: 6px;
}
// Full-width button
//
// These buttons expand to the full width of their parent container
.btn-block {
display: block;
width: 100%;
text-align: center;
}
// Link-like buttons
//
// This class is for styling