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

src/assets/sass/variables.sass

@@ -28,3 +28,4 @@
   --btn-green-color: rgba(60, 217, 75, 1)
   --btn-light-green-color: rgba(60, 217, 75, 0.2)
   --border-light-grey-color-1: rgba(211, 212, 220, 0.5)
+  --bg-white-color-0: rgba(255, 255, 255, 0.3)

src/components/base/BaseInput.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .input-wrapper.flex.gap-x-2.px-4.box-border(class="py-2.5" :style="{ minWidth: widthInput + 'px' }")
-    input.w-full.outline-0.text-base.not-italic(:style="{ backgroundColor: backgroundInput, fontSize: fontSizeInput }" :value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
+    input.w-full.outline-0.text-base.not-italic(:value="value" :type="type" @input="$emit('update:value', $event.target.value)" :placeholder="placeholder" :maxlength="maxLength")
     .slot(v-if="withIcon" :class="iconPosition")
       slot.cursor-pointer
 </template>
@@ -24,8 +24,6 @@ export default {
       default: "Поиск",
     },
     widthInput: Number,
-    backgroundInput: String,
-    fontSizeInput: String,
   },
 };
 </script>

src/components/base/buttons/BaseCreateButton.vue

@@ -1,8 +1,8 @@
 <template lang="pug">
   button.button.flex.w-fit.gap-x-2.text-base.pt-3.pb-2.px-6
-    .flex.text-xs.w-fit.pt-1(v-if="withIcon")
+    .flex.text-xs.w-fit.pt-1(v-if="withIcon" :class="iconPosition")
-      span.icon-plus
+      span.icon-plus(:style="{fontSize:iconSize + 'px'}")
-    span.text-base.font-semibold {{text}}
+    span.text-base.font-semibold(:class="textStyled") {{text}}
 </template>
 
 <script>
@@ -15,6 +15,15 @@ export default {
     withIcon: {
       default: false,
     },
+    iconPosition: {
+      default: "left",
+    },
+    iconSize: {
+      default: 13,
+    },
+    textStyled: {
+      default: "normal",
+    },
   },
 };
 </script>
@@ -30,4 +39,16 @@ export default {
   &:active
     opacity: 1
     background-color: var(--font-dark-blue-color)
+.left
+  order: -1
+.right
+  order: 1
+  padding-top: 1px
+  border-left: 1px solid var(--bg-white-color-0)
+  padding-left: 14px
+  height: 24px
+  align-items: center
+.createEvent
+  font-weight: 500
+  padding-right: 2px
 </style>

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")
+            .relative.flex.items-center.gap-x-3.h-8(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")
+              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>