WIP Сделала BaseButton
This commit is contained in:
Daria Golova
@@ -1,180 +1,123 @@
|
||||
<template lang="pug">
|
||||
button.base-button.text-base(
|
||||
type="button",
|
||||
:disabled="disabled",
|
||||
:class="{'rounded': rounded, 'outlined': outlined, 'outlined-red': outlinedRed, 'secondary': secondary, 'confirm': confirm, 'added': added, 'added-border-none': addedBorderNone}"
|
||||
:style="{height: size + 'px', minWidth: size + 'px'}"
|
||||
q-btn(
|
||||
:label="miniSize || round ? '' : label",
|
||||
no-caps,
|
||||
:class="btnClass"
|
||||
:style="{width: miniSize ? '40px' : width, 'min-width': (miniSize || round) && '0px', ...btnStyle}",
|
||||
:round="miniSize || round",
|
||||
:padding="computedPadding",
|
||||
:disable="disable"
|
||||
)
|
||||
.button-container
|
||||
span.icon-container(
|
||||
:class="leftIcon",
|
||||
v-if="leftIcon",
|
||||
:style="{fontSize: iconLeftSize + 'px'}"
|
||||
)
|
||||
slot
|
||||
.split(v-if="split")
|
||||
span.icon-container(
|
||||
:class="rightIcon",
|
||||
v-if="rightIcon",
|
||||
:style="{fontSize: iconRightSize + 'px', marginLeft: marginLeftIcon + 'px'}"
|
||||
)
|
||||
q-icon(v-if="miniSize", name="app:ok", size="20px")
|
||||
slot(v-else)
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "BaseButton",
|
||||
props: {
|
||||
confirm: Boolean,
|
||||
outlined: Boolean,
|
||||
outlinedRed: Boolean,
|
||||
added: Boolean,
|
||||
addedBorderNone: Boolean,
|
||||
rounded: Boolean,
|
||||
disabled: Boolean,
|
||||
split: Boolean,
|
||||
secondary: Boolean,
|
||||
rightIcon: {
|
||||
type: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
leftIcon: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
iconLeftSize: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
iconRightSize: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
default: "primary",
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 24,
|
||||
type: String,
|
||||
default: "M",
|
||||
},
|
||||
marginLeftIcon: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
width: {
|
||||
type: String,
|
||||
default: "auto",
|
||||
},
|
||||
round: Boolean,
|
||||
label: String,
|
||||
disable: Boolean,
|
||||
noPadding: Boolean,
|
||||
padding: String,
|
||||
},
|
||||
computed: {
|
||||
btnClass() {
|
||||
return {
|
||||
[this.type]: true,
|
||||
};
|
||||
},
|
||||
btnStyle() {
|
||||
if (this.size === "L")
|
||||
return {
|
||||
height: "48px",
|
||||
"min-height": "48px",
|
||||
};
|
||||
return {
|
||||
height: "40px",
|
||||
"min-height": "40px",
|
||||
};
|
||||
},
|
||||
miniSize() {
|
||||
return this.type === "mini";
|
||||
},
|
||||
computedPadding() {
|
||||
if (this.miniSize) return "2px 0 0 0";
|
||||
if (this.noPadding) return "0";
|
||||
if (this.padding) return this.padding;
|
||||
return "";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
.base-button
|
||||
padding: 8px 23px
|
||||
.primary
|
||||
color: white
|
||||
background-color: var(--btn-blue-color)
|
||||
border: 1px solid var(--btn-blue-color)
|
||||
color: var(--default-white)
|
||||
display: flex
|
||||
justify-content: center
|
||||
align-items: center
|
||||
border-radius: 4px
|
||||
white-space: nowrap
|
||||
&:hover
|
||||
background-color: var(--btn-blue-color-hover)
|
||||
&:active
|
||||
background-color: var(--font-dark-blue-color)
|
||||
border: 1px solid var(--font-dark-blue-color)
|
||||
&:hover
|
||||
background-color: var(--btn-blue-color-hover)
|
||||
border: 1px solid var(--btn-blue-color-hover)
|
||||
&:disabled, &[disabled]
|
||||
opacity: 1 !important
|
||||
background-color: var(--btn-blue-color-disabled)
|
||||
border: 1px solid var(--btn-blue-color-disabled)
|
||||
&:focus
|
||||
outline: 0
|
||||
.rounded
|
||||
padding: 0
|
||||
border-radius: 50%
|
||||
|
||||
.outlined
|
||||
background-color: var(--default-white)
|
||||
border: 1.5px solid var(--btn-blue-color)
|
||||
color: var(--btn-blue-color)
|
||||
&:active
|
||||
background-color: var(--default-white)
|
||||
border: 1.5px solid var(--font-dark-blue-color)
|
||||
color: var(--font-dark-blue-color)
|
||||
&:hover
|
||||
background-color: var(--default-white)
|
||||
border: 1.5px solid var(--btn-blue-color-hover)
|
||||
color: var(--btn-blue-color-hover)
|
||||
&:disabled, &[disabled]
|
||||
background-color: var(--default-white)
|
||||
border: 1.5px solid var(--btn-blue-color-1)
|
||||
color: var(--btn-blue-color-1)
|
||||
|
||||
.outlined-red
|
||||
background-color: var(--default-white)
|
||||
border: 1.5px solid var(--border-red-color)
|
||||
color: var(--border-red-color)
|
||||
&:active
|
||||
background-color: var(--default-white)
|
||||
border: 1.5px solid var(--bg-event-red-color)
|
||||
color: var(--bg-event-red-color)
|
||||
&:hover
|
||||
background-color: var(--default-white)
|
||||
border: 1.5px solid var(--bg-event-red-color-1)
|
||||
color: var(--bg-event-red-color-1)
|
||||
&:disabled, &[disabled]
|
||||
background-color: var(--default-white)
|
||||
border: 1.5px solid var(--bg-event-red-color-0)
|
||||
color: var(--bg-event-red-color-0)
|
||||
|
||||
.added
|
||||
border: 2px solid var(--btn-blue-color)
|
||||
&:hover
|
||||
border: none
|
||||
background-color: var(--btn-blue-color)
|
||||
color: var(--default-white)
|
||||
.added-border-none
|
||||
border: none
|
||||
width: fit-content
|
||||
background-color: var(--bg-opacity-0)
|
||||
color: var(--btn-blue-color)
|
||||
padding: 0
|
||||
row-gap: 10px
|
||||
&:hover
|
||||
border: none
|
||||
color: var(--btn-blue-color-hover)
|
||||
background-color: var(--bg-opacity-0)
|
||||
.secondary
|
||||
background-color: var(--btn-blue-sec-color)
|
||||
border: 1px solid var(--btn-blue-sec-color)
|
||||
color: var(--btn-blue-color)
|
||||
border: 1.5px solid var(--btn-blue-sec-border-color)
|
||||
background-color: white
|
||||
&:hover
|
||||
background-color: var(--btn-blue-color-hover)
|
||||
border: 1px solid var(--btn-blue-color-hover)
|
||||
color: var(--btn-blue-color)
|
||||
background-color: var(--btn-blue-sec-color-hover)
|
||||
&:active
|
||||
background-color: var(--btn-blue-sec-color-active)
|
||||
&:disabled, &[disabled]
|
||||
background-color: var(--btn-blue-sec-color)
|
||||
border: 1px solid var(--btn-blue-sec-color)
|
||||
color: var(--btn-blue-color)
|
||||
opacity: 1 !important
|
||||
color: var(--btn-blue-sec-color-disabled)
|
||||
background-color: white
|
||||
border: 1.5px solid var(--btn-blue-sec-border-color-disabled)
|
||||
|
||||
.confirm
|
||||
border-color: var(--btn-blue-color)
|
||||
border: 2px solid var(--btn-blue-color)
|
||||
.remove
|
||||
color: var(--border-red-color)
|
||||
border: 1.5px solid var(--btn-red-border-color)
|
||||
background-color: white
|
||||
&:hover
|
||||
background-color: var(--btn-red-color-hover)
|
||||
&:active
|
||||
background-color: var(--btn-red-color-active)
|
||||
&:disabled, &[disabled]
|
||||
opacity: 1 !important
|
||||
color: var(--btn-red-color-disabled)
|
||||
background-color: white
|
||||
border: 1.5px solid var(--btn-red-border-color-disabled)
|
||||
|
||||
.mini
|
||||
color: var(--btn-blue-color)
|
||||
border: 1.5px solid var(--btn-mini-color)
|
||||
background-color: white
|
||||
&:hover
|
||||
border: none
|
||||
background-color: var(--btn-blue-color)
|
||||
color: var(--default-white)
|
||||
background-color: var(--btn-mini-color)
|
||||
&:active
|
||||
background-color: var(--btn-light-green-color)
|
||||
color: var(--btn-green-color)
|
||||
border: none
|
||||
background-color: var(--btn-mini-color-active)
|
||||
color: var(--bg-status-green)
|
||||
|
||||
.button-container
|
||||
display: flex
|
||||
gap: 8px
|
||||
|
||||
.split
|
||||
height: 19px
|
||||
width: 1px
|
||||
border-radius: 1px
|
||||
background-color: var(--default-white)
|
||||
opacity: 0.3
|
||||
|
||||
.icon-container
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
.q-btn :deep(.q-focus-helper)
|
||||
display: none
|
||||
.q-btn :deep(.q-ripple)
|
||||
display: none
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user