Refactoring sass chill colors variables and badge mixins

src/Bundle/ChillActivityBundle/Resources/public/chill/chillactivity.scss

@@ -102,32 +102,6 @@ div.activity-list {
          margin-top: 1em;
       }
    }
-
-   /// Activities on resume page
-    h2.badge-title {
-        span.title_label {
-            background-color: #668821;
-            div.duration {
-                font-size: 70%;
-                font-weight: 500;
-                p {
-                    margin-bottom: 0;
-                    text-align: right;
-                }
-            }
-        }
-        span.title_action {
-            //text-transform: capitalize !important;
-            font-weight: 500 !important;
-            border-left: 20px groove yellowgreen;
-            &:before {
-                content: '\f04b';
-                font-family: ForkAwesome;
-                color: yellowgreen;
-                margin: 0 0 0 -1.05em;
-            }
-        }
-    }
 }
 
 // exceptions for flex-bloc in concerned-groups

src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss

@@ -1,6 +1,9 @@
 // Access to Bootstrap variables and mixins
 @import '~ChillMainAssets/module/bootstrap/shared';
 
+// Chill variables
+@import './scss/chill_variables';
+
 // Chill mixins
 @import './scss/mixins';
 

src/Bundle/ChillMainBundle/Resources/public/chill/scss/chill_variables.scss

@@ -0,0 +1,13 @@
+/*
+*   ADDITIONNAL COLORS VARIABLES
+*/
+
+// Contexts banners
+$chill-person-context: $chill-green;
+$chill-accourse-context: #718596;
+$chill-household-context: #929d69;
+
+// Badges colors
+$social-issue-color: #4bafe8;
+$social-action-color: $orange;
+$activity-color: yellowgreen;

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

@@ -1,4 +1,3 @@
-
 //
 // Titles in forms
 //
@@ -12,7 +11,6 @@
     display: block;
 }
 
-
 // We use box-shadow instead of border
 // to avoid to manage border double-width
 // Then we can simulate border-collapse: collapse (table)

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

@@ -1,10 +1,13 @@
 // Access to Bootstrap variables and mixins
 @import '~ChillMainAssets/module/bootstrap/shared';
 
+@import 'ChillMainAssets/chill/scss/chill_variables';
+
 // Complete/override Main generic assets
 @import './scss/mixins';
 @import './scss/render_box.scss';
 @import './scss/flex_table.scss';
+@import './scss/badge.scss';
 
 // Specific templates styles
 @import './scss/accompanying_period_work.scss';
@@ -19,13 +22,13 @@
 
 div.banner {
     div#header-person-name {
-        background: none repeat scroll 0 0 $chill-green-dark;
+        background: none repeat scroll 0 0 shade-color($chill-person-context, 20%);
         color: $white;
         padding-top: 1em;
         padding-bottom: 1em;
     }
     div#header-person-details {
-        background: none repeat scroll 0 0 $chill-green;
+        background: none repeat scroll 0 0 $chill-person-context;
         color: $white;
         padding-top: 1em;
         padding-bottom: 1em;
