From ef4265df87d221b16bcea7163bddeaede54649a9 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Fri, 24 Apr 2020 13:43:27 +0300
Subject: [PATCH] CSS refactor

---
 LICENSE.md                                    |   2 +-
 src/components/autocomplete/AutoComplete.vue  | 144 +++-------
 src/components/button/Button.css              | 106 +------
 src/components/button/Button.vue              |   2 +-
 src/components/calendar/Calendar.vue          | 260 +++---------------
 src/components/checkbox/Checkbox.css          |  30 +-
 src/components/checkbox/Checkbox.vue          |   2 +-
 src/components/chips/Chips.vue                |  58 +---
 src/components/dropdown/Dropdown.vue          | 100 ++-----
 src/components/inputnumber/InputNumber.vue    |   4 +-
 src/components/inputtext/InputText.css        |  79 ++----
 src/components/listbox/Listbox.vue            |  61 +---
 src/components/multiselect/MultiSelect.vue    | 141 +++-------
 src/components/password/Password.css          |  16 +-
 src/components/radiobutton/RadioButton.css    |  34 +--
 src/components/radiobutton/RadioButton.vue    |   2 +-
 src/components/rating/Rating.vue              |   6 +-
 src/components/slider/Slider.vue              |  53 ++--
 src/components/splitbutton/SplitButton.vue    |  45 +--
 .../tristatecheckbox/TriStateCheckbox.vue     |   2 +-
 src/views/checkbox/CheckboxDemo.vue           |  21 +-
 src/views/inputnumber/InputNumberDoc.vue      |   4 +-
 src/views/listbox/ListboxDemo.vue             |   2 +-
 src/views/listbox/ListboxDoc.vue              |   2 +-
 src/views/radiobutton/RadioButtonDemo.vue     |  19 +-
 25 files changed, 269 insertions(+), 926 deletions(-)

diff --git a/LICENSE.md b/LICENSE.md
index 9020d76ba..1777bbaf1 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016-2019 PrimeTek
+Copyright (c) 2018-2020 PrimeTek
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue
index 86e73a6b1..70c04a695 100644
--- a/src/components/autocomplete/AutoComplete.vue
+++ b/src/components/autocomplete/AutoComplete.vue
@@ -4,15 +4,15 @@
             role="searchbox" aria-autocomplete="list" :aria-controls="listId" :aria-labelledby="ariaLabelledBy">
         <ul ref="multiContainer" :class="multiContainerClass" v-if="multiple" @click="onMultiContainerClick">
             <li v-for="(item, i) of value" :key="i" class="p-autocomplete-token p-highlight">
-                <span class="p-autocomplete-token-icon pi pi-fw pi-times" @click="removeItem($event, i)"></span>
                 <span class="p-autocomplete-token-label">{{getItemContent(item)}}</span>
+                <span class="p-autocomplete-token-icon pi pi-times" @click="removeItem($event, i)"></span>
             </li>
             <li class="p-autocomplete-input-token">
                 <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>
-        <Button ref="dropdownButton" type="button" icon="pi pi-fw pi-chevron-down" class="p-autocomplete-dropdown" :disabled="$attrs.disabled" @click="onDropdownClick" v-if="dropdown"/>
+        <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">
                 <ul :id="listId" class="p-autocomplete-items p-autocomplete-list p-component" role="listbox">
