Skip to content

Commit 2cbb323

Browse files
sfxcodesfxcode
committed
feat(unocss): ues wind4 preset
1 parent 27f1243 commit 2cbb323

26 files changed

+2027
-1918
lines changed

‎app/App.scss

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
@use "assets/sass/sidebar";
2-
@use "assets/sass/form";
3-
@use "assets/sass/main";
4-
5-
6-
1+
@use 'assets/sass/sidebar';
2+
@use 'assets/sass/form';
3+
@use 'assets/sass/main';

‎app/assets/sass/form.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.p-formkit-data-view {
22
.formkit-form {
33
.formkit-outer {
4-
padding-bottom: 0.8rem;
4+
padding-bottom: 0.8rem;
55
}
66

77
&.form-horizontal {
@@ -12,4 +12,4 @@
1212
margin: 0;
1313
}
1414
}
15-
}
15+
}

‎app/assets/sass/main.scss

Lines changed: 44 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,45 @@ html {
88
font-size: 16px;
99
}
1010

11+
body {
12+
margin: 1rem;
13+
}
14+
15+
// Header
16+
h1,
17+
h2,
18+
h3,
19+
h4,
20+
h5,
21+
h6 {
22+
font-weight: 500;
23+
margin: 1.5rem 0 1rem 0;
24+
line-height: 1.2;
25+
&:first-child {
26+
margin-top: 0;
27+
}
28+
}
29+
h1 {
30+
font-size: 1.5rem;
31+
margin-bottom: 0;
32+
line-height: 1;
33+
}
34+
h2 {
35+
font-size: 1.25rem;
36+
}
37+
h3 {
38+
font-size: 1.25rem;
39+
}
40+
h4 {
41+
font-size: 1.125rem;
42+
}
43+
h5 {
44+
font-size: 1rem;
45+
}
46+
h6 {
47+
font-size: 0.875rem;
48+
}
49+
1150
#workspace {
1251
padding-left: 200px;
1352
a {
@@ -40,16 +79,17 @@ html {
4079
color: var(--p-text-color);
4180
margin-bottom: 1rem;
4281
border-radius: $borderRadius;
43-
box-shadow: 0 3px 5px rgba(0,0,0,.02), 0 0 2px rgba(0,0,0,.05), 0 1px 4px rgba(0,0,0,.08) !important;
82+
box-shadow:
83+
0 3px 5px rgba(0, 0, 0, 0.02),
84+
0 0 2px rgba(0, 0, 0, 0.05),
85+
0 1px 4px rgba(0, 0, 0, 0.08) !important;
4486

4587
h2 {
4688
color: var(--p-primary-color);
4789
}
48-
4990
}
5091

51-
52-
.p-tiptap {
92+
.p-tiptap {
5393
strong {
5494
color: var(--p-primary-color);
5595
}

‎app/assets/sass/sidebar.scss

Lines changed: 14 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,19 @@
1-
$primary-color: var(--p-primary-color) ;
2-
$base-bg: #2a2a2e ;
3-
4-
$item-color: #fff ;
5-
6-
$item-active-color: null ;
7-
$item-active-bg: null ;
8-
$item-active-line-color: $primary-color ;
9-
10-
$item-open-color: #fff ;
11-
$item-open-bg: $primary-color ;
12-
13-
$item-hover-color: null ;
14-
$item-hover-bg: rgba(darken($base-bg, 5%), 0.5) ;
15-
16-
$icon-color: null ;
17-
$icon-bg: darken($base-bg, 2%) ;
18-
19-
$icon-active-color: null ;
20-
$icon-active-bg: null ;
21-
22-
$icon-open-color: null ;
23-
$icon-open-bg: $item-open-bg ;
24-
25-
$mobile-item-color: #fff ;
26-
$mobile-item-bg: $primary-color ;
27-
$mobile-icon-color: $mobile-item-color ;
28-
$mobile-icon-bg: $mobile-item-bg ;
29-
30-
$dropdown-color: null ;
31-
$dropdown-bg: lighten($base-bg, 5%) ;
32-
33-
$header-item-color: rgba($item-color, 0.7) ;
34-
35-
$toggle-btn-color: $primary-color ;
36-
$toggle-btn-bg: darken($base-bg, 5%) ;
37-
38-
$item-font-size: 14px ;
39-
$item-line-height: 18px ;
40-
$item-padding: 8px 14px ;
41-
$icon-height: 32px ;
42-
$icon-width: 32px ;
43-
44-
@use "vue-sidebar-menu/src/scss/vue-sidebar-menu.scss";
1+
@use 'sass:color';
2+
@use 'vue-sidebar-menu/src/scss/vue-sidebar-menu.scss' with (
3+
$primary-color: var(--p-primary-color),
4+
$base-bg: #2a2a2e,
5+
$item-color: #fff,
6+
$item-active-color: var(--p-primary-color),
7+
$item-font-size: 14px,
8+
$item-line-height: 18px,
9+
$item-padding: 8px 14px,
10+
$icon-height: 32px,
11+
$icon-width: 32px,
12+
);
4513

4614
.v-sidebar-menu hr {
4715
margin-bottom: 8px;
48-
background-color: $item-hover-bg;
16+
background-color: rgba(color.adjust(#2a2a2e, $lightness: -5%), 0.5);
4917
border: 0 none;
5018
height: 0.1rem;
51-
}
19+
}

‎app/components/AdvertiseBox.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ defineProps({
1717

1818
<template>
1919
<div class="mb-4 px-5">
20-
<span class="p-3 shadow-2 mb-1 inline-block" style="border-radius: 10px">
20+
<span class="shadow-2 mb-1 inline-block p-3" style="border-radius: 10px">
2121
<span :class="`text-2xl text-${color} i-${icon}`" />
2222
</span>
2323
<div :class="`mb-3 text-2xl text-${color}`">

‎app/components/BaseButton.vue

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ defineProps({
2020
<template>
2121
<button
2222
:disabled="disabled"
23-
class="btn text-red-500"
23+
class="text-red-500 btn"
2424
:class="{
2525
[`btn-color-${color}`]: color,
2626
[`btn-size-${size}`]: size,
@@ -32,44 +32,44 @@ defineProps({
3232

3333
<style lang="pcss" scoped>
3434
.btn {
35-
border-radius: 4px;
36-
padding: 4px 8px;
37-
background: #e4e4e4;
38-
cursor: pointer;
35+
border-radius: 4px;
36+
padding: 4px 8px;
37+
background: #e4e4e4;
38+
cursor: pointer;
3939
}
4040
4141
.btn:hover {
42-
background: #f1f1f1;
42+
background: #f1f1f1;
4343
}
4444
4545
.btn[disabled] {
46-
opacity: 0.5;
47-
pointer-events: none;
46+
opacity: 0.5;
47+
pointer-events: none;
4848
}
4949
5050
.btn-color-green {
51-
background: #94ffc9;
51+
background: #94ffc9;
5252
}
5353
5454
.btn-color-green:hover {
55-
background: #acffd6;
55+
background: #acffd6;
5656
}
5757
5858
.btn-color-red {
59-
background: #ff9494;
59+
background: #ff9494;
6060
}
6161
6262
.btn-color-red:hover {
63-
background: #ffa8a8;
63+
background: #ffa8a8;
6464
}
6565
6666
.btn-size-big {
67-
font-size: 16px;
68-
padding: 8px 16px;
67+
font-size: 16px;
68+
padding: 8px 16px;
6969
}
7070
7171
.btn-size-small {
72-
font-size: 12px;
73-
padding: 2px 4px;
72+
font-size: 12px;
73+
padding: 2px 4px;
7474
}
7575
</style>

‎app/components/PageView.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ const pageview = data.value?.pageview
55
</script>
66

77
<template>
8-
<div class="text-gray:80 text-2xl">
9-
<span font-500 text-gray>{{ pageview }}</span>
8+
<div class="text-2xl text-gray:80">
9+
<span text-gray font-500>{{ pageview }}</span>
1010
page views since
1111
<span text-gray>{{ time }}</span>
1212
</div>

‎app/components/ToDo.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ defineProps({
1515
{{ text }}
1616
</div>
1717
</div>
18-
<div class="pt-4 pl-1">
18+
<div class="pl-1 pt-4">
1919
<slot />
2020
</div>
2121
</div>

‎app/components/app/AppColorMode.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@ watchEffect(() => mode.value = state.value)
3232

3333
<style>
3434
html.cafe {
35-
filter: sepia(0.9) hue-rotate(315deg) brightness(0.9);
35+
filter: sepia(0.9) hue-rotate(315deg) brightness(0.9);
3636
}
3737
html.contrast {
38-
filter: contrast(2);
38+
filter: contrast(2);
3939
}
4040
</style>

‎app/components/app/AppFooter.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ const config = useRuntimeConfig()
33
</script>
44

55
<template>
6-
<div class="mt-4 layout-footer">
7-
<span class="font-medium ml-2">{{ config.public.APP_NAME }} - {{ config.public.APP_VERSION }}</span>
6+
<div class="layout-footer mt-4">
7+
<span class="ml-2 font-medium">{{ config.public.APP_NAME }} - {{ config.public.APP_VERSION }}</span>
88
</div>
99
</template>
1010

0 commit comments

Comments
 (0)