Added more options for split sections
This commit is contained in:
		| @@ -25,17 +25,28 @@ import React from 'react'; | |||||||
| import Section from './../Section'; | import Section from './../Section'; | ||||||
|  |  | ||||||
| export default (props) => { | 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; |   if(props.className) clazz += " " + props.className; | ||||||
|  |  | ||||||
|  |  | ||||||
|   return ( |   return ( | ||||||
|     <Section {...props} className={clazz} /> |     <Section {...props} className={clazz} /> | ||||||
|   ) |   ) | ||||||
| }; | }; | ||||||
|  |  | ||||||
| const Split = function(props) { | const Split = function(props) { | ||||||
|  |   let clazz = "c-split-section__split"; | ||||||
|  |  | ||||||
|  |   if(props.padded) clazz += " is-padded"; | ||||||
|  |   if(props.className) clazz += " "+props.className; | ||||||
|  |  | ||||||
|   return ( |   return ( | ||||||
|     <div className="c-split-section__split"> |     <div className={clazz}> | ||||||
|       { props.children } |       { props.children } | ||||||
|     </div> |     </div> | ||||||
|   ); |   ); | ||||||
|   | |||||||
| @@ -8,13 +8,26 @@ | |||||||
|  *  Version: |  *  Version: | ||||||
|  *    1.0.0 - 2018/05/28 |  *    1.0.0 - 2018/05/28 | ||||||
|  */ |  */ | ||||||
|  | $c-split-section__split--padding: 1em; | ||||||
|  |  | ||||||
| .c-split-section { | .c-split-section { | ||||||
|   @extend %t-flexbox; |   @extend %t-flexbox; | ||||||
|   @include t-align-items(stretch); |  | ||||||
|   @include t-flex-wrap(wrap); |   @include t-flex-wrap(wrap); | ||||||
|  |  | ||||||
|  |   &.is-stretched { | ||||||
|  |     @include t-align-items(stretch); | ||||||
|  |   } | ||||||
|  |  | ||||||
|  |   &.is-center { | ||||||
|  |     @include t-align-items(center); | ||||||
|  |   } | ||||||
|  |  | ||||||
|   &__split { |   &__split { | ||||||
|     width: 100%; |     width: 100%; | ||||||
|  |  | ||||||
|  |     &.is-padded { | ||||||
|  |       padding: $c-split-section__split--padding; | ||||||
|  |     } | ||||||
|   } |   } | ||||||
|  |  | ||||||
|   @include t-media-query($s-small-up) { |   @include t-media-query($s-small-up) { | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user