[WIP] Фикс стилей

src/pages/schedule/components/ScheduleBody.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
   .schedule.flex-col(:style="themeCell")
-    .table-header.flex.w-full
+    .table-header.flex.w-full.pr-2
       .flex.items-center.justify-center.pl-11(
-        :style="{width: 'calc(25% + 44px)'}"
+        :style="{width: 'calc(25% + 40px)'}"
       )
         .text.font-bold Сотрудник
       .column-wrapper.flex
@@ -16,7 +16,7 @@
           .text.flex.font-bold(
             :style="{opacity: changeOpacity(day)}"
             ) {{day.format("ddd")}}
-    .flex.w-full.flex-col(:style="{overflowY: 'scroll', maxHeight: '351px'}")
+    .schedule-wrapper.flex.w-full.flex-col
       .schedule-body.flex.w-full(v-for="schedule in serialized", :key="schedule.id")
         .edit.flex.items-center.justify-center.h-11.w-11
           .flex.icon-edit
@@ -33,8 +33,8 @@
           .flex(
             :class="{'cell-work': choiceState(day, schedule.id).status}"
           ) {{choiceDay(day, schedule.id) ? choiceWorks(day, schedule) : ''}}
-    .schedule-body.flex.w-full(v-if="clearEmployee", :style="{height: '44px'}")
-      .edit.flex.items-center.justify-center.h-11.w-11(:style="{borderBottom: 'none'}")
+    .schedule-select.flex.w-full.pr-2(v-if="clearEmployee")
+      .edit.flex.items-center.justify-center.h-11.w-11(v-if="currentEmployee.label")
         .flex.icon-edit(v-if="currentEmployee.label")
           //- base-button(
           //-   confirm,
@@ -45,25 +45,22 @@
           //-   v-if="currentEmployee.label"
           //- )
             //- .icon-ok.text-xsm(class="pt-[3px]")
-      .name.flex.justify-center.items-center.cursor-pointer(
-        v-if="currentEmployee.label"
-      )
-        span {{currentEmployee.label}}
-      .name.flex(v-if="!currentEmployee.label")
+      .name.flex.justify-center.items-center.cursor-pointer(:class="{'select-name': currentEmployee.label}")
         base-custom-select(
+          v-if="!currentEmployee.label",
           :items="ownersList",
           v-model="currentEmployee",
           placeholder="Добавить сотрудника",
           :style="{border: 'none', justifyContent: 'center'}"
         )
+        .flex.justify-center(v-else) {{currentEmployee.label}}
       .cell.flex.flex-col.items-center.justify-center.w-11.h-11.cursor-pointer(
         v-if="currentEmployee.label",
         v-for="day in result",
         :key="day",
         :id="currentEmployee.id + day",
         @click="choiceCell(day, currentEmployee.id)",
-        :class="choiceState(day, currentEmployee.id)",
-        :style="{borderBottom: 'none'}"
+        :class="choiceState(day, currentEmployee.id)"
       )
 </template>
 
@@ -289,9 +286,14 @@ export default {
   border: 1.5px solid var(--border-light-grey-color-1)
   border-radius: 4px
   border-right: none
+  border-bottom: none
   min-height: 87px
   width: calc(100vw - 136px)
 
+.schedule-wrapper
+  overflow-y: scroll
+  max-height: 351px
+
 .schedule-body
   &:hover
     background-color: var(--border-light-grey-color-1)
@@ -303,8 +305,14 @@ export default {
   border-top-left-radius: 2px
   border-top-right-radius: 2px
 
+.schedule-select
+  border-top: 1.5px solid var(--border-light-grey-color-1)
+  &:hover
+    background-color: var(--border-light-grey-color-1)
+
 .column-wrapper
   overflow: auto
+  overflow-x: hidden
 
 .column-color
   background-color: var(--bg-white-color-1)
@@ -317,9 +325,13 @@ export default {
   border-bottom: 1.5px solid var(--border-light-grey-color-1)
 
 .name
+  color: var(--btn-blue-color)
+  border-bottom: 1.5px solid var(--border-light-grey-color-1)
+  border-right: 1.5px solid var(--border-light-grey-color-1)
+
+.select-name
   width: 25%
   border-right: 1.5px solid var(--border-light-grey-color-1)
-  color: var(--btn-blue-color)
 
 .name-employee
   width: 25%
@@ -347,11 +359,11 @@ export default {
   content: var(--text-status)
 
 .from-date
-  background-color: limegreen
+  background-color: limegreen !important
 
 .to-date
-  background-color: red
+  background-color: red !important
 
 .middle-dates
-  background-color: yellow
+  background-color: yellow !important
 </style>