diff --git a/components/lib/divider/BaseDivider.vue b/components/lib/divider/BaseDivider.vue index ca927613d..49060d104 100644 --- a/components/lib/divider/BaseDivider.vue +++ b/components/lib/divider/BaseDivider.vue @@ -19,18 +19,6 @@ const styles = ` content: ''; } -.p-divider-horizontal.p-divider-left { - justify-content: flex-start; -} - -.p-divider-horizontal.p-divider-right { - justify-content: flex-end; -} - -.p-divider-horizontal.p-divider-center { - justify-content: center; -} - .p-divider-content { z-index: 1; } @@ -52,18 +40,6 @@ const styles = ` content: ''; } -.p-divider-vertical.p-divider-top { - align-items: flex-start; -} - -.p-divider-vertical.p-divider-center { - align-items: center; -} - -.p-divider-vertical.p-divider-bottom { - align-items: flex-end; -} - .p-divider-solid.p-divider-horizontal:before { border-top-style: solid; } @@ -89,6 +65,14 @@ const styles = ` } `; +/* Position */ +const inlineStyles = { + root: ({ props }) => ({ + justifyContent: props.layout === 'horizontal' ? (props.align == 'center' || props.align == null ? 'center' : props.align === 'left' ? 'flex-start' : props.align === 'right' ? 'flex-end' : null) : null, + alignItems: props.vertical === 'vertical' ? (props.align == 'center' || props.align == null ? 'center' : props.align === 'top' ? 'flex-start' : props.align === 'bottom' ? 'flex-end' : null) : null + }) +}; + const classes = { root: ({ props }) => [ 'p-divider p-component', @@ -125,6 +109,7 @@ export default { }, css: { classes, + inlineStyles, loadStyle }, provide() { diff --git a/components/lib/divider/Divider.vue b/components/lib/divider/Divider.vue index 387e16015..3ec841b67 100644 --- a/components/lib/divider/Divider.vue +++ b/components/lib/divider/Divider.vue @@ -1,5 +1,5 @@