WIP Переделана часть secondary кнопок

This commit is contained in:
Daria Golova
2023-01-17 18:53:36 +03:00
parent fe37e7bb66
commit 7cca1a88cc
12 changed files with 123 additions and 124 deletions

View File

@@ -2,18 +2,20 @@
.calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
.flex
q-btn.mr-4(
class="secondary",
color="secondary",
round,
size="14px",
dense,
text-color="primary",
@click="previousHandler"
)
q-icon(name="arrow_back_ios", right)
q-btn.mr-4(
class="secondary",
color="secondary",
icon="arrow_forward_ios",
round,
size="14px",
text-color="primary",
dense,
@click="nextHandler"
)
@@ -79,17 +81,4 @@ export default {
.today
opacity: 0.5
.secondary
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
&:hover
background-color: var(--btn-blue-color-hover)
border: 1px solid var(--btn-blue-color-hover)
color: var(--btn-blue-color)
&:disabled, &[disabled]
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
</style>

View File

@@ -24,10 +24,10 @@
//.button-wrapper.flex.justify-center.mb-23px
q-btn(
round,
icon="east",
size="18px",
class="secondary",
padding="6px",
icon="app:icon-long-arrow",
size="13px",
color="secondary",
text-color="primary"
:style="{ transform: `rotate(${turnButton})`}",
@click="changeSize",
)
@@ -54,7 +54,7 @@ export default {
widthSidebarOpen: "232px",
widthSidebarClose: "72px",
isOpen: false,
turnButton: "0deg",
turnButton: "180deg",
};
},
computed: {
@@ -85,7 +85,7 @@ export default {
"width",
this.isOpen ? this.widthSidebarOpen : this.widthSidebarClose
);
this.turnButton = this.isOpen ? "180deg" : "0deg";
this.turnButton = this.isOpen ? "0deg" : "180deg";
},
},
};
@@ -110,17 +110,4 @@ export default {
.button-wrapper
justify-content: end
padding-right: 16px
.secondary
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
&:hover
background-color: var(--btn-blue-color-hover)
border: 1px solid var(--btn-blue-color-hover)
color: var(--btn-blue-color)
&:disabled, &[disabled]
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
</style>

View File

@@ -5,7 +5,8 @@
round,
icon="add",
size="12px",
class="secondary",
text-color="primary",
color="secondary"
padding="4px",
dense
)
@@ -20,7 +21,8 @@
round,
icon="add",
size="12px",
class="secondary",
text-color="primary",
color="secondary"
padding="4px"
)
.flex.flex-col.gap-y-2
@@ -77,17 +79,4 @@ export default {
height: 16px
top: 8px
left: 8px
.secondary
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
&:hover
background-color: var(--btn-blue-color-hover)
border: 1px solid var(--btn-blue-color-hover)
color: var(--btn-blue-color)
&:disabled, &[disabled]
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
</style>

View File

@@ -4,7 +4,8 @@
round,
icon="add",
size="12px",
class="secondary",
text-color="primary",
color="secondary"
padding="4px",
dense
)
@@ -19,7 +20,8 @@
round,
icon="add",
size="12px",
class="secondary",
text-color="primary",
color="secondary"
padding="4px",
dense
)
@@ -81,16 +83,4 @@ export default {
&:hover
background: var(--font-dark-blue-color)
color: var(--default-white)
.secondary
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
&:hover
background-color: var(--btn-blue-color-hover)
border: 1px solid var(--btn-blue-color-hover)
color: var(--btn-blue-color)
&:disabled, &[disabled]
background-color: var(--btn-blue-sec-color)
border: 1px solid var(--btn-blue-sec-color)
color: var(--btn-blue-color)
</style>

View File

@@ -17,13 +17,17 @@
.flex.justify-center.items-center.h-10
span.font-semibold Статусы
.flex.justify-around.gap-x-4(class="py-2.5")
base-button.font-semibold.border-none(
q-btn(
v-for="item in buttons",
:class="item.class",
:key="item",
:style="{minWidth: '190px', minHeight: '43px', border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
@click="choiceSchedule(item.class)"
) {{item.name}}
@click="choiceSchedule(item.class)",
:label="item.name",
:class="item.class",
text-color="white",
:style="{border: item.active ? '1.5px solid #5E5E5E' : 'none'}",
no-caps,
style="width: 200px"
)
.graph-template.flex.flex-col.items-center.gap-y-4
base-custom-select(
:items="templateList",
@@ -38,23 +42,32 @@
label="Введите график",
v-model="template.item.label"
)
.flex.justify-center.gap-x-6
base-button.font-semibold.w-36(:size="40", @click="createSchedules") Сохранить
base-button.delete-button.font-semibold.w-36(
:size="40",
@click="deleteSchedule"
) Удалить
.flex.justify-center.gap-x-6.h-10
q-btn(
label="Сохранить",
color="primary",
style="width: 144px",
padding="4px 24px",
@click="createSchedules",
no-caps
)
q-btn(
label="Удалить",
style="background-color: var(--bg-event-red-color); width: 144px",
text-color="white",
padding="4px 24px",
@click="deleteSchedule",
no-caps
)
</template>
<script>
import BaseButton from "@/components/base/BaseButton.vue";
import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
import BaseInput from "@/components/base/BaseInput.vue";
export default {
name: "ScheduleBar",
components: {
BaseButton,
BaseInput,
BaseCustomSelect,
},
@@ -112,9 +125,6 @@ export default {
&::placeholder
color: var(--font-black-color-1)
.text
color: var(--font-grey-color)
.status-wrapper
min-width: 540px
height: 120px

View File

@@ -11,7 +11,8 @@
.calendar-header-wrapper.flex.items-center.justify-between.py-3.pl-5.pr-6
.flex
q-btn.mr-4(
class="secondary",
text-color="primary",
color="secondary"
round,
size="14px",
dense,
@@ -20,7 +21,8 @@
q-icon(name="arrow_back_ios", right)
q-btn.mr-6(
@click="nextHandler",
class="secondary",
text-color="primary",
color="secondary"
icon="arrow_forward_ios",
round,
size="14px",