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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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