[design proposal] adding a mixin to style social issue badge

src/Bundle/ChillPersonBundle/Resources/public/chill/chillperson.scss

@@ -1,7 +1,8 @@
 // Access to Bootstrap variables and mixins
 @import '~ChillMainAssets/module/bootstrap/shared';
 
-// Override Main generic assets
+// Complete/override Main generic assets
+@import './scss/mixins';
 @import './scss/render_box.scss';
 @import './scss/flex_table.scss';
 

src/Bundle/ChillPersonBundle/Resources/public/chill/scss/mixins.scss

@@ -0,0 +1,18 @@
+///
+///  Social Issue mixin
+//   define visual badge for all social issues
+///
+
+$social-issue-color: $chill-pink;
+
+@mixin badge_social_issue {
+    text-transform: capitalize !important;
+    font-weight: 500 !important;
+    border-left: 20px groove $social-issue-color;
+    &:before {
+        content: '\f04b';
+        font-family: ForkAwesome;
+        color: $social-issue-color;
+        margin: 0 0.3em 0 -0.7em;
+    }
+}

src/Bundle/ChillPersonBundle/Resources/public/chill/scss/render_box.scss

@@ -1,3 +1,5 @@
+/// variables
+
 /// CHILL ENTITY RENDER BOX
 .chill-entity {
 
@@ -11,6 +13,10 @@
     /// SOCIAL-ISSUE
     &.entity-social-issue {
         margin-right: 0.3em;
+        font-size: 120%;
+        span.badge {
+            @include badge_social_issue;
+        }
     }
 }
 

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="badge bg-chill-light-gray text-dark">{{ issue.text }}</span>
+  <span class="badge bg-chill-l-gray text-dark">{{ issue.text }}</span>
 </template>
 
 <script>
@@ -10,10 +10,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'ChillMainAssets/module/bootstrap/shared';
+@import 'ChillPersonAssets/chill/scss/mixins';
+
 span.badge {
+   @include badge_social_issue;
    font-size: 95%;
-   text-transform: capitalize !important;
-   font-weight: 500 !important;
    margin-bottom: 5px;
    margin-right: 1em;
 }