Merge pull request #11 from jungvonmatt/feature/spacings

Feature/spacings

Author: Ben Zörb

templates/theme-default/assets/scss/main.scss

@@ -16,6 +16,7 @@
 @import "objects/o-ratio";
 @import "objects/o-wrapper";
 @import "objects/o-slider";
+@import "objects/o-module";
 
 // 6. Components
 @import "components/c-link";

templates/theme-default/assets/scss/modules/_m-section.scss

@@ -1,4 +0,0 @@
-.m-section {
-  margin-top: var(--#{$spacing}, var(--#{$spacing}--md));
-  margin-bottom: var(--#{$spacing}, var(--#{$spacing}--md));
-}

templates/theme-default/assets/scss/objects/_o-module.scss

@@ -0,0 +1,14 @@
+.o-module {
+  $self: &;
+
+  overflow: hidden;
+  position: relative;
+  background-color: var(--#{$color}-background);
+  color: var(--#{$color}-text);
+  padding-bottom: var(--#{$spacing}, var(--#{$spacing}-10));
+
+  &.u-theme--dark + &.u-theme--light,
+  &.u-theme--light + &.u-theme--dark {
+    padding-top: var(--#{$spacing}, var(--#{$spacing}-10));
+  }
+}

templates/theme-default/assets/scss/utilities/_u-theme.scss

@@ -19,14 +19,3 @@
   background-color: var(--#{$color}-background);
   color: var(--#{$color}-text);
 }
-
-.u-theme--dark > .u-theme--light,
-.u-theme--light > .u-theme--dark {
-  padding-top: var(--#{$spacing}, 0);
-  padding-bottom: var(--#{$spacing}, 0);
-}
-
-.u-theme--dark > .u-theme--light + .u-theme--light,
-.u-theme--light > .u-theme--dark + .u-theme--dark {
-  margin-top: calc(-1 * var(--#{$spacing}, 0));
-}

templates/theme-default/layouts/partials/modules/m-columns.html

@@ -13,7 +13,7 @@
 {{- $column_left := $params.column_left | default slice -}}
 {{- $column_right := $params.column_right | default slice -}}
 
-<section class="m-section {{ with $class_name }}{{ . }}{{ end }}">
+<section class="o-module m-section{{ with $class_name }} {{ . }}{{ end }}">
   <div class="o-wrapper">
     <div class="m-columns__body">
       {{- range (slice $column_left $column_right) -}}

templates/theme-default/layouts/partials/modules/m-list/grid.html

@@ -13,7 +13,7 @@
 {{- $layout := $params.layout -}}
 {{- $columns := $params.columns | default 4 -}}
 
-<section class="m-section {{ with $class_name }}{{ . }}{{ end }}" style="--columns-desktop: {{ $columns }};">
+<section class="o-module m-section {{ with $class_name }}{{ . }}{{ end }}" style="--columns-desktop: {{ $columns }};">
   <div class="o-wrapper">
     {{- with $body -}}
       {{- $content := . -}}

templates/theme-default/layouts/partials/modules/m-list/slider.html

@@ -13,7 +13,7 @@
 {{- $layout := $params.layout -}}
 {{- $columns := $params.columns | default 4 -}}
 
-<section class="m-section {{ with $class_name }}{{ . }}{{ end }}"  style="--columns-desktop: {{ $columns }};">
+<section class="o-module m-section {{ with $class_name }}{{ . }}{{ end }}" style="--columns-desktop: {{ $columns }};">
   <div class="o-wrapper">
     <div class="m-list__body o-slider js-slider" data-loop="true">
       <div class="o-slider__outer-wrapper">

templates/theme-default/layouts/partials/modules/m-section.html

@@ -12,7 +12,7 @@
 {{- $body := $params.body -}}
 {{- $layout := $params.layout -}}
 
-<section class="{{ with $class_name }}{{ . }}{{ end }}">
+<section class="o-module{{ with $class_name }} {{ . }}{{ end }}">
   <div class="o-wrapper">
     {{- with $body -}}
       {{- $content := . -}}

templates/theme-default/layouts/partials/modules/m-stage.html

@@ -3,7 +3,11 @@
 {{- $options := .options | default dict -}}
 {{- $params := (merge $context $options) -}}
 {{- $modifier := cond (reflect.IsSlice $params.modifier) $params.modifier (cond (ne $params.modifier nil) (slice $params.modifier) dict ) -}}
-{{- $class_name := $params.class_name -}}
+
+{{- $class_name := partialCached "utils/get-class-names" (dict
+  "class" "m-stage"
+  "context" $params
+) . -}}
 
 {{- $title := $params.title -}}
 {{- $subtitle := $params.subtitle -}}
@@ -18,7 +22,7 @@
 {{- if and (ne $layout "default") (templates.Exists ( printf "partials/%s" $partialPath )) -}}
   {{- partial $partialPath . -}}
 {{- else -}}
-  <section class="m-stage m-stage--{{ $layout }}{{ range $modifier }} m-stage--{{ . }}{{ end }}{{ with $layout }} m-stage--{{ . }}{{end}}{{ with $class_name }} {{ . }}{{end}}">
+  <section class="o-module{{ with $class_name }} {{ . }}{{ end }}">
     <div class="m-stage__body">
       {{- with $media -}}
         {{- partial "utils/get-partial" (dict

templates/theme-default/layouts/partials/templates/t-default.html

@@ -9,6 +9,7 @@
     {{- partial "utils/get-partial" (dict
       "context" .
       "globals" $globals
+      "options" (dict "theme" $theme)
     ) -}}
   {{- end -}}
   {{- range $modules -}}