simplify styles cascade

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

@@ -1,9 +1,9 @@
 <template>
    <div id="workEditor" class="my-4">
 
-      <div id="title">
+      <div id="title" class="action-title">
-         <label class="action_title_label">{{ $t('action_title') }}</label>
+         <label>{{ $t('action_title') }}</label>
-         <p class="action_title">{{ work.socialAction.text }}</p>
+         <p>{{ work.socialAction.text }}</p>
       </div>
 
       <div id="startDate">
@@ -25,7 +25,7 @@
          ></ckeditor>
       </div>
 
-      <div id="objectives" class="objectives_list">
+      <div id="objectives">
          <div aria="hidden" class="title">
             <div><h3>{{ $t('goals_title') }}</h3></div>
             <div><h3>{{ $t('results_title') }}</h3></div>
@@ -44,7 +44,7 @@
          <!-- results which **are** attached to an objective -->
          <div v-for="g in goalsPicked">
             <div>
-               <div class="objective-title" @click="removeGoal(g)">
+               <div class="item-title" @click="removeGoal(g)">
                   <i class="fa fa-times"></i>
                   {{ g.goal.title.fr }}
                </div>
@@ -416,56 +416,60 @@ export default {
 @import '~ChillMainAssets/module/bootstrap/shared';
 @import '~ChillMainAssets/chill/scss/mixins';
 
-#workEditor {
+div#workEditor {
    display: grid;
-   grid-template-areas:
-    "title title"
-    "startDate endDate"
-    "comment comment"
-    "objectives objectives"
-    "evaluations evaluations"
-    "persons persons"
-    "handling handling"
-    "tparties tparties"
-    "errors errors";
-
    grid-template-columns: 50%;
    column-gap: 0rem;
+   grid-template-areas:
+       "title title"
+       "startDate endDate"
+       "comment comment"
+       "objectives objectives"
+       "evaluations evaluations"
+       "persons persons"
+       "handling handling"
+       "tparties tparties"
+       "errors errors";
+
+   #title {
+      grid-area: title; }
+   #startDate {
+      grid-area: startDate; }
+   #endDate {
+      grid-area: endDate; }
+   #comment {
+      grid-area: comment; }
+   #objectives {
+      grid-area: objectives; }
+   #evaluations {
+      grid-area: evaluations; }
+   #persons {
+      grid-area: persons; }
+   #handlingThirdParty {
+      grid-area: handling; }
+   #thirdParties {
+      grid-area: tparties; }
+   #errors {
+      grid-area: errors; }
+
 
    & > div {
       @include border-collapse;
       padding: 1em;
    }
 
-   #title {
+   div.action-title {
-      grid-area: title;
+      label {
-
-      .action_title_label {
          margin-bottom: 0;
       }
-
+      p {
-      .action_title {
          margin-top: 0;
          font-weight: bold;
          font-size: 1.5rem;
       }
    }
 
-   #startDate {
+   div#objectives {
-      grid-area: startDate;
-   }
-
-   #endDate {
-      grid-area: endDate;
-   }
-
-   #comment {
-      grid-area: comment;
-   }
-
-   #objectives {
-      grid-area: objectives;
-
       & > div {
          display: grid;
          grid-template-areas: "obj res";
@@ -477,12 +481,10 @@ export default {
             padding: 1em;
 
             &:nth-child(1) {
-               grid-area: obj;
+               grid-area: obj; }
-            }
 
             &:nth-child(2) {
-               grid-area: res;
+               grid-area: res; }
-            }
          }
 
          & > div.results_without_objective {
@@ -498,48 +500,17 @@ export default {
             padding-top: 1.5rem;
          }
       }
-
-      li.badge, div.badge {
-         padding-bottom: 0;
-         padding-top: 0;
-         padding-left: 0;
-
-         i.fa {
-            padding: 0.25rem;
-         }
-
-         i.fa-plus {
-            background-color: $green;
-         }
-      }
    }
 
-   #evaluations {
+   div#evaluations {
-      grid-area: evaluations;
-
       & > div {
          @include border-collapse;
          padding: 1em;
       }
    }
 
-   #persons {
+   div#objectives,
-      grid-area: persons;
+   div#evaluations {
-   }
-
-   #handlingThirdParty {
-      grid-area: handling;
-   }
-
-   #thirdParties {
-      grid-area: tparties;
-   }
-
-   #errors {
-      grid-area: errors;
-   }
-
-   #objectives, #evaluations {
       padding: 0;
 
       & > div.title {
@@ -551,57 +522,42 @@ export default {
          }
       }
 
-      ul.list-evaluations, ul.list-results {
+      div.item-title {
-         list-style-type: none;
-         padding: 0;
-
-         li {
-            margin: 0.5rem;
-         }
-
-         li.badge {
-            padding-bottom: 0;
-            padding-top: 0;
-            padding-left: 0;
-
-            i.fa {
-               /*border-radius: 0.25rem; */
-               padding: 0.25rem;
-            }
-
-            i.fa-plus {
-               background-color: $green;
-            }
-
-            i.fa-times {
-               background-color: $red;
-               color: $white;
-            }
-         }
-      }
-
-      ul.list-evaluations, ul.list-objectives {
-         list-style-type: none;
-         padding: 0;
-
-         li {
-            margin: 0.5rem;
-         }
-      }
-
-      div.evaluation-title, div.objective-title {
          font-weight: bold;
+      }
 
-         i.fa {
+      ul.list-evaluations,
-            padding: 0.25rem;
+      ul.list-objectives,
-         }
+      ul.list-results {
 
-         i.fa-times {
+         list-style-type: none;
-            background-color: $red;
+         padding: 0;
-            color: $white;
+
+         li {
+            margin: 0.5rem;
+
+            &.badge {
+               padding-bottom: 0;
+               padding-top: 0;
+               padding-left: 0;
+            }
          }
       }
+
+      i.fa {
+         padding: 0.25rem;
+         color: $white;
+
+         &.fa-plus { background-color: $green; }
+         &.fa-times { background-color: $red; }
+         &.fa-pencil { background-color: $orange; }
+      }
    }
+
+   div#persons {
+      margin-top: 1.5em;
+   }
+
 }
 
 </style>