Merge pull request #63 from dderbentsov/UC-21

[WIP] Добавил стили панели сайдбара

src/pages/calendar/components/CalendarSidebar.vue

@@ -4,7 +4,7 @@
       .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px
         base-button-plus(:size="40" v-if="!isOpen")
         .create-event.flex.items-center.justify-center(v-else)
-          base-create-button.font-medium.pl-15px.py-10.5px(text="Создать событие" :withIcon="true")
+          base-create-button.pl-15px.pb-2.pr-3.pt-2.items-center.h-10(text-styled="createEvent" :icon-size="10" text="Создать событие" :with-icon="true" icon-position="right")
         .flex.flex-col.items-center(v-if="!isOpen")
           base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
           .flex.flex-col.gap-y-2.items-center.mt-4
@@ -15,8 +15,8 @@
             .flex {{ "Виды событий" }}
             base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
           .flex.flex-col.gap-y-2
-            .relative.flex.items-center.gap-x-3(v-for="event in events")
-              base-input.py-2.pl-6(:placeholder="event.name" :key="event.id" :backgroundInput="red" background-input="transparent" font-size-input="12px")
+            .relative.flex.items-center.gap-x-3.h-8(v-for="event in events")
+              input.custom-input.py-2.pl-6.h-full.not-italic.font-medium.text-xxs(:placeholder="event.name" :key="event.id")
               .event-type(:style="{ background: event.color }")
               span.icon-edit.cursor-pointer
         .flex.flex-col.items-center.gap-y-2.justify-center(v-if="!isOpen")
@@ -28,11 +28,11 @@
             .flex {{ "Команды" }}
             base-button-plus(:class="buttonStyled" :size="24" :icon-size="10")
           .box-team.flex.flex-col.gap-y-2
-            .team-card.flex.items-center.justify-between(v-for="teammate in team" :key="teammate.id")
+            .team-card.flex.items-center.justify-between.cursor-pointer(v-for="teammate in team" :key="teammate.id")
               .flex.items-center
                 img.avatar-wrapper(:src="teammate.avatar" alt="Team member")
                 .flex.ml-2.not-italic.font-medium.text-xxs {{ changeLastName(teammate.last_name) + changeInitials(teammate.first_name, teammate.patronymic) }}
-              .span.icon-change-place.cursor-pointer
+              span.icon-change-place.cursor-pointer.w-5
         base-open-button.mt-148px(@click="changeSize" :style="{ transform: `rotate(${turnButton})` }")
 </template>
 
@@ -40,14 +40,12 @@
 import BaseButtonPlus from "../../../components/base/buttons/BaseButtonPlus.vue";
 import BaseOpenButton from "../../../components/base/buttons/BaseOpenButton.vue";
 import BaseCreateButton from "../../../components/base/buttons/BaseCreateButton.vue";
-import BaseInput from "../../../components/base/BaseInput.vue";
 export default {
   name: "CalendarSidebar",
   components: {
     BaseButtonPlus,
     BaseOpenButton,
     BaseCreateButton,
-    BaseInput,
   },
   props: {
     team: Array,
@@ -113,30 +111,37 @@ export default {
 <style lang="sass" scoped>
 .sidebar-wrapper
   border-left: 2px solid var(--btn-blue-color-3)
+
 .button-plus
   max-height: 40px
   background: var(--btn-blue-color)
   color: var(--default-white)
+
 .event
   width: 32px
   height: 32px
   background: var(--bg-event-box-color)
   border-radius: 4px
+
 .event-type
   width: 16px
   height: 16px
   border-radius: 2px
+
 .avatar-wrapper
   width: 32px
   height: 32px
+
 .open-button
   width: 40px
   height: 40px
   max-height: 40px
+
 .button-styled
   max-height: 24px
   background: var(--btn-blue-color-1)
   color: var(--btn-blue-color)
+
 .open-sidebar
   .sidebar-content
     align-items: flex-end
@@ -147,15 +152,40 @@ export default {
     height: 16px
     top: 8px
     left: 8px
+
 .create-event
   width: 200px
   height: 40px
   border-radius: 4px
+
 .events-wrapper
   width: 200px
+
 .input-wrapper
   border: none
   background: var(--bg-event-box-color)
   height: 32px
   width: 169px
+
+.team-card
+  border-radius:16px
+  &:hover
+    background: var(--font-dark-blue-color)
+    color: var(--default-white)
+
+.button
+  width: 200px
+
+.custom-input
+  border-radius: 4px
+  width: 169px
+  outline: none
+  background-color: var(--bg-event-box-color)
+  &::placeholder
+    color: var(--font-dark-blue-color)
+  &:focus
+    background-color: var(--font-dark-blue-color)
+    color: var(--default-white)
+    &::placeholder
+      color: var(--default-white)
 </style>