diff --git a/src/utilities/borders.scss b/src/utilities/borders.scss index 5ae47f1f..5ba2e834 100644 --- a/src/utilities/borders.scss +++ b/src/utilities/borders.scss @@ -2,19 +2,16 @@ // stylelint-disable primer/selector-no-utility // stylelint-disable block-opening-brace-space-before, comment-empty-line-before -/* Add a gray border on all sides */ -.border { border: $border !important; } - -/* Add a gray border to the left and right */ +/* Add a gray border to the top and bottom */ .border-y { border-top: $border !important; border-bottom: $border !important; } -/* Remove borders from all sides */ -.border-0 { border: 0 !important; } - -.border-dashed { border-style: dashed !important; } +/* Change the border style to dashed, in conjunction with another utility */ +.border-dashed { + border-style: dashed !important; +} $edges: ( top: (top-left, top-right), @@ -23,9 +20,13 @@ $edges: ( left: (bottom-left, top-left) ); +/* Responsive gray borders */ @each $breakpoint, $variant in $responsive-variants { @include breakpoint($breakpoint) { - /* Add a gray border */ + /* Add a gray border on all edges at this breakpoint */ + .border#{$variant} { border: $border !important; } + .border#{$variant}-0 { border: 0 !important; } + /* Add a gray border to the top */ .border#{$variant}-top { border-top: $border !important; } /* Add a gray border to the right */