From 1979589d83e38884b4bd328368c48d3d735c2d2b Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Fri, 24 Apr 2020 19:15:39 +0300
Subject: [PATCH] More work on theming refactor

---
 src/components/breadcrumb/Breadcrumb.vue      | 31 +-----
 src/components/contextmenu/ContextMenu.vue    | 34 +------
 src/components/dialog/Dialog.vue              | 95 ++++---------------
 src/components/fileupload/FileUpload.vue      | 48 +---------
 src/components/megamenu/MegaMenu.vue          | 57 ++---------
 src/components/menu/Menu.vue                  | 28 +-----
 src/components/menubar/Menubar.vue            | 67 +++----------
 src/components/message/Message.vue            | 31 +-----
 src/components/overlaypanel/OverlayPanel.vue  | 23 +----
 src/components/panelmenu/PanelMenu.vue        | 54 ++---------
 src/components/sidebar/Sidebar.vue            |  7 +-
 src/components/steps/Steps.vue                | 71 +++-----------
 src/components/tabmenu/TabMenu.vue            | 43 ++-------
 src/components/tieredmenu/TieredMenu.vue      | 31 ++----
 src/components/toast/Toast.vue                | 48 ++--------
 src/components/toast/ToastMessage.vue         |  6 +-
 src/components/tooltip/Tooltip.css            |  7 --
 .../validationmessage/ValidationMessage.vue   | 14 +--
 18 files changed, 108 insertions(+), 587 deletions(-)

