Skip to content

Commit 40d0aa1

Browse files
committed
ui: optimize custom button tag style
1 parent a163a78 commit 40d0aa1

File tree

3 files changed

+48
-50
lines changed

3 files changed

+48
-50
lines changed

layout/_partial/post/reward-author.ejs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="reward-author-container border-box flex-center">
2-
<button class="border-box tooltip-img"
2+
<button class="keep-button border-box tooltip-img"
33
data-tooltip-img-url="<%= theme?.post?.reward?.img_link %>"
44
data-tooltip-img-trigger="hover"
55
data-tooltip-img-style="top: -8px;"

source/css/common/basic.styl

-49
Original file line numberDiff line numberDiff line change
@@ -187,55 +187,6 @@ img {
187187
}
188188

189189

190-
// ======================================================================
191-
// button
192-
// ======================================================================
193-
button {
194-
position relative
195-
box-sizing border-box
196-
margin 0
197-
padding 0.6rem 1rem
198-
color var(--text-color-3)
199-
font-size 1rem
200-
background var(--background-color-1)
201-
border none
202-
border-radius 0.4rem
203-
box-shadow 0.1rem 0.2rem 0.4rem var(--shadow-color)
204-
cursor pointer
205-
206-
i {
207-
color var(--text-color-3)
208-
}
209-
210-
211-
&:hover {
212-
color var(--background-color-1)
213-
background var(--primary-color)
214-
215-
i {
216-
color var(--background-color-1)
217-
}
218-
}
219-
220-
221-
&.size-small {
222-
padding 0.5rem 0.8rem
223-
font-size 0.8rem
224-
border-radius 0.3rem
225-
box-shadow 0.1rem 0.1rem 0.3rem var(--shadow-color)
226-
}
227-
228-
229-
&.size-large {
230-
width 100%
231-
padding 1rem
232-
font-size 1.1rem
233-
border-radius 0.5rem
234-
box-shadow 0.1rem 0.2rem 0.5rem var(--shadow-color)
235-
}
236-
}
237-
238-
239190
// ======================================================================
240191
// flex center
241192
// ======================================================================

source/css/common/tags/keep-button.styl

+47
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,51 @@
11
.keep-button {
2+
position relative
3+
box-sizing border-box
4+
margin 0.3rem 0.6rem
5+
padding 0.6rem 1rem
6+
color var(--text-color-3)
7+
font-size 1rem
8+
background var(--background-color-1)
9+
border none
10+
border-radius 0.4rem
11+
box-shadow 0.1rem 0.2rem 0.4rem var(--shadow-color)
12+
cursor pointer
13+
14+
15+
i {
16+
color var(--text-color-3)
17+
}
18+
19+
20+
&:hover {
21+
color var(--background-color-1)
22+
background var(--primary-color)
23+
24+
i {
25+
color var(--background-color-1)
26+
}
27+
}
28+
29+
30+
&.size-small {
31+
margin 0.2rem 0.4rem
32+
padding 0.5rem 0.8rem
33+
font-size 0.8rem
34+
border-radius 0.3rem
35+
box-shadow 0.1rem 0.1rem 0.3rem var(--shadow-color)
36+
}
37+
38+
39+
&.size-large {
40+
width 100%
41+
margin 0.6rem 0
42+
padding 1rem
43+
font-size 1.1rem
44+
border-radius 0.5rem
45+
box-shadow 0.1rem 0.2rem 0.5rem var(--shadow-color)
46+
}
47+
48+
249
&.color-primary {
350
color var(--note-primary-color)
451
background-color var(--note-primary-background-color)

0 commit comments

Comments
 (0)