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

feat(utilities): add .border-{brk}, border-{brk}-0 classes

Browse Source
This commit is contained in:
Shawn Allen 2019-04-18 15:58:46 -07:00
parent e550970dd4
commit 4861072abd
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/utilities/borders.scss
View File

@ -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 */