mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-04-06 20:21:22 -06:00
55 lines
1.9 KiB
SCSS
55 lines
1.9 KiB
SCSS
// Padding spacer utilities
|
|
// stylelint-disable block-opening-brace-space-before, declaration-colon-space-before
|
|
// stylelint-disable comment-empty-line-before
|
|
|
|
// Responsive padding spacer utilities
|
|
@each $breakpoint, $variant in $responsive-variants {
|
|
@include breakpoint($breakpoint) {
|
|
// Loop through the spacer values
|
|
@for $i from 1 through length($spacers) {
|
|
$size: nth($spacers, $i); // xs, sm, md, lg, xl
|
|
$scale: $i - 1; // 0, 1, 2, 3, 4, 5, 6
|
|
|
|
/* Set a $size padding to all sides at $breakpoint */
|
|
.p#{$variant}-#{$scale} { padding: $size !important; }
|
|
/* Set a $size padding to the top at $breakpoint */
|
|
.pt#{$variant}-#{$scale} { padding-top: $size !important; }
|
|
/* Set a $size padding to the right at $breakpoint */
|
|
.pr#{$variant}-#{$scale} { padding-right: $size !important; }
|
|
/* Set a $size padding to the bottom at $breakpoint */
|
|
.pb#{$variant}-#{$scale} { padding-bottom: $size !important; }
|
|
/* Set a $size padding to the left at $breakpoint */
|
|
.pl#{$variant}-#{$scale} { padding-left: $size !important; }
|
|
|
|
/* Set a $size padding to the left & right at $breakpoint */
|
|
.px#{$variant}-#{$scale} {
|
|
padding-right: $size !important;
|
|
padding-left: $size !important;
|
|
}
|
|
|
|
/* Set a $size padding to the top & bottom at $breakpoint */
|
|
.py#{$variant}-#{$scale} {
|
|
padding-top: $size !important;
|
|
padding-bottom: $size !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// responsive padding for containers
|
|
// stylelint-disable-next-line primer/selector-no-utility
|
|
.p-responsive {
|
|
padding-right: $spacer-3 !important;
|
|
padding-left: $spacer-3 !important;
|
|
|
|
@include breakpoint(sm) {
|
|
padding-right: $spacer-6 !important;
|
|
padding-left: $spacer-6 !important;
|
|
}
|
|
|
|
@include breakpoint(lg) {
|
|
padding-right: $spacer-3 !important;
|
|
padding-left: $spacer-3 !important;
|
|
}
|
|
}
|