diff --git a/modules/primer-utilities/lib/borders.scss b/modules/primer-utilities/lib/borders.scss index 4a15da5a..4bdd48f3 100644 --- a/modules/primer-utilities/lib/borders.scss +++ b/modules/primer-utilities/lib/borders.scss @@ -1,22 +1,18 @@ // Border utilities // stylelint-disable block-opening-brace-space-before, primer/selector-no-utility, comment-empty-line-before -/* Add a gray border */ -.border { border: $border !important; } -/* Add a gray border to the top */ -.border-top { border-top: $border !important; } -/* Add a gray border to the right */ -.border-right { border-right: $border !important; } -/* Add a gray border to the bottom */ -.border-bottom { border-bottom: $border !important; } -/* Add a gray border to the left */ -.border-left { border-left: $border !important; } +/* Add a gray border on all sides */ +.border { border: $border !important; } + /* Add a gray border to the left and right */ .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; } /* Use with .border to turn the border blue */ @@ -51,7 +47,16 @@ $edges: ( @each $breakpoint, $variant in $responsive-variants { @include breakpoint($breakpoint) { - .border#{$variant}-0 { border: 0 !important; } + /* Add a gray border */ + /* Add a gray border to the top */ + .border#{$variant}-top { border-top: $border !important; } + /* Add a gray border to the right */ + .border#{$variant}-right { border-right: $border !important; } + /* Add a gray border to the bottom */ + .border#{$variant}-bottom { border-bottom: $border !important; } + /* Add a gray border to the left */ + .border#{$variant}-left { border-left: $border !important; } + /* Remove the top border */ .border#{$variant}-top-0 { border-top: 0 !important; } /* Remove the right border */