1
1
mirror of https://github.com/primer/css.git synced 2024-12-14 06:44:38 +03:00

Merge pull request #1047 from primer/next-2

Component refresh tweaks II
This commit is contained in:
simurai 2020-03-26 19:56:52 +09:00 committed by GitHub
commit 587c61f08f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 37 additions and 21 deletions

View File

@ -56,6 +56,8 @@ Labels come in a few different themes. Use a theme that helps communicate the co
<span class="Label mr-1 Label--red" title="Label: Error">Error</span>
<span class="Label mr-1 Label--green" title="Label: Success">Success</span>
<span class="Label mr-1 Label--blue" title="Label: Info">Info</span>
<span class="Label mr-1 Label--purple" title="Label: PRO">PRO</span>
<span class="Label mr-1 Label--pink" title="Label: Sponsor">Sponsor</span>
```
Note: Avoid using `Label--orange` next to `Label--red` since most people will find it hard to tell the difference.

View File

@ -12,7 +12,7 @@
bottom: -9%;
background-color: $bg-white; // For transparent backgrounds
// stylelint-disable-next-line primer/borders
border-radius: 2px;
border-radius: $border-radius-1;
// stylelint-disable-next-line primer/box-shadow
box-shadow: -2px -2px 0 rgba($white, 0.8);
}

View File

@ -35,7 +35,7 @@
background-color: $bg-white;
border-right: $border-width $border-style $border-white;
// stylelint-disable-next-line primer/borders
border-radius: 2px;
border-radius: $border-radius-1;
transition: margin 0.1s ease-in-out;
&:first-child {
@ -50,7 +50,7 @@
// stylelint-disable selector-max-type
img {
// stylelint-disable-next-line primer/borders
border-radius: 2px;
border-radius: $border-radius-1;
}
// stylelint-enable selector-max-type

View File

@ -24,7 +24,7 @@
.avatar-2,
.avatar-small {
// stylelint-disable-next-line primer/borders
border-radius: $border-radius / 2;
border-radius: $border-radius-1;
}
// Sizes

View File

@ -244,7 +244,7 @@
.btn-outline {
@include btn-inverse-on-hover(
$color: $blue-600,
$color: $blue-500,
$bg-hover: $blue-500,
$bg-active: darken($blue-500, 3%),
$border-hover: $blue-600,

View File

@ -169,11 +169,11 @@
position: relative;
float: left;
// stylelint-disable-next-line primer/spacing
padding: 3px 12px;
padding: 0 12px;
font-size: $font-size-small;
font-weight: $font-weight-bold;
// stylelint-disable-next-line primer/typography
line-height: 20px;
line-height: height-without-border($size-4);
color: $text-gray-dark;
vertical-align: middle;
background-color: $bg-white;

View File

@ -75,7 +75,19 @@
}
.Label--blue {
// stylelint-disable-next-line primer/colors
color: $blue-600;
color: $text-blue;
border-color: $border-blue;
}
.Label--purple {
color: $text-purple;
// stylelint-disable-next-line primer/borders
border-color: $purple-400;
}
.Label--pink {
// stylelint-disable-next-line primer/colors
color: $pink-600;
// stylelint-disable-next-line primer/borders
border-color: $pink-400;
}

View File

@ -49,8 +49,6 @@
&[aria-selected=true],
&[aria-current] {
cursor: default;
// stylelint-disable-next-line primer/colors
background-color: #fff2f0; // custom coral
&::before {
position: absolute;

View File

@ -37,6 +37,10 @@
&[aria-current] {
// stylelint-disable-next-line primer/borders
border-bottom-color: #f9826c; // custom coral
.UnderlineNav-octicon {
color: $text-gray;
}
}
}

View File

@ -32,7 +32,7 @@
[aria-current],
[aria-current]:hover {
// stylelint-disable-next-line primer/borders
border-color: $orange-500;
border-color: #f9826c; // custom coral
}
.gap,

View File

@ -1,11 +1,15 @@
// Miscellaneous variables
// Border size
// Border
$border-width: 1px !default;
$border-color: $border-gray !default;
$border-style: solid !default;
$border: $border-width $border-color $border-style !default;
$border-radius: 6px !default;
// Border Radius
$border-radius-1: 4px !default;
$border-radius-2: 6px !default;
$border-radius: $border-radius-2 !default;
// Box shadow
$box-shadow: 0 1px 0 rgba($gray-400, 0.1) !default;

View File

@ -40,14 +40,10 @@
.border#{$variant}-left-0 { border-left: 0 !important; }
// Rounded corners
/* Remove the border-radius */
.rounded#{$variant} { border-radius: $border-radius !important; }
.rounded#{$variant}-0 { border-radius: 0 !important; }
/* Add a half border-radius to all corners */
.rounded#{$variant}-1 { border-radius: $border-radius / 2 !important; }
/* Add a border-radius to all corners */
.rounded#{$variant}-2 { border-radius: $border-radius !important; }
/* Add a double border-radius to all corners */
.rounded#{$variant}-3 { border-radius: $border-radius * 2 !important; }
.rounded#{$variant}-1 { border-radius: $border-radius-1 !important; }
.rounded#{$variant}-2 { border-radius: $border-radius-2 !important; }
@each $edge, $corners in $edges {
.rounded#{$variant}-#{$edge}-0 {