|
|
@ -41,8 +41,6 @@ const type = computed(() => props.type) |
|
|
|
|
|
|
|
|
|
|
|
const loading = useVModel(props, 'loading', emits) |
|
|
|
const loading = useVModel(props, 'loading', emits) |
|
|
|
|
|
|
|
|
|
|
|
const { isMobileMode } = useGlobal() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const isFocused = ref(false) |
|
|
|
const isFocused = ref(false) |
|
|
|
const isClicked = ref(false) |
|
|
|
const isClicked = ref(false) |
|
|
|
|
|
|
|
|
|
|
@ -86,7 +84,6 @@ useEventListener(NcButton, 'mousedown', () => { |
|
|
|
xsmall: size === 'xsmall', |
|
|
|
xsmall: size === 'xsmall', |
|
|
|
xxsmall: size === 'xxsmall', |
|
|
|
xxsmall: size === 'xxsmall', |
|
|
|
focused: isFocused, |
|
|
|
focused: isFocused, |
|
|
|
mobile: isMobileMode, |
|
|
|
|
|
|
|
}" |
|
|
|
}" |
|
|
|
@focus="onFocus" |
|
|
|
@focus="onFocus" |
|
|
|
@blur="onBlur" |
|
|
|
@blur="onBlur" |
|
|
@ -140,12 +137,9 @@ useEventListener(NcButton, 'mousedown', () => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.nc-button { |
|
|
|
.nc-button { |
|
|
|
box-shadow: 0px 5px 3px -2px rgba(0, 0, 0, 0.02), 0px 3px 1px -2px rgba(0, 0, 0, 0.06); |
|
|
|
@apply !sm:(outline-none) |
|
|
|
outline: none; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.nc-button.mobile { |
|
|
|
box-shadow: 0px 5px 3px -2px rgba(0, 0, 0, 0.02), 0px 3px 1px -2px rgba(0, 0, 0, 0.06); |
|
|
|
box-shadow: none; |
|
|
|
|
|
|
|
outline: none; |
|
|
|
outline: none; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -167,16 +161,8 @@ useEventListener(NcButton, 'mousedown', () => { |
|
|
|
@apply py-1 px-1.75 h-8 min-w-8; |
|
|
|
@apply py-1 px-1.75 h-8 min-w-8; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.desktop { |
|
|
|
|
|
|
|
.nc-button.ant-btn.medium { |
|
|
|
|
|
|
|
@apply py-2 px-4 h-10 min-w-10; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.mobile { |
|
|
|
|
|
|
|
.nc-button.ant-btn.medium { |
|
|
|
.nc-button.ant-btn.medium { |
|
|
|
@apply h-10.5 max-h-10.5 min-w-10.5 !px-3; |
|
|
|
@apply py-2 px-4 h-10 min-w-10 sm:(h-10.5 max-h-10.5 min-w-10.5 !px-3); |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.nc-button.ant-btn.xsmall { |
|
|
|
.nc-button.ant-btn.xsmall { |
|
|
@ -189,7 +175,7 @@ useEventListener(NcButton, 'mousedown', () => { |
|
|
|
|
|
|
|
|
|
|
|
.nc-button.ant-btn[disabled] { |
|
|
|
.nc-button.ant-btn[disabled] { |
|
|
|
box-shadow: none !important; |
|
|
|
box-shadow: none !important; |
|
|
|
@apply bg-gray-50 hover:bg-gray-50 border-0 text-gray-300 cursor-not-allowed; |
|
|
|
@apply bg-gray-50 border-0 text-gray-300 cursor-not-allowed md:(hover:bg-gray-50); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.nc-button.ant-btn-text.ant-btn[disabled] { |
|
|
|
.nc-button.ant-btn-text.ant-btn[disabled] { |
|
|
@ -201,27 +187,15 @@ useEventListener(NcButton, 'mousedown', () => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.nc-button.ant-btn-primary { |
|
|
|
.nc-button.ant-btn-primary { |
|
|
|
@apply bg-brand-500 border-0 text-white; |
|
|
|
@apply bg-brand-500 border-0 text-white sm:(hover:border-0) md:(hover:bg-brand-600); |
|
|
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
|
|
|
@apply bg-brand-600 border-0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.nc-button.ant-btn-secondary { |
|
|
|
.nc-button.ant-btn-secondary { |
|
|
|
@apply bg-white border-1 border-gray-200 text-gray-700; |
|
|
|
@apply bg-white border-1 border-gray-200 text-gray-700 md:(hover:bg-gray-100); |
|
|
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
|
|
|
@apply bg-gray-100; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.nc-button.ant-btn-danger { |
|
|
|
.nc-button.ant-btn-danger { |
|
|
|
@apply bg-red-500 border-0; |
|
|
|
@apply bg-red-500 border-0 hover:border-0 md:(hover:bg-red-600); |
|
|
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
|
|
|
@apply bg-red-600 border-0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.nc-button.ant-btn-text { |
|
|
|
.nc-button.ant-btn-text { |
|
|
|