From 0b8beb76e360dca85b2a68ef4f97100858d26dd2 Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 28 Feb 2020 15:24:55 +0900 Subject: [PATCH 01/26] Add disabled state to .form-control --- docs/content/components/forms.md | 17 +++++++++++------ src/forms/form-control.scss | 7 +++++++ 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/docs/content/components/forms.md b/docs/content/components/forms.md index 75ac03f130..f806b5b46d 100644 --- a/docs/content/components/forms.md +++ b/docs/content/components/forms.md @@ -76,12 +76,17 @@ Textual form controls have a white background by default. You can change this to ```html live
- + +
+``` + +#### Disabled state + +Add the `disabled` attribute to make a `.form-control` appear disabled. + +```html live +
+
``` diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss index 7e0d51b49b..0be8800a30 100644 --- a/src/forms/form-control.scss +++ b/src/forms/form-control.scss @@ -39,6 +39,13 @@ label { box-shadow: $focus-shadow; } + &[disabled] { + // stylelint-disable-next-line primer/colors + color: $gray-400; + // stylelint-disable-next-line primer/colors + background-color: #f3f4f6; // custom gray + } + // Ensures inputs don't zoom on mobile but are body-font size on desktop @include breakpoint(md) { font-size: $body-font-size; From 9a1e32adc0bc87a95d1f17db21682fdb01da39ec Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 28 Feb 2020 15:28:08 +0900 Subject: [PATCH 02/26] Use $font-weight-semibold; variable --- src/buttons/button.scss | 3 +-- src/labels/counters.scss | 3 +-- src/labels/issue-labels.scss | 3 +-- src/labels/labels.scss | 3 +-- src/labels/states.scss | 3 +-- src/navigation/menu.scss | 3 +-- src/navigation/subnav.scss | 3 +-- 7 files changed, 7 insertions(+), 14 deletions(-) diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 9402235b8b..c280854a81 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -7,8 +7,7 @@ // stylelint-disable-next-line primer/spacing padding: 6px $spacer-3; font-size: $body-font-size; - // stylelint-disable-next-line primer/typography - font-weight: 500; + font-weight: $font-weight-semibold; // stylelint-disable-next-line primer/typography line-height: 20px; // Specifically not inherit our `` default white-space: nowrap; diff --git a/src/labels/counters.scss b/src/labels/counters.scss index d16add47f7..f67dbac5a7 100644 --- a/src/labels/counters.scss +++ b/src/labels/counters.scss @@ -5,8 +5,7 @@ // stylelint-disable-next-line primer/spacing padding: 2px 6px; font-size: $font-size-small; - // stylelint-disable-next-line primer/typography - font-weight: 500; + font-weight: $font-weight-semibold; // stylelint-disable-next-line primer/typography line-height: 16px; color: $text-gray-dark; diff --git a/src/labels/issue-labels.scss b/src/labels/issue-labels.scss index 31b3d1b666..a0c66d1eec 100644 --- a/src/labels/issue-labels.scss +++ b/src/labels/issue-labels.scss @@ -5,8 +5,7 @@ // stylelint-disable-next-line primer/spacing padding: 2px $spacer-2; font-size: $font-size-small; - // stylelint-disable-next-line primer/typography - font-weight: 500; + font-weight: $font-weight-semibold; // stylelint-disable-next-line primer/typography line-height: 16px; // stylelint-disable-next-line primer/borders diff --git a/src/labels/labels.scss b/src/labels/labels.scss index 92c3d436b5..4ba7180f44 100644 --- a/src/labels/labels.scss +++ b/src/labels/labels.scss @@ -18,8 +18,7 @@ // stylelint-disable-next-line primer/spacing padding: 3px 12px; font-size: $font-size-small; - // stylelint-disable-next-line primer/typography - font-weight: 500; + font-weight: $font-weight-semibold; // stylelint-disable-next-line primer/typography line-height: 16px; background-color: transparent !important; // TODO: Remove again diff --git a/src/labels/states.scss b/src/labels/states.scss index a0717ea89d..f3a12999ca 100644 --- a/src/labels/states.scss +++ b/src/labels/states.scss @@ -10,8 +10,7 @@ .State { display: inline-block; padding: $spacer-2 12px; - // stylelint-disable-next-line primer/typography - font-weight: 500; + font-weight: $font-weight-semibold; // stylelint-disable-next-line primer/typography line-height: 16px; color: $text-white; diff --git a/src/navigation/menu.scss b/src/navigation/menu.scss index 3548a193c9..b98e6a16af 100644 --- a/src/navigation/menu.scss +++ b/src/navigation/menu.scss @@ -101,8 +101,7 @@ padding: $spacer-1 $spacer-3; margin-top: 0; margin-bottom: 0; - // stylelint-disable-next-line primer/typography - font-weight: 500; + font-weight: $font-weight-semibold; // stylelint-disable-next-line primer/typography line-height: 23px; color: $text-black; diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss index 0fb93856c8..9fa18c258e 100644 --- a/src/navigation/subnav.scss +++ b/src/navigation/subnav.scss @@ -22,8 +22,7 @@ float: left; // stylelint-disable-next-line primer/spacing padding: 6px $spacer-3; - // stylelint-disable-next-line primer/typography - font-weight: 500; + font-weight: $font-weight-semibold; // stylelint-disable-next-line primer/typography line-height: 20px; color: $text-gray-dark; From 97d8428792c55a8d70c925ac08ea521adafc44f3 Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 28 Feb 2020 15:52:34 +0900 Subject: [PATCH 03/26] Add inner shadow to .form-control --- src/forms/form-control.scss | 1 + src/support/variables/misc.scss | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss index 0be8800a30..c0a7ca7755 100644 --- a/src/forms/form-control.scss +++ b/src/forms/form-control.scss @@ -31,6 +31,7 @@ label { border: $border-width $border-style $border-color; border-radius: $border-radius; outline: none; + box-shadow: $form-control-shadow; &.focus, &:focus { diff --git a/src/support/variables/misc.scss b/src/support/variables/misc.scss index 1993049fdf..e1e3955eeb 100644 --- a/src/support/variables/misc.scss +++ b/src/support/variables/misc.scss @@ -19,12 +19,12 @@ $box-shadow-highlight: inset 0 1px 0 rgba($white, 0.25) !default; $focus-shadow: 0 0 0 3px rgba($border-blue, 0.3) !default; // Button and form variables -$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default; // TODO: Deprecate? It's now unused. +$form-control-shadow: inset 0 1px 0 rgba($border-color, 0.2) !default; +$border-color-button: $border-color !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. -$border-color-button: $border-color !default; - // Tooltips $tooltip-max-width: 250px !default; $tooltip-background-color: $black !default; From 3cca3f611c6063ebc36d3c7a8a685df3aad1a369 Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 28 Feb 2020 21:36:30 +0900 Subject: [PATCH 04/26] Polish buttons --- src/buttons/button.scss | 135 ++++++++++++++++---------------- src/forms/form-control.scss | 4 +- src/support/variables/misc.scss | 16 ++-- 3 files changed, 78 insertions(+), 77 deletions(-) diff --git a/src/buttons/button.scss b/src/buttons/button.scss index c280854a81..61604317a3 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -44,14 +44,13 @@ 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); + background-color: rgba($black, 0.1); // Darken for just a tad more contrast against the button background } .dropdown-caret { @@ -63,31 +62,30 @@ // 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-gray-light; + background-color: $bg-default; border-color: $border-color-button; box-shadow: $box-shadow, $box-shadow-highlight; - - &:focus, - &.focus { - border-color: transparent; - box-shadow: $focus-shadow; - } + transition: background-color 0.18s ease-out; &:hover, - &.hover { + &.hover, + [open] > & { background-color: $bg-hover; + transition: none; } &:active, &.selected, - &[aria-selected=true], - [open] > & { - background-color: $bg-hover; - border-color: $border-gray-dark; - box-shadow: none; + &[aria-selected=true] { + background-color: $bg-active; + box-shadow: $box-shadow-inset; + transition: none; } &:disabled, @@ -95,50 +93,48 @@ &[aria-disabled=true] { // stylelint-disable-next-line primer/colors color: $gray-400; - background-color: $bg-hover; + 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 { + box-shadow: $box-shadow-focus; + } } // Primary button .btn-primary { - $bg: #159739; // custom green - $border-color: $green-600; - $shadow: $green-900; - $box-shadow: $box-shadow, inset 0 1px 0 rgba($white, 0.03); - + $bg-default: #159739; // custom green $bg-hover: #138934; // custom green - $border-hover: $green-700; + $bg-active: darken($bg-hover, 2%); $bg-disabled: #94d3a2; // custom green + $border-default: $green-600; + $border-hover: $green-700; + + $shadow: $green-900; + $box-shadow: $box-shadow, inset 0 1px 0 rgba($white, 0.03); + color: $text-white; // stylelint-disable-next-line primer/colors - background-color: $bg; - border-color: $border-color; + background-color: $bg-default; + border-color: $border-default; 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; + &.hover, + [open] > & { border-color: $border-hover; + background-color: $bg-hover; } &:active, &.selected, - &[aria-selected=true], - [open] > & { - background-color: $bg-hover; - border-color: $border-color; + &[aria-selected=true] { + background-color: $bg-active; // stylelint-disable-next-line primer/box-shadow box-shadow: inset 0 1px 0 rgba($shadow, 0.2); } @@ -147,16 +143,22 @@ &.disabled, &[aria-disabled=true] { // stylelint-disable-next-line primer/colors - color: rgba($text-white, 0.5); + color: rgba($text-white, 0.6); background-color: $bg-disabled; // stylelint-disable-next-line primer/borders - border-color: rgba($green-600, 0.1); + border-color: rgba($border-default, 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 { // stylelint-disable-next-line primer/colors - color: darken($bg, 6%); + color: darken($bg-default, 6%); background-color: $bg-white; } @@ -166,28 +168,20 @@ } // 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); - } +@mixin btn-inverse-on-hover( $color, $bg-hover, $bg-active, $border-hover, $border-active, $shadow ) { + color: $color; + transition-timing-function: cubic-bezier(0, 0.5, 0, 1); - &:hover { + &:hover, + [open] > & { color: $text-white; - background-color: $bg; - border-color: $border; + background-color: $bg-hover; + border-color: $border-hover; 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%); + background-color: darken($bg-hover, 12%); } .octicon { @@ -197,11 +191,10 @@ &:active, &.selected, - &[aria-selected=true], - [open] > & { + &[aria-selected=true] { color: $text-white; - background-color: $bg; - border-color: $border; + background-color: $bg-active; + border-color: $border-active; box-shadow: inset 0 1px 0 rgba($shadow, 0.2); } @@ -209,11 +202,15 @@ &.disabled, &[aria-disabled=true] { color: rgba($color, 0.5); - background-color: #f3f4f6; + background-color: $bg-gray-light; border-color: $border-color-button; box-shadow: $box-shadow, $box-shadow-highlight; } + &:focus { + box-shadow: 0 0 0 3px rgba($bg-hover, 0.4); + } + .Counter { color: inherit; background-color: rgba($color, 0.1); @@ -225,8 +222,10 @@ .btn-danger { @include btn-inverse-on-hover( $color: $text-red, - $bg: $red-600, - $border: $red-700, + $bg-hover: $red-600, + $bg-active: darken($red-600, 3%), + $border-hover: $red-700, + $border-active: $red-800, $shadow: $red-900 ); } @@ -236,8 +235,10 @@ .btn-outline { @include btn-inverse-on-hover( $color: $blue-600, - $bg: $blue-500, - $border: $blue-600, + $bg-hover: $blue-500, + $bg-active: darken($blue-500, 3%), + $border-hover: $blue-600, + $border-active: rgba($blue-700, 0.5), $shadow: $blue-900 ); } diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss index c0a7ca7755..7c95750584 100644 --- a/src/forms/form-control.scss +++ b/src/forms/form-control.scss @@ -31,13 +31,13 @@ label { border: $border-width $border-style $border-color; border-radius: $border-radius; outline: none; - box-shadow: $form-control-shadow; + box-shadow: $box-shadow-inset; &.focus, &:focus { border-color: $border-blue; outline: none; - box-shadow: $focus-shadow; + box-shadow: $box-shadow-focus; } &[disabled] { diff --git a/src/support/variables/misc.scss b/src/support/variables/misc.scss index e1e3955eeb..afdebeb6dd 100644 --- a/src/support/variables/misc.scss +++ b/src/support/variables/misc.scss @@ -13,17 +13,17 @@ $box-shadow-medium: 0 3px 6px rgba($gray-400, 0.15) !default; $box-shadow-large: 0 8px 24px rgba($gray-400, 0.2) !default; $box-shadow-extra-large: 0 12px 48px rgba($gray-400, 0.3) !default; -$box-shadow-highlight: inset 0 1px 0 rgba($white, 0.25) !default; +$box-shadow-highlight: inset 0 1px 0 rgba($white, 0.25) !default; // top highlight +$box-shadow-inset: inset 0 1px 0 rgba($border-color, 0.2) !default; // top inner shadow +$box-shadow-focus: 0 0 0 3px rgba($border-blue, 0.3) !default; // blue focus ring -// Focus shadow -$focus-shadow: 0 0 0 3px rgba($border-blue, 0.3) !default; - -// Button and form variables -$form-control-shadow: inset 0 1px 0 rgba($border-color, 0.2) !default; +// Button variables $border-color-button: $border-color !default; +$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default; // TODO: Deprecate? -$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. +// Form variables +$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default; // TODO: Deprecate? +$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default; // TODO: Deprecate? Replaced by $box-shadow-focus // Tooltips $tooltip-max-width: 250px !default; From 958a96cfa3f68711e7627331f1c37b9acff48a4f Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 28 Feb 2020 23:23:29 +0900 Subject: [PATCH 05/26] Tweak .Counter --- src/buttons/button.scss | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 61604317a3..37f9044d02 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -30,6 +30,10 @@ &.disabled, &[aria-disabled=true] { cursor: default; + + .octicon { + color: inherit; + } } i { @@ -47,10 +51,10 @@ .Counter { // stylelint-disable-next-line primer/spacing margin-left: 2px; - color: $text-gray; + color: inherit; text-shadow: none; // stylelint-disable-next-line primer/colors - background-color: rgba($black, 0.1); // Darken for just a tad more contrast against the button background + background-color: rgba($black, 0.08); // Darken for just a tad more contrast against the button background } .dropdown-caret { @@ -143,7 +147,7 @@ &.disabled, &[aria-disabled=true] { // stylelint-disable-next-line primer/colors - color: rgba($text-white, 0.6); + color: rgba($text-white, 0.8); background-color: $bg-disabled; // stylelint-disable-next-line primer/borders border-color: rgba($border-default, 0.1); @@ -157,9 +161,9 @@ } .Counter { + color: inherit; // stylelint-disable-next-line primer/colors - color: darken($bg-default, 6%); - background-color: $bg-white; + background-color: rgba($bg-white, 0.2); } .octicon { @@ -181,7 +185,7 @@ box-shadow: 0 1px 0 rgba($shadow, 0.1), inset 0 1px 0 rgba($white, 0.03); .Counter { - background-color: darken($bg-hover, 12%); + background-color: rgba($bg-white, 0.2); } .octicon { @@ -205,6 +209,10 @@ 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 { From b60363c56657cc779e3714406ce0f20d1a7989ef Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 28 Feb 2020 23:42:46 +0900 Subject: [PATCH 06/26] Fix social-count --- src/buttons/button.scss | 8 -------- src/buttons/misc.scss | 21 +++++++++++++++++++++ 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 37f9044d02..2ccd7d943b 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -262,14 +262,6 @@ ); } -// Social button count -// TODO: Deprecate? Use BtnGroup instead? - -.btn-with-count { - float: left; - border-top-right-radius: 0; - border-bottom-right-radius: 0; -} // Minibutton overrides // diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss index 5a870c9ab2..ebd624ca0d 100644 --- a/src/buttons/misc.scss +++ b/src/buttons/misc.scss @@ -59,10 +59,25 @@ } } +// Social button count +// TODO: Deprecate? Use BtnGroup instead? + +.btn-with-count { + float: left; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + + &:focus { + z-index: 1; + } +} + // Social count bubble // // A container that is used for social bubbles counts. + .social-count { + position: relative; float: left; // stylelint-disable-next-line primer/spacing padding: 3px 12px; @@ -88,4 +103,10 @@ color: $text-blue; cursor: pointer; } + + &:focus { + outline: 0; + box-shadow: $box-shadow-focus; + z-index: 1; + } } From c2825412781e32ec99f1ef19be98ac27dea88c08 Mon Sep 17 00:00:00 2001 From: simurai Date: Fri, 28 Feb 2020 23:51:57 +0900 Subject: [PATCH 07/26] Move some button styles to misc --- src/buttons/button.scss | 91 +---------------------------------------- src/buttons/misc.scss | 89 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 90 insertions(+), 90 deletions(-) diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 2ccd7d943b..3a0657a91e 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -263,7 +263,7 @@ } -// Minibutton overrides +// Sizes // // Tweak `line-height` to make them smaller. .btn-sm { @@ -290,92 +290,3 @@ width: 100%; text-align: center; } - -// Link-like buttons -// -// This class is for styling - @@ -190,11 +190,16 @@ Icons can be added to any button. Delete - + + ``` ## Button with counts diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 3a0657a91e..7e49f6ae87 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -46,6 +46,10 @@ margin-right: $spacer-1; color: $text-gray-light; vertical-align: text-bottom; + + &:only-child { + margin-right: 0; + } } .Counter { From 8207a27632ab10e5eab5490873573bd23ea62754 Mon Sep 17 00:00:00 2001 From: simurai Date: Sat, 29 Feb 2020 00:20:25 +0900 Subject: [PATCH 09/26] Lint --- src/buttons/button.scss | 4 +--- src/buttons/misc.scss | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 7e49f6ae87..60aef54555 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -127,7 +127,6 @@ $box-shadow: $box-shadow, inset 0 1px 0 rgba($white, 0.03); color: $text-white; - // stylelint-disable-next-line primer/colors background-color: $bg-default; border-color: $border-default; box-shadow: $box-shadow; @@ -135,8 +134,8 @@ &:hover, &.hover, [open] > & { - border-color: $border-hover; background-color: $bg-hover; + border-color: $border-hover; } &:active, @@ -266,7 +265,6 @@ ); } - // Sizes // // Tweak `line-height` to make them smaller. diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss index 0306e6d7a7..70a9dcf66f 100644 --- a/src/buttons/misc.scss +++ b/src/buttons/misc.scss @@ -194,8 +194,8 @@ } &:focus { + z-index: 1; outline: 0; box-shadow: $box-shadow-focus; - z-index: 1; } } From 9b599099bcea117f2d24920e3a29c179a14e9c3e Mon Sep 17 00:00:00 2001 From: simurai Date: Sun, 1 Mar 2020 16:39:36 +0900 Subject: [PATCH 10/26] Add stickersheet --- docs/content/stickersheet/labels.md | 149 ++++++++++++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 docs/content/stickersheet/labels.md diff --git a/docs/content/stickersheet/labels.md b/docs/content/stickersheet/labels.md new file mode 100644 index 0000000000..b88a11d6e2 --- /dev/null +++ b/docs/content/stickersheet/labels.md @@ -0,0 +1,149 @@ +--- +title: Labels +path: components/labels +status: Stable +source: 'https://github.com/primer/css/tree/master/src/labels' +bundle: labels +--- + +```html live +

