Move css to vue file

src/components/accordion/Accordion.css

@@ -1,56 +0,0 @@
-.p-accordion { 
-    width: 100%; 
-}
-
-.p-accordion .p-accordion-header { 
-    cursor: pointer; 
-    position: relative; 
-    margin-top: 1px; 
-    zoom: 1; 
-}
-
-.p-accordion .p-accordion-header a { 
-    display: block; 
-    padding: .5em;
-}
-
-.p-accordion .p-accordion-toggle-icon,
-.p-accordion .p-accordion-header-text {
-    vertical-align: middle;   
-}
-
-.p-accordion .p-accordion-header a > span { 
-    display: inline-block; 
-    vertical-align: middle;
-}
-
-.p-accordion .p-accordion-content { 
-    padding: 1em;
-    border-top: 0;
-    zoom: 1;
-}
-
-.p-accordion .p-accordion-header.p-disabled, 
-.p-accordion .p-accordion-header.p-disabled a { 
-    cursor: default; 
-}
-
-.p-accordion-content-wrapper-enter,
-.p-accordion-content-wrapper-leave-to {
-    max-height: 0;
-}
-
-.p-accordion-content-wrapper-enter-to,
-.p-accordion-content-wrapper-leave {
-    max-height: 1000px;
-}
-
-.p-accordion-content-wrapper-leave-active {
-    overflow: hidden;
-    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
-}
-
-.p-accordion-content-wrapper-enter-active {
-    overflow: hidden;
-    transition: max-height 1s ease-in-out;
-}

src/components/accordion/Accordion.vue

@@ -70,3 +70,62 @@ export default {
     }
 }
 </script>
+
+<style>
+.p-accordion { 
+    width: 100%; 
+}
+
+.p-accordion .p-accordion-header { 
+    cursor: pointer; 
+    position: relative; 
+    margin-top: 1px; 
+    zoom: 1; 
+}
+
+.p-accordion .p-accordion-header a { 
+    display: block; 
+    padding: .5em;
+}
+
+.p-accordion .p-accordion-toggle-icon,
+.p-accordion .p-accordion-header-text {
+    vertical-align: middle;   
+}
+
+.p-accordion .p-accordion-header a > span { 
+    display: inline-block; 
+    vertical-align: middle;
+}
+
+.p-accordion .p-accordion-content { 
+    padding: 1em;
+    border-top: 0;
+    zoom: 1;
+}
+
+.p-accordion .p-accordion-header.p-disabled, 
+.p-accordion .p-accordion-header.p-disabled a { 
+    cursor: default; 
+}
+
+.p-accordion-content-wrapper-enter,
+.p-accordion-content-wrapper-leave-to {
+    max-height: 0;
+}
+
+.p-accordion-content-wrapper-enter-to,
+.p-accordion-content-wrapper-leave {
+    max-height: 1000px;
+}
+
+.p-accordion-content-wrapper-leave-active {
+    overflow: hidden;
+    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
+}
+
+.p-accordion-content-wrapper-enter-active {
+    overflow: hidden;
+    transition: max-height 1s ease-in-out;
+}
+</style>

src/components/autocomplete/AutoComplete.css

@@ -1,163 +0,0 @@
-.p-autocomplete {
-    width: auto;
-    zoom: 1;
-    cursor: pointer;
-    -moz-box-shadow: none;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-    position: relative;
-    display: inline-block;
-}
-
-.p-autocomplete .p-autocomplete-dropdown {
-    height: 100%;
-    width: 2em;
-    margin-right: 0;
-    vertical-align: top;
-}
-
-.p-autocomplete .p-autocomplete-input {
-    padding-right: 1.5em;
-}
-
-.p-autocomplete-loader {
-    position: absolute;
-    right: .25em;
-    top: 50%;
-    margin-top: -.5em;
-}
-
-.p-autocomplete-query {
-    font-weight: bold;
-}
-
-.p-autocomplete .p-autocomplete-panel {
-    min-width: 100%;
-}
-
-.p-autocomplete-panel {
-    position: absolute;
-    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;
-    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;
-}
-
-.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;
-}
-
-.p-autocomplete-input-token {
-    display: inline-block;
-    vertical-align: middle;
-    list-style-type: none;
-    margin: 0 0 0 .125em;
-    padding: .25em .25em .25em 0;
-}
-
-.p-autocomplete-input-token input {
-    border: 0 none;
-    width: 10em;
-    outline: medium 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-dd .p-autocomplete-input,
-.p-fluid .p-autocomplete.p-autocomplete-dd .p-autocomplete-multiple-container {
-    width: calc(100% - 2em);
-}
-
-.p-fluid .p-autocomplete .p-autocomplete-dropdown.p-button {
-    width: 2em;
-}

src/components/autocomplete/AutoComplete.vue

@@ -392,3 +392,169 @@ export default {
     }
 }
 </script>
+
+<style>
+.p-autocomplete {
+    width: auto;
+    zoom: 1;
+    cursor: pointer;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    position: relative;
+    display: inline-block;
+}
+
+.p-autocomplete .p-autocomplete-dropdown {
+    height: 100%;
+    width: 2em;
+    margin-right: 0;
+    vertical-align: top;
+}
+
+.p-autocomplete .p-autocomplete-input {
+    padding-right: 1.5em;
+}
+
+.p-autocomplete-loader {
+    position: absolute;
+    right: .25em;
+    top: 50%;
+    margin-top: -.5em;
+}
+
+.p-autocomplete-query {
+    font-weight: bold;
+}
+
+.p-autocomplete .p-autocomplete-panel {
+    min-width: 100%;
+}
+
+.p-autocomplete-panel {
+    position: absolute;
+    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;
+    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;
+}
+
+.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;
+}
+
+.p-autocomplete-input-token {
+    display: inline-block;
+    vertical-align: middle;
+    list-style-type: none;
+    margin: 0 0 0 .125em;
+    padding: .25em .25em .25em 0;
+}
+
+.p-autocomplete-input-token input {
+    border: 0 none;
+    width: 10em;
+    outline: medium 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-dd .p-autocomplete-input,
+.p-fluid .p-autocomplete.p-autocomplete-dd .p-autocomplete-multiple-container {
+    width: calc(100% - 2em);
+}
+
+.p-fluid .p-autocomplete .p-autocomplete-dropdown.p-button {
+    width: 2em;
+}
+</style>