@@ -430,27 +430,8 @@ export default {
 
 <style>
 .p-autocomplete {
-    width: auto;
-    cursor: pointer;
-    -moz-box-shadow: none;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-    position: relative;
-    display: -webkit-inline-flex;
-    display: -ms-inline-flexbox;
     display: inline-flex;
-}
-
-.p-autocomplete .p-autocomplete-dropdown {
-    width: 2em;
-    margin-right: 0;
-}
-
-.p-autocomplete .p-autocomplete-input {
-    -webkit-box-flex: 1;
-    -webkit-flex: 1 1 auto;
-    -ms-flex: 1 1 auto;
-    flex: 1 1 auto;
+    position: relative;
 }
 
 .p-autocomplete-loader {
@@ -460,8 +441,20 @@ export default {
     margin-top: -.5em;
 }
 
-.p-autocomplete-query {
-    font-weight: bold;
+.p-autocomplete-dd .p-autocomplete-input {
+    flex: 1 1 auto;
+    width: 1%;
+}
+
+.p-autocomplete-dd .p-autocomplete-input,
+.p-autocomplete-dd .p-autocomplete-multiple-container {
+     border-top-right-radius: 0;
+     border-bottom-right-radius: 0;
+ }
+ 
+.p-autocomplete-dd .p-autocomplete-dropdown {
+     border-top-left-radius: 0;
+     border-bottom-left-radius: 0px;
 }
 
 .p-autocomplete .p-autocomplete-panel {
@@ -473,120 +466,47 @@ export default {
     overflow: auto;
 }
 
-.p-autocomplete-panel .p-autocomplete-list {
-    border: 0 none;
-    padding: 0;
-    margin: 0;
-}
-
-.p-autocomplete-panel .p-autocomplete-list-item {
-    border: 0 none;
+.p-autocomplete-list-item {
     cursor: pointer;
-    font-weight: normal;
-    margin: 1px 0;
-    padding: 0.186em 0.313em;
-    text-align: left;
-}
-
-.p-autocomplete .p-button-icon-only,
-.p-autocomplete .p-button-icon-only:enabled:hover,
-.p-autocomplete .p-button-icon-only:enabled:focus,
-.p-autocomplete .p-button-icon-only:enabled:active {
-    border-left: 0 none;
-}
-
-/* Multiple Selection */
-.p-autocomplete-multiple-container {
-    display: inline-block;
-    vertical-align: middle;
 }
 
 .p-autocomplete-multiple-container.p-inputtext {
-    clear: left;
     cursor: text;
     list-style-type: none;
     margin: 0;
     overflow: hidden;
-    padding: 0 1.5em 0 .25em;
+    display: flex;
+    align-items: center;
 }
 
 .p-autocomplete-token {
     cursor: default;
-    display: inline-block;
-    vertical-align: middle;
-    overflow: hidden;
-    padding: .125em .5em;
-    white-space: nowrap;
-    position: relative;
-    margin-right: .125em;
-    border: 0 none;
-    font-size: .9em;
-}
-
-.p-autocomplete-token-label {
-    display: block;
-    margin-right: 2em;
-}
-
-.p-autocomplete-token-icon {
-    margin-top: -.5em;
-    position: absolute;
-    right: 0.2em;
-    top: 50%;
-    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
 }
 
 .p-autocomplete-input-token {
-    display: inline-block;
-    vertical-align: middle;
-    list-style-type: none;
-    margin: 0 0 0 .125em;
-    padding: .25em .25em .25em 0;
+    flex: 1 1 auto;
+    display: inline-flex;
 }
 
 .p-autocomplete-input-token input {
     border: 0 none;
-    width: 10em;
-    outline: medium none;
+    outline: 0 none;
     background-color: transparent;
     margin: 0;
     padding: 0;
     box-shadow: none;
-    -moz-border-radius: 0;
-    -webkit-border-radius: 0;
     border-radius: 0;
-}
-
-.p-autocomplete-dd .p-autocomplete-loader {
-    right: 2.25em;
-}
-
-.p-autocomplete-dd input,
-.p-autocomplete-dd .p-autocomplete-multiple-container {
-     -moz-border-radius-topright: 0px;
-     -webkit-border-top-right-radius: 0px;
-     border-top-right-radius: 0px;
-     -moz-border-radius-bottomright: 0px;
-     -webkit-border-bottom-right-radius: 0px;
-     border-bottom-right-radius: 0px;
- }
-
-.p-autocomplete-dd .p-autocomplete-dropdown {
-     -moz-border-radius-topleft: 0px;
-     -webkit-border-top-left-radius: 0px;
-     border-top-left-radius: 0px;
-     -moz-border-radius-bottomleft: 0px;
-     -webkit-border-bottom-left-radius: 0px;
-     border-bottom-left-radius: 0px;
-}
-
-/** AutoComplete **/
-.p-fluid .p-autocomplete,
-.p-fluid .p-autocomplete-input {
     width: 100%;
 }
 
-.p-fluid .p-autocomplete .p-autocomplete-dropdown.p-button {
-    width: 2em;
+.p-fluid .p-autocomplete {
+    display: flex;
+}
+
+.p-fluid .p-autocomplete-dd .p-autocomplete-input {
+    width: 1%;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/button/Button.css b/src/components/button/Button.css
index 3bf03e61a..9cd0a7112 100644
--- a/src/components/button/Button.css
+++ b/src/components/button/Button.css
@@ -1,115 +1,25 @@
-/* Button */
 .p-button {
-    display: inline-block;
-    position: relative;
-    padding: 0;
-    text-decoration: none !important;
+    display: inline-flex;
     cursor: pointer;
-    text-align: center;
-    zoom: 1;
-    overflow: visible; /* the overflow property removes extra width in IE */
     margin-right: 0.25em;
     user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
+    align-items: center;
 }
 
 .p-button:disabled {
     cursor: default;
 }
 
-/*button text element */
-.p-button .p-button-text {
-    display: block;
-    line-height: normal;
+.p-button-icon-only {
+    justify-content: center;
 }
 
-.p-button-text-only .p-button-text {
-    padding: .25em 1em;
-}
-
-.p-button-icon-only .p-button-text,
-.p-button-text-empty .p-button-text {
-    padding: .25em;
-    text-indent: -9999999px;
-}
-
-.p-button-text-icon-left .p-button-text {
-    padding: .25em 1em .25em 2.1em;
-}
-
-.p-button-text-icon-right .p-button-text {
-    padding: .25em 2.1em .25em 1em;
-}
-
-/*button icon element(s) */
-.p-button-icon-only .p-button-icon-left,
-.p-button-text-icon-left .p-button-icon-left,
-.p-button-text-icon-right .p-button-icon-right {
-    position: absolute;
-    top: 50%;
-    margin-top: -.5em;
-    height: 1em;
-}
-
-.p-button-icon-only .p-button-icon-left {
-    top: 50%;
-    left: 50%;
-    margin-top: -.5em;
-    margin-left: -.5em;
-    width: 1em;
-    height: 1em;
-}
-
-.p-button-icon-left {
-    left: .5em;
-}
-
-.p-button-icon-right {
-    right: .5em;
-}
-
-/*button sets*/
-.p-buttonset .p-button {
-    margin-left: 0;
-    margin-right: 0;
-}
-
-/* workarounds */
-button.p-button::-moz-focus-inner {
-    border: 0; padding: 0; /* reset extra padding in Firefox */
-}
-
-/** Fluid **/
 .p-fluid .p-button {
+    display: flex;
     width: 100%;
 }
 
-.p-fluid .p-button-text-icon-left .p-button-text,
-.p-fluid .p-button-text-icon-right .p-button-text {
-    padding-left: 1em;
-    padding-right: 1em;
-}
-
-/** ButtonSet **/
-.p-fluid .p-buttonset {
-    width: 100%;
-}
-
-.p-fluid .p-buttonset.p-buttonset-1 .p-button {width: 100%;}
-.p-fluid .p-buttonset.p-buttonset-2 .p-button {width: 50%;}
-.p-fluid .p-buttonset.p-buttonset-3 .p-button {width: 33.3%;}
-.p-fluid .p-buttonset.p-buttonset-4 .p-button {width: 25%;}
-.p-fluid .p-buttonset.p-buttonset-5 .p-button {width: 20%;}
-.p-fluid .p-buttonset.p-buttonset-6 .p-button {width: 16.6%;}
-
-@media (max-width: 640px) {
-    .p-fluid .p-buttonset.p-buttonset-1 .p-button,
-    .p-fluid .p-buttonset.p-buttonset-2 .p-button,
-    .p-fluid .p-buttonset.p-buttonset-3 .p-button,
-    .p-fluid .p-buttonset.p-buttonset-4 .p-button,
-    .p-fluid .p-buttonset.p-buttonset-5 .p-button,
-    .p-fluid .p-buttonset.p-buttonset-6 .p-button {
-        width: 100%;
-    }
+.p-fluid .p-button-icon-only {
+    display: inline-flex;
+    width: auto;
 }
\ No newline at end of file
diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
index 8d0ed6931..13f157119 100644
--- a/src/components/button/Button.vue
+++ b/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">{{label||'p-btn'}}</span>
+        <span class="p-button-text p-c" v-if="label">{{label}}</span>
     </button>
 </template>
 
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 5751a01d9..59e9ed2d9 100644
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -75,13 +75,7 @@
                         </button>
                     </div>
                     <div class="p-separator">
-                        <span class="p-separator-spacer">
-                            <span class="pi pi-chevron-up"></span>
-                        </span>
                         <span>{{timeSeparator}}</span>
-                        <span class="p-separator-spacer">
-                            <span class="pi pi-chevron-up"></span>
-                        </span>
                     </div>
                     <div class="p-minute-picker">
                         <button class="p-link" @mousedown="onTimePickerElementMouseDown($event, 1, 1)" @mouseup="onTimePickerElementMouseUp($event)" @keydown="onContainerButtonKeydown"
@@ -95,13 +89,7 @@
                         </button>
                     </div>
                     <div class="p-separator" v-if="showSeconds">
-                        <span class="p-separator-spacer">
-                            <span class="pi pi-chevron-up"></span>
-                        </span>
                         <span>{{timeSeparator}}</span>
-                        <span class="p-separator-spacer">
-                            <span class="pi pi-chevron-up"></span>
-                        </span>
                     </div>
                     <div class="p-second-picker" v-if="showSeconds">
                         <button class="p-link" @mousedown="onTimePickerElementMouseDown($event, 2, 1)" @mouseup="onTimePickerElementMouseUp($event)" @keydown="onContainerButtonKeydown"
@@ -115,13 +103,7 @@
                         </button>
                     </div>
                     <div class="p-separator" v-if="hourFormat=='12'">
-                        <span class="p-separator-spacer">
-                            <span class="pi pi-chevron-up"></span>
-                        </span>
                         <span>{{timeSeparator}}</span>
-                        <span class="p-separator-spacer">
-                            <span class="pi pi-chevron-up"></span>
-                        </span>
                     </div>
                     <div class="p-ampm-picker" v-if="hourFormat=='12'">
                         <button class="p-link" @click="toggleAMPM($event)" type="button">
@@ -2020,7 +2002,6 @@ export default {
                 'p-datepicker p-component',
                 {
                     'p-datepicker-inline': this.inline,
-                    'p-shadow': !this.inline,
                     'p-disabled': this.$attrs.disabled,
                     'p-datepicker-timeonly': this.timeOnly,
                     'p-datepicker-multiple-month': this.numberOfMonths > 1,
@@ -2162,21 +2143,22 @@ export default {
 <style>
 .p-calendar {
     position: relative;
-    display: inline-block;
+    display: inline-flex;
 }
 
-.p-calendar .p-calendar-button {
-    position: absolute;
-    height: 100%;
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
-    width: 2em;
-    border-left: 0 none;
+.p-calendar .p-inputtext {
+    flex: 1 1 auto;
+    width: 1%;
 }
 
-.p-calendar .p-calendar-button:enabled:hover,
-.p-calendar .p-calendar-button:focus {
-    border-left: 0 none;
+.p-calendar-w-btn .p-inputtext {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.p-calendar-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
 }
 
 .p-calendar .p-datepicker {
@@ -2185,205 +2167,87 @@ export default {
 
 /* Fluid */
 .p-fluid .p-calendar {
-    width: 100%;
+    display: flex;
 }
 
-.p-fluid .p-calendar-button {
-    width: 2em;
-}
-
-.p-fluid .p-datepicker-buttonbar button {
-    width: auto;
-}
-
-.p-fluid .p-calendar.p-calendar-w-btn .p-inputtext {
-    width: calc(100% - 2em);
+.p-fluid .p-calendar .p-inputtext {
+    width: 1%;
 }
 
 /* Datepicker */
 .p-datepicker {
 	width: auto;
-	padding: .2em;
     position: absolute;
 }
 
-.p-datepicker.p-datepicker-inline {
-    display: inline-block;
+.p-datepicker-inline {
+    display: inline-flex;
     position: static;
 }
 
-.p-datepicker .p-datepicker-group {
-    border-left-width: 0;
-    border-right-width: 0;
-    border-top-width: 0;
-    border-bottom-width: 0;
-}
-
 /* Header */
 .p-datepicker .p-datepicker-header {
-	position: relative;
-	padding: .5em 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
+
 .p-datepicker .p-datepicker-prev,
 .p-datepicker .p-datepicker-next {
-	position: absolute;
-	top: .5em;
-	width: 1.8em;
-    height: 1.8em;
     cursor: pointer;
-}
-
-.p-datepicker .p-datepicker-prev {
-	left: .125em;
-}
-.p-datepicker .p-datepicker-next {
-	right: .125em;
-}
-
-.p-datepicker .p-datepicker-prev span,
-.p-datepicker .p-datepicker-next span {
-	display: block;
-	position: absolute;
-	left: 50%;
-	top: 50%;
-    margin-top: -.5em;
-    margin-left: -.5em;
-}
-
-.p-datepicker .p-datepicker-title {
-	margin: 0 2.3em;
-	line-height: 1.8em;
-	text-align: center;
-}
-.p-datepicker .p-datepicker-title select {
-	font-size: 1em;
-	margin: .125em 0;
-    vertical-align: middle;
-}
-.p-datepicker select.p-datepicker-month {
-    margin-right: .25em;
-}
-.p-datepicker span.p-datepicker-year {
-	margin-left: .25em;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
 }
 
 /* Multiple Month DatePicker */
-.p-datepicker-multiple-month .p-datepicker-group {
-    display: table-cell;
-    border-left-width: 0;
-    border-top-width: 0;
-    border-bottom-width: 0;
-    border-right-width: 1px;
+.p-datepicker-multiple-month {
+    display: flex;
 }
 
 /* DatePicker Table */
 .p-datepicker table {
 	width: 100%;
-	font-size: .9em;
 	border-collapse: collapse;
-	margin: 0 0 .4em;
-}
-.p-datepicker th {
-	padding: .5em;
-	text-align: center;
-	font-weight: bold;
-	border: 0;
-}
-.p-datepicker td {
-	border: 0;
-	padding: 0;
 }
+
 .p-datepicker td > span,
 .p-datepicker td > a {
-	display: block;
-	padding: .5em;
-	text-align: right;
-	text-decoration: none;
+    display: flex;
+    justify-content: center;
+    align-self: center;
 }
 
 .p-datepicker td a {
     cursor: pointer;
 }
 
-.p-datepicker .p-datepicker-buttonbar,
-.p-datepicker .p-datepicker-footer {
-	padding: .5em;
-}
-
-.p-datepicker .p-datepicker-buttonbar:after {
-    content: "";
-    display: table;
-    clear: both;
-}
-
-.p-datepicker .p-datepicker-buttonbar > button:last-child {
-    float: right;
-}
-
-.p-calendar.p-calendar-w-btn input {
-    -moz-border-radius-topright: 0px;
-    -webkit-border-top-right-radius: 0px;
-    -khtml-border-top-right-radius: 0px;
-    border-top-right-radius: 0px;
-    -moz-border-radius-bottomright: 0px;
-    -webkit-border-bottom-right-radius: 0px;
-    -khtml-border-bottom-right-radius: 0px;
-    border-bottom-right-radius: 0px;
-}
-
 /* Month Picker */
-.p-monthpicker .p-monthpicker-month {
+.p-monthpicker-month {
     width: 33.3%;
-    display: inline-block;
-    text-align: center;
-    padding: .5em;
+    display: inline-flex;
+    align-content: center;
+    justify-content: center;
     cursor: pointer;
 }
 
-.p-datepicker-monthpicker select.p-datepicker-year {
-    width: auto;
-}
-
 /* Time Picker */
 .p-timepicker {
-    text-align: center;
-    padding: .5em 0;
+    display: flex;
+    justify-content: center;
 }
 
-.p-timepicker > div {
-    display: inline-block;
-    margin-left: .5em;
-    min-width: 1.5em;
+.p-timepicker .p-separator {
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
-.p-timepicker > .p-minute-picker,
-.p-timepicker > .p-second-picker {
-    margin-left: 0;
-}
-
-.p-timepicker > .p-separator {
-    margin-left: 0px;
-    min-width: .75em;
-}
-
-.p-timepicker > .p-separator .p-separator-spacer {
-    visibility: hidden;
-    display: block;
-}
-
-.p-timepicker > div button {
+.p-timepicker button {
     display: block;
     cursor: pointer;
 }
 
-.p-timepicker > div button:last-child {
-    margin-top: .3em;
-}
-
-input[type=text]::-ms-clear {
-    display: none;
-}
-
 /* Touch UI */
 .p-datepicker-touch-ui,
 .p-calendar .p-datepicker-touch-ui {
@@ -2393,46 +2257,4 @@ input[type=text]::-ms-clear {
     min-width: 80vw;
     transform: translate(-50%, -50%);
 }
-
-.p-datepicker-touch-ui.p-datepicker th {
-	padding: 2em 0;
-}
-.p-datepicker-touch-ui.p-datepicker td {
-	padding: 0;
-}
-.p-datepicker-touch-ui.p-datepicker td span,
-.p-datepicker-touch-ui.p-datepicker td a {
-	padding: 2em 0;
-}
-
-.p-datepicker-touch-ui .p-timepicker {
-    padding: 1em 0;
-}
-
-.p-datepicker-touch-ui .p-timepicker > div a {
-    font-size: 2em;
-}
-
-.p-datepicker-mask {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-}
-
-@media screen and (max-width: 40em) {
-    .p-datepicker-multiple-month {
-        width: 17em;
-        overflow: auto;
-    }
-
-    .p-datepicker-touch-ui.p-datepicker th {
-        padding: 1em 0;
-    }
-
-    .p-datepicker-touch-ui.p-datepicker td span,
-    .p-datepicker-touch-ui.p-datepicker td a {
-        padding: 1em 0;
-    }
-}
-
 </style>
\ No newline at end of file
diff --git a/src/components/checkbox/Checkbox.css b/src/components/checkbox/Checkbox.css
index e3546a920..25987ebaf 100644
--- a/src/components/checkbox/Checkbox.css
+++ b/src/components/checkbox/Checkbox.css
@@ -1,31 +1,11 @@
 .p-checkbox {
-    display: inline-block;
+    display: inline-flex;
     cursor: pointer;
-    vertical-align: middle;
-    margin-right: .25em;
     user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
 }
 
-.p-checkbox .p-checkbox-box {
-    width: 1.125em;
-    height: 1.125em;
-    line-height: 1.125em;
-    -moz-border-radius: 2px;
-    -webkit-border-radius: 2px;
-    border-radius: 2px;
-    text-align: center;
-}
-
-.p-checkbox .p-checkbox-icon {
-    display: block;
-}
-
-.p-checkbox-label {
-    vertical-align: middle;  
-}
-
-.p-checkbox + label {
-    vertical-align: middle;
+.p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
\ No newline at end of file
diff --git a/src/components/checkbox/Checkbox.vue b/src/components/checkbox/Checkbox.vue
index ef84f64b0..ccaca53c7 100644
--- a/src/components/checkbox/Checkbox.vue
+++ b/src/components/checkbox/Checkbox.vue
@@ -3,7 +3,7 @@
        <div class="p-hidden-accessible">
            <input ref="input" type="checkbox" :checked="checked" :value="value" v-bind="$attrs" @focus="onFocus($event)" @blur="onBlur($event)" :aria-labelledby="ariaLabelledBy">
         </div>
-        <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="checkbox" :aria-checked="checked">
+        <div ref="box" :class="['p-checkbox-box', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="checkbox" :aria-checked="checked">
             <span :class="['p-checkbox-icon p-c', {'pi pi-check': checked}]"></span>
         </div>
     </div>
diff --git a/src/components/chips/Chips.vue b/src/components/chips/Chips.vue
index f83425d98..d27aa789d 100644
--- a/src/components/chips/Chips.vue
+++ b/src/components/chips/Chips.vue
@@ -1,10 +1,10 @@
 <template>
     <div :class="['p-chips p-component', {'p-inputwrapper-filled': value, 'p-inputwrapper-focus': focused}]">
-        <ul :class="['p-inputtext', {'p-disabled': $attrs.disabled, 'p-focus': focused}]" @click="onWrapperClick()">
+        <ul :class="['p-inputtext p-chips-multiple-container', {'p-disabled': $attrs.disabled, 'p-focus': focused}]" @click="onWrapperClick()">
             <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-icon pi pi-fw pi-times" @click="removeItem($event, i)"></span>
                     <span class="p-chips-token-label">{{val}}</span>
+                    <span class="p-chips-token-icon pi pi-fw pi-times" @click="removeItem($event, i)"></span>
                 </slot>
             </li>
             <li class="p-chips-input-token">
@@ -151,70 +151,42 @@ export default {
 
 <style>
 .p-chips {
-    display: inline-block;
+    display: inline-flex;
 }
 
-.p-chips > ul.p-inputtext {
-    clear: left;
+.p-chips-multiple-container.p-inputtext {
     cursor: text;
     list-style-type: none;
     margin: 0;
     overflow: hidden;
-    padding: 0 .25em;
+    display: flex;
+    align-items: center;
 }
 
 .p-chips-token {
     cursor: default;
-    display: inline-block;
-    vertical-align: middle;
-    overflow: hidden;
-    padding: .125em .5em;
-    white-space: nowrap;
-    position: relative;
-    margin-right: .125em;
-    border: 0 none;
-    font-size: .9em;
-}
-
-.p-chips-token .p-chips-token-label {
-    display: block;
-    margin-right: 2em;
-}
-
-.p-chips > .p-disabled .p-chips-token-label {
-    margin-right: 0;
-}
-
-.p-chips-token .p-chips-token-icon {
-    margin-top: -.5em;
-    position: absolute;
-    right: 0.2em;
-    top: 50%;
-    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
 }
 
 .p-chips-input-token {
-    display: inline-block;
-    vertical-align: middle;
-    list-style-type: none;
-    margin: 0 0 0 .125em;
-    padding: .25em .25em .25em 0;
+    flex: 1 1 auto;
+    display: inline-flex;
 }
 
-.p-chips-input-token .p-inputtext {
+.p-chips-input-token input {
     border: 0 none;
-    width: 10em;
-    outline: medium none;
+    outline: 0 none;
     background-color: transparent;
     margin: 0;
     padding: 0;
     box-shadow: none;
-    -moz-border-radius: 0;
-    -webkit-border-radius: 0;
     border-radius: 0;
+    width: 100%;
 }
 
 .p-fluid .p-chips {
-    display: block;
+    display: flex;
 }
 </style>
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index 210194586..25eddad91 100644
--- a/src/components/dropdown/Dropdown.vue
+++ b/src/components/dropdown/Dropdown.vue
@@ -22,7 +22,7 @@
                     <span class="p-dropdown-filter-icon pi pi-search"></span>
                 </div>
                 <div ref="itemsWrapper" class="p-dropdown-items-wrapper" :style="{'max-height': scrollHeight}">
-                    <ul class="p-dropdown-items p-dropdown-list p-component" role="listbox">
+                    <ul class="p-dropdown-items p-component" 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">
@@ -453,126 +453,80 @@ export default {
 
 <style>
 .p-dropdown {
-    display: inline-block;
+    display: inline-flex;
+    cursor: pointer;
     position: relative;
-    cursor: pointer;
-    vertical-align: middle;
 }
 
-.p-dropdown .p-dropdown-clear-icon {
+.p-dropdown-clear-icon {
     position: absolute;
-    right: 2em;
     top: 50%;
-    font-size: 1em;
-    height: 1em;
     margin-top: -.5em;
 }
 
-.p-dropdown .p-dropdown-trigger {
-    border-right: none;
-    border-top: none;
-    border-bottom: none;
-    cursor: pointer;
-    width: 1.5em;
-    height: 100%;
-    position: absolute;
-    right: 0;
-    top: 0;
-    padding: 0 .25em;
+.p-dropdown-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-.p-dropdown .p-dropdown-trigger .p-dropdown-trigger-icon {
-    top: 50%;
-    left: 50%;
-    margin-top: -.5em;
-    margin-left: -.5em;
-    position: absolute;
-}
-
-.p-dropdown .p-dropdown-label  {
+.p-dropdown-label {
     display: block;
-    border: none;
     white-space: nowrap;
     overflow: hidden;
-    font-weight: normal;
-    width: 100%;
-    padding-right: 1.5em;
+    flex: 1 1 auto;
+    width: 1%;
+    text-overflow: ellipsis;
 }
 
-.p-dropdown .p-dropdown-item-empty,
-.p-dropdown .p-dropdown-label-empty {
+.p-dropdown-label-empty {
     overflow: hidden;
     visibility: hidden;
 }
 
-.p-dropdown.p-disabled .p-dropdown-trigger,
-.p-dropdown.p-disabled .p-dropdown-label {
-    cursor: default;
-}
-
-.p-dropdown label.p-dropdown-label  {
-    cursor: pointer;
-}
-
-.p-dropdown input.p-dropdown-label  {
+input.p-dropdown-label  {
     cursor: default;
 }
 
 .p-dropdown .p-dropdown-panel {
     min-width: 100%;
-    z-index: 1;
 }
 
 .p-dropdown-panel {
     position: absolute;
-    height: auto;
 }
 
-.p-dropdown-panel .p-dropdown-items-wrapper {
+.p-dropdown-items-wrapper {
     overflow: auto;
 }
 
-.p-dropdown-panel .p-dropdown-item {
-    font-weight: normal;
-    border: 0 none;
+.p-dropdown-item {
     cursor: pointer;
-    margin: 1px 0;
-    padding: .125em .25em;
-    text-align: left;
 }
 
-.p-dropdown-panel .p-dropdown-item-group {
-    font-weight: bold;
-}
-
-.p-dropdown-panel .p-dropdown-list {
-    padding: 0.4em;
-    border: 0 none;
-    margin: 0;
+.p-dropdown-items {
     list-style-type: none;
 }
 
-.p-dropdown-panel .p-dropdown-filter {
+.p-dropdown-filter {
     width: 100%;
-    box-sizing: border-box;
-    padding-right: 1.5em;
 }
 
-.p-dropdown-panel .p-dropdown-filter-container {
+.p-dropdown-filter-container {
     position: relative;
-    margin: 0;
-    padding: 0.4em;
-    display: inline-block;
 }
 
-.p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
+.p-dropdown-filter-icon {
     position: absolute;
-    top: .8em;
-    right: 1em;
+    top: 50%;
+    margin-top: -.5em;
 }
 
-/** Dropdown **/
 .p-fluid .p-dropdown {
-    width: 100%;
+    display: flex;
+}
+
+.p-fluid .p-dropdown .p-dropdown-label {
+    width: 1%;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/inputnumber/InputNumber.vue b/src/components/inputnumber/InputNumber.vue
index e66504bd0..3a0fb8b2d 100644
--- a/src/components/inputnumber/InputNumber.vue
+++ b/src/components/inputnumber/InputNumber.vue
@@ -43,11 +43,11 @@ export default {
         },
         incrementButtonIcon: {
             type: String,
-            default: 'pi pi-caret-up',
+            default: 'pi pi-chevron-up',
         },
         decrementButtonIcon: {
             type: String,
-            default: 'pi pi-caret-down',
+            default: 'pi pi-chevron-down',
         },
         locale: {
             type: String,
diff --git a/src/components/inputtext/InputText.css b/src/components/inputtext/InputText.css
index c93de59cb..1094dc898 100644
--- a/src/components/inputtext/InputText.css
+++ b/src/components/inputtext/InputText.css
@@ -1,103 +1,62 @@
 .p-inputtext {
     margin: 0;
-    outline: medium none;
-    padding: .25em;
-    font-weight: normal;
 }
 
 .p-fluid .p-inputtext {
     width: 100%;
-    box-sizing: border-box;
-    -webkit-box-sizing:border-box;
-    -moz-box-sizing: border-box;
 }
 
+/* InputGroup */
 .p-inputgroup {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
+    align-items: stretch;
+    width: 100%;
 }
 
 .p-inputgroup .p-inputgroup-addon {
-    display: inline-block;
-    text-align: center;
-    min-width: 1.5em;
-    padding: .25em;
-    border-width: 1px;
-    border-style: solid;
-}
-
-.p-inputgroup .p-inputgroup-addon + .p-inputgroup-addon {
-    border-left: 0 none;
-}
-
-.p-inputgroup .p-inputtext {
-    padding-left: .5em;
-}
-
-.p-inputgroup .p-inputtext:not(:first-child) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-    border-left: 0 none;
-}
-
-.p-inputgroup .p-inputtext:not(:last-child) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    border-right: 0 none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .p-inputgroup .p-button {
     margin-right: 0;
-    border-radius: 0;
 }
 
 .p-fluid .p-inputgroup .p-button {
     width: auto;
 }
 
+.p-inputgroup .p-inputtext,
 .p-fluid .p-inputgroup .p-inputtext {
-    -webkit-box-flex: 1;
-    -webkit-flex: 1 1 auto;
-    -ms-flex: 1 1 auto;
     flex: 1 1 auto;
-}
-
-.p-inputgroup .p-checkbox, 
-.p-inputgroup .p-radiobutton {
-    margin-right: 0;
-    vertical-align: bottom;
+    width: 1%;
 }
 
 /* Floating Label */
 .p-float-label {
     display: block;
-    position:relative; 
+    position: relative; 
 }
 
 .p-float-label label {
-  font-weight:normal;
-  position:absolute;
-  pointer-events:none;
-  left: .25em;
-  top: 50%;
-  margin-top: -.5em;
-  transition: 0.3s ease all; 
-  -moz-transition: 0.3s ease all; 
-  -webkit-transition: 0.3s ease all;
-  color: #898989;
-  line-height: 1;
+    position: absolute;
+    pointer-events: none;
+    top: 50%;
+    margin-top: -.5em;
+    transition: 0.3s ease all; 
+    line-height: 1;
 }
     
 .p-float-label input:focus ~ label,
 .p-float-label input.p-filled ~ label,
 .p-float-label .p-inputwrapper-focus ~ label,
 .p-float-label .p-inputwrapper-filled ~ label {
-  top:-.75em;
-  font-size:12px;
+    top:-.75em;
+    font-size:12px;
 }
 
 .p-float-label .input:-webkit-autofill ~ label {
-  top:-20px;
-  font-size:12px;
+    top:-20px;
+    font-size:12px;
 }
\ No newline at end of file
diff --git a/src/components/listbox/Listbox.vue b/src/components/listbox/Listbox.vue
index 8c6e1872d..fd14bead4 100644
--- a/src/components/listbox/Listbox.vue
+++ b/src/components/listbox/Listbox.vue
@@ -2,7 +2,7 @@
     <div class="p-listbox p-inputtext p-component">
         <div class="p-listbox-header" v-if="filter">
             <div class="p-listbox-filter-container">
-                <input type="text" class="p-inputtext p-component" v-model="filterValue" :placeholder="filterPlaceholder">
+                <input type="text" class="p-listbox-filter p-inputtext p-component" v-model="filterValue" :placeholder="filterPlaceholder">
                 <span class="p-listbox-filter-icon pi pi-search"></span>
             </div>
         </div>
@@ -232,72 +232,31 @@ export default {
 </script>
 
 <style>
-.p-listbox {
-    padding: .25em;
-    width: 10em;
+.p-listbox-list-wrapper {
+    overflow: auto;
 }
 
-.p-listbox .p-listbox-list-wrapper {
-    overflow:auto;
-}
-
-.p-listbox .p-listbox-list {
+.p-listbox-list {
     list-style-type: none;
     margin: 0;
     padding: 0;
 }
 
-.p-listbox .p-listbox-item {
-    padding: .25em;
-    border: 0 none;
-    cursor: pointer;
-    font-weight: normal;
-    margin-bottom: 1px;
-}
-
-.p-listbox .p-listbox-item > span {
-    vertical-align: middle;
-}
-
-.p-listbox .p-listbox-item:last-child {
-    margin-bottom: 0;
-}
-
-.p-listbox.p-disabled .p-listbox-item {
-    cursor: default;
-}
-
-.p-listbox-header {
-    margin-bottom: 0.3em;
-    padding: .125em .2em;
-    position: relative;
-}
-
-.p-listbox-header .p-checkbox {
-    display: inline-block;
-    vertical-align: middle;
+.p-listbox-item {
     cursor: pointer;
 }
 
-.p-listbox-header .p-listbox-filter-container {
-    display: inline-block;
-    vertical-align: middle;
+.p-listbox-filter-container {
     position: relative;
-    width: 100%;
 }
 
-.p-listbox-header.p-listbox-header-w-checkbox .p-listbox-filter-container {
-    width: calc(100% - 2em);
-}
-
-.p-listbox-header .p-listbox-filter-container .p-listbox-filter-icon {
+.p-listbox-filter-icon {
     position: absolute;
-    top: .25em;
-    left: .25em;
+    top: 50%;
+    margin-top: -.5em;
 }
 
-.p-listbox-header .p-inputtext {
-    padding: .125em .125em .125em 1.25em;
+.p-listbox-filter {
     width: 100%;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index 470cc19e8..784609380 100644
--- a/src/components/multiselect/MultiSelect.vue
+++ b/src/components/multiselect/MultiSelect.vue
@@ -34,7 +34,7 @@
                     </button>
                 </div>
                 <div ref="itemsWrapper" class="p-multiselect-items-wrapper" :style="{'max-height': scrollHeight}">
-                    <ul class="p-multiselect-items p-multiselect-list p-component" role="listbox" aria-multiselectable="true">
+                    <ul class="p-multiselect-items p-component" role="listbox" aria-multiselectable="true">
                         <li v-for="(option, i) of visibleOptions" :class="['p-multiselect-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" role="option" :aria-selected="isSelected(option)"
                             :aria-label="getOptionLabel(option)" :key="getOptionRenderKey(option)" @click="onOptionSelect($event, option)" @keydown="onOptionKeyDown($event, option)" :tabindex="tabindex||'0'">
                             <div class="p-checkbox p-component">
@@ -410,46 +410,26 @@ export default {
 
 <style>
 .p-multiselect {
-    display: inline-block;
+    display: inline-flex;
+    cursor: pointer;
     position: relative;
-    width: auto;
-    cursor: pointer;
 }
 
-.p-multiselect .p-multiselect-trigger {
-    border-right: none;
-    border-top: none;
-    border-bottom: none;
-    cursor: pointer;
-    width: 1.5em;
-    height: 100%;
-    position: absolute;
-    right: 0;
-    top: 0;
-    padding: 0 .25em;
-}
-
-.p-multiselect .p-multiselect-trigger .p-multiselect-trigger-icon {
-    top: 50%;
-    left: 50%;
-    margin-top: -.5em;
-    margin-left: -.5em;
-    position: absolute;
+.p-multiselect-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .p-multiselect .p-multiselect-label-container {
     overflow: hidden;
+    flex: 1 1 auto;
 }
 
 .p-multiselect .p-multiselect-label  {
     display: block;
-    padding: .25em 2em .25em .25em;
-    width: auto;
-    border: none;
-    cursor: pointer;
-    text-overflow: ellipsis;
-    overflow: hidden;
     white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 .p-multiselect-label-empty {
@@ -457,109 +437,50 @@ export default {
     visibility: hidden;
 }
 
-.p-multiselect.p-disabled .p-multiselect-trigger,
-.p-multiselect.p-disabled .p-multiselect-label {
-    cursor: auto;
-}
-
-.p-multiselect-panel {
-    padding: 0.2em;
-    position: absolute;
-    min-width: 10em;
-    z-index: 2;
-}
-
 .p-multiselect .p-multiselect-panel {
     min-width: 100%;
 }
 
-.p-multiselect-panel .p-multiselect-items-wrapper {
-    overflow: auto;
-    position: relative;
-    padding: 0.2em 0;
+.p-multiselect-panel {
+    position: absolute;
 }
 
-.p-multiselect-panel .p-multiselect-list {
-    border: 0 none;
-    margin: 0;
+.p-multiselect-items-wrapper {
+    overflow: auto;
+}
+
+.p-multiselect-items {
     list-style-type: none;
 }
 
-.p-multiselect-panel .p-multiselect-item {
-    border: 0 none;
+.p-multiselect-item {
     cursor: pointer;
-    font-weight: normal;
-    margin: 1px 0;
-    padding: .125em .25em;
-    text-align: left;
-    white-space: nowrap;
-    display: block;
-    position: relative;
-}
-
-.p-multiselect-panel .p-multiselect-item .p-checkbox {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.p-multiselect-panel .p-multiselect-item > span {
-    display: inline-block;
-    vertical-align: middle;
+    display: flex;
+    align-items: center;
 }
 
 .p-multiselect-header {
-    margin-bottom: 0.3em;
-    padding: .25em;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.p-multiselect-filter-container {
     position: relative;
-    text-align: left;
+    flex: 1 1 auto;
 }
 
-.p-multiselect-header .p-checkbox {
-    display: inline-block;
-    vertical-align: middle;
-    cursor:pointer;
-}
-
-.p-multiselect-header .p-multiselect-filter-container {
-    position: relative;
-    display: inline-block;
-    vertical-align: middle;
-    width: 65%;
-}
-
-.p-multiselect-header .p-multiselect-filter-container .p-multiselect-filter-icon {
+.p-multiselect-filter-icon {
     position: absolute;
-    top: .25em;
-    left: .125em;
+    top: 50%;
+    margin-top: -.5em;
 }
 
-.p-multiselect-header .p-inputtext {
-    padding: .125em .125em .125em 1.25em;
+.p-multiselect-filter-container .p-inputtext {
     width: 100%;
 }
 
-.p-multiselect-header .p-multiselect-close {
-    position: absolute;
-    right: .375em;
-    top: .375em;
-    display: block;
-    border: 0 none;
-}
-
-.p-multiselect-header a.p-multiselect-all,
-.p-multiselect-header a.p-multiselect-none {
-    float:left;
-    margin-right: 10px;
-    display: block;
-}
-
-.p-multiselect-header .p-multiselect-close.p-state-hover {
-    padding:0px;
-}
-
 .p-fluid .p-multiselect {
-    width: 100%;
-    box-sizing: border-box;
+    display: flex;
 }
-
 </style>
\ No newline at end of file
diff --git a/src/components/password/Password.css b/src/components/password/Password.css
index 84ca6ce44..92673d68d 100644
--- a/src/components/password/Password.css
+++ b/src/components/password/Password.css
@@ -1,19 +1,7 @@
-.p-password-panel {
-    padding: .25em .5em;
-    margin-top: 2px;
-}
- 
-.p-password-panel .p-password-meter {
-    height: 10px;
+.p-password-meter {
     background:transparent url("./images/password-meter.png") no-repeat left top;
-    padding: 0;
-    margin: 0;
 }
- 
-.p-password-info {
-    margin-top: .25em;
-}
- 
+
 .p-password-panel-overlay {
     position: absolute;
 } 
\ No newline at end of file
diff --git a/src/components/radiobutton/RadioButton.css b/src/components/radiobutton/RadioButton.css
index 4f71c4fae..a758eb180 100644
--- a/src/components/radiobutton/RadioButton.css
+++ b/src/components/radiobutton/RadioButton.css
@@ -1,35 +1,11 @@
 .p-radiobutton {
-    display:inline-block;
+    display: inline-flex;
     cursor: pointer;
-    vertical-align: middle;
-    margin-right: .25em;
     user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
 }
 
-.p-radiobutton .p-radiobutton-box {
-    width: 1.125em;
-    height: 1.125em;
-    line-height: 1.125em;
-    -moz-border-radius: 100%;
-    -webkit-border-radius: 100%;
-    border-radius: 100%;
-    text-align: center;
-    position: relative;
-}
-
-.p-radiobutton .p-radiobutton-icon {
-    display: block;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    width: 1em;
-    height: 1em;
-    margin-top: -.5em;
-    margin-left: -.5em;
-}
- 
-.p-radiobutton + label {
-    vertical-align: middle;
+.p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
\ No newline at end of file
diff --git a/src/components/radiobutton/RadioButton.vue b/src/components/radiobutton/RadioButton.vue
index bc5781975..ea5e6a1f3 100644
--- a/src/components/radiobutton/RadioButton.vue
+++ b/src/components/radiobutton/RadioButton.vue
@@ -3,7 +3,7 @@
        <div class="p-hidden-accessible">
            <input ref="input" type="radio" :checked="checked" :value="value" v-bind="$attrs" @focus="onFocus($event)" @blur="onBlur($event)" :aria-labelledby="ariaLabelledBy">
         </div>
-        <div ref="box" :class="['p-radiobutton-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="radio" :aria-checked="checked">
+        <div ref="box" :class="['p-radiobutton-box', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="radio" :aria-checked="checked">
             <span :class="['p-radiobutton-icon p-c', {'pi pi-circle-on': checked}]"></span>
         </div>
     </div>
diff --git a/src/components/rating/Rating.vue b/src/components/rating/Rating.vue
index 2382d64bd..9e197e811 100644
--- a/src/components/rating/Rating.vue
+++ b/src/components/rating/Rating.vue
@@ -67,14 +67,10 @@ export default {
 </script>
 
 <style>
-.p-rating .p-rating-icon {
+.p-rating-icon {
     cursor: pointer;
 }
 
-.p-rating {
-    font-size: 1.25em;
-}
-
 .p-rating.p-disabled .p-rating-icon,
 .p-rating.p-rating-readonly .p-rating-icon {
     cursor: default;
diff --git a/src/components/slider/Slider.vue b/src/components/slider/Slider.vue
index 36655754d..a592cc611 100644
--- a/src/components/slider/Slider.vue
+++ b/src/components/slider/Slider.vue
@@ -339,47 +339,40 @@ export default {
 <style>
 .p-slider {
 	position: relative;
-	text-align: left;
-}
-.p-slider .p-slider-handle {
-	position: absolute;
-	width: 1.2em;
-	height: 1.2em;
-	cursor: default;
-	-ms-touch-action: none;
-	touch-action: none;
-}
-.p-slider .p-slider-range {
-	position: absolute;
-	font-size: .7em;
-	display: block;
-	border: 0;
-	background-position: 0 0;
 }
 
-.p-slider-horizontal {
-	height: .8em;
+.p-slider .p-slider-handle {
+	position: absolute;
+	cursor: default;
+	touch-action: none;
 }
-.p-slider-horizontal .p-slider-handle {
-	top: -.3em;
-	margin-left: -.6em;
+
+.p-slider-range {
+	position: absolute;
+	display: block;
 }
+
 .p-slider-horizontal .p-slider-range {
-	top: 0;
+    top: 0;
+    left: 0;
 	height: 100%;
 }
+
+.p-slider-horizontal .p-slider-handle {
+    margin-top: -.5em;
+}
+
 .p-slider-vertical {
-	width: .8em;
 	height: 100px;
 }
-.p-slider-vertical .p-slider-handle {
-	left: -.3em;
-	margin-left: 0;
-	margin-bottom: -.6em;
-}
+
 .p-slider-vertical .p-slider-range {
-	left: 0;
-    width: 100%;
+    left: 50%;
     bottom: 0;
+    width: 100%;
+}
+
+.p-slider-vertical .p-slider-handle {
+    margin-left: -.5em;
 }
 </style>
diff --git a/src/components/splitbutton/SplitButton.vue b/src/components/splitbutton/SplitButton.vue
index 9e0d1ee1a..ca6275cbe 100644
--- a/src/components/splitbutton/SplitButton.vue
+++ b/src/components/splitbutton/SplitButton.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="p-splitbutton p-buttonset p-component">
-        <PVSButton type="button" :icon="icon" :label="label" @click="onClick" :disabled="disabled" :tabindex="tabindex" />
+        <PVSButton type="button" class="p-splitbutton-defaultbutton" :icon="icon" :label="label" @click="onClick" :disabled="disabled" :tabindex="tabindex" />
         <PVSButton type="button" class="p-splitbutton-menubutton" icon="pi pi-caret-down" @click="onDropdownButtonClick" :disabled="disabled"
             aria-haspopup="true" :aria-controls="ariaId + '_overlay'"/>
         <PVSMenu :id="ariaId + '_overlay'" ref="menu" :model="model" :popup="true" :autoZIndex="autoZIndex"
@@ -70,44 +70,23 @@ export default {
 
 <style scoped>
 .p-splitbutton {
+    display: inline-flex;
     position: relative;
-    display: inline-block;
-    zoom: 1;
 }
 
-.p-splitbutton .p-button.p-splitbutton-menubutton {
-    width: 2em;
-    vertical-align: top;
+.p-splitbutton-defaultbutton {
+    flex: 1 1 auto;
 }
 
-.p-splitbutton .p-menu {
-    left: auto;
-    top: auto;
+.p-splitbutton-menubutton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
 }
 
-.p-splitbutton.p-disabled button {
-    cursor: default;
-}
-
-.p-fluid .p-splitbutton {
-    width: 100%;
-    box-sizing: border-box;
-    -webkit-box-sizing:border-box;
-    -moz-box-sizing: border-box;
-}
-
-.p-fluid .p-splitbutton .p-button:first-child {
-    width: calc(100% - 2em);
-}
-
-.p-fluid .p-splitbutton .p-button.p-splitbutton-menubutton {
-    width: 2em;
-    box-sizing: border-box;
-    -webkit-box-sizing:border-box;
-    -moz-box-sizing: border-box;
-}
-
-.p-splitbutton.p-button-secondary .p-button:first-child {
-    border-right: 0 none;
+.p-fluid .p-splitbutton  {
+    display: flex;
 }
 </style>
diff --git a/src/components/tristatecheckbox/TriStateCheckbox.vue b/src/components/tristatecheckbox/TriStateCheckbox.vue
index 04cc87f3c..cacb148a2 100644
--- a/src/components/tristatecheckbox/TriStateCheckbox.vue
+++ b/src/components/tristatecheckbox/TriStateCheckbox.vue
@@ -3,7 +3,7 @@
        <div class="p-hidden-accessible">
            <input ref="input" type="checkbox" :checked="value === true" v-bind="$attrs" @focus="onFocus()" @blur="onBlur()" :aria-labelledby="ariaLabelledBy">
         </div>
-        <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': (value != null), 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="checkbox" :aria-checked="value === true">
+        <div ref="box" :class="['p-checkbox-box', {'p-highlight': (value != null), 'p-disabled': $attrs.disabled, 'p-focus': focused}]" role="checkbox" :aria-checked="value === true">
             <span :class="['p-checkbox-icon p-c', icon]"></span>
         </div>
     </div>
diff --git a/src/views/checkbox/CheckboxDemo.vue b/src/views/checkbox/CheckboxDemo.vue
index 2b3bc5e47..a7b13df28 100644
--- a/src/views/checkbox/CheckboxDemo.vue
+++ b/src/views/checkbox/CheckboxDemo.vue
@@ -10,25 +10,25 @@
         <div class="content-section implementation">
             <h3 class="first">Basic</h3>
             <Checkbox id="binary" v-model="checked" :binary="true" />
-            <label for="binary" class="p-checkbox-label" style="font-weight: bold">{{checked}}</label>
+            <label for="binary" style="font-weight: bold">{{checked}}</label>
 
             <h3>Multiple</h3>
             <div class="p-grid">
                 <div class="p-col-12">
                     <Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
-                    <label for="city1" class="p-checkbox-label">Chicago</label>
+                    <label for="city1">Chicago</label>
                 </div>
                 <div class="p-col-12">
                     <Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
-                    <label for="city2" class="p-checkbox-label">Los Angeles</label>
+                    <label for="city2">Los Angeles</label>
                 </div>
                 <div class="p-col-12">
                     <Checkbox id="city3" name="city" value="New York" v-model="cities" />
-                    <label for="city3" class="p-checkbox-label">New York</label>
+                    <label for="city3">New York</label>
                 </div>
                 <div class="p-col-12">
                     <Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
-                    <label for="city4" class="p-checkbox-label">San Francisco</label>
+                    <label for="city4">San Francisco</label>
                 </div>
             </div>
             <p>Selected Cities : <span style="font-weight: bold">{{cities}}</span></p>
@@ -37,7 +37,7 @@
             <div class="p-grid">
                 <div v-for="theme of themes" :key="theme.key" class="p-col-12">
                     <Checkbox :id="theme.key" name="theme" :value="theme" v-model="selectedThemes" :disabled="theme.key === 'U'"/>
-                    <label :for="theme.key" class="p-checkbox-label">{{theme.name}}</label>
+                    <label :for="theme.key">{{theme.name}}</label>
                 </div>
             </div>
             <p>Selected Themes: <span style="font-weight: bold">{{this.selectedThemes}}</span></p>
@@ -66,4 +66,11 @@ export default {
         'CheckboxDoc': CheckboxDoc
     }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+label {
+    vertical-align: middle;
+    margin-left: .5em;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/inputnumber/InputNumberDoc.vue b/src/views/inputnumber/InputNumberDoc.vue
index cd235fab4..e9aa17002 100644
--- a/src/views/inputnumber/InputNumberDoc.vue
+++ b/src/views/inputnumber/InputNumberDoc.vue
@@ -156,13 +156,13 @@ Vertical
                             <tr>
                                 <td>incrementButtonIcon</td>
                                 <td>string</td>
-                                <td>pi pi-caret-up</td>
+                                <td>pi pi-chevron-up</td>
                                 <td>Style class of the increment button.</td>
                             </tr>
                             <tr>
                                 <td>decrementButtonIcon</td>
                                 <td>string</td>
-                                <td>pi pi-caret-down</td>
+                                <td>pi pi-chevron-down</td>
                                 <td>Style class of the decrement button.</td>
                             </tr>
                             <tr>
diff --git a/src/views/listbox/ListboxDemo.vue b/src/views/listbox/ListboxDemo.vue
index f0abdf19d..bdc077fb3 100644
--- a/src/views/listbox/ListboxDemo.vue
+++ b/src/views/listbox/ListboxDemo.vue
@@ -9,7 +9,7 @@
 
         <div class="content-section implementation">
             <h3 class="first">Single</h3>
-            <Listbox v-model="selectedCity" :options="cities" optionLabel="name" />
+            <Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15em" />
 
             <h3>Advanced with Templating, Filtering and Multiple Selection</h3>
             <Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
diff --git a/src/views/listbox/ListboxDoc.vue b/src/views/listbox/ListboxDoc.vue
index 54c5d8d0a..f798602dd 100644
--- a/src/views/listbox/ListboxDoc.vue
+++ b/src/views/listbox/ListboxDoc.vue
@@ -225,7 +225,7 @@ data() {
 <CodeHighlight>
 <template v-pre>
 &lt;h3&gt;Single&lt;/h3&gt;
-&lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" /&gt;
+&lt;Listbox v-model="selectedCity" :options="cities" optionLabel="name" style="width:15em" /&gt;
 
 &lt;h3&gt;Advanced with Templating, Filtering and Multiple Selection&lt;/h3&gt;
 &lt;Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em"&gt;
diff --git a/src/views/radiobutton/RadioButtonDemo.vue b/src/views/radiobutton/RadioButtonDemo.vue
index 510b8e7da..47d4201cb 100644
--- a/src/views/radiobutton/RadioButtonDemo.vue
+++ b/src/views/radiobutton/RadioButtonDemo.vue
@@ -12,19 +12,19 @@
             <div class="p-grid">
                 <div class="p-col-12">
                     <RadioButton id="city1" name="city" value="Chicago" v-model="city" />
-                    <label for="city1" class="p-radiobutton-label">Chicago</label>
+                    <label for="city1">Chicago</label>
                 </div>
                 <div class="p-col-12">
                     <RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
-                    <label for="city2" class="p-radiobutton-label">Los Angeles</label>
+                    <label for="city2">Los Angeles</label>
                 </div>
                 <div class="p-col-12">
                     <RadioButton id="city3" name="city" value="New York" v-model="city" />
-                    <label for="city3" class="p-radiobutton-label">New York</label>
+                    <label for="city3">New York</label>
                 </div>
                 <div class="p-col-12">
                     <RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
-                    <label for="city4" class="p-radiobutton-label">San Francisco</label>
+                    <label for="city4">San Francisco</label>
                 </div>
             </div>
             <p>Selected City: <span style="font-weight: bold">{{this.city}}</span></p>
@@ -33,7 +33,7 @@
             <div class="p-grid">
                 <div v-for="theme of themes" :key="theme.key" class="p-col-12">
                     <RadioButton :id="theme.key" name="theme" :value="theme" v-model="selectedTheme" :disabled="theme.key === 'U'" />
-                    <label :for="theme.key" class="p-radiobutton-label">{{theme.name}}</label>
+                    <label :for="theme.key">{{theme.name}}</label>
                 </div>
             </div>
            <p>Selected Theme: <span style="font-weight: bold">{{this.selectedTheme}}</span></p>
@@ -61,4 +61,11 @@ export default {
         'RadioButtonDoc': RadioButtonDoc
     }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+label {
+    vertical-align: middle;
+    margin-left: .5em;
+}
+</style>
\ No newline at end of file