diff --git a/public/section/layout/SplitSection.jsx b/public/section/layout/SplitSection.jsx
index 12b4f94..146edfd 100644
--- a/public/section/layout/SplitSection.jsx
+++ b/public/section/layout/SplitSection.jsx
@@ -25,17 +25,28 @@ import React from 'react';
import Section from './../Section';
export default (props) => {
- let clazz = "c-split-section";
+ let aligned = "stretched";
+ if(props.align) {
+ aligned = props.align;
+ }
+
+ let clazz = "c-split-section is-" + aligned;
if(props.className) clazz += " " + props.className;
+
return (
)
};
const Split = function(props) {
+ let clazz = "c-split-section__split";
+
+ if(props.padded) clazz += " is-padded";
+ if(props.className) clazz += " "+props.className;
+
return (
-
+
{ props.children }
);
diff --git a/public/styles/components/_split-section.scss b/public/styles/components/_split-section.scss
index 3567642..0fba54b 100644
--- a/public/styles/components/_split-section.scss
+++ b/public/styles/components/_split-section.scss
@@ -8,16 +8,29 @@
* Version:
* 1.0.0 - 2018/05/28
*/
+$c-split-section__split--padding: 1em;
+
.c-split-section {
@extend %t-flexbox;
- @include t-align-items(stretch);
@include t-flex-wrap(wrap);
+ &.is-stretched {
+ @include t-align-items(stretch);
+ }
+
+ &.is-center {
+ @include t-align-items(center);
+ }
+
&__split {
width: 100%;
+
+ &.is-padded {
+ padding: $c-split-section__split--padding;
+ }
}
@include t-media-query($s-small-up) {
- @include t-flex-wrap(nowrap);
+ @include t-flex-wrap(nowrap);
}
}