ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-12 23:35:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

added margin prop to space component for setting margin top and button at the same time

Browse Source
This commit is contained in:
Grzegorz Leoniec 2018-10-11 10:16:12 +02:00
parent f344e3803a
commit 0c5f3be504
1 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
styleguide/src/system/components/layout/Space/Space.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<component <component
:is="tag" :is="tag"
:style="styles" :style="styles"
class="ds-space"> class="ds-space">
@ -38,6 +38,13 @@ export default {
type: [String, Object], type: [String, Object],
default: 'large' default: 'large'
}, },
/**
* The bottom and top margin of this space.
*/
margin: {
type: [String, Object],
default: null
},
/** /**
* The html element name used for this space. * The html element name used for this space.
*/ */
@ -48,8 +55,11 @@ export default {
}, },
computed: { computed: {
styles() { styles() {
const marginTop = this.mediaQuery(this.marginTop) const top = this.margin ? this.margin : this.marginTop
const marginBottom = this.mediaQuery(this.marginBottom) const bottom = this.margin ? this.margin : this.marginBottom
const marginTop = this.mediaQuery(top)
const marginBottom = this.mediaQuery(bottom)
const marginTopStyle = this.parseMargin('Top')(marginTop) const marginTopStyle = this.parseMargin('Top')(marginTop)
const marginBottomStyle = this.parseMargin('Bottom')(marginBottom) const marginBottomStyle = this.parseMargin('Bottom')(marginBottom)
return { return {