mirror of
https://github.com/primer/css.git
synced 2024-09-11 16:36:07 +03:00
Convert padding and border utilities to rem units with fallbacks (#2315)
* add rem units * Stylelint auto-fixes * Create beige-dragons-appear.md * use rem * borders * change from medium to large radius * lint * lint Co-authored-by: Actions Auto Build <actions@github.com>
This commit is contained in:
parent
412d78208b
commit
15ef15ba96
@ -4,6 +4,7 @@
|
||||
$border-width: 1px !default;
|
||||
$border-style: solid !default;
|
||||
$border: $border-width $border-style var(--color-border-default) !default;
|
||||
$border-rem: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default) !default;
|
||||
|
||||
// Border Radius
|
||||
$border-radius-1: 4px !default;
|
||||
|
@ -1,29 +1,29 @@
|
||||
// Core border utilities
|
||||
// stylelint-disable block-opening-brace-space-before
|
||||
// stylelint-disable block-opening-brace-space-before, primer/borders
|
||||
|
||||
/* Add a gray border to the left and right */
|
||||
.border-x {
|
||||
border-right: $border !important;
|
||||
border-left: $border !important;
|
||||
border-right: $border-rem !important;
|
||||
border-left: $border-rem !important;
|
||||
}
|
||||
|
||||
/* Add a gray border to the top and bottom */
|
||||
.border-y {
|
||||
border-top: $border !important;
|
||||
border-bottom: $border !important;
|
||||
border-top: $border-rem !important;
|
||||
border-bottom: $border-rem !important;
|
||||
}
|
||||
|
||||
/* Responsive gray borders */
|
||||
@each $breakpoint, $variant in $responsive-variants {
|
||||
@include breakpoint($breakpoint) {
|
||||
/* Add a gray border on all sides at/above this breakpoint */
|
||||
.border#{$variant} { border: $border !important; }
|
||||
.border#{$variant} { border: $border-rem !important; }
|
||||
.border#{$variant}-0 { border: 0 !important; }
|
||||
|
||||
.border#{$variant}-top { border-top: $border !important; }
|
||||
.border#{$variant}-right { border-right: $border !important; }
|
||||
.border#{$variant}-bottom { border-bottom: $border !important; }
|
||||
.border#{$variant}-left { border-left: $border !important; }
|
||||
.border#{$variant}-top { border-top: $border-rem !important; }
|
||||
.border#{$variant}-right { border-right: $border-rem !important; }
|
||||
.border#{$variant}-bottom { border-bottom: $border-rem !important; }
|
||||
.border#{$variant}-left { border-left: $border-rem !important; }
|
||||
|
||||
.border#{$variant}-top-0 { border-top: 0 !important; }
|
||||
.border#{$variant}-right-0 { border-right: 0 !important; }
|
||||
@ -31,11 +31,11 @@
|
||||
.border#{$variant}-left-0 { border-left: 0 !important; }
|
||||
|
||||
// Rounded corners
|
||||
.rounded#{$variant} { border-radius: $border-radius !important; }
|
||||
.rounded#{$variant} { border-radius: var(--primer-borderRadius-medium, $border-radius-2) !important; }
|
||||
.rounded#{$variant}-0 { border-radius: 0 !important; }
|
||||
.rounded#{$variant}-1 { border-radius: $border-radius-1 !important; }
|
||||
.rounded#{$variant}-2 { border-radius: $border-radius-2 !important; }
|
||||
.rounded#{$variant}-3 { border-radius: $border-radius-3 !important; }
|
||||
.rounded#{$variant}-1 { border-radius: var(--primer-borderRadius-small, $border-radius-1) !important; }
|
||||
.rounded#{$variant}-2 { border-radius: var(--primer-borderRadius-medium, $border-radius-2) !important; }
|
||||
.rounded#{$variant}-3 { border-radius: var(--primer-borderRadius-large, $border-radius-3) !important; }
|
||||
|
||||
@each $edge, $corners in $edges {
|
||||
.rounded#{$variant}-#{$edge}-0 {
|
||||
@ -46,19 +46,19 @@
|
||||
|
||||
.rounded#{$variant}-#{$edge}-1 {
|
||||
@each $corner in $corners {
|
||||
border-#{$corner}-radius: $border-radius-1 !important;
|
||||
border-#{$corner}-radius: var(--primer-borderRadius-small, $border-radius-1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rounded#{$variant}-#{$edge}-2 {
|
||||
@each $corner in $corners {
|
||||
border-#{$corner}-radius: $border-radius-2 !important;
|
||||
border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.rounded#{$variant}-#{$edge}-3 {
|
||||
@each $corner in $corners {
|
||||
border-#{$corner}-radius: $border-radius-3 !important;
|
||||
border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-3) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -66,10 +66,9 @@
|
||||
}
|
||||
|
||||
/* Add a 50% border-radius to make something into a circle */
|
||||
.circle { border-radius: 50% !important; }
|
||||
.circle { border-radius: var(--primer-borderRadius-full, 50%) !important; }
|
||||
|
||||
/* Change the border style to dashed, in conjunction with another utility */
|
||||
.border-dashed {
|
||||
// stylelint-disable-next-line primer/borders
|
||||
border-style: dashed !important;
|
||||
}
|
||||
|
@ -7,8 +7,8 @@
|
||||
@each $breakpoint, $variant in $responsive-variants {
|
||||
@include breakpoint($breakpoint) {
|
||||
// Loop through the spacer values
|
||||
@each $scale, $size in $spacer-map-extended {
|
||||
@if ($scale < length($spacer-map)) {
|
||||
@each $scale, $size in $spacer-map-rem-extended {
|
||||
@if ($scale < length($spacer-map-rem)) {
|
||||
/* Set a $size padding to all sides at $breakpoint */
|
||||
.p#{$variant}-#{$scale} { padding: $size !important; }
|
||||
}
|
||||
@ -22,7 +22,7 @@
|
||||
/* Set a $size padding to the left at $breakpoint */
|
||||
.pl#{$variant}-#{$scale} { padding-left: $size !important; }
|
||||
|
||||
@if ($scale < length($spacer-map)) {
|
||||
@if ($scale < length($spacer-map-rem)) {
|
||||
/* Set a $size padding to the left & right at $breakpoint */
|
||||
.px#{$variant}-#{$scale} {
|
||||
padding-right: $size !important;
|
||||
@ -41,16 +41,16 @@
|
||||
|
||||
// responsive padding for containers
|
||||
.p-responsive {
|
||||
padding-right: $spacer-3 !important;
|
||||
padding-left: $spacer-3 !important;
|
||||
padding-right: var(--base-size-16, $spacer-3) !important;
|
||||
padding-left: var(--base-size-16, $spacer-3) !important;
|
||||
|
||||
@include breakpoint(sm) {
|
||||
padding-right: $spacer-6 !important;
|
||||
padding-left: $spacer-6 !important;
|
||||
padding-right: var(--base-size-40, $spacer-6) !important;
|
||||
padding-left: var(--base-size-40, $spacer-6) !important;
|
||||
}
|
||||
|
||||
@include breakpoint(lg) {
|
||||
padding-right: $spacer-3 !important;
|
||||
padding-left: $spacer-3 !important;
|
||||
padding-right: var(--base-size-16, $spacer-3) !important;
|
||||
padding-left: var(--base-size-16, $spacer-3) !important;
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user