Accourse Work list: improve design

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

@@ -1,10 +1,6 @@
 /// AccompanyingCourse Work list Page
 div.accompanying_course_work-list {
 
-    // ?? howto calculate border:groove generated from $orange ??
-    // see mixin badge_social_action
-    $groove-border-color-connect: #965028;
-
     h2.title {
         display: flex;
         flex-direction: row;
@@ -14,13 +10,13 @@ div.accompanying_course_work-list {
 
         span.title_label {
             border-radius: 0.35rem 0 0 0.35rem;
-            background-color: $groove-border-color-connect;
+            background-color: $social-action-label-color;
             color: $white;
             font-size: 80%;
             padding: 0.5em;
             padding-right: 0;
         }
-        span.action_title {
+        span.title_action {
             flex-grow: 1;
             margin: 0 0 0 auto;
             border-radius: 0 0.35rem 0.35rem 0;
@@ -36,39 +32,36 @@ div.accompanying_course_work-list {
             display: flex;
             align-items: center;
             justify-content: center;
+
             padding: 0;
             list-style-type: none;
 
             > li {
                 flex-grow: 1; flex-shrink: 1; flex-basis: auto;
-                min-width: 210px;
 
-                div.date {
-                    margin-bottom: 20px;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                }
-                div.label {
+                div {
                     display: flex;
                     flex-direction: column;
                     align-items: center;
 
-                    padding: 0 40px;
-                    border-top: 3px solid var(--bs-chill-green);
+                    &.date {
+                        margin-bottom: 1em;
+                    }
+                    &.label {
+                        border-top: 3px solid $chill-green;
 
-                    &:before {
-                        content: '';
-                        display: inline-block;
-                        position: relative;
-                        width: 12px;
-                        height: 12px;
+                        &:before {
+                            content: '';
+                            display: inline-block;
+                            position: relative;
+                            width: 15px;
+                            height: 15px;
+                            top: -9px;
 
-                        background-color: white;
-                        border-radius: 12px;
-                        border: 2px solid var(--bs-chill-green);
-
-                        top: -9px;
+                            background-color: $white;
+                            border-radius: 12px;
+                            border: 2px solid $chill-green;
+                        }
                     }
                 }
             }
@@ -76,41 +69,65 @@ div.accompanying_course_work-list {
     }
 
     div.objective_results {
-        display: grid;
         width: 100%;
-        grid-template-areas:
-        "obj res"
-        ;
+        display: grid;
+        grid-template-areas: "obj res";
         grid-template-columns: 50%;
-        column-gap: 1rem;
+        column-gap: 0.5rem;
         padding: 0.3rem;
-        .obj {
+
+        div.objective {
             grid-area: obj;
-        }
-        .res {
-            grid-area: res;
-            ul.result_list {
-                list-style-type: none;
-                padding: 0;
+            h4.title_label {
+                border-radius: 0.35rem 0 0 0.35rem;
             }
         }
-        &:nth-child(2n+2) {
-            background-color: var(--bs-chill-llight-gray);
+        div.results {
+            grid-area: res;
+            h4.title_label {
+                border-radius: 0 0.35rem 0.35rem 0;
+            }
         }
-    }
+        //&:nth-child(even) { background-color: $chill-llight-gray; }
+        &.without-objectives {}
+        &.with-objectives {}
 
-    &.short {
-        .item {
-            padding-bottom: 0;
-            ul.record_actions {
+
+        h4.title_label {
+            display: block;
+            margin: 0;
+            padding: 0.1em 0.5em;
+            font-variant-caps: small-caps;
+            background-color: $light;
+            + * {
+                margin-top: 0;
+            }
+        }
+        ul {
+            &.goal_title,
+            &.result_list {
+                padding-left: 1em;
                 margin-bottom: 0;
+                li {
+                    padding-left: 0.3em;
+                    &::marker {
+                        content: '→';
+                        font-weight: bold;
+                        font-size: 120%;
+                    }
+                }
+            }
+            &.goal_title li::marker {
+                color: $sky-blue;
+            }
+            &.result_list li::marker {
+                color: $pink;
             }
         }
     }
 
     .updatedBy {
-        margin-top: 1rem;
-        text-align: right;
+        margin-top: 0.3rem;
         font-size: 0.9rem;
         font-style: italic;
     }

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

@@ -1,6 +1,14 @@
-$social-issue-color: #4bafe8;
+// 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
 //   define visual badge for all social issues