Fixed #4235 - Divider: unstyled mode updates

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() {

components/lib/divider/Divider.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" role="separator" :aria-orientation="layout" v-bind="ptm('root')" data-pc-name="divider">
+    <div :class="cx('root')" :style="sx('root')" role="separator" :aria-orientation="layout" v-bind="ptm('root')" data-pc-name="divider">
         <div v-if="$slots.default" :class="cx('content')" v-bind="ptm('content')">
             <slot></slot>
         </div>