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

move responsive borders from marketing into primer-utilities

Browse Source
This commit is contained in:
Shawn Allen 2018-08-23 15:32:56 -07:00
parent eea1415e31
commit 92fd60c59f
1 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
modules/primer-utilities/lib/borders.scss
View File

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