diff --git a/src/components/breadcrumb/Breadcrumb.vue b/src/components/breadcrumb/Breadcrumb.vue
index 0513022bb..37b159fc0 100644
--- a/src/components/breadcrumb/Breadcrumb.vue
+++ b/src/components/breadcrumb/Breadcrumb.vue
@@ -31,36 +31,11 @@ export default {
 </script>
 
 <style>
-.p-breadcrumb {
-    margin: 0;
-    padding: 0;
-    padding: .5em;
-}
-
 .p-breadcrumb ul {
     margin: 0;
     padding: 0;
-}
-
-.p-breadcrumb ul li {
-    display: inline-block;
-    margin: 0 .25em;
-}
-
-.p-breadcrumb-chevron, .p-breadcrumb-home {
-    vertical-align: middle;
-}
-
-.p-breadcrumb ul li .p-menuitem-link {
-    text-decoration: none;
-}
-
-.p-breadcrumb .p-menuitem-icon {
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-breadcrumb .p-menuitem-text {
-    vertical-align: middle;
+    list-style-type: none;
+    display: flex;
+    align-items: center;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/contextmenu/ContextMenu.vue b/src/components/contextmenu/ContextMenu.vue
index b41ba86f2..0265aad0c 100644
--- a/src/components/contextmenu/ContextMenu.vue
+++ b/src/components/contextmenu/ContextMenu.vue
@@ -212,7 +212,6 @@ export default {
 <style>
 .p-contextmenu {
     width: 12.5em;
-    padding: .25em;
     position: absolute;
 }
 
@@ -221,37 +220,21 @@ export default {
 }
 
 .p-contextmenu ul {
-    list-style: none;
     margin: 0;
     padding: 0;
+    list-style: none;
 }
 
 .p-contextmenu .p-submenu-list {
-    display: none;
     position: absolute;
-    width: 12.5em;
-    padding: .25em;
+    min-width: 100%;
     z-index: 1;
 }
 
-.p-contextmenu .p-menuitem-active > .p-submenu-list {
-    display: block;
-}
-
 .p-contextmenu .p-menuitem-link {
-    padding: .25em;
-    display: block;
-    position: relative;
     cursor: pointer;
-}
-
-.p-contextmenu .p-menuitem-icon {
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-contextmenu .p-menuitem-text {
-    vertical-align: middle;
+    display: flex;
+    align-items: center;
 }
 
 .p-contextmenu .p-menuitem {
@@ -259,14 +242,7 @@ export default {
 }
 
 .p-contextmenu .p-menuitem-link .p-submenu-icon {
-    position: absolute;
-    margin-top: -.5em;
-    right: 0;
-    top: 50%;
-}
-
-.p-contextmenu .p-menuitem-active > .p-submenu > .p-submenu-list {
-    display: block !important;
+    margin-left: auto;
 }
 
 .p-contextmenu-enter {
diff --git a/src/components/dialog/Dialog.vue b/src/components/dialog/Dialog.vue
index 06c1f3008..1856a6712 100644
--- a/src/components/dialog/Dialog.vue
+++ b/src/components/dialog/Dialog.vue
@@ -261,105 +261,41 @@ export default {
     pointer-events: none;
     background-color: transparent;
     transition-property: background-color;
-    transition-duration: 150ms;
 }
+
 .p-dialog-mask.p-component-overlay {
     pointer-events: auto;
 }
+
 .p-dialog {
     display: flex;
     flex-direction: column;
-    padding: 0;
     pointer-events: auto;
     max-height: 90%;
     transform: scale(1);
 }
-.p-dialog .p-dialog-titlebar {
-    padding: .5em .75em;
-    position: relative;
-    border: 0;
-    flex-shrink: 0;
-}
-.p-dialog .p-dialog-content {
-    position: relative;
-    border: 0;
-    padding: .5em .75em;
-    background: none;
-    zoom: 1;
+
+.p-dialog-content {
     overflow-y: auto;
 }
-.p-dialog-resizable .p-dialog-content {
-    overflow: auto;
-}
-.p-dialog .p-resizable-handle {
-    width: 14px;
-    height: 14px;
-    right: 3px;
-    bottom: 3px;
-    position: absolute;
-    font-size: .1px;
-    display: block;
-    cursor: se-resize;
-}
-.p-draggable .p-dialog-titlebar {
-    cursor: move;
-}
-.p-dialog .p-dialog-titlebar-icons {
-    float: right;
-}
-.p-dialog .p-dialog-titlebar-icons:after {
-    content: "";
-    display: table;
-    clear: both;
+
+.p-dialog-titlebar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
+
 .p-dialog .p-dialog-titlebar-icon {
-    text-decoration: none;
-    padding: .125em;
-    cursor: pointer;
-    display: inline-block;
-    vertical-align: middle;
-    border: 1px solid transparent;
-}
-.p-dialog .p-dialog-titlebar-icon span {
-    display: block;
-    margin: 0;
-}
-.p-dialog-footer {
-    padding: 1em;
-    text-align: right;
-    flex-shrink: 0;
-}
-/* ConfirmDialog */
-.p-confirmdialog {
-    width: 30em;
-}
-.p-confirmdialog.p-dialog .p-dialog-content {
-    padding: 1em 2em;
-}
-.p-confirmdialog .p-dialog-content .p-confirmdialog-icon {
-    font-size: 1.5em;
-    vertical-align: middle;
-    margin-right: .5em;
-}
-.p-confirmdialog .p-dialog-content .p-confirmdialog-message {
-    vertical-align: middle;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
+
 /* Fluid */
 .p-fluid .p-dialog-footer .p-button {
     width: auto;
 }
-/* RTL */
-.p-rtl .p-dialog .p-dialog-titlebar-close  {
-    float: left;
-}
-.p-rtl .p-dialog .p-dialog-footer {
-    text-align: left;
-}
-@media screen and (max-width: 40em) {
-    .p-confirmdialog {
-        width: 90%;
-    }
-}
+
 /* Animation */
 /* Center */
 .p-dialog-enter-active {
@@ -432,6 +368,7 @@ export default {
 .p-dialog-bottomright .p-dialog-leave-to {
     transform: translate3d(100%, 0px, 0px);
 }
+
 /* Maximize */
 .p-dialog-maximized {
     -webkit-transition: none;
diff --git a/src/components/fileupload/FileUpload.vue b/src/components/fileupload/FileUpload.vue
index 395ebb8a1..ac08b91c7 100644
--- a/src/components/fileupload/FileUpload.vue
+++ b/src/components/fileupload/FileUpload.vue
@@ -348,62 +348,22 @@ export default {
 </script>
 
 <style>
-.p-fileupload-buttonbar .p-fileupload-choose.p-disabled input {
+.p-fileupload-choose.p-disabled input {
     cursor: default;
 }
 
-.p-fileupload-buttonbar {
-    padding: .5em;
-    border-bottom: 0 none;
-}
-
-.p-fileupload-buttonbar .p-button {
-    vertical-align: middle;
-    margin-right: .25em;
-}
-
 .p-fileupload-content {
-    padding: 1em;
     position: relative;
-    transition: border-color .3s;
-}
-
-.p-fileupload-content.p-fileupload-highlight {
-    border-color: #156090;
-}
-
-.p-fileupload-files img {
-    border: none;
-}
-
-.p-fileupload-files {
-    display: table;
 }
 
 .p-fileupload-row {
     display: table-row;
-}
-
-.p-fileupload-row > div {
-    display: table-cell;
-    padding: .5em 1em;
-    vertical-align: middle;
+    display: flex;
 }
 
 .p-fileupload-content .p-progressbar {
     width: 100%;
     position: absolute;
-    top: 1px;
-    left: 0;
-    height: .25em;
-    border: 0 none;
-}
-
-.p-fileupload-content .p-progressbar-value {
-    -moz-border-radius: 0;
-    -webkit-border-radius: 0;
-    border-radius: 0;
-    border: 0 none;
 }
 
 .p-button.p-fileupload-choose {
@@ -432,8 +392,4 @@ export default {
 .p-fluid .p-fileupload .p-button {
     width: auto;
 }
-
-.p-fluid .p-fileupload-content .p-button-icon-only {
-    width: 2em;
-}
 </style>
diff --git a/src/components/megamenu/MegaMenu.vue b/src/components/megamenu/MegaMenu.vue
index f572e643d..b90aef613 100644
--- a/src/components/megamenu/MegaMenu.vue
+++ b/src/components/megamenu/MegaMenu.vue
@@ -299,10 +299,6 @@ export default {
 </script>
 
 <style>
-.p-megamenu {
-    padding: .25em;
-}
-
 .p-megamenu-root-list {
     margin: 0;
     padding: 0;
@@ -314,18 +310,9 @@ export default {
 }
 
 .p-megamenu .p-menuitem-link {
-    padding: .25em;
-    display: block;
-    text-decoration: none;
-}
-
-.p-megamenu .p-menuitem-icon {
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-megamenu .p-menuitem-text {
-    vertical-align: middle;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
 }
 
 .p-megamenu-panel {
@@ -339,10 +326,6 @@ export default {
     display: block;
 }
 
-.p-megamenu-panel .p-menuitem {
-    margin: .125em 0;
-}
-
 .p-megamenu-submenu {
     margin: 0;
     padding: 0;
@@ -350,18 +333,10 @@ export default {
     width: 12.5em;
 }
 
-.p-megamenu-submenu-header {
-    padding: .25em;
-}
-
 /* Horizontal */
-.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem {
-    display: inline-block;
-}
-
-.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
-    vertical-align: middle;
-    margin-left: .25em;
+.p-megamenu-horizontal .p-megamenu-root-list {
+    display: flex;
+    align-items: center;
 }
 
 /* Vertical */
@@ -369,12 +344,8 @@ export default {
     width: 12.5em;
 }
 
-.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem {
-    display: block;
-}
-
-.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-link {
-    position: relative;
+.p-megamenu-vertical .p-megamenu-root-list {
+    flex-direction: column;
 }
 
 .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
@@ -383,16 +354,6 @@ export default {
 }
 
 .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
-    position: absolute;
-    width: 1em;
-    height: 1em;
-    top: 50%;
-    right: 0;
-    margin-top: -.5em;
-}
-
-.p-megamenu .p-grid {
-    -ms-flex-wrap: nowrap;
-    flex-wrap: nowrap;
+    margin-left: auto;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
index 8c03e450e..1743bf6b3 100644
--- a/src/components/menu/Menu.vue
+++ b/src/components/menu/Menu.vue
@@ -182,10 +182,9 @@ export default {
 <style>
 .p-menu {
     width: 12.5em;
-    padding: .25em;
 }
 
-.p-menu.p-menu-dynamic {
+.p-menu-dynamic {
     position: absolute;
 }
 
@@ -194,33 +193,14 @@ export default {
 }
 
 .p-menu ul {
-    list-style: none;
     margin: 0;
     padding: 0;
-}
-
-.p-menu .p-submenu-header {
-    padding: .25em .5em;
-    margin: .125em 0;
-}
-
-.p-menu .p-menuitem {
-    margin: .125em 0;
+    list-style: none;
 }
 
 .p-menu .p-menuitem-link {
-    padding: .25em;
-    display: block;
-    text-decoration: none;
     cursor: pointer;
-}
-
-.p-menu .p-menuitem-icon {
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-menu .p-menuitem-text {
-    vertical-align: middle;
+    display: flex;
+    align-items: center;
 }
 </style>
diff --git a/src/components/menubar/Menubar.vue b/src/components/menubar/Menubar.vue
index 1963d8e5f..7a2009b05 100644
--- a/src/components/menubar/Menubar.vue
+++ b/src/components/menubar/Menubar.vue
@@ -31,20 +31,9 @@ export default {
 
 <style>
 .p-menubar {
-    padding: .25em;
     display: flex;
 }
 
-.p-menubar .p-menu-separator {
-    border-width: 1px 0 0 0;
-}
-
-.p-menubar:after {
-    content: "";
-    clear: both;
-    display: table;
-}
-
 .p-menubar ul {
     margin: 0;
     padding: 0;
@@ -52,33 +41,18 @@ export default {
 }
 
 .p-menubar .p-menuitem-link {
-    display: block;
-    padding: .25em;
-    position: relative;
-    text-decoration: none;
     cursor: pointer;
+    display: flex;
+    align-items: center;
 }
 
-.p-menubar .p-menuitem-icon {
-    margin-right: .25em;
+.p-menubar .p-menuitem {
+    position: relative;
 }
 
 .p-menubar .p-menubar-root-list {
-    display: inline-block;
-}
-
-.p-menubar .p-menubar-root-list > .p-menuitem {
-    display: inline-block;
-    position: relative;
-}
-
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
-    padding: .5em;
-}
-
-.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
-    vertical-align: middle;
-    margin-left: .25em;
+    display: flex;
+    align-items: center;
 }
 
 .p-menubar .p-menubar-root-list > li ul {
@@ -93,13 +67,8 @@ export default {
 .p-menubar .p-submenu-list {
     display: none;
     position: absolute;
-    min-width: 12.5em;
-    padding: .25em;
-}
-
-.p-menubar .p-submenu-list .p-menuitem {
-    margin: .125em 0;
-    position: relative;
+    min-width: 100%;
+    z-index: 1;
 }
 
 .p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list  {
@@ -108,31 +77,17 @@ export default {
     top: 0;
 }
 
-.p-menubar .p-menuitem-icon {
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-menubar .p-menuitem-text {
-    vertical-align: middle;
-}
-
 .p-menubar .p-submenu-list .p-menuitem-link .p-submenu-icon {
-    position: absolute;
-    margin-top: -.5em;
-    right: 0;
-    top: 50%;
+    margin-left: auto;
 }
 
-.p-menubar .p-menuitem-active > .p-submenu > .p-submenu-list {
-    display: block;
+.p-menubar .p-menu-separator {
+    border-width: 1px 0 0 0;
 }
 
 .p-menubar .p-menubar-custom,
 .p-menubar .p-menubar-end {
     margin-left: auto;
     align-self: center;
-    margin-right: .25em;
-
 }
 </style>
\ No newline at end of file
diff --git a/src/components/message/Message.vue b/src/components/message/Message.vue
index 211a10b60..7ae51abe8 100644
--- a/src/components/message/Message.vue
+++ b/src/components/message/Message.vue
@@ -65,35 +65,12 @@ export default {
 
 <style>
 .p-messages-wrapper {
-    padding: 1em;
-    position: relative;
+    display: flex;
+    align-items: center;
 }
 
-.p-messages-icon-container,
-.p-messages-close-container {
-    flex-basis: auto;
-    flex-grow: 0;
-    flex-shrink: 0;
-}
-
-.p-messages-text {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.p-messages-icon {
-    padding: 0;
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-messages .p-messages-summary {
-    font-weight: bold;
-    margin-right: .25em;
-}
-
-.p-messages-close {
-    position: absolute;
+.p-messages-close.p-link {
+    margin-left: auto
 }
 
 .p-messages-enter {
diff --git a/src/components/overlaypanel/OverlayPanel.vue b/src/components/overlaypanel/OverlayPanel.vue
index 9f4183970..8f5232ec0 100644
--- a/src/components/overlaypanel/OverlayPanel.vue
+++ b/src/components/overlaypanel/OverlayPanel.vue
@@ -152,8 +152,6 @@ export default {
 
 <style>
 .p-overlaypanel {
-    padding: 0;
-    margin: 0;
     position: absolute;
     margin-top: 10px;
 }
@@ -163,25 +161,10 @@ export default {
     margin-bottom: 10px;
 }
 
-.p-overlaypanel-content {
-    padding: 0.5em 1em;
-}
-
 .p-overlaypanel-close {
-    position: absolute;
-    top: -1em;
-    right: -1em;
-    width: 2em;
-    height: 2em;
-    line-height: 2em;
-    text-align: center;
-    -moz-border-radius: 100%;
-    -webkit-border-radius: 100%;
-    border-radius: 100%;
-}
-
-.p-overlaypanel-close-icon {
-    line-height: inherit;
+    display: flex;
+    justify-content: center;
+    align-content: center;
 }
 
 /* Animation */
diff --git a/src/components/panelmenu/PanelMenu.vue b/src/components/panelmenu/PanelMenu.vue
index 66e1eeead..c23cde02d 100644
--- a/src/components/panelmenu/PanelMenu.vue
+++ b/src/components/panelmenu/PanelMenu.vue
@@ -94,67 +94,25 @@ export default {
 </script>
 
 <style>
-.p-panelmenu {
-    width: auto;
-}
-
 .p-panelmenu .p-menu-separator {
     border-width: 1px 0 0 0;
 }
 
-.p-panelmenu .p-panelmenu-content-wrapper {
-    overflow: hidden;
-}
-
-.p-panelmenu .p-panelmenu-header {
-    margin: -1px 0 0 0;
-    zoom: 1;
-}
-
 .p-panelmenu .p-panelmenu-header-link {
-    padding: .5em;
-    display: block;
-    text-decoration: none;
-}
-
-.p-panelmenu .p-panelmenu-icon {
-    vertical-align: middle;
-}
-
-.p-panelmenu .p-menuitem-text {
-    vertical-align: middle;
-}
-
-.p-panelmenu .p-menuitem-icon {
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-panelmenu .p-panelmenu-content {
-    padding: 0.25em;
-    border-top: 0;
-    margin-bottom: 1px;
+    display: flex;
+    align-items: center;
+    user-select: none;
 }
 
 .p-panelmenu .p-submenu-list {
     margin: 0;
     padding: 0;
     list-style: none;
-    margin-left: 1.5em;
-}
-
-.p-panelmenu .p-panelmenu-content > .p-panelmenu-root-submenu.p-submenu-list {
-    margin-left: 0;
-}
-
-.p-panelmenu .p-menuitem {
-    overflow: hidden;
-    margin: .125em 0;
 }
 
 .p-panelmenu .p-menuitem-link {
-    padding: .25em;
-    display: block;
-    text-decoration: none;
+    display: flex;
+    align-items: center;
+    user-select: none;
 }
 </style>
diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
index 136828555..824d09900 100644
--- a/src/components/sidebar/Sidebar.vue
+++ b/src/components/sidebar/Sidebar.vue
@@ -247,10 +247,9 @@ export default {
     height: 30em;
 }
 
-.p-sidebar-close {
-    float: right;
-    cursor: pointer;
-    line-height: 1;
+.p-sidebar-close.p-link {
+    margin-left: auto;
+    display: flex;
 }
 
 @media screen and (max-width: 64em) {
diff --git a/src/components/steps/Steps.vue b/src/components/steps/Steps.vue
index cb89271b3..47b14cd19 100644
--- a/src/components/steps/Steps.vue
+++ b/src/components/steps/Steps.vue
@@ -35,17 +35,6 @@ export default {
             default: true
         }
     },
-    stepsStyle: null,
-    watch: {
-		model(newValue) {
-			if (this.model !== newValue) {
-                this.createStyle();
-            }
-        }
-    },
-    mounted() {
-        this.createStyle();
-    },
     methods: {
         onItemClick(event, item) {
             if (item.disabled || this.readonly) {
@@ -72,21 +61,6 @@ export default {
         isItemDisabled(item) {
             return (item.disabled || (this.readonly && !this.isActive(item)));
         },
-        createStyle() {
-            if (!this.stepsStyle) {
-                this.stepsStyle = document.createElement('style');
-                this.stepsStyle.type = 'text/css';
-                document.body.appendChild(this.stepsStyle);
-            }
-
-            let innerHTML = `
-                #${this.id} .p-steps-item {
-                    flex: 1 0 ${ (100/ this.model.length) }%
-                }
-            `;
-
-            this.stepsStyle.innerHTML = innerHTML;
-        },
         visible(item) {
             return (typeof item.visible === 'function' ? item.visible() : item.visible !== false);
         }
@@ -104,56 +78,35 @@ export default {
 
 <style>
 .p-steps ul {
-    list-style-type: none;
     padding: 0;
     margin: 0;
+    list-style-type: none;
     display: flex;
-    flex-wrap: nowrap;
-    flex-direction: row;
 }
 
-.p-steps .p-steps-item {
-    width: 100%;
-    box-sizing: border-box;
+.p-steps-item {
     position: relative;
     display: flex;
     justify-content: center;
+    flex: 1 1 auto;
+}
+
+.p-steps-item .p-menuitem-link {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .p-steps.p-steps-readonly .p-steps-item {
     cursor: auto;
 }
 
-.p-steps .p-steps-item .p-menuitem-link {
-    text-decoration: none;
-    padding: 1em;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.p-steps .p-steps-item.p-steps-current .p-menuitem-link,
-.p-steps .p-steps-item.p-disabled .p-menuitem-link {
+.p-steps-item.p-steps-current .p-menuitem-link,
+.p-steps-item.p-disabled .p-menuitem-link {
     cursor: default;
 }
 
-.p-steps .p-steps-number {
-    font-size: 2em;
-    display: block;
-}
-
-.p-steps .p-steps-title {
-    display: block;
+.p-steps-title {
     white-space: nowrap;
 }
-
-@media (max-width: 40em) {
-    .p-steps ul {
-        flex-wrap: wrap;
-    }
-
-    .p-steps .p-steps-item .p-menuitem-link {
-        padding: 0.5em;
-    }
-}
 </style>
diff --git a/src/components/tabmenu/TabMenu.vue b/src/components/tabmenu/TabMenu.vue
index 5ceeb15df..4039c9c9d 100644
--- a/src/components/tabmenu/TabMenu.vue
+++ b/src/components/tabmenu/TabMenu.vue
@@ -64,44 +64,21 @@ export default {
 </script>
 
 <style>
-/** TabMenu **/
-.p-tabmenu .p-tabmenu-nav {
+.p-tabmenu-nav {
+    display: flex;
     margin: 0;
-    padding: .25em .5em 0 .25em;
-}
-
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
-    list-style: none;
-    float: left;
-    position: relative;
-    margin: 0 .2em 1px 0;
     padding: 0;
-    white-space: nowrap;
-    display: block;
-    border-bottom: 0;
-    top: 1px;
+    list-style-type: none;
 }
 
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem a {
-    float: left;
-    padding: 0.5em 1em;
-    text-decoration: none;
+.p-tabmenu-nav a {
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
 }
 
-.p-tabmenu .p-tabmenu-nav a {
-    padding: 0.5em 1em;
-}
-
-.p-tabmenu .p-menuitem-icon  {
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-tabmenu .p-menuitem-text  {
-    vertical-align: middle;
-}
-
-.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-disabled a {
-     cursor: default;
+.p-tabmenu-nav li.p-disabled a {
+    cursor: auto;
 }
 </style>
diff --git a/src/components/tieredmenu/TieredMenu.vue b/src/components/tieredmenu/TieredMenu.vue
index 67f36ef9f..4e1b34395 100644
--- a/src/components/tieredmenu/TieredMenu.vue
+++ b/src/components/tieredmenu/TieredMenu.vue
@@ -159,10 +159,9 @@ export default {
 <style>
 .p-tieredmenu {
     width: 12.5em;
-    padding: .25em;
 }
 
-.p-tieredmenu.p-tieredmenu-dynamic {
+.p-tieredmenu-dynamic {
     position: absolute;
 }
 
@@ -171,46 +170,30 @@ export default {
 }
 
 .p-tieredmenu ul {
-    list-style: none;
     margin: 0;
     padding: 0;
+    list-style: none;
 }
 
 .p-tieredmenu .p-submenu-list {
-    display: none;
     position: absolute;
-    width: 12.5em;
-    padding: .25em;
+    min-width: 100%;
     z-index: 1;
+    display: none;
 }
 
 .p-tieredmenu .p-menuitem-link {
-    padding: .25em;
-    display: block;
-    position: relative;
-    text-decoration: none;
     cursor: pointer;
-}
-
-.p-tieredmenu .p-menuitem-icon {
-    margin-right: .25em;
-    vertical-align: middle;
-}
-
-.p-tieredmenu .p-menuitem-text {
-    vertical-align: middle;
+    display: flex;
+    align-items: center;
 }
 
 .p-tieredmenu .p-menuitem {
     position: relative;
-    margin: .125em 0;
 }
 
 .p-tieredmenu .p-menuitem-link .p-submenu-icon {
-    position: absolute;
-    margin-top: -.5em;
-    right: 0;
-    top: 50%;
+    margin-left: auto;;
 }
 
 .p-tieredmenu .p-menuitem-active > .p-submenu-list {
diff --git a/src/components/toast/Toast.vue b/src/components/toast/Toast.vue
index 97631e1ea..1dd26c2d1 100644
--- a/src/components/toast/Toast.vue
+++ b/src/components/toast/Toast.vue
@@ -99,6 +99,10 @@ export default {
     width: 20em;
 }
 
+.p-toast-message {
+    flex: 1 1 auto;
+}
+
 .p-toast-topright {
 	top: 20px;
 	right: 20px;
@@ -119,53 +123,15 @@ export default {
 	right: 20px;
 }
 
-.p-toast-item-container {
-    position: relative;
-}
-
 .p-toast-item {
-	position: relative;
-	display: block;
-    padding: .5em 1em;
-    overflow: hidden;
+    display: flex;
+    align-items: flex-start;
 }
 
-.p-toast-item .p-toast-detail {
-	padding: 0;
-	margin: 0;
-}
-
-.p-toast-icon-close {
-	position: absolute;
-	top: 4px;
-	right: 4px;
+.p-toast-icon-close.p-link {
 	cursor: pointer;
 }
 
-.p-toast-title {
-	font-weight: bold;
-	padding: 0 0 .5em 0;
-	display: block;
-}
-
-.p-toast-image {
-    position: absolute;
-    display: inline-block;
-    left: .5em;
-    top: .25em;
-    padding: 0;
-	font-size: 2em;
-}
-
-.p-toast-message {
-	padding: 0 0 .25em 0;
-    margin-left: 2.5em;
-}
-
-.p-toast-message p {
-	font-weight: normal;
-}
-
 /* Animations */
 .p-toast-message-enter {
     opacity: 0;
diff --git a/src/components/toast/ToastMessage.vue b/src/components/toast/ToastMessage.vue
index b5151ebfb..ec8abb673 100644
--- a/src/components/toast/ToastMessage.vue
+++ b/src/components/toast/ToastMessage.vue
@@ -1,14 +1,14 @@
 <template>
     <div :class="containerClass">
         <div class="p-toast-item" role="alert" aria-live="assertive" aria-atomic="true">
-            <button class="p-toast-icon-close p-link" @click="onCloseClick" v-if="message.closable !== false" type="button">
-                <span class="p-toast-icon-close-icon pi pi-times"></span>
-            </button>
             <span :class="iconClass"></span>
             <div class="p-toast-message">
                 <span class="p-toast-title">{{message.summary}}</span>
                 <div class="p-toast-detail">{{message.detail}}</div>
             </div>
+            <button class="p-toast-icon-close p-link" @click="onCloseClick" v-if="message.closable !== false" type="button">
+                <span class="p-toast-icon-close-icon pi pi-times"></span>
+            </button>
         </div>
     </div>
 </template>
diff --git a/src/components/tooltip/Tooltip.css b/src/components/tooltip/Tooltip.css
index 04d93b735..c8febf4c1 100644
--- a/src/components/tooltip/Tooltip.css
+++ b/src/components/tooltip/Tooltip.css
@@ -16,9 +16,6 @@
 }
 
 .p-tooltip .p-tooltip-text {
-   padding: .125em .5em;
-   background-color: rgb(76, 76, 76);
-   color: #ffffff;
    white-space: pre-line;
 }
 
@@ -35,7 +32,6 @@
     left: 0;
     margin-top: -.25em;
     border-width: .25em .25em .25em 0;
-    border-right-color: rgb(76, 76, 76);
 }
 
 .p-tooltip-left .p-tooltip-arrow {
@@ -43,7 +39,6 @@
     right: 0;
     margin-top: -.25em;
     border-width: .25em 0 .25em .25em;
-    border-left-color: rgb(76, 76, 76);
 }
 
 .p-tooltip.p-tooltip-top {
@@ -55,7 +50,6 @@
     left: 50%;
     margin-left: -.25em;
     border-width: .25em .25em 0;
-    border-top-color: rgb(76, 76, 76);
 }
 
 .p-tooltip-bottom .p-tooltip-arrow {
@@ -63,5 +57,4 @@
     left: 50%;
     margin-left: -.25em;
     border-width: 0 .25em .25em;
-    border-bottom-color: rgb(76, 76, 76);
 }
\ No newline at end of file
diff --git a/src/components/validationmessage/ValidationMessage.vue b/src/components/validationmessage/ValidationMessage.vue
index fbf52d398..172a37a6d 100644
--- a/src/components/validationmessage/ValidationMessage.vue
+++ b/src/components/validationmessage/ValidationMessage.vue
@@ -44,19 +44,11 @@ export default {
 
 <style>
 .p-message {
-    border: 1px solid;
-    margin: 0px .25em;
-    padding: .25em .5em;
-    display: inline-block;
-    vertical-align: top;
-}
-
-.p-message .p-message-icon,
-.p-message .p-message-text {
-    vertical-align: middle;
+    display: inline-flex;
+    align-items: center;
 }
 
 .p-fluid .p-message {
-    display: block;
+    display: flex;
 }
 </style>