feat(isabelle-edits): Adds spacing, heading, and border utilities
Adds utility classes for spacing, headings, and borders to provide more flexible styling options. This commit introduces: - Spacing utilities with responsive adjustments for different screen sizes. - A heading selector for simplified styling of heading elements. - A border utility for applying a consistent border style.
This commit is contained in:
@ -10,10 +10,10 @@ Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
//Abstracts: Things used throughout the site such as utility classes and generic overrides.
|
//Abstracts: Things used throughout the site such as utility classes and generic overrides.
|
||||||
@import "abstracts/utilities";
|
|
||||||
//@import "abstracts/base";
|
|
||||||
@import "abstracts/functions";
|
@import "abstracts/functions";
|
||||||
@import "abstracts/mixins";
|
@import "abstracts/mixins";
|
||||||
|
@import "abstracts/utilities";
|
||||||
|
//@import "abstracts/base";
|
||||||
|
|
||||||
// Components: parts of the theme itself that are not associated with a module.
|
// Components: parts of the theme itself that are not associated with a module.
|
||||||
//@import "components/buttons";
|
//@import "components/buttons";
|
||||||
|
|||||||
@ -1,3 +1,30 @@
|
|||||||
|
// Spacers
|
||||||
|
$section-spacer: rem-calc(50px);
|
||||||
|
$section-spacer-small: rem-calc(25px);
|
||||||
|
|
||||||
|
.section-spacer {
|
||||||
|
margin-top: $section-spacer;
|
||||||
|
@include bs5-media-breakpoint-up(lg) {
|
||||||
|
margin-top: calc($section-spacer * 1.5);
|
||||||
|
}
|
||||||
|
&--small {
|
||||||
|
margin-top: $section-spacer-small;
|
||||||
|
@include bs5-media-breakpoint-up(lg) {
|
||||||
|
margin-top: calc($section-spacer-small * 1.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Header selector for interpolation
|
// Header selector for interpolation
|
||||||
// Example usage: #{$headings} { ... }
|
// Example usage: #{$headings} { ... }
|
||||||
$headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";
|
$headings: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";
|
||||||
|
|
||||||
|
// Background
|
||||||
|
.bg__block {
|
||||||
|
// background: url(../img/bg.svg) repeat center center, $tertiary;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Border
|
||||||
|
.bordered {
|
||||||
|
border: 1px solid $border-color !important;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user