primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-09-11 16:36:07 +03:00
Code Issues Projects Releases Wiki Activity

Convert padding and border utilities to rem units with fallbacks (#2315)

Browse Source 
* 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:
Katie Langerman 2022-11-21 13:33:09 -08:00 committed by GitHub
parent 412d78208b
commit 15ef15ba96
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/support/variables/misc.scss
View File

@ -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;

37
src/utilities/borders.scss
View File

@ -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;
}

18
src/utilities/padding.scss
View File

@ -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;
}
}