github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor: basic components styles 

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/591/head
Ryan Wang 2022-07-25 16:48:37 +08:00
parent ed0153dcd0
commit 7975890b44
14 changed files with 306 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
packages/components/src/components/alert/Alert.vue
View File

@ -74,57 +74,58 @@ const handleClose = () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.alert-wrapper { .alert-wrapper {
@apply flex; @apply flex
@apply flex-col; flex-col
@apply box-border; box-border
@apply border; border
@apply rounded-base; rounded-base;
padding: 12px 16px; padding: 12px 16px;
.alert-header { .alert-header {
@apply flex; @apply flex;
.alert-icon { .alert-icon {
@apply self-center; @apply self-center
@apply mr-3; mr-3
@apply text-lg; text-lg;
} }
.alert-title { .alert-title {
@apply self-center; @apply self-center
@apply mr-3; mr-3
@apply flex-1; flex-1
@apply font-medium; font-medium
@apply text-base; text-base;
} }
.alert-close { .alert-close {
@apply self-center; @apply self-center
@apply cursor-pointer; cursor-pointer
@apply rounded-full; rounded-full
@apply p-0.5; p-0.5;
&:hover { &:hover {
@apply transition-all; @apply transition-all
@apply bg-gray-300; bg-gray-300
@apply text-white; text-white;
} }
} }
} }
.alert-description { .alert-description {
@apply text-sm; @apply text-sm
@apply mt-2; mt-2;
} }
.alert-actions { .alert-actions {
@apply border-t; @apply border-t
@apply mt-3 pt-2; mt-3
pt-2;
} }
&.alert-default { &.alert-default {
@apply bg-gray-50; @apply bg-gray-50
@apply border-gray-300; border-gray-300;
.alert-icon, .alert-icon,
.alert-description { .alert-description {
@ -138,8 +139,8 @@ const handleClose = () => {
} }
&.alert-success { &.alert-success {
@apply bg-green-50; @apply bg-green-50
@apply border-green-300; border-green-300;
.alert-icon, .alert-icon,
.alert-description { .alert-description {
@ -153,8 +154,8 @@ const handleClose = () => {
} }
&.alert-info { &.alert-info {
@apply bg-sky-50; @apply bg-sky-50
@apply border-sky-300; border-sky-300;
.alert-icon, .alert-icon,
.alert-description { .alert-description {
@ -168,8 +169,8 @@ const handleClose = () => {
} }
&.alert-warning { &.alert-warning {
@apply bg-orange-50; @apply bg-orange-50
@apply border-orange-300; border-orange-300;
.alert-icon, .alert-icon,
.alert-description { .alert-description {
@ -183,8 +184,8 @@ const handleClose = () => {
} }
&.alert-error { &.alert-error {
@apply bg-red-50; @apply bg-red-50
@apply border-red-300; border-red-300;
.alert-icon, .alert-icon,
.alert-description { .alert-description {

80
packages/components/src/components/button/Button.vue
View File

@ -94,24 +94,24 @@ function handleClick() {
</script> </script>
<style lang="scss"> <style lang="scss">
.btn { .btn {
@apply rounded-base; @apply rounded-base
@apply inline-flex; inline-flex
@apply flex-shrink-0; flex-shrink-0
@apply cursor-pointer; cursor-pointer
@apply select-none; select-none
@apply flex-wrap; flex-wrap
@apply items-center; items-center
@apply justify-center; justify-center
@apply transition-all; transition-all
@apply text-center; text-center
@apply text-sm; text-sm
@apply no-underline; no-underline
@apply h-9; h-9
@apply px-4; px-4
@apply outline-0; outline-0
@apply border-none; border-none
@apply appearance-none; appearance-none
@apply align-middle; align-middle;
&:hover { &:hover {
@apply opacity-90; @apply opacity-90;
@ -122,8 +122,8 @@ function handleClick() {
} }
&:disabled { &:disabled {
@apply opacity-50; @apply opacity-50
@apply cursor-not-allowed; cursor-not-allowed;
} }
} }
@ -153,9 +153,9 @@ function handleClick() {
} }
.btn-icon { .btn-icon {
@apply h-5 w-5; @apply h-5 w-5
@apply text-white; text-white
@apply mr-3; mr-3;
} }
.btn-loading { .btn-loading {
@ -166,37 +166,39 @@ function handleClick() {
} }
.btn-lg { .btn-lg {
@apply h-11; @apply h-11
@apply px-5; px-5
@apply text-lg; text-lg;
} }
.btn-sm { .btn-sm {
@apply h-7; @apply h-7
@apply px-3; px-3
@apply text-xs; text-xs;
.btn-icon { .btn-icon {
@apply h-3 w-3; @apply h-3
@apply mr-2; w-3
mr-2;
} }
} }
.btn-xs { .btn-xs {
@apply h-6; @apply h-6
@apply px-2; px-2
@apply text-xs; text-xs;
.btn-icon { .btn-icon {
@apply h-3 w-3; @apply h-3
@apply mr-2; w-3
mr-2;
} }
} }
.btn-circle { .btn-circle {
@apply w-9; @apply w-9
@apply p-0; p-0
@apply rounded-full; rounded-full;
} }
.btn-lg.btn-circle { .btn-lg.btn-circle {

22
packages/components/src/components/card/Card.vue
View File

@ -33,22 +33,24 @@ defineProps({
</template> </template>
<style lang="scss"> <style lang="scss">
.card-wrapper { .card-wrapper {
@apply box-border flex flex-col; @apply box-border
@apply bg-white; flex
@apply shadow-sm; flex-col
@apply overflow-hidden; bg-white
@apply rounded-base; shadow-sm
overflow-hidden
rounded-base;
border: 1px solid #eaecf0; border: 1px solid #eaecf0;
.card-header { .card-header {
@apply flex; @apply flex
@apply justify-between; justify-between;
border-bottom: 1px solid #eaecf0; border-bottom: 1px solid #eaecf0;
.card-header-title { .card-header-title {
@apply self-center; @apply self-center
@apply text-base; text-base
@apply font-bold; font-bold;
padding: 12px 16px; padding: 12px 16px;
} }

8
packages/components/src/components/checkbox/CheckBox.vue
View File

@ -48,9 +48,9 @@ function handleChange(e: Event) {
</template> </template>
<style lang="scss"> <style lang="scss">
.checkbox-wrapper { .checkbox-wrapper {
@apply flex; @apply flex
@apply items-center; items-center
@apply box-border; box-border
@apply flex-grow-0; flex-grow-0;
} }
</style> </style>

56
packages/components/src/components/input/Input.vue
View File

@ -52,21 +52,21 @@ function handleInput(e: Event) {
<style lang="scss"> <style lang="scss">
.input-wrapper { .input-wrapper {
@apply box-border; @apply box-border
@apply relative; relative
@apply w-full; w-full
@apply inline-flex; inline-flex;
input { input {
@apply outline-0; @apply outline-0
@apply bg-white; bg-white
@apply antialiased; antialiased
@apply resize-none; resize-none
@apply w-full; w-full
@apply text-black; text-black
@apply block; block
@apply transition-all; transition-all
@apply appearance-none; appearance-none
@apply rounded-base; rounded-base;
border: 1px solid #ced4da; border: 1px solid #ced4da;
&:active { &:active {
@ -78,32 +78,32 @@ function handleInput(e: Event) {
} }
&:disabled { &:disabled {
@apply opacity-50; @apply opacity-50
@apply cursor-not-allowed; cursor-not-allowed;
} }
&.input-lg { &.input-lg {
@apply h-11; @apply h-11
@apply px-4; px-4
@apply text-lg; text-lg;
} }
&.input-md { &.input-md {
@apply h-9; @apply h-9
@apply px-3; px-3
@apply text-sm; text-sm;
} }
&.input-sm { &.input-sm {
@apply h-7; @apply h-7
@apply px-3; px-3
@apply text-xs; text-xs;
} }
&.input-xs { &.input-xs {
@apply h-6; @apply h-6
@apply px-2; px-2
@apply text-xs; text-xs;
} }
} }

20
packages/components/src/components/menu/MenuItem.vue
View File

@ -78,19 +78,19 @@ function handleClick() {
} }
.menu-item-title { .menu-item-title {
@apply transition-all; @apply transition-all
@apply text-base; text-base
@apply flex; flex
@apply select-none; select-none
@apply relative; relative
@apply p-2; p-2
@apply font-normal; font-normal
@apply rounded-base; rounded-base;
&:hover, &:hover,
&.active { &.active {
@apply bg-gray-100; @apply bg-gray-100
@apply font-medium; font-medium;
} }
&.active::after { &.active::after {

67
packages/components/src/components/modal/Modal.vue
View File

@ -46,7 +46,7 @@ function handleClose() {
} }
</script> </script>
<template> <template>
<Teleport to="body" :disabled="true"> <Teleport :disabled="true" to="body">
<div <div
v-show="rootVisible" v-show="rootVisible"
:class="wrapperClasses" :class="wrapperClasses"
@ -106,49 +106,55 @@ function handleClose() {
<style lang="scss"> <style lang="scss">
.modal-wrapper { .modal-wrapper {
@apply fixed; @apply fixed
@apply top-0 left-0; top-0
@apply h-full w-full; left-0
@apply flex flex-row; h-full
@apply items-center justify-center; w-full
flex
flex-row
items-center
justify-center;
z-index: 999; z-index: 999;
.modal-layer { .modal-layer {
@apply flex-none; @apply flex-none
@apply absolute; absolute
@apply top-0 left-0; top-0
@apply h-full w-full; left-0
@apply transition-opacity; h-full
@apply bg-gray-500; w-full
@apply bg-opacity-75; transition-opacity
bg-gray-500
bg-opacity-75;
} }
.modal-content { .modal-content {
@apply flex; @apply flex
@apply flex-col; flex-col
@apply relative; relative
@apply bg-white; bg-white
@apply items-stretch; items-stretch
@apply shadow-xl; shadow-xl
@apply rounded-base; rounded-base;
width: calc(100vw - 20px); width: calc(100vw - 20px);
max-height: calc(100vh - 20px); max-height: calc(100vh - 20px);
.modal-header { .modal-header {
@apply flex; @apply flex
@apply justify-between; justify-between
@apply border-b; border-b;
.modal-header-title { .modal-header-title {
@apply self-center; @apply self-center
@apply text-base; text-base
@apply font-bold; font-bold;
padding: 12px 16px; padding: 12px 16px;
} }
.modal-header-actions { .modal-header-actions {
@apply self-center; @apply self-center
@apply h-full; h-full;
.modal-header-action { .modal-header-action {
@apply cursor-pointer; @apply cursor-pointer;
padding: 12px 16px; padding: 12px 16px;
@ -161,8 +167,9 @@ function handleClose() {
} }
.modal-body { .modal-body {
@apply overflow-y-auto overflow-x-hidden; @apply overflow-y-auto
@apply flex-1; overflow-x-hidden
flex-1;
word-wrap: break-word; word-wrap: break-word;
padding: 12px 16px; padding: 12px 16px;
} }

20
packages/components/src/components/radio/Radio.vue
View File

@ -49,21 +49,21 @@ function handleChange(e: Event) {
</template> </template>
<style lang="scss"> <style lang="scss">
.radio-wrapper { .radio-wrapper {
@apply flex; @apply flex
@apply items-center; items-center
@apply box-border; box-border
@apply flex-grow-0; flex-grow-0;
.radio-inner { .radio-inner {
@apply self-center; @apply self-center
@apply relative; relative;
} }
.radio-label { .radio-label {
@apply flex; @apply flex
@apply self-center; self-center
@apply items-start; items-start
@apply ml-3; ml-3;
} }
} }
</style> </style>

54
packages/components/src/components/select/Select.vue
View File

@ -48,21 +48,21 @@ function handleChange(e: Event) {
</template> </template>
<style lang="scss"> <style lang="scss">
.select-wrapper { .select-wrapper {
@apply box-border; @apply box-border
@apply relative; relative
@apply w-full; w-full
@apply inline-flex; inline-flex;
select { select {
@apply outline-0; @apply outline-0
@apply bg-white; bg-white
@apply antialiased; antialiased
@apply w-full; w-full
@apply text-black; text-black
@apply block; block
@apply transition-all; transition-all
@apply appearance-none; appearance-none
@apply rounded-base; rounded-base;
border: 1px solid #ced4da; border: 1px solid #ced4da;
&:active { &:active {
@ -74,32 +74,32 @@ function handleChange(e: Event) {
} }
&:disabled { &:disabled {
@apply opacity-50; @apply opacity-50
@apply cursor-not-allowed; cursor-not-allowed;
} }
&.select-lg { &.select-lg {
@apply h-11; @apply h-11
@apply px-4; px-4
@apply text-lg; text-lg;
} }
&.select-md { &.select-md {
@apply h-9; @apply h-9
@apply px-3; px-3
@apply text-sm; text-sm;
} }
&.select-sm { &.select-sm {
@apply h-7; @apply h-7
@apply px-3; px-3
@apply text-xs; text-xs;
} }
&.select-xs { &.select-xs {
@apply h-6; @apply h-6
@apply px-2; px-2
@apply text-xs; text-xs;
} }
} }
} }

4
packages/components/src/components/space/Space.vue
View File

@ -35,8 +35,8 @@ const wrapperClasses = computed(() => {
</template> </template>
<style lang="scss"> <style lang="scss">
.space-wrapper { .space-wrapper {
@apply inline-flex; @apply inline-flex
@apply box-border; box-border;
&.space-direction-row { &.space-direction-row {
@apply flex-row; @apply flex-row;

52
packages/components/src/components/switch/Switch.vue
View File

@ -41,36 +41,36 @@ const handleChange = () => {
</template> </template>
<style lang="scss"> <style lang="scss">
.switch-wrapper { .switch-wrapper {
@apply inline-flex; @apply inline-flex
@apply box-border; box-border;
.switch-inner { .switch-inner {
@apply relative; @apply relative
@apply inline-flex; inline-flex
@apply flex-shrink-0; flex-shrink-0
@apply h-6; h-6
@apply w-11; w-11
@apply border-2; border-2
@apply border-transparent; border-transparent
@apply rounded-full; rounded-full
@apply cursor-pointer; cursor-pointer
@apply transition-colors; transition-colors
@apply ease-in-out; ease-in-out
@apply duration-200; duration-200;
.switch-indicator { .switch-indicator {
@apply pointer-events-none; @apply pointer-events-none
@apply inline-block; inline-block
@apply h-5; h-5
@apply w-5; w-5
@apply rounded-full; rounded-full
@apply bg-white; bg-white
@apply shadow; shadow
@apply transform; transform
@apply ring-0; ring-0
@apply transition; transition
@apply ease-in-out; ease-in-out
@apply duration-200; duration-200;
} }
} }
} }

72
packages/components/src/components/tabs/Tabbar.vue
View File

@ -62,19 +62,19 @@ const handleChange = (id: number | string) => {
<style lang="scss"> <style lang="scss">
.tabbar-wrapper { .tabbar-wrapper {
.tabbar-items { .tabbar-items {
@apply flex; @apply flex
@apply items-center; items-center
@apply flex-row; flex-row;
} }
.tabbar-item { .tabbar-item {
@apply flex; @apply flex
@apply cursor-pointer; cursor-pointer
@apply self-center; self-center
@apply transition-all; transition-all
@apply text-base; text-base
@apply justify-center; justify-center
@apply gap-2; gap-2;
.tabbar-item-label, .tabbar-item-label,
.tabbar-item-icon { .tabbar-item-icon {
@ -92,16 +92,16 @@ const handleChange = (id: number | string) => {
} }
.tabbar-item { .tabbar-item {
@apply h-10; @apply h-10
@apply px-5; px-5
@apply py-1; py-1
@apply border-b-gray-100; border-b-gray-100;
border-bottom-width: 2px; border-bottom-width: 2px;
&.tabbar-item-active { &.tabbar-item-active {
@apply text-secondary; @apply text-secondary
@apply border-b-secondary; border-b-secondary;
} }
} }
} }
@ -113,15 +113,15 @@ const handleChange = (id: number | string) => {
} }
.tabbar-item { .tabbar-item {
@apply h-10; @apply h-10
@apply px-9; px-9
@apply py-1; py-1
@apply opacity-70; opacity-70
@apply rounded-base; rounded-base;
&.tabbar-item-active { &.tabbar-item-active {
@apply bg-gray-100; @apply bg-gray-100
@apply opacity-100; opacity-100;
} }
&:hover { &:hover {
@ -131,26 +131,26 @@ const handleChange = (id: number | string) => {
} }
&.tabbar-outline { &.tabbar-outline {
@apply p-1; @apply p-1
@apply bg-gray-100; bg-gray-100
@apply rounded-base; rounded-base;
.tabbar-items { .tabbar-items {
@apply gap-1; @apply gap-1
justify-content: flex-start; justify-start;
} }
.tabbar-item { .tabbar-item {
@apply h-10; @apply h-10
@apply px-9; px-9
@apply py-1; py-1
@apply opacity-70; opacity-70
@apply rounded-base; rounded-base;
&.tabbar-item-active { &.tabbar-item-active {
@apply bg-white; @apply bg-white
@apply opacity-100; opacity-100
@apply shadow-sm; shadow-sm;
} }
&:hover { &:hover {

37
packages/components/src/components/tag/Tag.vue
View File

@ -33,31 +33,36 @@ const classes = computed(() => {
</template> </template>
<style lang="scss"> <style lang="scss">
.tag-wrapper { .tag-wrapper {
@apply rounded-base; @apply rounded-base
@apply inline-flex; inline-flex
@apply flex-shrink-0; flex-shrink-0
@apply flex-wrap; flex-wrap
@apply box-border; box-border
@apply cursor-pointer; cursor-pointer
@apply text-center; text-center
@apply items-center; items-center
@apply justify-center; justify-center
@apply w-auto; w-auto
@apply align-middle; align-middle
@apply h-5; h-5
@apply text-xs; text-xs
@apply border border-solid; border
border-solid;
&.tag-default { &.tag-default {
border: 1px solid #d9d9d9; border: 1px solid #d9d9d9;
} }
&.tag-primary { &.tag-primary {
@apply text-white bg-primary border-primary; @apply text-white
bg-primary
border-primary;
} }
&.tag-secondary { &.tag-secondary {
@apply text-white bg-secondary border-secondary; @apply text-white
bg-secondary
border-secondary;
} }
&.tag-danger { &.tag-danger {

35
packages/components/src/components/textarea/Textarea.vue
View File

@ -37,23 +37,22 @@ function handleInput(e: Event) {
</template> </template>
<style lang="scss"> <style lang="scss">
.textarea-wrapper { .textarea-wrapper {
@apply box-border; @apply box-border
@apply relative; relative
@apply w-full; w-full
@apply inline-flex; inline-flex;
textarea { textarea {
@apply outline-0; @apply outline-0
@apply bg-white; bg-white
@apply antialiased; antialiased
@apply w-full; w-full
@apply text-black; text-black
@apply block; block
@apply transition-all; transition-all
@apply appearance-none; appearance-none
p-3
@apply p-3; text-sm
@apply text-sm; rounded-base;
@apply rounded-base;
border: 1px solid #ced4da; border: 1px solid #ced4da;
&:active { &:active {
@ -65,8 +64,8 @@ function handleInput(e: Event) {
} }
&:disabled { &:disabled {
@apply opacity-50; @apply opacity-50
@apply cursor-not-allowed; cursor-not-allowed;
} }
} }
} }