framework/sage
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new spacing vars and framework classes

Browse Source
This commit is contained in:
Steve Ross
2026-02-12 16:32:35 +00:00
parent 1c18e385b6
commit 79e6fb771e
2 changed files with 55 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
resources/css/global/framework/_spacing.scss
View File

@@ -34,8 +34,12 @@ figure {
width: calc(100% - variables.$innerMedium * 2);
margin: auto;
@media (min-width: variables.$screen-md) {
width: calc(100% - variables.$innerLarge * 2);
@container (min-width: #{variables.$screen-md}) {
width: calc(100% - variables.$innerLarge * 3);
}
@container (min-width: #{variables.$screen-lg}) {
width: calc(100% - variables.$innerLarge * 4);
}
&-full { width: auto; }
@@ -49,29 +53,64 @@ figure {
.section {
padding: variables.$sectionMedium 0;
&-small { padding: variables.$sectionSmall 0; }
&-medium { padding: variables.$sectionMedium 0; }
&-large { padding: variables.$sectionLarge 0; }
&-small { padding: variables.$sectionSmall unset; }
&-medium { padding: variables.$sectionMedium unset; }
&-large { padding: variables.$sectionLarge unset; }
&-zero-top { padding-top: 0; }
&-zero-bottom { padding-bottom: 0; }
@container (min-width: #{variables.$screen-md}) {
padding: (variables.$sectionMedium * 1.5) unset;
&-small { padding: (variables.$sectionSmall * 1.5) unset; }
&-medium { padding: (variables.$sectionMedium * 1.5) unset; }
&-large { padding: (variables.$sectionLarge * 1.5) unset; }
}
@container (min-width: #{variables.$screen-lg}) {
padding: (variables.$sectionMedium * 2) 0;
&-small { padding: (variables.$sectionSmall * 2) 0; }
&-medium { padding: (variables.$sectionMedium * 2) 0; }
&-large { padding: (variables.$sectionLarge * 2) 0; }
}
&-zero-top { padding-top: unset; }
&-zero-bottom { padding-bottom: unset; }
}
.inner {
padding: variables.$innerMedium;
&-small { padding: variables.$innerSmall; }
&-largest { padding: variables.$innerLargest; }
&-larger { padding: variables.$innerLarger; }
&-large { padding: variables.$innerLarge; }
&-small { padding: variables.$innerSmall; }
&-smaller { padding: variables.$innerSmaller; }
&-smallest { padding: variables.$innerSmallest; }
&-zero-x {
padding-left: 0;
padding-right: 0;
@container (min-width: #{variables.$screen-md}) {
padding: (variables.$innerMedium * 1.5);
&-largest { padding: (variables.$innerLargest * 1.25); }
&-larger { padding: (variables.$innerLarger * 1.25); }
&-large { padding: (variables.$innerLarge * 1.25); }
&-small { padding: (variables.$innerSmall * 1.25); }
&-smaller { padding: (variables.$innerSmaller * 1.25); }
&-smallest { padding: (variables.$innerSmallest * 1.25); }
}
&-zero-y {
padding-top: 0;
padding-top: 0;
@container (min-width: #{variables.$screen-lg}) {
padding: (variables.$innerMedium * 2);
&-largest { padding: (variables.$innerLargest * 1.5); }
&-larger { padding: (variables.$innerLarger * 1.5); }
&-large { padding: (variables.$innerLarge * 1.5); }
&-small { padding: (variables.$innerSmall * 1.5); }
&-smaller { padding: (variables.$innerSmaller * 1.5); }
&-smallest { padding: (variables.$innerSmallest * 1.5); }
}
&-zero-x { padding-left: unset; padding-right: unset; }
&-zero-y { padding-top: unset; padding-top: unset; }
}
.rounded {

2
resources/css/global/variables/_spacing.scss
View File

@@ -23,7 +23,7 @@ $containerMedium: 60.000em;
$containerSmall: 50.000em;
$containerNarrow: 34.000em;
$innerLarger: 5.000em;
$innerLargest: 5.000em;
$innerLarger: 3.000em;
$innerLarge: 2.000em;
$innerMedium: 1.500em;