Skip to content
This repository was archived by the owner on Mar 17, 2026. It is now read-only.

Add Spacer section #39

Merged
srgzlb merged 3 commits into from
Feb 13, 2026
Merged

Add Spacer section #39

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
37d2bf4
Add spacer section
Feb 12, 2026
e68dfa7
Refactor size options in spacer section to use shorthand values
Feb 12, 2026
37f9624
Reduce the Spacer section's height to fit the designs
Feb 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion assets/general.css
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions assets/spacer.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

100 changes: 100 additions & 0 deletions sections/spacer.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
{%- assign color_scheme = section.settings.color_scheme -%}
{%- assign size_desktop = section.settings.size_desktop -%}
{%- assign size_mobile = section.settings.size_mobile -%}

{% comment %} CSS variables start {% endcomment %}
{%- capture variables -%}
{%- case size_desktop -%}
{%- when 'md' -%}
--spacer-height-desktop: 64px;
{%- when 'lg' -%}
--spacer-height-desktop: 128px;
{%- endcase -%}

{%- case size_mobile -%}
{%- when 'md' -%}
--spacer-height-mobile: 64px;
{%- when 'lg' -%}
--spacer-height-mobile: 128px;
{%- endcase -%}
{%- endcapture -%}
{% comment %} CSS variables end {% endcomment %}

<div class="spacer__wrapper{% if section_preview %} spacer__wrapper--preview{% endif %} color-{{- color_scheme.id -}}" style="{{- variables | escape -}}">
{% if section_preview %}
<span>This section will render an empty space</span>
{% endif %}
</div>

{% schema %}
{
"name": "Spacer",
"tag": "section",
"class": "spacer",
"css_assets": [
{
"file": "spacer.css"
}
],
"settings": [
{
"type": "header",
"content": "General settings"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color scheme",
"default": "set-1"
},
{
"type": "header",
"content": "Desktop settings"
},
{
"type": "select",
"id": "size_desktop",
"label": "Size",
"options": [
{
"value": "sm",
"label": "Small"
},
{
"value": "md",
"label": "Medium"
},
{
"value": "lg",
"label": "Large"
}
],
"default": "md"
},
{
"type": "header",
"content": "Mobile settings"
},
{
"type": "select",
"id": "size_mobile",
"label": "Size",
"options": [
{
"value": "sm",
"label": "Small"
},
{
"value": "md",
"label": "Medium"
},
{
"value": "lg",
"label": "Large"
}
],
"default": "md"
}
]
}
{% endschema %}
2 changes: 1 addition & 1 deletion src/scss/_base/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ body {
#main {
> section {
&:first-child {
> [class*="__wrapper"] {
> [class*="--padding-top"] {
--section-padding-top: calc(var(--padding-top-mobile, 20px) + #{$header-height} - var(--top-bar-height, 0px));

@include media-up(md) {
Expand Down
42 changes: 42 additions & 0 deletions src/scss/spacer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
// Import variables
@use 'variables' as *;

// Import mixins
@use '_helpers/mixins' as *;

.spacer {
&__wrapper {
--spacer-height: var(--spacer-height-mobile, 32px);

height: var(--spacer-height);
background: $background-primary;

@include media-up(md) {
--spacer-height: var(--spacer-height-desktop, 32px);
}

&--preview {
position: relative;
margin: 16px;
border-radius: $border-radius-block;
background-image: repeating-linear-gradient(
315deg,
$background-primary,
$background-primary 6px,
$color-border 6px,
$color-border 7px
) !important;

span {
display: inline-block;
position: absolute;
top: 50%;
left: 6px;
transform: translateY(-50%);
padding: 4px 6px;
background-color: $background-primary;
color: $color-primary;
}
}
}
}
100 changes: 100 additions & 0 deletions src/sections/spacer.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
{%- assign color_scheme = section.settings.color_scheme -%}
{%- assign size_desktop = section.settings.size_desktop -%}
{%- assign size_mobile = section.settings.size_mobile -%}

{% comment %} CSS variables start {% endcomment %}
{%- capture variables -%}
{%- case size_desktop -%}
{%- when 'md' -%}
--spacer-height-desktop: 64px;
{%- when 'lg' -%}
--spacer-height-desktop: 128px;
{%- endcase -%}

{%- case size_mobile -%}
{%- when 'md' -%}
--spacer-height-mobile: 64px;
{%- when 'lg' -%}
--spacer-height-mobile: 128px;
{%- endcase -%}
{%- endcapture -%}
{% comment %} CSS variables end {% endcomment %}

<div class="spacer__wrapper{% if section_preview %} spacer__wrapper--preview{% endif %} color-{{- color_scheme.id -}}" style="{{- variables | escape -}}">
{% if section_preview %}
<span>This section will render an empty space</span>
{% endif %}
</div>

{% schema %}
{
"name": "Spacer",
"tag": "section",
"class": "spacer",
"css_assets": [
{
"file": "spacer.css"
}
],
"settings": [
{
"type": "header",
"content": "General settings"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color scheme",
"default": "set-1"
},
{
"type": "header",
"content": "Desktop settings"
},
{
"type": "select",
"id": "size_desktop",
"label": "Size",
"options": [
{
"value": "sm",
"label": "Small"
},
{
"value": "md",
"label": "Medium"
},
{
"value": "lg",
"label": "Large"
}
],
"default": "md"
},
{
"type": "header",
"content": "Mobile settings"
},
{
"type": "select",
"id": "size_mobile",
"label": "Size",
"options": [
{
"value": "sm",
"label": "Small"
},
{
"value": "md",
"label": "Medium"
},
{
"value": "lg",
"label": "Large"
}
],
"default": "md"
}
]
}
{% endschema %}
Loading