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:
commit
587c61f08f
@ -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.
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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
|
||||
|
||||
|
@ -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
|
||||
|
@ -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,
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -37,6 +37,10 @@
|
||||
&[aria-current] {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-bottom-color: #f9826c; // custom coral
|
||||
|
||||
.UnderlineNav-octicon {
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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,
|
||||
|
@ -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;
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user