+The base label component styles the text, adds padding and rounded corners, and a border. Labels come in various themes which apply different colors. +

+ +
Hello world
+ +
Hello world
+
Hello world
+
Hello world
+
Hello world
+
Hello world
+
Hello world
+ +
+ +Gray +Default +Dark gray +Pending +Warning +Error +Success +Info + +
+ +Gray +Default +Dark gray +Pending +Warning +Error +Success +Info + +
+ +Primer + +🐻 Next + + +
+ +Primer + +🐻 Next + +``` + +### States + +```html live +Default + + + + Open + + + + + Closed + + +
+ +Default + + + + Open + + + + + Closed + +``` + +### Counters + +```html live +1 +23 +456 + +
+ +
+ +
+ +
+ +1.5K + + + + 10 + +👍 2 +22 +22 +22 + +
+ +1 +23 +456 +1.5K +
+1 +23 +456 +1.5K +``` + +### Diffstat + +```html live + + 6 + + + +
+ + + +7 + −2 + + + + +``` From d20177758b621be047d204a87c67ec3a5d05e455 Mon Sep 17 00:00:00 2001 From: simurai Date: Sun, 1 Mar 2020 16:40:37 +0900 Subject: [PATCH 11/26] Remove Y-padding on buttons So .Counters don't increase the height --- src/buttons/button.scss | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 60aef54555..33bc106434 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -5,11 +5,11 @@ position: relative; display: inline-block; // stylelint-disable-next-line primer/spacing - padding: 6px $spacer-3; + padding: 0 $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 + line-height: 32px; // + 2px from borders = 34px white-space: nowrap; vertical-align: middle; cursor: pointer; @@ -270,16 +270,18 @@ // Tweak `line-height` to make them smaller. .btn-sm { // stylelint-disable-next-line primer/spacing - padding: 3px 12px; + padding: 0 12px; font-size: $font-size-small; // stylelint-disable-next-line primer/typography - line-height: 20px; + line-height: 26px; } // 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; } From 2bdd5c1ff7c980d91a9e168dd428f04147710721 Mon Sep 17 00:00:00 2001 From: simurai Date: Sun, 1 Mar 2020 16:41:03 +0900 Subject: [PATCH 12/26] Tweak labels --- src/labels/counters.scss | 4 ++-- src/labels/index.scss | 2 ++ src/labels/issue-labels.scss | 14 ++++--------- src/labels/labels.scss | 38 ++++++++++++++++-------------------- src/labels/mixins.scss | 31 +++++++++++++++++++++++++++++ src/labels/states.scss | 4 ++++ 6 files changed, 60 insertions(+), 33 deletions(-) create mode 100644 src/labels/mixins.scss diff --git a/src/labels/counters.scss b/src/labels/counters.scss index f67dbac5a7..083d89072a 100644 --- a/src/labels/counters.scss +++ b/src/labels/counters.scss @@ -3,11 +3,11 @@ display: inline-block; min-width: 20px; // makes sure it's a circle with just one digit // stylelint-disable-next-line primer/spacing - padding: 2px 6px; + padding: 0 6px; font-size: $font-size-small; font-weight: $font-weight-semibold; // stylelint-disable-next-line primer/typography - line-height: 16px; + line-height: 20px; color: $text-gray-dark; text-align: center; // stylelint-disable-next-line primer/colors diff --git a/src/labels/index.scss b/src/labels/index.scss index c8632f8bff..8b27ab8285 100644 --- a/src/labels/index.scss +++ b/src/labels/index.scss @@ -1,4 +1,6 @@ @import "../support/index.scss"; +@import "./mixins.scss"; + @import "./issue-labels.scss"; @import "./labels.scss"; @import "./states.scss"; diff --git a/src/labels/issue-labels.scss b/src/labels/issue-labels.scss index a0c66d1eec..2b490b558b 100644 --- a/src/labels/issue-labels.scss +++ b/src/labels/issue-labels.scss @@ -1,15 +1,9 @@ // Issue Labels +// TODO: Replace with .Label once solid backgrounds are supported + .IssueLabel { - display: inline-block; - // stylelint-disable-next-line primer/spacing - padding: 2px $spacer-2; - font-size: $font-size-small; - font-weight: $font-weight-semibold; - // stylelint-disable-next-line primer/typography - line-height: 16px; - // stylelint-disable-next-line primer/borders - border-radius: 2em; + @include labels-base; .g-emoji { position: relative; @@ -25,5 +19,5 @@ } .IssueLabel--big { - padding: $spacer-1 12px; + @include labels-large; } diff --git a/src/labels/labels.scss b/src/labels/labels.scss index 4ba7180f44..308398e6f5 100644 --- a/src/labels/labels.scss +++ b/src/labels/labels.scss @@ -1,42 +1,38 @@ -// Needs refactoring // Labels -// -// Use labels to add keyword tags or phrases to issues and pull requests. These -// are used within a list of issues/PRs, on individual issues/PRs, and within -// the select menus that manage them. // Provide a wrapper to ensure labels stick together .labels { position: relative; } -// Each label gets common styles +// Default label .label, // TODO: Deprecte .Label { - display: inline-block; - // stylelint-disable-next-line primer/spacing - padding: 3px 12px; - font-size: $font-size-small; - font-weight: $font-weight-semibold; - // stylelint-disable-next-line primer/typography - line-height: 16px; + @include labels-base; + border-color: $border-color; background-color: transparent !important; // TODO: Remove again - border: $border-width $border-style $border-color; - // stylelint-disable-next-line primer/borders - border-radius: 2em; &:hover { text-decoration: none; } } -// Custom GitHub labels (not for issues/PRs/etc) -// -// Commonly used across the site to indicate a particular role. For example, -// "repo owner" within code comments or role in organizations. +// Large + +.Label--large { + @include labels-large; +} + +// Inline + +.Label--inline { + @include labels--inline; +} + +// Contrast -.Label--outline, // TODO: Deprecate +.Label--outline, // TODO: Deprecate? It's now the default .Label--gray { color: $text-gray; border-color: $border-gray; diff --git a/src/labels/mixins.scss b/src/labels/mixins.scss new file mode 100644 index 0000000000..8ea837235a --- /dev/null +++ b/src/labels/mixins.scss @@ -0,0 +1,31 @@ +// Label mixins + +// Default: 20px +// Large: 24px +// Inline: em based + +@mixin labels-base { + display: inline-block; + padding: 0 7px; + font-size: $font-size-small; + font-weight: $font-weight-semibold; + line-height: $lh-default; + // stylelint-disable-next-line primer/borders + border: $border-width $border-style transparent; + border-radius: 2em; +} + +@mixin labels-large { + padding: 2px 10px; +} + +// Inline +// +// Doesn't increase height of parent element +// Can be used with different font-sizes + +@mixin labels--inline { + display: inline; + font-size: 0.9em; + padding: .1667em .5em; +} diff --git a/src/labels/states.scss b/src/labels/states.scss index f3a12999ca..03c66b98ec 100644 --- a/src/labels/states.scss +++ b/src/labels/states.scss @@ -6,10 +6,14 @@ // closed - $red background // merged - $purple background +// Default 32px +// Small 24px + .state, // TODO: Deprecate .State { display: inline-block; padding: $spacer-2 12px; + font-size: $body-font-size; font-weight: $font-weight-semibold; // stylelint-disable-next-line primer/typography line-height: 16px; From f80a82afafe5163be750e258c29cec4dff3ddc31 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 2 Mar 2020 10:45:04 +0900 Subject: [PATCH 13/26] Remove y-padding on labels and states --- src/labels/mixins.scss | 6 ++++-- src/labels/states.scss | 8 +++++--- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/labels/mixins.scss b/src/labels/mixins.scss index 8ea837235a..0d68707f68 100644 --- a/src/labels/mixins.scss +++ b/src/labels/mixins.scss @@ -9,14 +9,16 @@ padding: 0 7px; font-size: $font-size-small; font-weight: $font-weight-semibold; - line-height: $lh-default; + line-height: 18px; // stylelint-disable-next-line primer/borders border: $border-width $border-style transparent; border-radius: 2em; } @mixin labels-large { - padding: 2px 10px; + padding-left: 10px; + padding-right: 10px; + line-height: 22px; } // Inline diff --git a/src/labels/states.scss b/src/labels/states.scss index 03c66b98ec..03dd0dccf6 100644 --- a/src/labels/states.scss +++ b/src/labels/states.scss @@ -12,11 +12,11 @@ .state, // TODO: Deprecate .State { display: inline-block; - padding: $spacer-2 12px; + padding: 0 12px; font-size: $body-font-size; font-weight: $font-weight-semibold; // stylelint-disable-next-line primer/typography - line-height: 16px; + line-height: 32px; color: $text-white; text-align: center; white-space: nowrap; @@ -42,8 +42,10 @@ // Small .State--small { - padding: $spacer-1 $spacer-2; + padding-left: $spacer-2; + padding-right: $spacer-2; font-size: $font-size-small; + line-height: 24px; .octicon { width: 1em; // Ensures different icons don't change State indicator width From 4a5b0aa2372a6de27170b0bcecdbae19780313d6 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 2 Mar 2020 16:38:56 +0900 Subject: [PATCH 14/26] Add size scale --- src/support/variables/layout.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/support/variables/layout.scss b/src/support/variables/layout.scss index cec508c059..227235cad2 100644 --- a/src/support/variables/layout.scss +++ b/src/support/variables/layout.scss @@ -71,6 +71,20 @@ $em-spacer-4: 0.375em !default; // 3/8 $em-spacer-5: 0.5em !default; // 1/2 $em-spacer-6: 0.75em !default; // 3/4 +// Size scale +// Used for buttons, inputs, labels, avatars etc. +$size: 16px !default; + +$size-0: 0 !default; +$size-1: $size !default; // 16px +$size-2: $size-1 + 4px !default; // 20px +$size-3: $size-2 + 4px !default; // 24px +$size-4: $size-3 + 4px !default; // 28px +$size-5: $size-4 + 4px !default; // 32px +$size-6: $size-5 + 8px !default; // 40px +$size-7: $size-6 + 8px !default; // 48px +$size-8: $size-7 + 16px !default; // 64px + // Fixed-width container variables $container-width: 980px !default; $grid-gutter: 10px !default; From 61f3d85a502c57af898a53db97ac45088b180b4f Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 2 Mar 2020 16:39:52 +0900 Subject: [PATCH 15/26] Use size scale --- src/alerts/flash.scss | 3 ++- src/buttons/button.scss | 10 +++++----- src/forms/form-control.scss | 18 ++++++------------ src/forms/form-select.scss | 11 ++++------- src/labels/states.scss | 5 ++--- src/navigation/subnav.scss | 5 ++--- src/support/mixins/typography.scss | 7 +++++++ 7 files changed, 28 insertions(+), 31 deletions(-) diff --git a/src/alerts/flash.scss b/src/alerts/flash.scss index b8b82c86ea..d30c033368 100644 --- a/src/alerts/flash.scss +++ b/src/alerts/flash.scss @@ -1,8 +1,9 @@ // Default flash // stylelint-disable selector-max-type .flash { + min-height: $size-7; position: relative; - padding: $spacer-3; + padding: 12px $spacer-3; // stylelint-disable-next-line primer/colors color: $blue-800; // stylelint-disable-next-line primer/colors diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 33bc106434..f50329cf27 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -8,8 +8,7 @@ padding: 0 $spacer-3; font-size: $body-font-size; font-weight: $font-weight-semibold; - // stylelint-disable-next-line primer/typography - line-height: 32px; // + 2px from borders = 34px + line-height: heightWithoutBorder($size-5); white-space: nowrap; vertical-align: middle; cursor: pointer; @@ -270,10 +269,11 @@ // Tweak `line-height` to make them smaller. .btn-sm { // stylelint-disable-next-line primer/spacing - padding: 0 12px; + padding-left: 12px; + // stylelint-disable-next-line primer/spacing + padding-right: 12px; font-size: $font-size-small; - // stylelint-disable-next-line primer/typography - line-height: 26px; + line-height: heightWithoutBorder($size-4); } // Large button adds more padding around text. Use font-size utils to increase font-size.. e.g,

diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss index 7c95750584..be123b935c 100644 --- a/src/forms/form-control.scss +++ b/src/forms/form-control.scss @@ -17,12 +17,10 @@ label { .form-control, .form-select { - min-height: 34px; // stylelint-disable-next-line primer/spacing - padding: 6px 12px; + padding: 0 12px; font-size: $body-font-size; - // stylelint-disable-next-line primer/typography - line-height: 20px; + line-height: heightWithoutBorder($size-5); color: $text-gray-dark; vertical-align: middle; background-color: $bg-white; @@ -57,6 +55,7 @@ label { textarea.form-control { padding-top: $spacer-2; padding-bottom: $spacer-2; + line-height: $lh-default; } // Inputs with contrast for easy light gray backgrounds against white. @@ -94,19 +93,14 @@ textarea.form-control { // Mini inputs, to match .minibutton .input-sm { - min-height: 28px; - // stylelint-disable-next-line primer/spacing - padding-top: 3px; - // stylelint-disable-next-line primer/spacing - padding-bottom: 3px; font-size: $font-size-small; - // stylelint-disable-next-line primer/typography - line-height: 20px; + line-height: heightWithoutBorder($size-4); } // Large inputs .input-lg { - padding: $spacer-1 $spacer-3; + padding-left: $spacer-3; + padding-right: $spacer-3; font-size: $h4-size; } diff --git a/src/forms/form-select.scss b/src/forms/form-select.scss index ac9896714b..60bb31a58d 100644 --- a/src/forms/form-select.scss +++ b/src/forms/form-select.scss @@ -4,7 +4,7 @@ .form-select { display: inline-block; max-width: 100%; - height: 34px; + height: $size-5; padding-right: $spacer-4; background-color: $bg-white; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC"); @@ -24,13 +24,10 @@ } .select-sm { - height: 28px; - min-height: 28px; - // stylelint-disable-next-line primer/spacing - padding-top: 3px; - // stylelint-disable-next-line primer/spacing - padding-bottom: 3px; + height: $size-4; + min-height: $size-4; font-size: $font-size-small; + line-height: heightWithoutBorder($size-4); &[multiple] { height: auto; diff --git a/src/labels/states.scss b/src/labels/states.scss index 03dd0dccf6..50e386fe7f 100644 --- a/src/labels/states.scss +++ b/src/labels/states.scss @@ -15,8 +15,7 @@ padding: 0 12px; font-size: $body-font-size; font-weight: $font-weight-semibold; - // stylelint-disable-next-line primer/typography - line-height: 32px; + line-height: $size-5; color: $text-white; text-align: center; white-space: nowrap; @@ -45,7 +44,7 @@ padding-left: $spacer-2; padding-right: $spacer-2; font-size: $font-size-small; - line-height: 24px; + line-height: $size-3; .octicon { width: 1em; // Ensures different icons don't change State indicator width diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss index 9fa18c258e..3b9e2b6637 100644 --- a/src/navigation/subnav.scss +++ b/src/navigation/subnav.scss @@ -21,10 +21,9 @@ position: relative; float: left; // stylelint-disable-next-line primer/spacing - padding: 6px $spacer-3; + padding: 0 $spacer-3; font-weight: $font-weight-semibold; - // stylelint-disable-next-line primer/typography - line-height: 20px; + line-height: heightWithoutBorder($size-5); color: $text-gray-dark; border: $border; diff --git a/src/support/mixins/typography.scss b/src/support/mixins/typography.scss index 23ec0e3ecf..5c0302d069 100644 --- a/src/support/mixins/typography.scss +++ b/src/support/mixins/typography.scss @@ -1,3 +1,10 @@ +// heightWithoutBorder +// +// Removes top/bottom border from the total height +@function heightWithoutBorder($height) { + @return $height - ($border-width * 2); +} + // Text hiding for image based text replacement. // Higher performance than -9999px because it only renders // the size of the actual text, not a full 9999px box. From d1219becbbdd421a68585d33cb697b61e238f55b Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 2 Mar 2020 16:41:34 +0900 Subject: [PATCH 16/26] Add avatar sizes --- src/avatars/avatar.scss | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/avatars/avatar.scss b/src/avatars/avatar.scss index a58c5a4f2c..fa742e04e7 100644 --- a/src/avatars/avatar.scss +++ b/src/avatars/avatar.scss @@ -4,10 +4,13 @@ line-height: $lh-condensed-ultra; vertical-align: middle; border-radius: $border-radius; + max-width: 100%; } -// stylelint-disable-next-line primer/borders -.avatar-small { border-radius: 2px; } +.avatar-small { + // stylelint-disable-next-line primer/borders + border-radius: $border-radius / 2; +} .avatar-link { float: left; @@ -20,3 +23,14 @@ // stylelint-disable-next-line primer/spacing margin-bottom: 3px; } + +// sizes + +.avatar-1 { width: $size-1; height: $size-1; border-radius: $border-radius / 2; } +.avatar-2 { width: $size-2; height: $size-2; border-radius: $border-radius / 2; } +.avatar-3 { width: $size-3; height: $size-3; } +.avatar-4 { width: $size-4; height: $size-4; } +.avatar-5 { width: $size-5; height: $size-5; } +.avatar-6 { width: $size-6; height: $size-6; } +.avatar-7 { width: $size-7; height: $size-7; } +.avatar-8 { width: $size-8; height: $size-8; } From eec4f29e5223aff381ae679c782b43196b836f76 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 2 Mar 2020 16:41:49 +0900 Subject: [PATCH 17/26] Add size sticker sheet --- docs/content/stickersheet/index.md | 96 ++++++++++++++++++++++++++++++ 1 file changed, 96 insertions(+) create mode 100644 docs/content/stickersheet/index.md diff --git a/docs/content/stickersheet/index.md b/docs/content/stickersheet/index.md new file mode 100644 index 0000000000..9a75f8229d --- /dev/null +++ b/docs/content/stickersheet/index.md @@ -0,0 +1,96 @@ +--- +title: Sticker Sheet +path: stickersheet/index +--- + + +### Sizes + +```html live + +16px + + + + + +
+ +20px + +Label +IssueLabel +1.5K + + +
+ +24px + +Label +IssueLabel +State + + +
+ +28px + + + + + +
+ +32px + + + + + +State + +
+ +40px + +
+ +
+ +
+ +48px + + +
Flash alert
+ +
+ +64px + +
+
+ + + + Header + +
+
+ +``` From 8f0e32114e0f8682bb8af05ad3395f833b2c2247 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 2 Mar 2020 17:07:59 +0900 Subject: [PATCH 18/26] Lint --- src/alerts/flash.scss | 3 ++- src/avatars/avatar.scss | 39 ++++++++++++++++++------------ src/buttons/button.scss | 11 +++++---- src/forms/form-control.scss | 8 +++--- src/forms/form-select.scss | 4 ++- src/labels/labels.scss | 2 +- src/labels/mixins.scss | 5 ++-- src/labels/states.scss | 5 +++- src/navigation/subnav.scss | 4 +-- src/support/mixins/typography.scss | 4 +-- 10 files changed, 51 insertions(+), 34 deletions(-) diff --git a/src/alerts/flash.scss b/src/alerts/flash.scss index d30c033368..ee262bfa1a 100644 --- a/src/alerts/flash.scss +++ b/src/alerts/flash.scss @@ -1,8 +1,9 @@ // Default flash // stylelint-disable selector-max-type .flash { - min-height: $size-7; position: relative; + min-height: $size-7; + // stylelint-disable-next-line primer/spacing padding: 12px $spacer-3; // stylelint-disable-next-line primer/colors color: $blue-800; diff --git a/src/avatars/avatar.scss b/src/avatars/avatar.scss index fa742e04e7..0d95124be0 100644 --- a/src/avatars/avatar.scss +++ b/src/avatars/avatar.scss @@ -1,15 +1,10 @@ .avatar { display: inline-block; + max-width: 100%; overflow: hidden; // Ensure page layout in Firefox should images fail to load line-height: $lh-condensed-ultra; vertical-align: middle; border-radius: $border-radius; - max-width: 100%; -} - -.avatar-small { - // stylelint-disable-next-line primer/borders - border-radius: $border-radius / 2; } .avatar-link { @@ -24,13 +19,27 @@ margin-bottom: 3px; } -// sizes +// Border radius + +.avatar-1, +.avatar-2, +.avatar-small { + // stylelint-disable-next-line primer/borders + border-radius: $border-radius / 2; +} + +// Sizes + +@mixin avatar-size( $size ) { + width: $size; + height: $size; +} -.avatar-1 { width: $size-1; height: $size-1; border-radius: $border-radius / 2; } -.avatar-2 { width: $size-2; height: $size-2; border-radius: $border-radius / 2; } -.avatar-3 { width: $size-3; height: $size-3; } -.avatar-4 { width: $size-4; height: $size-4; } -.avatar-5 { width: $size-5; height: $size-5; } -.avatar-6 { width: $size-6; height: $size-6; } -.avatar-7 { width: $size-7; height: $size-7; } -.avatar-8 { width: $size-8; height: $size-8; } +.avatar-1 { @include avatar-size( $size-1 ); } +.avatar-2 { @include avatar-size( $size-2 ); } +.avatar-3 { @include avatar-size( $size-3 ); } +.avatar-4 { @include avatar-size( $size-4 ); } +.avatar-5 { @include avatar-size( $size-5 ); } +.avatar-6 { @include avatar-size( $size-6 ); } +.avatar-7 { @include avatar-size( $size-7 ); } +.avatar-8 { @include avatar-size( $size-8 ); } diff --git a/src/buttons/button.scss b/src/buttons/button.scss index f50329cf27..8d3b754edc 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -4,11 +4,11 @@ .btn { position: relative; display: inline-block; - // stylelint-disable-next-line primer/spacing padding: 0 $spacer-3; font-size: $body-font-size; font-weight: $font-weight-semibold; - line-height: heightWithoutBorder($size-5); + // stylelint-disable-next-line primer/typography + line-height: height-without-border($size-5); white-space: nowrap; vertical-align: middle; cursor: pointer; @@ -268,12 +268,13 @@ // // Tweak `line-height` to make them smaller. .btn-sm { - // stylelint-disable-next-line primer/spacing - padding-left: 12px; // stylelint-disable-next-line primer/spacing padding-right: 12px; + // stylelint-disable-next-line primer/spacing + padding-left: 12px; font-size: $font-size-small; - line-height: heightWithoutBorder($size-4); + // stylelint-disable-next-line primer/typography + line-height: height-without-border($size-4); } // Large button adds more padding around text. Use font-size utils to increase font-size.. e.g,

diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss index be123b935c..987738c779 100644 --- a/src/forms/form-control.scss +++ b/src/forms/form-control.scss @@ -20,7 +20,8 @@ label { // stylelint-disable-next-line primer/spacing padding: 0 12px; font-size: $body-font-size; - line-height: heightWithoutBorder($size-5); + // stylelint-disable-next-line primer/typography + line-height: height-without-border($size-5); color: $text-gray-dark; vertical-align: middle; background-color: $bg-white; @@ -94,13 +95,14 @@ textarea.form-control { // Mini inputs, to match .minibutton .input-sm { font-size: $font-size-small; - line-height: heightWithoutBorder($size-4); + // stylelint-disable-next-line primer/typography + line-height: height-without-border($size-4); } // Large inputs .input-lg { - padding-left: $spacer-3; padding-right: $spacer-3; + padding-left: $spacer-3; font-size: $h4-size; } diff --git a/src/forms/form-select.scss b/src/forms/form-select.scss index 60bb31a58d..238a37bbf8 100644 --- a/src/forms/form-select.scss +++ b/src/forms/form-select.scss @@ -4,6 +4,7 @@ .form-select { display: inline-block; max-width: 100%; + // stylelint-disable-next-line primer/typography height: $size-5; padding-right: $spacer-4; background-color: $bg-white; @@ -27,7 +28,8 @@ height: $size-4; min-height: $size-4; font-size: $font-size-small; - line-height: heightWithoutBorder($size-4); + // stylelint-disable-next-line primer/typography + line-height: height-without-border($size-4); &[multiple] { height: auto; diff --git a/src/labels/labels.scss b/src/labels/labels.scss index 308398e6f5..550402142e 100644 --- a/src/labels/labels.scss +++ b/src/labels/labels.scss @@ -10,8 +10,8 @@ .label, // TODO: Deprecte .Label { @include labels-base; - border-color: $border-color; background-color: transparent !important; // TODO: Remove again + border-color: $border-color; &:hover { text-decoration: none; diff --git a/src/labels/mixins.scss b/src/labels/mixins.scss index 0d68707f68..2e351848d4 100644 --- a/src/labels/mixins.scss +++ b/src/labels/mixins.scss @@ -10,14 +10,13 @@ font-size: $font-size-small; font-weight: $font-weight-semibold; line-height: 18px; - // stylelint-disable-next-line primer/borders border: $border-width $border-style transparent; border-radius: 2em; } @mixin labels-large { - padding-left: 10px; padding-right: 10px; + padding-left: 10px; line-height: 22px; } @@ -28,6 +27,6 @@ @mixin labels--inline { display: inline; + padding: 0.1667em 0.5em; font-size: 0.9em; - padding: .1667em .5em; } diff --git a/src/labels/states.scss b/src/labels/states.scss index 50e386fe7f..3b2a9ed45e 100644 --- a/src/labels/states.scss +++ b/src/labels/states.scss @@ -12,9 +12,11 @@ .state, // TODO: Deprecate .State { display: inline-block; + // stylelint-disable-next-line primer/spacing padding: 0 12px; font-size: $body-font-size; font-weight: $font-weight-semibold; + // stylelint-disable-next-line primer/typography line-height: $size-5; color: $text-white; text-align: center; @@ -41,9 +43,10 @@ // Small .State--small { - padding-left: $spacer-2; padding-right: $spacer-2; + padding-left: $spacer-2; font-size: $font-size-small; + // stylelint-disable-next-line primer/typography line-height: $size-3; .octicon { diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss index 3b9e2b6637..eb53e5478f 100644 --- a/src/navigation/subnav.scss +++ b/src/navigation/subnav.scss @@ -20,10 +20,10 @@ .subnav-item { position: relative; float: left; - // stylelint-disable-next-line primer/spacing padding: 0 $spacer-3; font-weight: $font-weight-semibold; - line-height: heightWithoutBorder($size-5); + // stylelint-disable-next-line primer/typography + line-height: height-without-border($size-5); color: $text-gray-dark; border: $border; diff --git a/src/support/mixins/typography.scss b/src/support/mixins/typography.scss index 5c0302d069..8687aed570 100644 --- a/src/support/mixins/typography.scss +++ b/src/support/mixins/typography.scss @@ -1,7 +1,7 @@ -// heightWithoutBorder +// height-without-border // // Removes top/bottom border from the total height -@function heightWithoutBorder($height) { +@function height-without-border($height) { @return $height - ($border-width * 2); } From 80552929b92f74957662243eb1d4cab66cfb6759 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 2 Mar 2020 17:25:58 +0900 Subject: [PATCH 19/26] Lint "--report-needless-disables" --- src/forms/form-select.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/forms/form-select.scss b/src/forms/form-select.scss index 238a37bbf8..db0e7e3a4c 100644 --- a/src/forms/form-select.scss +++ b/src/forms/form-select.scss @@ -4,7 +4,6 @@ .form-select { display: inline-block; max-width: 100%; - // stylelint-disable-next-line primer/typography height: $size-5; padding-right: $spacer-4; background-color: $bg-white; From d75c9d3cd981ba663c9bdb504627763a148bfcef Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 2 Mar 2020 18:13:56 +0900 Subject: [PATCH 20/26] Use size scale for .Counter --- src/labels/counters.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/labels/counters.scss b/src/labels/counters.scss index 083d89072a..22ea1e3164 100644 --- a/src/labels/counters.scss +++ b/src/labels/counters.scss @@ -1,13 +1,13 @@ // Counters are rounded-corner badges for numbers .Counter { display: inline-block; - min-width: 20px; // makes sure it's a circle with just one digit + min-width: $size-2; // makes sure it's a circle with just one digit // stylelint-disable-next-line primer/spacing padding: 0 6px; font-size: $font-size-small; font-weight: $font-weight-semibold; // stylelint-disable-next-line primer/typography - line-height: 20px; + line-height: $size-2; color: $text-gray-dark; text-align: center; // stylelint-disable-next-line primer/colors From ddc13d5962b2b25785b95d9634c3f80b7695fe61 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 2 Mar 2020 22:01:46 +0900 Subject: [PATCH 21/26] Add hover transition to buttons --- src/buttons/button.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 8d3b754edc..0f7198279b 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -78,13 +78,13 @@ background-color: $bg-default; border-color: $border-color-button; box-shadow: $box-shadow, $box-shadow-highlight; - transition: background-color 0.18s ease-out; + transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1); &:hover, &.hover, [open] > & { background-color: $bg-hover; - transition: none; + transition-duration: 0.1s; } &:active, From bbec11b79507d74689e4c9d4063536da4c9da6c8 Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 2 Mar 2020 23:10:51 +0900 Subject: [PATCH 22/26] Fix avatar stack --- src/avatars/avatar.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/avatars/avatar.scss b/src/avatars/avatar.scss index 0d95124be0..513e2851eb 100644 --- a/src/avatars/avatar.scss +++ b/src/avatars/avatar.scss @@ -1,6 +1,5 @@ .avatar { display: inline-block; - max-width: 100%; overflow: hidden; // Ensure page layout in Firefox should images fail to load line-height: $lh-condensed-ultra; vertical-align: middle; From 0c2242c78e46adfb463537f33b96eb37d590b0bd Mon Sep 17 00:00:00 2001 From: simurai Date: Mon, 2 Mar 2020 23:29:58 +0900 Subject: [PATCH 23/26] Remove transition on inverse buttons --- src/buttons/button.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/buttons/button.scss b/src/buttons/button.scss index 0f7198279b..ec11f3c776 100644 --- a/src/buttons/button.scss +++ b/src/buttons/button.scss @@ -177,7 +177,7 @@ @mixin btn-inverse-on-hover( $color, $bg-hover, $bg-active, $border-hover, $border-active, $shadow ) { color: $color; - transition-timing-function: cubic-bezier(0, 0.5, 0, 1); + transition: none; &:hover, [open] > & { From f53ce51c7c83ef8e61ea577216c7752e7f78ebcd Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 3 Mar 2020 10:43:57 +0900 Subject: [PATCH 24/26] Document avatar sizes --- docs/content/components/avatars.md | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/docs/content/components/avatars.md b/docs/content/components/avatars.md index 857e6f706d..16e1491d9c 100644 --- a/docs/content/components/avatars.md +++ b/docs/content/components/avatars.md @@ -15,15 +15,30 @@ Add `.avatar` to any `` element to make it an avatar. This resets some key Be sure to set `width` and `height` attributes for maximum browser performance. ```html live -jonrohan +jonrohan ``` ### Small avatars -We occasionally use smaller avatars. Anything less than `48px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level. +We occasionally use smaller avatars. Anything less than `24px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level. ```html live -jonrohan +jonrohan +``` + +### Avatar sizes + +Instead of using the `width` and `height` attribute, you can also use a class like `.avatar-[1-8]`. The sizes go from `16px` up to `64px`. Note: Avatar stacks are only suppurted for the `20px` avatar size. + +```html live +jonrohan +jonrohan +jonrohan +jonrohan +jonrohan +jonrohan +jonrohan +jonrohan ``` ### Parent-child avatars From 9bc1cd41a669e8748ea5adcd886f3c4bb30e09f2 Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 3 Mar 2020 11:18:12 +0900 Subject: [PATCH 25/26] Update labels.md --- docs/content/components/labels.md | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/docs/content/components/labels.md b/docs/content/components/labels.md index b768698697..616dcbc8f9 100644 --- a/docs/content/components/labels.md +++ b/docs/content/components/labels.md @@ -60,6 +60,27 @@ Labels come in a few different themes. Use a theme that helps communicate the co Note: Avoid using `Label--orange` next to `Label--red` since most people will find it hard to tell the difference. +### Label sizes + +If space allows, add the `Label--large` modidfier to add a bit more padding to lables. + +```html live +Default +Large +``` + +### Inline labels + +Sometimes when adding a label the line-height can be incrased. Or the parent element increases in height. If that is not desired, use the `Label--inline` modifier change to the `display` property to `inline`. The font-size also adapts. + +```html live +

+ Lorem Ipsum is simply dummy text + of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text. +

+``` + + ## Issue labels Issue labels are used for adding labels to issues and pull requests. They also come with emoji support. From 02c5ef68d75d47ee1188123831646556766d921e Mon Sep 17 00:00:00 2001 From: simurai Date: Tue, 3 Mar 2020 11:47:14 +0900 Subject: [PATCH 26/26] Reduce menu-item padding --- src/navigation/menu.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/navigation/menu.scss b/src/navigation/menu.scss index b98e6a16af..4de9f1ea94 100644 --- a/src/navigation/menu.scss +++ b/src/navigation/menu.scss @@ -13,8 +13,7 @@ .menu-item { position: relative; display: block; - // stylelint-disable-next-line primer/spacing - padding: 12px $spacer-3; + padding: $spacer-2 $spacer-3; color: $text-black; border-bottom: $border-width $border-style $border-gray-light;