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

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

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