New styling

src/components/accordion/Accordion.vue

@@ -5,7 +5,7 @@
             <div :class="['p-accordion-header', {'p-highlight': tab.d_active, 'p-disabled': tab.disabled}]">
                 <a role="tab" @click="onTabClick($event, tab)" @keydown="onTabKeydown($event, tab)" :tabindex="tab.disabled ? null : '0'"
                     :aria-expanded="tab.d_active" :id="ariaId + i + '_header'" :aria-controls="ariaId + i + '_content'">
-                    <span :class="['p-accordion-toggle-icon pi', {'pi-caret-right': !tab.d_active, 'pi-caret-down': tab.d_active}]"></span>
+                    <span :class="['p-accordion-toggle-icon pi', {'pi-chevron-right': !tab.d_active, 'pi-chevron-down': tab.d_active}]"></span>
                     <span class="p-accordion-header-text" v-if="tab.header">{{tab.header}}</span>
                     <AccordionTabSlot :tab="tab" type="header" v-if="tab.$scopedSlots.header" />
                 </a>
@@ -99,6 +99,7 @@ export default {
     cursor: pointer;
     display: flex;
     align-items: center;
+    user-select: none;
 }
 
 .p-accordion-header.p-disabled a {

src/components/autocomplete/AutoComplete.vue

@@ -11,12 +11,12 @@
                 <input ref="input" type="text" autoComplete="off" v-bind="$attrs" v-on="listeners" role="searchbox" aria-autocomplete="list" :aria-controls="listId" :aria-labelledby="ariaLabelledBy">
             </li>
         </ul>
-        <i class="p-autocomplete-loader pi pi-spinner pi-spin" v-show="searching"></i>
+        <i class="p-autocomplete-loader pi pi-spinner pi-spin" v-if="searching"></i>
         <Button ref="dropdownButton" type="button" icon="pi pi-chevron-down" class="p-autocomplete-dropdown" :disabled="$attrs.disabled" @click="onDropdownClick" v-if="dropdown"/>
         <transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
-            <div ref="overlay" class="p-autocomplete-panel" :style="{'max-height': scrollHeight}" v-if="overlayVisible">
+            <div ref="overlay" class="p-autocomplete-panel p-component" :style="{'max-height': scrollHeight}" v-if="overlayVisible">
-                <ul :id="listId" class="p-autocomplete-items p-autocomplete-list p-component" role="listbox">
+                <ul :id="listId" class="p-autocomplete-items" role="listbox">
-                    <li v-for="(item, i) of suggestions" class="p-autocomplete-list-item" :key="i" @click="selectItem($event, item)" role="option">
+                    <li v-for="(item, i) of suggestions" class="p-autocomplete-item" :key="i" @click="selectItem($event, item)" role="option">
                         <slot name="item" :item="item" :index="i">
                             {{getItemContent(item)}}
                         </slot>
@@ -436,7 +436,6 @@ export default {
 
 .p-autocomplete-loader {
     position: absolute;
-    right: .25em;
     top: 50%;
     margin-top: -.5em;
 }
@@ -466,14 +465,21 @@ export default {
     overflow: auto;
 }
 
-.p-autocomplete-list-item {
+.p-autocomplete-items {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+}
+
+.p-autocomplete-item {
     cursor: pointer;
 }
 
-.p-autocomplete-multiple-container.p-inputtext {
+.p-autocomplete-multiple-container {
-    cursor: text;
-    list-style-type: none;
     margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
     overflow: hidden;
     display: flex;
     align-items: center;
@@ -486,6 +492,10 @@ export default {
     flex: 0 0 auto;
 }
 
+.p-autocomplete-token-icon {
+    cursor: pointer;
+}
+
 .p-autocomplete-input-token {
     flex: 1 1 auto;
     display: inline-flex;

src/components/breadcrumb/Breadcrumb.vue

@@ -38,4 +38,8 @@ export default {
     display: flex;
     align-items: center;
 }
+
+.p-breadcrumb .p-menuitem-text {
+    line-height: 1;
+}
 </style>

src/components/breadcrumb/BreadcrumbItem.vue

@@ -1,11 +1,11 @@
 <template>
     <li :class="containerClass" v-if="visible()">
         <router-link v-if="item.to" :to="item.to" class="p-menuitem-link">
-            <span v-if="item.icon" :class="item.icon"></span>
+            <span v-if="item.icon" :class="iconClass"></span>
             <span v-if="item.label" class="p-menuitem-text">{{item.label}}</span>
         </router-link>
         <a v-else :href="item.url||'#'" class="p-menuitem-link" @click="onClick" :target="item.target">
-            <span v-if="item.icon" :class="item.icon"></span>
+            <span v-if="item.icon" :class="iconClass"></span>
             <span v-if="item.label" class="p-menuitem-text">{{item.label}}</span>
         </a>
     </li>
@@ -32,6 +32,9 @@ export default {
     computed: {
         containerClass() {
             return [{'p-disabled': this.item.disabled}, this.item.class];
+        },
+        iconClass() {
+            return ['p-menuitem-icon', this.item.icon];
         }
     }
 }

src/components/button/Button.css

@@ -1,9 +1,18 @@
 .p-button {
+    margin: 0;
     display: inline-flex;
     cursor: pointer;
-    margin-right: 0.25em;
     user-select: none;
     align-items: center;
+    vertical-align: bottom;
+}
+
+.p-button-text {
+    flex: 1 1 auto;
+}
+
+.p-button-icon-right {
+    order: 1;
 }
 
 .p-button:disabled {
@@ -14,12 +23,8 @@
     justify-content: center;
 }
 
-.p-fluid .p-button {
+.p-button-icon-only .p-button-text {
-    display: flex;
+    visibility: hidden;
-    width: 100%;
+    width: 0;
-}
+    flex: 0 0 auto;
-
-.p-fluid .p-button-icon-only {
-    display: inline-flex;
-    width: auto;
 }

src/components/button/Button.vue

@@ -1,7 +1,7 @@
 <template>
     <button :class="buttonClass" v-on="$listeners">
         <span v-if="icon" :class="iconClass"></span>
-        <span class="p-button-text p-c" v-if="label">{{label}}</span>
+        <span class="p-button-text p-c">{{label||'&nbsp;'}}</span>
     </button>
 </template>
 
@@ -24,9 +24,6 @@ export default {
             return {
                 'p-button p-component': true,
                 'p-button-icon-only': this.icon && !this.label,
-                'p-button-text-icon-left': this.icon && this.label && this.iconPos === 'left',
-                'p-button-text-icon-right': this.icon && this.label && this.iconPos === 'right',
-                'p-button-text-only': !this.icon && this.label,
                 'p-disabled': this.disabled
             }
         },
@@ -34,8 +31,8 @@ export default {
             return [
                 this.icon,
                 {
-                    'p-button-icon-left': this.iconPos === 'left',
+                    'p-button-icon-left': this.iconPos === 'left' && this.label,
-                    'p-button-icon-right': this.iconPos === 'right'
+                    'p-button-icon-right': this.iconPos === 'right' && this.label
                 }
             ]
         }

src/components/calendar/Calendar.vue

@@ -1,7 +1,7 @@
 <template>
     <span :class="containerClass">
         <CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" v-on="listeners" :value="inputFieldValue" :readonly="!manualInput" :aria-labelledby="ariaLabelledBy"/>
-        <CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger p-calendar-button" :disabled="$attrs.disabled" @click="onButtonClick" type="button" :aria-label="inputFieldValue"/>
+        <CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger" :disabled="$attrs.disabled" @click="onButtonClick" type="button" :aria-label="inputFieldValue"/>
         <transition name="p-input-overlay" @enter="onOverlayEnter" @after-enter="onOverlayEnterComplete" @leave="onOverlayLeave">
             <div ref="overlay" :class="panelStyleClass" v-if="inline ? true : overlayVisible" role="dialog" :aria-labelledby="ariaLabelledBy">
                 <template v-if="!timeOnly">
@@ -68,7 +68,7 @@
                             @mouseleave="onTimePickerElementMouseLeave()" @keydown.enter="onTimePickerElementMouseDown($event, 0, 1)" @keyup.enter="onTimePickerElementMouseUp($event)" type="button">
                             <span class="pi pi-chevron-up"></span>
                         </button>
-                        <span :style="{'display': currentHour < 10 ? 'inline': 'none'}">0</span><span>{{currentHour}}</span>
+                        <span>{{formattedCurrentHour}}</span>
                         <button class="p-link" @mousedown="onTimePickerElementMouseDown($event, 0, -1)" @mouseup="onTimePickerElementMouseUp($event)" @keydown="onContainerButtonKeydown"
                             @mouseleave="onTimePickerElementMouseLeave()" @keydown.enter="onTimePickerElementMouseDown($event, 0, -1)" @keyup.enter="onTimePickerElementMouseUp($event)" type="button">
                             <span class="pi pi-chevron-down"></span>
@@ -82,7 +82,7 @@
                             @mouseleave="onTimePickerElementMouseLeave()" @keydown.enter="onTimePickerElementMouseDown($event, 1, 1)" @keyup.enter="onTimePickerElementMouseUp($event)" type="button">
                             <span class="pi pi-chevron-up"></span>
                         </button>
-                        <span :style="{'display': currentMinute < 10 ? 'inline': 'none'}">0</span><span>{{currentMinute}}</span>
+                       <span>{{formattedCurrentMinute}}</span>
                         <button class="p-link" @mousedown="onTimePickerElementMouseDown($event, 1, -1)" @mouseup="onTimePickerElementMouseUp($event)" @keydown="onContainerButtonKeydown"
                             @mouseleave="onTimePickerElementMouseLeave()" @keydown.enter="onTimePickerElementMouseDown($event, 1, -1)" @keyup.enter="onTimePickerElementMouseUp($event)" type="button">
                             <span class="pi pi-chevron-down"></span>
@@ -96,7 +96,7 @@
                             @mouseleave="onTimePickerElementMouseLeave()" @keydown.enter="onTimePickerElementMouseDown($event, 2, 1)" @keyup.enter="onTimePickerElementMouseUp($event)" type="button">
                             <span class="pi pi-chevron-up"></span>
                         </button>
-                        <span :style="{'display': currentSecond < 10 ? 'inline': 'none'}">0</span><span>{{currentSecond}}</span>
+                        <span>{{formattedCurrentSecond}}</span>
                         <button class="p-link" @mousedown="onTimePickerElementMouseDown($event, 2, -1)" @mouseup="onTimePickerElementMouseUp($event)" @keydown="onContainerButtonKeydown"
                             @mouseleave="onTimePickerElementMouseLeave()" @keydown.enter="onTimePickerElementMouseDown($event, 2, -1)" @keyup.enter="onTimePickerElementMouseUp($event)" type="button">
                             <span class="pi pi-chevron-down"></span>
@@ -2131,6 +2131,15 @@ export default {
             }
 
             return monthPickerValues;
+        },
+        formattedCurrentHour() {
+            return this.currentHour < 10 ? '0' + this.currentHour : this.currentHour;
+        },
+        formattedCurrentMinute() {
+            return this.currentHour < 10 ? '0' + this.currentHour : this.currentHour;
+        },
+        formattedCurrentSecond() {
+            return this.currentHour < 10 ? '0' + this.currentHour : this.currentHour;
         }
     },
     components: {
@@ -2156,15 +2165,11 @@ export default {
     border-bottom-right-radius: 0;
 }
 
-.p-calendar-button {
+.p-calendar-w-btn .p-datepicker-trigger {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
 
-.p-calendar .p-datepicker {
-    min-width: 100%;
-}
-
 /* Fluid */
 .p-fluid .p-calendar {
     display: flex;
@@ -2175,6 +2180,10 @@ export default {
 }
 
 /* Datepicker */
+.p-calendar .p-datepicker {
+    min-width: 100%;
+}
+
 .p-datepicker {
 	width: auto;
     position: absolute;
@@ -2186,14 +2195,18 @@ export default {
 }
 
 /* Header */
-.p-datepicker .p-datepicker-header {
+.p-datepicker-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
 
-.p-datepicker .p-datepicker-prev,
+.p-datepicker-header .p-datepicker-title {
-.p-datepicker .p-datepicker-next {
+    margin: 0 auto;
+}
+
+.p-datepicker-prev,
+.p-datepicker-next {
     cursor: pointer;
     display: inline-flex;
     justify-content: center;
@@ -2211,14 +2224,10 @@ export default {
 	border-collapse: collapse;
 }
 
-.p-datepicker td > span,
+.p-datepicker td > span {
-.p-datepicker td > a {
     display: flex;
     justify-content: center;
     align-self: center;
-}
-
-.p-datepicker td a {
     cursor: pointer;
 }
 
@@ -2231,13 +2240,15 @@ export default {
     cursor: pointer;
 }
 
-/* Time Picker */
+/*  Button Bar */
-.p-timepicker {
+.p-datepicker-buttonbar {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
+    align-items: center;
 }
 
-.p-timepicker .p-separator {
+/* Time Picker */
+.p-timepicker {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -2246,6 +2257,13 @@ export default {
 .p-timepicker button {
     display: block;
     cursor: pointer;
+    line-height: 1;
+}
+
+.p-timepicker > div {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
 }
 
 /* Touch UI */

src/components/carousel/Carousel.vue

@@ -533,13 +533,17 @@ export default {
 	flex-direction: row;
 }
 
-.p-carousel .p-carousel-dots-container {
+.p-carousel-dots-container {
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	flex-wrap: wrap;
 }
 
+.p-carousel-dot-item > button {
+    display: inline-flex;
+}
+
 /* Vertical */
 .p-carousel-vertical .p-carousel-container {
 	flex-direction: column;

src/components/checkbox/Checkbox.css

@@ -2,6 +2,7 @@
     display: inline-flex;
     cursor: pointer;
     user-select: none;
+    vertical-align: bottom;
 }
 
 .p-checkbox-box {

src/components/chips/Chips.vue

@@ -4,11 +4,11 @@
             <li v-for="(val,i) of value" :key="`${i}_${val}`" class="p-chips-token p-highlight">
                 <slot name="chip" :value="val">
                     <span class="p-chips-token-label">{{val}}</span>
-                    <span class="p-chips-token-icon pi pi-fw pi-times" @click="removeItem($event, i)"></span>
+                    <span class="p-chips-token-icon pi pi-times" @click="removeItem($event, i)"></span>
                 </slot>
             </li>
             <li class="p-chips-input-token">
-                <input ref="input" type="text" class="p-inputtext p-component" @focus="onFocus($event)" @blur="onBlur($event)" :placeholder="placeholder"
+                <input ref="input" type="text" @focus="onFocus($event)" @blur="onBlur($event)" :placeholder="placeholder"
                     @keydown="onKeyDown($event)" @paste="onPaste($event)" :disabled="$attrs.disabled || maxedOut" :aria-labelledby="ariaLabelledBy">
             </li>
         </ul>
@@ -154,10 +154,11 @@ export default {
     display: inline-flex;
 }
 
-.p-chips-multiple-container.p-inputtext {
+.p-chips-multiple-container {
-    cursor: text;
-    list-style-type: none;
     margin: 0;
+    padding: 0;
+    list-style-type: none;
+    cursor: text;
     overflow: hidden;
     display: flex;
     align-items: center;
@@ -175,6 +176,10 @@ export default {
     display: inline-flex;
 }
 
+.p-chips-token-icon {
+    cursor: pointer;
+}
+
 .p-chips-input-token input {
     border: 0 none;
     outline: 0 none;

src/components/colorpicker/ColorPicker.vue

@@ -465,8 +465,6 @@ export default {
     position: relative;
     width: 193px;
     height: 166px;
-    background-color: #323232;
-    border-color: #191919;
 }
 
 .p-colorpicker-overlay-panel {
@@ -474,7 +472,6 @@ export default {
 }
 
 .p-colorpicker-preview {
-    width: 2em;
     cursor: pointer;
 }
 
@@ -502,7 +499,7 @@ export default {
      border-radius: 100%;
      width: 10px;
      height: 10px;
-     border: 1px solid #ffffff;
+     border: 1px solid;
      margin: -5px 0 0 -5px;
      cursor: pointer;
 }
@@ -524,7 +521,7 @@ export default {
      margin-left: -2px;
      margin-top: -5px;
      height: 10px;
-     border: 2px solid #ffffff;
+     border: 2px solid;
      opacity: .85;
      cursor: pointer;
  }

src/components/common/Common.css

@@ -27,10 +27,7 @@
     font-size: 100%;
     list-style: none;
 }
-.p-disabled {
+.p-disabled, .p-disabled * {
-    cursor: default !important;
-}
-.p-disabled a {
     cursor: default !important;
 }
 .p-component-overlay {

src/components/contextmenu/ContextMenu.vue

@@ -211,14 +211,9 @@ export default {
 
 <style>
 .p-contextmenu {
-    width: 12.5em;
     position: absolute;
 }
 
-.p-contextmenu .p-menu-separator {
-    border-width: 1px 0 0 0;
-}
-
 .p-contextmenu ul {
     margin: 0;
     padding: 0;
@@ -237,6 +232,10 @@ export default {
     align-items: center;
 }
 
+.p-contextmenu .p-menuitem-text {
+    line-height: 1;
+}
+
 .p-contextmenu .p-menuitem {
     position: relative;
 }

src/components/contextmenu/ContextMenuSub.vue

@@ -12,7 +12,7 @@
                          :aria-haspopup="item.items != null" :aria-expanded="item === activeItem" role="menuitem"  :tabindex="item.disabled ? null : '0'">
                         <span :class="['p-menuitem-icon', item.icon]"></span>
                         <span class="p-menuitem-text">{{item.label}}</span>
-                        <span class="p-submenu-icon pi pi-fw pi-caret-right" v-if="item.items"></span>
+                        <span class="p-submenu-icon pi pi-caret-right" v-if="item.items"></span>
                     </a>
                     <sub-menu :model="item.items" v-if="visible(item) && item.items" :key="item.label + '_sub_'"
                         @leaf-click="onLeafClick" :parentActive="item === activeItem" />

src/components/datatable/DataTable.vue

@@ -1847,6 +1847,16 @@ export default {
     user-select: none;
 }
 
+.p-datatable .p-sortable-column .p-column-title,
+.p-datatable .p-sortable-column .p-sortable-column-icon,
+.p-datatable .p-sortable-column .p-sortable-column-badge {
+    vertical-align: middle;
+}
+
+.p-datatable .p-sortable-column .p-sortable-column-badge {
+    display: inline-block;
+}
+
 .p-datatable-auto-layout > .p-datatable-wrapper {
     overflow-x: auto;
 }

src/components/datatable/TableBody.vue

@@ -295,11 +295,11 @@ export default {
         },
         rowTogglerIcon(rowData) {
             const icon = this.isRowExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
-            return ['p-row-toggler-icon pi pi-fw p-clickable', icon];
+            return ['p-row-toggler-icon pi p-clickable', icon];
         },
         rowGroupTogglerIcon(rowData) {
             const icon = this.isRowGroupExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
-            return ['p-row-toggler-icon pi pi-fw p-clickable', icon];
+            return ['p-row-toggler-icon pi p-clickable', icon];
         },
         isGrouped(column) {
             if (this.groupRowsBy) {

src/components/dataviewlayoutoptions/DataViewLayoutOptions.vue

@@ -1,12 +1,12 @@
 <template>
 	<div class="p-dataview-layout-options p-selectbutton p-buttonset">
 		<button :class="buttonListClass" @click="changeLayout('list')" type="button">
-			<i class="pi pi-bars p-button-icon-left"></i>
+			<i class="pi pi-bars"></i>
-			<span class="p-button-text p-clickable">p-btn</span>
+			<span class="p-button-text p-c">&nbsp;</span>
 		</button>
 		<button :class="buttonGridClass" @click="changeLayout('grid')" type="button">
-			<i class="pi pi-th-large p-button-icon-left"></i>
+			<i class="pi pi-th-large"></i>
-			<span class="p-button-text p-clickable">p-btn</span>
+			<span class="p-button-text p-c">&nbsp;</span>
 		</button>
 	</div>
 </template>

src/components/dialog/Dialog.vue

@@ -285,6 +285,10 @@ export default {
     justify-content: space-between;
 }
 
+.p-dialog-title {
+    list-style: 1;
+}
+
 .p-dialog .p-dialog-titlebar-icon {
     display: flex;
     align-items: center;

src/components/dropdown/Dropdown.vue

@@ -16,13 +16,15 @@
             <span class="p-dropdown-trigger-icon pi pi-chevron-down p-clickable"></span>
         </div>
         <transition name="p-input-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
-            <div ref="overlay" class="p-dropdown-panel" v-if="overlayVisible">
+            <div ref="overlay" class="p-dropdown-panel p-component" v-if="overlayVisible">
-                <div v-if="filter" class="p-dropdown-filter-container">
+                <div class="p-dropdown-header" v-if="filter">
-                    <input type="text" ref="filterInput" v-model="filterValue" autoComplete="off" class="p-dropdown-filter p-inputtext p-component" :placeholder="filterPlaceholder" @keydown="onFilterKeyDown" />
+                     <div  class="p-dropdown-filter-container">
-                    <span class="p-dropdown-filter-icon pi pi-search"></span>
+                        <input type="text" ref="filterInput" v-model="filterValue" autoComplete="off" class="p-dropdown-filter p-inputtext p-component" :placeholder="filterPlaceholder" @keydown="onFilterKeyDown" />
+                        <span class="p-dropdown-filter-icon pi pi-search"></span>
+                    </div>
                 </div>
                 <div ref="itemsWrapper" class="p-dropdown-items-wrapper" :style="{'max-height': scrollHeight}">
-                    <ul class="p-dropdown-items p-component" role="listbox">
+                    <ul class="p-dropdown-items" role="listbox">
                         <li v-for="(option, i) of visibleOptions" :class="['p-dropdown-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]"
                             :aria-label="getOptionLabel(option)" :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" role="option" :aria-selected="isSelected(option)">
                             <slot name="option" :option="option" :index="i">
@@ -292,6 +294,7 @@ export default {
             this.$emit('input', event.target.value);
         },
         onOverlayEnter() {
+            this.$refs.overlay.style.zIndex = String(DomHandler.generateZIndex());
             this.appendContainer();
             this.alignOverlay();
             this.bindOutsideClickListener();
@@ -477,6 +480,8 @@ export default {
     flex: 1 1 auto;
     width: 1%;
     text-overflow: ellipsis;
+    cursor: pointer;
+    font-weight: normal;
 }
 
 .p-dropdown-label-empty {
@@ -502,9 +507,12 @@ input.p-dropdown-label  {
 
 .p-dropdown-item {
     cursor: pointer;
+    font-weight: normal;
 }
 
 .p-dropdown-items {
+    margin: 0;
+    padding: 0;
     list-style-type: none;
 }
 

src/components/fieldset/Fieldset.vue

@@ -71,5 +71,10 @@ export default {
 
 .p-fieldset-toggleable .p-fieldset-legend a {
     cursor: pointer;
+    user-select: none;
+}
+
+.p-fieldset-legend-text {
+    line-height: 1;
 }
 </style>

src/components/fileupload/FileUpload.vue

@@ -364,6 +364,8 @@ export default {
 .p-fileupload-content .p-progressbar {
     width: 100%;
     position: absolute;
+    top: 0;
+    left: 0;
 }
 
 .p-button.p-fileupload-choose {

src/components/galleria/Galleria.vue

@@ -183,17 +183,22 @@ export default {
     display: flex;
     flex-direction: column;
     position: relative;
+    height: 100%;
 }
 
 .p-galleria-preview-container {
     position: relative;
     display: flex;
+    height: 100%;
 }
 
 .p-galleria-preview-nav-button {
     position: absolute;
     top: 50%;
     margin-top: -.5em;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .p-galleria-preview-prev {
@@ -208,6 +213,8 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+    height: 100%;
+    width: 100%;
 }
 
 .p-galleria-preview-nav-onhover .p-galleria-preview-nav-button {
@@ -232,12 +239,6 @@ export default {
     width: 100%;
 }
 
-.p-galleria-indicator-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
 /* Thumbnails */
 .p-galleria-thumbnail-content {
     display: flex;
@@ -250,6 +251,9 @@ export default {
 .p-galleria-thumbnail-next {
     align-self: center;
     flex: 0 0 auto;
+    display: flex;
+    justify-content: center;
+	align-items: center;
 }
 
 .p-galleria-thumbnail-prev span,
@@ -283,35 +287,6 @@ export default {
     cursor: pointer;
 }
 
-/* Indicators */
-.p-galleria-indicator-onpreview .p-galleria-indicator-container {
-    position: absolute;
-}
-
-.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-indicator-container {
-    top: 0;
-    left: 0;
-    width: 100%;
-}
-
-.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-indicator-container {
-    right: 0;
-    top: 0;
-    height: 100%;
-}
-
-.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-indicator-container {
-    bottom: 0;
-    left: 0;
-    width: 100%;
-}
-
-.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-indicator-container {
-    left: 0;
-    top: 0;
-    height: 100%;
-}
-
 /* Positions */
 /* Thumbnails */
 .p-galleria-thumbnails-left .p-galleria-content,
@@ -347,6 +322,17 @@ export default {
 }
 
 /* Indicators */
+.p-galleria-indicator-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-galleria-indicator-item > button {
+    display: inline-flex;
+    align-items: center;
+}
+
 .p-galleria-indicators-left .p-galleria-preview-content,
 .p-galleria-indicators-right .p-galleria-preview-content {
     flex-direction: row;
@@ -368,6 +354,39 @@ export default {
     flex-direction: column;
 }
 
+.p-galleria-indicator-onpreview .p-galleria-indicator-container {
+    position: absolute;
+    display: flex;
+}
+
+.p-galleria-indicator-onpreview.p-galleria-indicators-top .p-galleria-indicator-container {
+    top: 0;
+    left: 0;
+    width: 100%;
+    align-items: flex-start;
+}
+
+.p-galleria-indicator-onpreview.p-galleria-indicators-right .p-galleria-indicator-container {
+    right: 0;
+    top: 0;
+    height: 100%;
+    align-items: flex-end;
+}
+
+.p-galleria-indicator-onpreview.p-galleria-indicators-bottom .p-galleria-indicator-container {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    align-items: flex-end;
+}
+
+.p-galleria-indicator-onpreview.p-galleria-indicators-left .p-galleria-indicator-container {
+    left: 0;
+    top: 0;
+    height: 100%;
+    align-items: flex-start;
+}
+
 /* FullScreen */
 .p-galleria-mask {
     display: flex;

src/components/inplace/Inplace.vue

@@ -66,4 +66,13 @@ export default {
 .p-inplace .p-inplace-content {
     display: inline;
 }
+
+.p-fluid .p-inplace.p-inplace-closable .p-inplace-content {
+    display: flex;
+}
+
+.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {
+    flex: 1 1 auto;
+    width: 1%;
+}
 </style>

src/components/inputnumber/InputNumber.vue

@@ -631,14 +631,11 @@ export default {
     display: none;
 }
 
-.p-inputnumber .p-inputnumber-button span {
-    font-size: inherit;
-}
-
 .p-inputnumber-buttons-stacked .p-inputnumber-button-up {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
+    padding: 0;
 }
 
 .p-inputnumber-buttons-stacked .p-inputnumber-input {
@@ -650,6 +647,7 @@ export default {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     border-bottom-left-radius: 0;
+    padding: 0;
 }
 
 .p-inputnumber-buttons-stacked .p-inputnumber-button-group {
@@ -682,12 +680,11 @@ export default {
     flex-direction: column;
 }
 
-.p-inputnumber-buttons-vertical .p-inputnumber-button-up {
+.p-inputnumber-buttons-vertical .p-inputnumber-button-up.p-button-icon-only {
     order: 1;
-    flex: 1 1 auto;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
-    width: auto;
+    width: 100%;
 }
 
 .p-inputnumber-buttons-vertical .p-inputnumber-input {
@@ -696,12 +693,11 @@ export default {
     text-align: center;
 }
 
-.p-inputnumber-buttons-vertical .p-inputnumber-button-down {
+.p-inputnumber-buttons-vertical .p-inputnumber-button-down.p-button-icon-only {
     order: 3;
-    flex: 1 1 auto;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
-    width: auto;
+    width: 100%;
 }
 
 .p-inputnumber-input {
@@ -716,8 +712,7 @@ export default {
     width: 1%;
 }
 
-.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input,
+.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-input {
-.p-fluid .p-inputnumber-buttons-vertical .p-inputnumber-button {
     width: 100%;
 }
 </style>

src/components/inputswitch/InputSwitch.vue

@@ -59,8 +59,6 @@ export default {
 .p-inputswitch {
     position: relative;
     display: inline-block;
-    width: 3em;
-    height: 1.75em;
 }
 
 .p-inputswitch-slider {
@@ -70,26 +68,11 @@ export default {
     left: 0;
     right: 0;
     bottom: 0;
-    -webkit-transition: .3s;
-    transition: .3s;
-    border-radius: 30px;
 }
 
 .p-inputswitch-slider:before {
     position: absolute;
     content: "";
-    height: 1.250em;
+    top: 50%;
-    width: 1.250em;
-    left: .25em;
-    bottom: .25em;
-    border-radius: 50%;
-    -webkit-transition: .3s;
-    transition: .3s;
-}
-
-.p-inputswitch-checked .p-inputswitch-slider:before {
-    -webkit-transform: translateX(1.250em);
-    -ms-transform: translateX(1.250em);
-    transform: translateX(1.250em);
 }
 </style>

src/components/inputtext/InputText.css

@@ -13,20 +13,12 @@
     width: 100%;
 }
 
-.p-inputgroup .p-inputgroup-addon {
+.p-inputgroup-addon {
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-.p-inputgroup .p-button {
-    margin-right: 0;
-}
-
-.p-fluid .p-inputgroup .p-button {
-    width: auto;
-}
-
 .p-inputgroup .p-inputtext,
 .p-fluid .p-inputgroup .p-inputtext {
     flex: 1 1 auto;
@@ -44,7 +36,8 @@
     pointer-events: none;
     top: 50%;
     margin-top: -.5em;
-    transition: 0.3s ease all; 
+    transition-property: all;
+    transition-timing-function: ease;
     line-height: 1;
 }
     
@@ -52,11 +45,11 @@
 .p-float-label input.p-filled ~ label,
 .p-float-label .p-inputwrapper-focus ~ label,
 .p-float-label .p-inputwrapper-filled ~ label {
-    top:-.75em;
+    top: -.75em;
-    font-size:12px;
+    font-size: 12px;
 }
 
 .p-float-label .input:-webkit-autofill ~ label {
-    top:-20px;
+    top: -20px;
-    font-size:12px;
+    font-size: 12px;
 }

src/components/listbox/Listbox.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="p-listbox p-inputtext p-component">
+    <div class="p-listbox p-component">
         <div class="p-listbox-header" v-if="filter">
             <div class="p-listbox-filter-container">
                 <input type="text" class="p-listbox-filter p-inputtext p-component" v-model="filterValue" :placeholder="filterPlaceholder">

src/components/megamenu/MegaMenu.vue

@@ -214,7 +214,7 @@ export default {
             }, category.class];
         },
         getCategorySubMenuIcon() {
-            return ['p-submenu-icon pi pi-fw', {
+            return ['p-submenu-icon pi', {
                 'pi-caret-down': this.horizontal,
                 'pi-caret-right': this.vertical
             }];
@@ -299,6 +299,10 @@ export default {
 </script>
 
 <style>
+.p-megamenu .p-grid {
+    flex-wrap: nowrap;
+}
+
 .p-megamenu-root-list {
     margin: 0;
     padding: 0;
@@ -315,6 +319,10 @@ export default {
     align-items: center;
 }
 
+.p-megamenu .p-menuitem-text {
+    line-height: 1;
+}
+
 .p-megamenu-panel {
     display: none;
     position: absolute;
@@ -330,7 +338,6 @@ export default {
     margin: 0;
     padding: 0;
     list-style: none;
-    width: 12.5em;
 }
 
 /* Horizontal */
@@ -340,10 +347,6 @@ export default {
 }
 
 /* Vertical */
-.p-megamenu-vertical {
-    width: 12.5em;
-}
-
 .p-megamenu-vertical .p-megamenu-root-list {
     flex-direction: column;
 }

src/components/menu/Menu.vue

@@ -180,18 +180,10 @@ export default {
 </script>
 
 <style>
-.p-menu {
-    width: 12.5em;
-}
-
 .p-menu-dynamic {
     position: absolute;
 }
 
-.p-menu .p-menu-separator {
-    border-width: 1px 0 0 0;
-}
-
 .p-menu ul {
     margin: 0;
     padding: 0;
@@ -203,4 +195,8 @@ export default {
     display: flex;
     align-items: center;
 }
+
+.p-menu .p-menuitem-text {
+    line-height: 1;
+}
 </style>