encore_entry_link_tags allows to use <style scoped> in vue files

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue

@@ -12,7 +12,6 @@
 
 <script>
 import { mapState } from 'vuex'
-
 import AccompanyingCourse from './components/AccompanyingCourse.vue';
 import PersonsAssociated from './components/PersonsAssociated.vue';
 import Requestor from './components/Requestor.vue';
@@ -41,3 +40,24 @@ export default {
    ])
 };
 </script>
+
+<style lang="scss" scoped>
+   div.vue-component {
+      padding: 1.5em;
+      margin: 2em 0;
+      border: 2px dashed grey;
+      position: relative;
+      &:before { 
+         content: "vuejs component";
+         position: absolute;
+         left: 1.5em;
+         top: -0.9em;
+         background-color: white;
+         color: grey;
+         padding: 0 0.3em;
+      }
+      dd { 
+         margin-left: 1em; 
+      }
+   }
+</style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue

@@ -66,3 +66,17 @@ export default {
    }
 }
 </script>
+
+<style lang="scss" scoped>
+   a.flag-toggle {
+      color: white;
+      padding: 0 10px;
+      cursor: pointer;
+      &:hover {
+         color: white;
+         //border: 1px solid rgba(255,255,255,0.2);
+         text-decoration: underline;
+         border-radius: 20px;
+      }
+   }
+</style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue

@@ -207,3 +207,44 @@ export default {
    },
 }
 </script>
+
+<style lang="scss">
+   div.body-head {
+      overflow-y: unset;
+      div.modal-body:first-child {
+         margin: auto 4em;
+         div.search {
+            position: relative;
+            input { 
+               padding: 1.2em 1.5em 1.2em 2.5em;
+               margin: 1em 0;
+            }
+            i {
+               position: absolute;
+               opacity: 0.5;
+               padding: 0.65em 0;
+               top: 50%; 
+            }
+            i.fa-search {
+               left: 0.5em;
+            }
+            i.fa-times {
+               right: 1em;
+               padding: 0.75em 0;
+               cursor: pointer;
+            }
+         }
+      }
+      div.modal-body:last-child {
+         padding-bottom: 0;
+      }
+      div.count {
+         margin: -0.5em 0 0.7em;
+         display: flex;
+         justify-content: space-between;
+         a {
+            cursor: pointer;
+         }
+      }
+   }
+</style>

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons/PersonSuggestion.vue

@@ -7,7 +7,7 @@
                v-model="selected"
                name="item"
                v-bind:id="item"
-               v-bind:value="setValueIfType(item, type)" />
+               v-bind:value="setValueByType(item, type)" />
          </div>
             
          <suggestion-person 
@@ -54,9 +54,48 @@ export default {
       },
    },
    methods: {
-      setValueIfType(value, type) {
+      setValueByType(value, type) {
          return (type === 'radio')? [value] : value;
       }
    }
 };
 </script>
+
+<style lang="scss">
+   div.results {   
+      div.list-item {
+         padding: 0.4em 0.8em;
+         display: flex;
+         flex-direction: row;
+         &.checked {
+            background-color: #ececec;
+            border-bottom: 1px dotted #8b8b8b;
+         }
+         div.container {
+            & > input {
+               margin-right: 0.8em;
+            }
+            span:not(.name) {
+               margin-left: 0.5em;
+               opacity: 0.5;
+               font-size: 90%;
+               font-style: italic;
+            }
+         }
+         div.right_actions {
+            margin: 0 0 0 auto;
+            display: flex;
+            align-items: flex-end;
+            & > * {
+               margin-left: 0.5em;
+               align-self: baseline;
+            }
+            a.sc-button {
+               border: 1px solid lightgrey;
+               font-size: 70%;
+               padding: 4px;
+            } 
+         }
+      }
+   }
+</style>