Refactoring sass chill colors variables and badge mixins

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;
+                    }
+                }
+            }
+        }
+    }