在之前的个人项目中，是网上找的的Scss方案来仿制MacOS系统的TrafficLight，也就是那个最大化、最小化、关闭按钮。
后来觉得使用Element-Plus组件和网页端过于相似，所以最近在转TailwindCss+Ant Design的方案，不得不说TailwindCss确实香，之前一大坨的Scss方案使用TailwindCss之后简洁不少。
原方案：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
| <template>
...
<div class="traffic-lights focus">
<button class="traffic-light traffic-light-minimize" id="minimize" @click="minimize">
<svg width="7" height="2" fill="none" xmlns="http://www.w3.org/2000/svg">
<path stroke="#000" stroke-width="1.2" stroke-linecap="round" d="M.61.703h5.8" />
</svg>
</button>
<button class="traffic-light traffic-light-maximize" id="maximize" @click="maximize">
<svg width="8" height="7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path stroke="#000" stroke-width="1.2" stroke-linecap="round" d="M1.1 3.4h5.8M3.9 6.4V.6" />
</svg>
</button>
<button class="traffic-light traffic-light-close" id="close" @click="close">
<svg width="7" height="7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
stroke="#000"
stroke-width="1.2"
stroke-linecap="round"
d="M1.182 5.99L5.99 1.182M5.99 6.132L1.182 1.323"
/>
</svg>
</button>
</div>
...
<template>
<style lang="scss">
$close-red: #ff6159;
$close-red-active: #bf4942;
$close-red-icon: #740000bf;
$close-red-icon-active: #190000;
$minimize-yellow: #ffbd2e;
$minimize-yellow-active: #bf8e22;
$minimize-yellow-icon: #995700;
$minimize-yellow-icon-active: #592800;
$maximize-green: #28c941;
$maximize-green-active: #1d9730;
$maximize-green-icon: #006500;
$maximize-green-icon-active: #003200;
$disabled-gray: #ddd;
.traffic-lights {
position: absolute;
top: 6px;
right: 10px;
-webkit-app-region: no-drag;
// background-color: $headerbgcolor;
&.focus,
&:hover,
&:active {
> .traffic-light-close {
background-color: $close-red;
&:active:hover {
background-color: $close-red-active;
}
}
> .traffic-light-minimize {
background-color: $minimize-yellow;
&:active:hover {
background-color: $minimize-yellow-active;
}
}
> .traffic-light-maximize {
background-color: $maximize-green;
&:active:hover {
background-color: $maximize-green-active;
}
}
}
&:hover,
&:active {
> .traffic-light {
&:before,
&:after,
svg {
visibility: visible;
}
}
}
}
.traffic-light {
border-radius: 100%;
padding: 0;
height: 12px;
width: 12px;
border: 0.8px solid rgba(0, 0, 0, 0.1);
box-sizing: border-box;
margin-top: 8px;
margin-right: 10px;
background-color: $disabled-gray;
position: relative;
outline: none;
> svg {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
visibility: hidden;
}
&-close {
svg path {
stroke: $close-red-icon;
}
&:active:hover svg path {
stroke: $close-red-icon-active;
}
}
&-minimize {
svg {
transform: translate(-50%, -30%);
> path {
stroke: $close-red-icon;
}
}
&:active:hover svg path {
stroke: $close-red-icon-active;
}
}
&-maximize {
svg path {
stroke: $maximize-green-icon;
}
&:active:hover svg path {
stroke: $maximize-green-icon-active;
}
}
}
</style>
|
现方案
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
| <template>
<div
id="traffic_light"
class="group absolute top-5 right-4 -translate-y-1/2 flex flex-row-reverse w-3 h-3 rounded-xl items-center"
>
<button
class="w-3 h-3 bg-traffic_close ring-0.5 ring-inset ring-opacity-80 ring-traffic_close_ring rounded-full mr-0 active:bg-red-600"
style="-webkit-app-region: no-drag"
@click="close"
>
<svg
width="12"
height="12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="opacity-0 group-hover:opacity-100"
>
<path
stroke="#740000bf"
stroke-width="1.2"
stroke-linecap="round"
d="m3.596,8.333l4.808,-4.808m0,4.95l-4.808,-4.809"
/>
</svg>
</button>
<button
class="w-3 h-3 bg-traffic_max ring-0.5 ring-inset ring-opacity-80 ring-traffic_max_ring rounded-full mr-2 active:bg-green-600"
style="-webkit-app-region: no-drag"
@click="maximize"
>
<svg
width="12"
height="12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="opacity-0 group-hover:opacity-100"
>
<path
stroke="#006500"
stroke-width="1.2"
stroke-linecap="round"
d="m3.1,5.9l5.8,0m-3,3l0,-5.8"
/>
</svg>
</button>
<button
class="w-3 h-3 bg-traffic_min ring-0.5 ring-inset ring-opacity-80 ring-traffic_min_ring rounded-full mr-2 active:bg-yellow-600"
style="-webkit-app-region: no-drag"
@click="minimize"
>
<svg
width="12"
height="12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="opacity-0 group-hover:opacity-100"
>
<path stroke="#995700" stroke-width="1.2" stroke-linecap="round" d="m3.1,6l5.8,0" />
</svg>
</button>
</div>
</template>
|
在tailwind.config.js中自定义颜色
1
2
3
4
5
6
7
8
9
| traffic_close: '#ff5f57',
traffic_close_ring: '#df3d35',
traffic_close_active: '#190000',
traffic_min: '#febc2e',
traffic_min_ring: '#de9b12',
traffic_min_active: '#592800',
traffic_max: '#26c83f',
traffic_max_ring: '#18a71f',
traffic_max_active: '#003200',
|
