Skip to content

Component refresh tweaks III #1055

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
simurai merged 17 commits into from
Apr 2, 2020
Merged

Component refresh tweaks III #1055

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
90737f7
Reduce transparency of icons and carets
simurai Mar 31, 2020
12e9ce7
Update green of btn-primary
simurai Mar 31, 2020
338d1e5
Increase shadow for .btn-primary
simurai Mar 31, 2020
1bbc010
Update button borders
simurai Mar 31, 2020
844abe0
Update btn border
simurai Mar 31, 2020
77f3e5e
Update $box-shadow
simurai Mar 31, 2020
34368b7
Lint
simurai Mar 31, 2020
481b80c
Use black shadow
simurai Apr 1, 2020
823d3b3
Add padding back to buttons
simurai Apr 1, 2020
a204260
Update labels.md
simurai Apr 1, 2020
e3c49ea
Lint
simurai Apr 1, 2020
6448c76
Add padding to form controls
simurai Apr 1, 2020
2d25f77
Add padding to subnav
simurai Apr 1, 2020
60bc044
Add padding to states
simurai Apr 1, 2020
f61be75
:fire: Remove height-without-border()
simurai Apr 2, 2020
c7bfa67
Update counters.scss
simurai Apr 2, 2020
c5821d5
Lint
simurai Apr 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 0 additions & 16 deletions docs/content/components/labels.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,22 +190,6 @@ You can also have icons and emoji in counters. Or use utilities for counters wit
<span class="Counter mr-1 bg-purple text-white">22</span>
```

## Small counters

Use the `Counter--small` modifier class to reduce the size of a counter.

```html live
<span class="Counter mr-1 Counter--gray-light">1</span>
<span class="Counter mr-1">23</span>
<span class="Counter mr-1 Counter--gray">456</span>
<span class="Counter mr-1">1.5K</span>
<div class="my-2"></div>
<span class="Counter Counter--small mr-1 Counter--gray-light">1</span>
<span class="Counter Counter--small mr-1">23</span>
<span class="Counter Counter--small mr-1 Counter--gray">456</span>
<span class="Counter Counter--small mr-1">1.5K</span>
```

Copy link
Copy Markdown
Member

@jonrohan jonrohan Apr 2, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see you deleting the docs here, but I didn't see Counter--small deleted in the css. Missed or already deleted before?

Copy link
Copy Markdown
Contributor Author

@simurai simurai Apr 2, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, the .Counter--small doesn't exist anymore and I just forgot to remove it from the docs. We might can consider adding a .Counter--large if we ever need it.

## Diffstat

Diffstats show how many deletions or additions a diff has. It's typically a row of 5 blocks that get colored with green or red.
Expand Down
48 changes: 23 additions & 25 deletions src/buttons/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@
.btn {
position: relative;
display: inline-block;
padding: 0 $spacer-3;
// 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: height-without-border($size-5);
line-height: 20px; // Specifically not inherit our `<body>` default
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
Expand Down Expand Up @@ -56,13 +57,14 @@
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.6;
opacity: 0.8;
}
}

Expand Down Expand Up @@ -114,27 +116,24 @@
// Primary button

.btn-primary {
$bg-default: #159739; // custom green
$bg-hover: #138934; // custom green
$bg-default: #2ea44f; // custom green
$bg-hover: #2c974b; // custom green
$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);
$box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03);

color: $text-white;
background-color: $bg-default;
border-color: $border-default;
// stylelint-disable-next-line primer/borders
border-color: rgba($black, 0.15);
box-shadow: $box-shadow;

&:hover,
&.hover,
[open] > & {
background-color: $bg-hover;
border-color: $border-hover;
}

&:active,
Expand All @@ -152,7 +151,7 @@
color: rgba($text-white, 0.8);
background-color: $bg-disabled;
// stylelint-disable-next-line primer/borders
border-color: rgba($border-default, 0.1);
border-color: rgba($black, 0.1);
box-shadow: $box-shadow;
}

Expand All @@ -169,22 +168,23 @@
}

.octicon {
color: inherit;
// 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, $border-hover, $border-active, $shadow ) {
@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: $border-hover;
box-shadow: 0 1px 0 rgba($shadow, 0.1), inset 0 1px 0 rgba($white, 0.03);
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);
Expand All @@ -200,7 +200,7 @@
&[aria-selected=true] {
color: $text-white;
background-color: $bg-active;
border-color: $border-active;
border-color: rgba($black, 0.15);
box-shadow: inset 0 1px 0 rgba($shadow, 0.2);
}

Expand Down Expand Up @@ -234,8 +234,6 @@
$color: $text-red,
$bg-hover: $red-600,
$bg-active: darken($red-600, 3%),
$border-hover: $red-700,
$border-active: $red-800,
$shadow: $red-900
);
}
Expand All @@ -247,8 +245,6 @@
$color: $blue-500,
$bg-hover: $blue-500,
$bg-active: darken($blue-500, 3%),
$border-hover: $blue-600,
$border-active: rgba($blue-700, 0.5),
$shadow: $blue-900
);
}
Expand All @@ -269,12 +265,14 @@
// Tweak `line-height` to make them smaller.
.btn-sm {
// stylelint-disable-next-line primer/spacing
padding-right: 12px;
// stylelint-disable-next-line primer/spacing
padding-left: 12px;
padding: 3px 12px;
font-size: $font-size-small;
// stylelint-disable-next-line primer/typography
line-height: height-without-border($size-4);
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, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
Expand Down
4 changes: 2 additions & 2 deletions src/buttons/misc.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,11 +169,11 @@
position: relative;
float: left;
// stylelint-disable-next-line primer/spacing
padding: 0 12px;
padding: 3px 12px;
font-size: $font-size-small;
font-weight: $font-weight-bold;
// stylelint-disable-next-line primer/typography
line-height: height-without-border($size-4);
line-height: 20px;
color: $text-gray-dark;
vertical-align: middle;
background-color: $bg-white;
Expand Down
13 changes: 8 additions & 5 deletions src/forms/form-control.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@ label {
.form-control,
.form-select {
// stylelint-disable-next-line primer/spacing
padding: 0 12px;
padding: 5px 12px;
font-size: $body-font-size;
// stylelint-disable-next-line primer/typography
line-height: height-without-border($size-5);
line-height: 20px;
color: $text-gray-dark;
vertical-align: middle;
background-color: $bg-white;
Expand Down Expand Up @@ -72,6 +72,7 @@ textarea.form-control {
// stylelint-disable-next-line primer/colors
background-color: $white-fade-15;
border-color: transparent;
box-shadow: none;

&::placeholder {
color: inherit;
Expand All @@ -94,15 +95,17 @@ textarea.form-control {

// Mini inputs, to match .minibutton
.input-sm {
// 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: height-without-border($size-4);
line-height: 20px;
}

// Large inputs
.input-lg {
padding-right: $spacer-3;
padding-left: $spacer-3;
font-size: $h4-size;
}

Expand Down
7 changes: 4 additions & 3 deletions src/forms/form-select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,11 @@

.select-sm {
height: $size-4;
min-height: $size-4;
// 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: height-without-border($size-4);

&[multiple] {
height: auto;
Expand Down
3 changes: 2 additions & 1 deletion src/labels/counters.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@
}

.octicon {
opacity: 0.5;
vertical-align: text-top;
opacity: 0.8;
}
}

Expand Down
8 changes: 4 additions & 4 deletions src/labels/states.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@
.State {
display: inline-block;
// stylelint-disable-next-line primer/spacing
padding: 0 12px;
padding: 6px 12px;
font-size: $body-font-size;
font-weight: $font-weight-semibold;
// stylelint-disable-next-line primer/typography
line-height: $size-5;
line-height: 20px;
color: $text-white;
text-align: center;
white-space: nowrap;
Expand All @@ -43,8 +43,8 @@
// Small

.State--small {
padding-right: $spacer-2;
padding-left: $spacer-2;
// stylelint-disable-next-line primer/spacing
padding: 0 10px;
font-size: $font-size-small;
// stylelint-disable-next-line primer/typography
line-height: $size-3;
Expand Down
5 changes: 3 additions & 2 deletions src/navigation/subnav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,11 @@
.subnav-item {
position: relative;
float: left;
padding: 0 $spacer-3;
// stylelint-disable-next-line primer/spacing
padding: 5px $spacer-3;
font-weight: $font-weight-semibold;
// stylelint-disable-next-line primer/typography
line-height: height-without-border($size-5);
line-height: 20px;
color: $text-gray-dark;
border: $border;

Expand Down
7 changes: 0 additions & 7 deletions src/support/mixins/typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,3 @@
// height-without-border
//
// Removes top/bottom border from the total height
@function height-without-border($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.
Expand Down
4 changes: 2 additions & 2 deletions src/support/variables/misc.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ $border-radius-2: 6px !default;
$border-radius: $border-radius-2 !default;

// Box shadow
$box-shadow: 0 1px 0 rgba($gray-400, 0.1) !default;
$box-shadow: 0 1px 0 rgba($black, 0.04) !default;
$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;
Expand All @@ -22,7 +22,7 @@ $box-shadow-inset: inset 0 1px 0 rgba($border-color, 0.2) !default; // top inner
$box-shadow-focus: 0 0 0 3px rgba($border-blue, 0.3) !default; // blue focus ring

// Button variables
$border-color-button: $border-color !default;
$border-color-button: rgba($black, 0.12) !default;
$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default; // TODO: Deprecate?

// Form variables
Expand Down