diff --git a/docs/content/components/buttons.md b/docs/content/components/buttons.md
index c6b92200d0..6f07092370 100644
--- a/docs/content/components/buttons.md
+++ b/docs/content/components/buttons.md
@@ -166,6 +166,37 @@ When using the `octicon-x` icon for a close button, add `.close-button` to remov
```
+## Button with icons
+
+Icons can be added to any button.
+
+```html live
+
+
+
+
+
+
+
+```
+
## Button with counts
You can easily append a count to a **small button**. Add the `.with-count` class to the `.btn-sm` and then add the `.social-count` after the button.
diff --git a/src/buttons/button.scss b/src/buttons/button.scss
index 5bdd90a6b4..60febcd1be 100644
--- a/src/buttons/button.scss
+++ b/src/buttons/button.scss
@@ -5,23 +5,34 @@
position: relative;
display: inline-block;
// stylelint-disable-next-line primer/spacing
- padding: 6px 12px;
+ padding: 6px $spacer-3;
font-size: $body-font-size;
- font-weight: $font-weight-bold;
+ // stylelint-disable-next-line primer/typography
+ font-weight: 500;
// 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;
+ border: $border-width $border-style;
+ border-radius: $border-radius;
appearance: none; // Corrects inability to style clickable `input` types in iOS.
+ &:hover {
+ text-decoration: none;
+ }
+
+ &:focus {
+ outline: 0;
+ }
+
+ &:disabled,
+ &.disabled,
+ &[aria-disabled=true] {
+ cursor: default;
+ }
+
i {
font-style: normal;
font-weight: $font-weight-semibold;
@@ -29,55 +40,224 @@
}
.octicon {
- vertical-align: text-top;
+ margin-right: $spacer-1;
+ color: $text-gray-light;
+ vertical-align: text-bottom;
}
// Darken for just a tad more contrast against the button background
.Counter {
+ // stylelint-disable-next-line primer/spacing
+ margin-left: 2px;
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;
+ .dropdown-caret {
+ margin-left: $spacer-1;
+ opacity: 0.6;
}
+}
- &:focus {
- outline: 0;
+// Default button
+
+.btn {
+ $bg-hover: #f3f4f6; // custom gray
+
+ color: $text-gray-dark;
+ background-color: $bg-gray-light;
+ border-color: $border-color-button;
+ // stylelint-disable-next-line primer/box-shadow
+ box-shadow: 0 1px 0 rgba($gray-400, 0.1), inset 0 1px 0 rgba($white, 0.25);
+
+ &:focus,
+ &.focus {
+ border-color: transparent;
+ box-shadow: $btn-input-focus-shadow;
+ }
+
+ &:hover,
+ &.hover {
+ background-color: $bg-hover;
+ }
+
+ &:active,
+ &.selected,
+ &[aria-selected=true],
+ [open] > & {
+ background-color: $bg-hover;
+ border-color: $border-gray-dark;
+ box-shadow: none;
}
&:disabled,
&.disabled,
&[aria-disabled=true] {
- cursor: default;
- // Repeat `background-position` because `:hover`
- background-position: 0 0;
+ // stylelint-disable-next-line primer/colors
+ color: $gray-400;
+ background-color: $bg-hover;
+ border-color: $border-color-button;
+ }
+}
+
+// Primary button
+
+.btn-primary {
+ $bg: #159739; // custom green
+ $border-color: $green-600;
+ $shadow: $green-900;
+ $box-shadow: 0 1px 0 rgba($shadow, 0.1), inset 0 1px 0 rgba($white, 0.03);
+
+ $bg-hover: #138934; // custom green
+ $border-hover: $green-700;
+ $bg-disabled: #94d3a2; // custom green
+
+ color: $text-white;
+ // stylelint-disable-next-line primer/colors
+ background-color: $bg;
+ border-color: $border-color;
+ box-shadow: $box-shadow;
+
+ &:focus,
+ &.focus {
+ // stylelint-disable-next-line primer/colors
+ background-color: $bg;
+ border-color: transparent;
+ // stylelint-disable-next-line primer/box-shadow
+ box-shadow: 0 0 0 3px rgba($bg, 0.4);
+ }
+
+ &:hover,
+ &.hover {
+ background-color: $bg-hover;
+ border-color: $border-hover;
}
&:active,
&.selected,
- &[aria-selected=true] {
- background-image: none;
+ &[aria-selected=true],
+ [open] > & {
+ background-color: $bg-hover;
+ border-color: $border-color;
+ // 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.5);
+ background-color: $bg-disabled;
+ // stylelint-disable-next-line primer/borders
+ border-color: rgba($green-600, 0.1);
+ box-shadow: $box-shadow;
+ }
+
+ .Counter {
+ // stylelint-disable-next-line primer/colors
+ color: darken($bg, 6%);
+ background-color: $bg-white;
+ }
+
+ .octicon {
+ color: inherit;
+ }
+}
+
+// Mixin: btn-inverse-on-hover
+//
+// Args: $color, $bg, $border
+@mixin btn-inverse-on-hover( $color, $bg, $border, $shadow ) {
+ color: $color;
+
+ &:focus {
+ border-color: transparent;
+ box-shadow: 0 0 0 3px rgba($bg, 0.4);
+ }
+
+ &:hover {
+ color: $text-white;
+ background-color: $bg;
+ border-color: $border;
+ box-shadow: 0 1px 0 rgba($shadow, 0.1), inset 0 1px 0 rgba($white, 0.03);
+
+ &:focus {
+ box-shadow: 0 0 0 3px rgba($bg, 0.4);
+ }
+
+ .Counter {
+ background-color: darken($bg, 12%);
+ }
+
+ .octicon {
+ color: inherit;
+ }
+ }
+
+ &:active,
+ &.selected,
+ &[aria-selected=true],
+ [open] > & {
+ color: $text-white;
+ background-color: $bg;
+ border-color: $border;
+ box-shadow: inset 0 1px 0 rgba($shadow, 0.2);
+ }
+
+ &:disabled,
+ &.disabled,
+ &[aria-disabled=true] {
+ color: rgba($color, 0.5);
+ background-color: #f3f4f6;
+ border-color: $border-color-button;
+ box-shadow: 0 1px 0 rgba($gray-400, 0.1), inset 0 1px 0 rgba($white, 0.25);
+ }
+
+ .Counter {
+ color: inherit;
+ background-color: rgba($color, 0.1);
}
}
-.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%)); }
+// Danger button
+
+.btn-danger {
+ @include btn-inverse-on-hover(
+ $color: $text-red,
+ $bg: $red-600,
+ $border: $red-700,
+ $shadow: $red-900
+ );
+}
// 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);
+ @include btn-inverse-on-hover(
+ $color: $blue-600,
+ $bg: $blue-500,
+ $border: $blue-600,
+ $shadow: $blue-900
+ );
+}
+
+// Solid buttons TODO: Deprecate?
+//
+//
+.btn-blue {
+ @include btn-solid(
+ $text-white,
+ lighten($blue-500, 8%),
+ darken($blue-500, 2%)
+ );
}
// Social button count
+// TODO: Deprecate? Use BtnGroup instead?
+
.btn-with-count {
float: left;
border-top-right-radius: 0;
@@ -89,7 +269,7 @@
// Tweak `line-height` to make them smaller.
.btn-sm {
// stylelint-disable-next-line primer/spacing
- padding: 3px 10px;
+ padding: 3px 12px;
font-size: $font-size-small;
// stylelint-disable-next-line primer/typography
line-height: 20px;
@@ -97,10 +277,10 @@
// 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;
+ padding: $em-spacer-6 1.5em;
font-size: inherit;
// stylelint-disable-next-line primer/borders
- border-radius: 6px;
+ border-radius: 0.5em;
}
// Full-width button
@@ -148,9 +328,10 @@
// Typically used as a "cancel" button next to a .btn
.btn-invisible {
color: $text-blue;
- background-color: $bg-white; // Reset default gradient backgrounds and colors
- background-image: none;
+ background-color: transparent; // Reset default gradient backgrounds and colors
border: 0;
+ border-radius: 0;
+ box-shadow: none;
&:hover,
&:active,
diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
index dcf6f7bfb9..39d4954725 100644
--- a/src/buttons/misc.scss
+++ b/src/buttons/misc.scss
@@ -65,7 +65,7 @@
.social-count {
float: left;
// stylelint-disable-next-line primer/spacing
- padding: 3px 10px;
+ padding: 3px 12px;
font-size: $font-size-small;
font-weight: $font-weight-bold;
// stylelint-disable-next-line primer/typography
@@ -77,6 +77,8 @@
border-left: 0;
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
+ // stylelint-disable-next-line primer/box-shadow
+ box-shadow: 0 1px 0 rgba($gray-400, 0.1), inset 0 1px 0 rgba($white, 0.25);
&:hover,
&:active {
diff --git a/src/support/mixins/buttons.scss b/src/support/mixins/buttons.scss
index 4b6cbb3092..ca8b59f3c1 100644
--- a/src/support/mixins/buttons.scss
+++ b/src/support/mixins/buttons.scss
@@ -1,3 +1,8 @@
+
+// TODO: See if the mixins below can be deprecated
+// Might still be needed for .btn-blue
+// ------------------------------------------------------------------
+
// Button color generator for primary and themed buttons
// New button hotness
diff --git a/src/support/variables/colors.scss b/src/support/variables/colors.scss
index ffbf018f44..9fba7b1dd7 100644
--- a/src/support/variables/colors.scss
+++ b/src/support/variables/colors.scss
@@ -18,9 +18,6 @@ $border-red: $red !default;
$border-red-light: desaturate($red-300, 60%) !default;
$border-yellow: desaturate($yellow-300, 60%) !default;
-// Buttons have a slightly more opaque border than $border-black-fade (15% alpha)
-$border-color-button: rgba($black, 0.2) !default;
-
// Background colors
$bg-white: $white !default;
$bg-black: $black !default;
@@ -42,11 +39,6 @@ $bg-yellow: $yellow-500 !default;
$bg-yellow-light: $yellow-200 !default;
$bg-yellow-dark: $yellow-700 !default;
-// diffstat background colors
-$bg-diffstat-added: darken($green-400, 5%) !default;
-$bg-diffstat-deleted: $red-600 !default;
-$bg-diffstat-neutral: $gray-300 !default;
-
// Text colors
$text-black: $black !default;
$text-white: $white !default;
diff --git a/src/support/variables/misc.scss b/src/support/variables/misc.scss
index 741c4ebc33..b23d8b8f32 100644
--- a/src/support/variables/misc.scss
+++ b/src/support/variables/misc.scss
@@ -15,8 +15,12 @@ $box-shadow-extra-large: 0 10px 50px rgba($black, 0.07) !default;
// Button and form variables
$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default;
-$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default;
-$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default;
+$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default; // TODO: Deprecate? Replaced by $focus-shadow
+$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default; // TODO: Deprecate? It's now unused.
+
+$focus-shadow: 0 0 0 3px rgba($blue, 0.4) !default;
+
+$border-color-button: $border-color !default;
// Tooltips
$tooltip-max-width: 250px !default;
@@ -24,3 +28,8 @@ $tooltip-background-color: $black !default;
$tooltip-text-color: $white !default;
$tooltip-delay: 0.4s !default;
$tooltip-duration: 0.1s !default;
+
+// diffstat background colors
+$bg-diffstat-added: darken($green-400, 5%) !default;
+$bg-diffstat-deleted: $red-600 !default;
+$bg-diffstat-neutral: $gray-300 !default;