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

use $responsive-variants in .border-*, .rounded-*;

Browse Source 
also, add rounded edge utilities to fix #533
This commit is contained in:
Shawn Allen 2018-07-17 22:57:13 -07:00
parent f3b8e57c42
commit 957e55c0ab
1 changed files with 48 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -42,24 +42,54 @@
/* Use with .border to turn the border rgba black 0.15 */
.border-black-fade { border-color: $border-black-fade !important; }
// Without borders
/* Remove all borders */
.border-0 { border: 0 !important; }
/* Remove the top border */
.border-top-0 { border-top: 0 !important; }
/* Remove the right border */
.border-right-0 { border-right: 0 !important; }
/* Remove the bottom border */
.border-bottom-0 { border-bottom: 0 !important; }
/* Remove the left border */
.border-left-0 { border-left: 0 !important; }
$edges: (
top: (top-left, top-right),
right: (top-right, bottom-right),
bottom: (bottom-right, bottom-left),
left: (bottom-left, top-left)
);
@each $breakpoint, $variant in $responsive-variants {
@include breakpoint($breakpoint) {
.border#{$variant}-0 { border: 0 !important; }
/* Remove the top border */
.border#{$variant}-top-0 { border-top: 0 !important; }
/* Remove the right border */
.border#{$variant}-right-0 { border-right: 0 !important; }
/* Remove the bottom border */
.border#{$variant}-bottom-0 { border-bottom: 0 !important; }
/* Remove the left border */
.border#{$variant}-left-0 { border-left: 0 !important; }
// Rounded corners
/* Remove the border-radius */
.rounded#{$variant}-0 { border-radius: 0 !important; }
/* Add a border-radius to all corners */
.rounded#{$variant}-1 { border-radius: $border-radius !important; }
/* Add a 2x border-radius to all corners */
.rounded#{$variant}-2 { border-radius: $border-radius * 2 !important; }
@each $edge, $corners in $edges {
.rounded#{$variant}-#{$edge}-0 {
@each $corner in $corners {
border-#{$corner}-radius: 0;
}
}
.rounded#{$variant}-#{$edge}-1 {
@each $corner in $corners {
border-#{$corner}-radius: $border-radius;
}
}
.rounded#{$variant}-#{$edge}-2 {
@each $corner in $corners {
border-#{$corner}-radius: $border-radius * 2;
}
}
}
}
}
// Rounded corners
/* Remove the border-radius */
.rounded-0 { border-radius: 0 !important; }
/* Add a border-radius to all corners */
.rounded-1 { border-radius: $border-radius !important; }
/* Add a 2x border-radius to all corners */
.rounded-2 { border-radius: $border-radius * 2 !important; }
/* Add a 50% border-radius to make something into a circle */
.circle { border-radius: 50% !important; }