From b2691caa2dc171dedd8547caa2228de1e4640cf2 Mon Sep 17 00:00:00 2001 From: kandrusyak Date: Thu, 27 Oct 2022 17:37:32 +0300 Subject: [PATCH 1/2] add kit button --- src/assets/sass/variables.sass | 4 + src/components/base/BaseButton.vue | 125 ++++++++++++++++++ .../calendar/components/CalendarSidebar.vue | 24 ++-- 3 files changed, 140 insertions(+), 13 deletions(-) create mode 100644 src/components/base/BaseButton.vue diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass index dee537e..bc5089d 100644 --- a/src/assets/sass/variables.sass +++ b/src/assets/sass/variables.sass @@ -6,6 +6,10 @@ --font-black-color-0: rgba(9, 10, 21, 0) --font-black-color-1: rgba(9, 10, 21, 0.5) --btn-blue-color: #4772f2 + --btn-blue-sec-color: #c6d2f6 + --btn-blue-color-hover: #7e9cf6 + --btn-blue-sec-color-hover: #a0b4f0 + --btn-blue-color-disabled: #c8d5fb --btn-blue-color-0: rgba(65, 105, 225, 0) --btn-blue-color-1: rgba(65, 105, 225, 0.3) --btn-blue-color-2: rgba(65, 105, 225, 0.5) diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue new file mode 100644 index 0000000..1e1f041 --- /dev/null +++ b/src/components/base/BaseButton.vue @@ -0,0 +1,125 @@ + + + + + diff --git a/src/pages/calendar/components/CalendarSidebar.vue b/src/pages/calendar/components/CalendarSidebar.vue index 6eafc82..499f88f 100644 --- a/src/pages/calendar/components/CalendarSidebar.vue +++ b/src/pages/calendar/components/CalendarSidebar.vue @@ -2,28 +2,24 @@ .sidebar.flex.flex-col.bg-white(:class="openSidebar") .sidebar-wrapper.h-full.my-13px.flex.flex-col.justify-between(:style="sidebarWidth") .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px(v-if="!isOpen") - base-button-plus(:size="40") + base-button(left-icon="icon-plus", rounded, size="40", icon-left-size="10" ) .flex.flex-col.items-center(v-if="!isOpen") - base-button-plus(:class="buttonStyled" :size="24" :icon-size="10") + base-button(left-icon="icon-plus", rounded, size="24", icon-left-size="10", secondary ) .flex.flex-col.gap-y-2.items-center.mt-4 .event.flex.items-center.justify-center(v-for="event in events" :key="event.id") .event-type(:style="{ background: event.color }") .flex.flex-col.items-center.gap-y-2.justify-center - base-button-plus.mb-2(:class="buttonStyled" :size="24" :icon-size="10") + base-button.mb-2(left-icon="icon-plus", rounded, size="24", icon-left-size="10", secondary ) .team-card(v-for="teammate in teamData" :key="teammate.id") img.avatar-wrapper(:src="avatar" alt="Team member") .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px(v-else) .create-event.flex.items-center.justify-center - 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") + base-button(right-icon="icon-plus", split, size="40", icon-right-size="10" ) Создать событие + .flex.items-center.flex-col.gap-y-4 .events-wrapper.flex.items-center.justify-between .flex {{ "Виды событий" }} - base-button-plus(:class="buttonStyled" :size="24" :icon-size="10") + base-button(left-icon="icon-plus", rounded, size="24", icon-left-size="10", secondary ) .flex.flex-col.gap-y-2 .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( @@ -34,7 +30,7 @@ .flex.flex-col.gap-y-4 .events-wrapper.flex.items-center.justify-between .flex {{ "Команды" }} - base-button-plus(:class="buttonStyled" :size="24" :icon-size="10") + base-button(left-icon="icon-plus", rounded, size="24", icon-left-size="10", secondary ) .box-team.flex.flex-col.gap-y-2 .team-card.flex.items-center.justify-between.cursor-pointer( v-for="teammate in teamData" @@ -44,7 +40,7 @@ .flex.ml-2.not-italic.font-medium.text-xxs {{ changeName(teammate.last_name, teammate.first_name, teammate.patronymic) }} span.icon-change-place.cursor-pointer.w-5 .button-wrapper.flex.justify-center.mb-23px - base-open-button(@click="changeSize" :style="{ transform: `rotate(${turnButton})`}") + base-button(left-icon="icon-long-arrow", rounded, size="40", icon-left-size="18", secondary, :style="{ transform: `rotate(${turnButton})`}", @click="changeSize")