@@ -92,7 +95,6 @@ div.person-view {
  *  Header custom for Accompanying Course
  */
 
-$chill-accourse-context: #718596;
 
 div.banner {
     div#header-accompanying_course-name {
@@ -104,9 +106,9 @@ div.banner {
         span {
             a {
                 color: $white;
-            }
+                &:hover {
-            a:hover {
+                    text-decoration: underline;
-                text-decoration: underline;
+                }
             }
         }
     }
@@ -118,7 +120,7 @@ div.banner {
     }
 }
 
-abbr.referrer {
+abbr.referrer {   // still used ?
     font-size: 70%;
     padding-right: 0.4em;
     align-self: center; // in flex context
@@ -129,8 +131,6 @@ abbr.referrer {
  *  Header custom for Household
  */
 
-$chill-household-context: #929d69;
-
 div.banner {
     div#header-household-name {
         background: none repeat scroll 0 0 $chill-household-context;
@@ -142,9 +142,9 @@ div.banner {
         span {
             a {
                 color: $white;
-            }
+                &:hover {
-            a:hover {
+                    text-decoration: underline;
-                text-decoration: underline;
+                }
             }
         }
         div.household-members {
@@ -208,47 +208,7 @@ div.household-resume {
     }
 }
 
-/*
+/// Horizontal list of persons (Accourse resume page)
-*  BADGES, MARKS, PINS
-*  for chill person theme
-*/
-
-// chill person badges
-span.badge-person,
-span.badge-thirdparty {
-    display: inline-block;
-    padding: 0 0.5em !important;
-    background-color: $white;
-    color: $dark;
-    border: 1px solid $chill-ll-gray;
-    border-bottom-width: 2px;
-    border-bottom-style: solid;
-    border-radius: 6px;
-    a {
-        text-decoration: none;
-    }
-}
-span.badge-person {
-    border-bottom-color: $chill-green;
-}
-// todo: move in thirdparty
-span.badge-thirdparty {
-    border-bottom-color: shade-color($chill-pink, 10%);
-}
-
-// household holder mark
-span.fa-holder {
-    width: 1em;
-    margin: -10px 0.3em -8px 0;
-    i:last-child {
-        font-weight: 900;
-        color: white;
-        font-size: 70%;
-        font-family: "Open Sans Extrabold";
-    }
-}
-
-///
 div.accompanyingcourse-resume {
     div.associated-persons {
         font-size: 110%;

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

@@ -1,52 +1,6 @@
-/// Display Title like a badge (with background-colored label)
-h2.badge-title {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    color: $dark;
-
-    a & {
-        text-decoration: none;
-    }
-
-    span.title_label {
-        border-radius: 0.35rem 0 0 0.35rem;
-        color: $white;
-        font-size: 80%;
-        padding: 0.5em;
-        padding-right: 0;
-    }
-    span.title_action {
-        flex-grow: 1;
-        margin: 0 0 0 auto;
-        border-radius: 0 0.35rem 0.35rem 0;
-        background-color: $light;
-        padding: 0.2em 1em;
-
-        ul.small_in_title {
-            margin-top: 0.5em;
-            font-size: 70%;
-            padding-left: 1rem;
-        }
-    }
-}
-
-
 /// AccompanyingCourse Work list Page
 div.accompanying_course_work-list {
 
-    h2.badge-title {
-        span.title_label {
-            background-color: $social-action-label-color;
-        }
-        span.title_action {
-            @include badge_social_action;
-            &:before {
-                margin: 0 0.3em 0 -1.05em !important;
-            }
-        }
-    }
-
     div.timeline {
         width: 100%;
         ul {
@@ -146,7 +100,7 @@ div.accompanying_course_work-list {
                 }
             }
             &.goal_title li::marker {
-                color: $sky-blue;
+                color: $social-issue-color;
             }
             &.result_list li::marker {
                 color: $pink;

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

@@ -0,0 +1,115 @@
+/*
+*  BADGES, MARKS, PINS
+*  for chill person theme
+*/
+
+// chill person badges
+span.badge-person,
+span.badge-thirdparty {
+    display: inline-block;
+    padding: 0 0.5em !important;
+    background-color: $white;
+    color: $dark;
+    border: 1px solid $chill-ll-gray;
+    border-bottom-width: 2px;
+    border-bottom-style: solid;
+    border-radius: 6px;
+    a {
+        text-decoration: none;
+    }
+}
+
+    span.badge-person {
+        border-bottom-color: $chill-green;
+    }
+
+    // todo: move in thirdparty
+    span.badge-thirdparty {
+        border-bottom-color: shade-color($chill-pink, 10%);
+    }
+
+/*
+*   HOUSEHOLD HOLDER MARK
+*/
+
+span.fa-holder {
+    width: 1em;
+    margin: -10px 0.3em -8px 0;
+    i:last-child {
+        font-family: "Open Sans Extrabold";
+        font-weight: 900;
+        font-size: 70%;
+        color: $white;
+    }
+}
+
+/*
+*   BADGE_TITLE
+*   Display Title like a badge (with background-colored label)
+*/
+
+h2.badge-title {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    color: $dark;
+
+    a & { text-decoration: none; }  // ?!? keep it ?
+
+    span.title_label {
+        border-radius: 0.35rem 0 0 0.35rem;
+        color: $white;
+        font-size: 80%;
+        padding: 0.5em;
+        padding-right: 0;
+    }
+    span.title_action {
+        flex-grow: 1;
+        margin: 0 0 0 auto;
+        border-radius: 0 0.35rem 0.35rem 0;
+        background-color: $light;
+        padding: 0.2em 1em;
+
+        ul.small_in_title {
+            margin-top: 0.5em;
+            font-size: 70%;
+            padding-left: 1rem;
+        }
+    }
+}
+
+    /// AccompanyingCourse Work list Page
+    div.accompanying_course_work-list {
+        h2.badge-title {
+            span.title_label {
+                // Calculate same color then border:groove
+                background-color: shade-color($social-action-color, 34%);
+            }
+            span.title_action {
+                @include badge_title($social-action-color);
+            }
+        }
+    }
+
+    /// Activities on resume page
+    div.activity-list {
+        h2.badge-title {
+            span.title_label {
+                // Calculate same color then border:groove
+                background-color: shade-color($activity-color, 34%);
+            }
+            span.title_action {
+                @include badge_title($activity-color);
+            }
+            span.title_label {
+                div.duration {
+                    font-size: 70%;
+                    font-weight: 500;
+                    p {
+                        margin-bottom: 0;
+                        text-align: right;
+                    }
+                }
+            }
+        }
+    }

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

@@ -1,44 +1,39 @@
-// Additionnal colors
-$sky-blue: #4bafe8;
-
-// mixins variables
-$social-issue-color: $sky-blue;
-$social-action-color: $orange;
-
-// Calculate same color then border:groove
-// origin: $orange, computed: #965028
-$social-action-label-color: shade-color($orange, 34%);
-
 ///
-///  Social Issue mixin
+///  Chill badge mixin
-//   define visual badge for all social issues
+//   define chill visual badge
 ///
 
-@mixin badge_social_issue {
+@mixin chill_badge($color) {
     //text-transform: capitalize !important;
     font-weight: 500 !important;
-    border-left: 20px groove $social-issue-color;
+    border-left: 20px groove $color;
     &:before {
-        content: '\f04b';
         font-family: ForkAwesome;
-        color: $social-issue-color;
+        content: '\f04b';
+        color: $color;
+    }
+}
+
+///
+///  Social badge mixin
+//   define visual badge for social issues or social action
+///
+
+@mixin badge_social($color) {
+    @include chill_badge($color);
+    &:before {
         margin: 0 0.3em 0 -0.75em;
     }
 }
 
 ///
-///  Social Action mixin
+/// Generic mixin for titles like badge
-//   define visual badge for all social actions
+//  define visual badge used in title area
 ///
 
-@mixin badge_social_action {
+@mixin badge_title($color) {
-    //text-transform: capitalize !important;
+    @include chill_badge($color);
-    font-weight: 500 !important;
-    border-left: 20px groove $social-action-color;
     &:before {
-        content: '\f04b';
+        margin: 0 0.3em 0 -1.05em;
-        font-family: ForkAwesome;
-        color: $social-action-color;
-        margin: 0 0.3em 0 -0.75em;
     }
 }

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

@@ -13,7 +13,7 @@
         margin-right: 0.3em;
         font-size: 120%;
         span.badge {
-            @include badge_social_issue;
+            @include badge_social($social-issue-color);
         }
     }
 
@@ -22,7 +22,7 @@
         margin-right: 0.3em;
         font-size: 120%;
         span.badge {
-            @include badge_social_action;
+            @include badge_social($social-action-color);
         }
     }
 }

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

@@ -12,9 +12,9 @@ export default {
 <style lang="scss" scoped>
 @import 'ChillMainAssets/module/bootstrap/shared';
 @import 'ChillPersonAssets/chill/scss/mixins';
-
+@import 'ChillMainAssets/chill/scss/chill_variables';
 span.badge {
-   @include badge_social_issue;
+   @include badge_social($social-issue-color);
    font-size: 95%;
    margin-bottom: 5px;
    margin-right: 1em;

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

@@ -84,10 +84,10 @@ export default {
 <style lang="scss">
 @import 'ChillMainAssets/module/bootstrap/shared';
 @import 'ChillPersonAssets/chill/scss/mixins';
-
+@import 'ChillMainAssets/chill/scss/chill_variables';
 div#accompanying-course {
    span.multiselect__tag {
-      @include badge_social_issue;
+      @include badge_social($social-issue-color);
       background: $chill-l-gray;
       color: $dark;
    }