Skip to content

Commit b0b67e5

Browse files
author
hikki
committed
7.5
1 parent 03f318c commit b0b67e5

File tree

2 files changed

+78
-3
lines changed

2 files changed

+78
-3
lines changed

‎resources/assets/component.css

Lines changed: 64 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484
font: inherit;
8585
align-items: center;
8686
}
87-
.dlp-button,.dlp-button:disabled,.dlp-button:hover{
87+
.dlp-button,.dlp-button-red,.dlp-button-green,.dlp-button-blue,.dlp-button-yellow{
8888
background: linear-gradient(180deg,#303030 0,#939393 49%,#000 59%,#3e3e3e 100%);
8989
border: solid 1px #262626;
9090
box-shadow: inset 0 3px 9px #232323, inset 0 3px 12px #323232, inset 0 15px 9px #4a4a4a, inset 0 3px 3px 0 #8b8b8b, 0 1px 3px rgb(16 16 16 / 66%);
@@ -99,15 +99,76 @@
9999
color: #fff;
100100
}
101101
.dlp-button:hover{
102-
background: linear-gradient(180deg,#222222 0,#ededed 49%,#242424 59%,#3e3e3e 100%);
102+
background: linear-gradient(180deg,#222222 0,#444 49%,#242424 59%,#3e3e3e 100%);
103103
}
104104
.dlp-button:disabled{
105105
cursor: not-allowed;
106106
background: #545454;
107107
border: solid 1px #262626;
108-
box-shadow: inset 0 1px 6px #282828;
108+
box-shadow: inset 0 2px 5px #141414, inset -2px 0 3px #444444, 0 0 3px #141414;
109109
color: #ccc;
110110
}
111+
.dlp-button-red{
112+
background: linear-gradient(180deg,#bf1010 0,#cb3636 49%,#500000 59%,#ff6f6f 100%);
113+
border: 1px solid #262626;
114+
box-shadow: inset 0 3px 9px #914242, inset 0 3px 12px #7e2020, inset 0 15px 9px #7c1212, inset 0 3px 3px 0 #5a0404, 0 1px 3px rgb(16 16 16 / 66%);
115+
}
116+
.dlp-button-red:hover{
117+
background: linear-gradient(180deg,#cb0404 0,#b30000 49%,#500000 100%);
118+
}
119+
.dlp-button-red:disabled{
120+
cursor: not-allowed;
121+
background: #b32a2a;
122+
border: solid 1px #262626;
123+
box-shadow: inset 0 2px 5px #3e0303, inset 0 0 3px #320202, 0 0 3px #a70000;
124+
color: #ccc;
125+
}
126+
.dlp-button-green{
127+
background: linear-gradient(180deg,#61d76d 0,#005c10 59%,#00ff18 100%);
128+
border: 1px solid #00740b;
129+
box-shadow: inset 0 3px 9px #148b1f, inset 0 3px 12px #23a92f, inset 0 15px 9px #328f3b, inset 0 3px 3px 0 #18e32b, 0 1px 3px rgb(16 16 16 / 66%);
130+
}
131+
.dlp-button-green:hover{
132+
background: linear-gradient(180deg,#f95e5e 0,#cb3636 49%,#dd3434 59%,#d95454 100%);
133+
}
134+
.dlp-button-green:disabled{
135+
cursor: not-allowed;
136+
background: #00c57c;
137+
border: solid 1px #006641;
138+
box-shadow: inset 0 2px 5px #006a39, inset 0 0 3px #006235, 0 0 3px #00fdc2;
139+
color: #f1f1f1;
140+
}
141+
.dlp-button-blue{
142+
background: linear-gradient(180deg,#0026e1 0,#0c0a9b 49%,#0004a3 59%,#06004e 100%);
143+
border: 1px solid #00387a;
144+
box-shadow: inset 0 3px 9px #001c83, inset 0 3px 12px #0362d7, inset 0 15px 9px #5276f7, inset 0 3px 3px 0 #616dff, 0 1px 3px rgb(83 141 249 / 66%);
145+
}
146+
.dlp-button-blue:hover{
147+
background: linear-gradient(180deg,#2125bd 0,#1e23b5 49%,#494ed5 59%,#0a0c89 100%);
148+
}
149+
.dlp-button-blue:disabled{
150+
cursor: not-allowed;
151+
background: #1b7adb;
152+
border: solid 1px #006641;
153+
box-shadow: inset 0 2px 5px #00036a, inset 0 0 3px #0300b5, 0 0 3px #636fff;
154+
color: #dfdfdf;
155+
}
156+
.dlp-button-yellow{
157+
background: linear-gradient(180deg,#fcff52 0,#faff00 39%,#c8d518 60%,#b6c31d 100%);
158+
border: 1px solid #d3e100;
159+
box-shadow: inset 0 3px 9px #d6e31d, inset 0 3px 12px #deed19, inset 0 15px 9px #efff00, inset 0 3px 3px 0 #c3e906, 0 1px 3px rgb(192 255 37 / 66%);
160+
color: #00046c;
161+
}
162+
.dlp-button-yellow:hover{
163+
background: linear-gradient(180deg,#eaff40 0,#d0db22 49%,#c2cf13 59%,#ebff04 100%);
164+
}
165+
.dlp-button-yellow:disabled{
166+
cursor: not-allowed;
167+
background: #efff01;
168+
box-shadow: inset 0 2px 5px #cbd70f, inset 0 0 3px #d6ef0a, 0 0 3px #fff938;
169+
color: #b1b4fb;
170+
border: 1px solid #d3e100;
171+
}
111172
.dlp-alert{
112173
z-index: 1000000;
113174
background-color: rgba(0, 0, 0, 0.6);

‎test/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,20 @@
169169
<div id="test5" style="width: 650px;height: 360px;margin: 0 auto"></div>
170170
<div style="margin-top:30px;height: 30px;text-align: center">Linear 列表控件</div>
171171
<div id="test2" style="width: 900px;height: 320px;margin: 0 auto"></div>
172+
173+
<div style="margin-top:30px;height: 30px;text-align: center">css样式组件</div>
174+
<div style="width: 900px;margin: 0 auto;display: flex;justify-content: space-around">
175+
<button class="dlp dlp-button">默 认</button>
176+
<button class="dlp dlp-button" disabled>默认 disabled</button>
177+
<button class="dlp dlp-button-red">红 色</button>
178+
<button class="dlp dlp-button-red" disabled>红色 disabled</button>
179+
<button class="dlp dlp-button-green">绿 色</button>
180+
<button class="dlp dlp-button-green" disabled>绿色 disabled</button>
181+
<button class="dlp dlp-button-blue">蓝 色</button>
182+
<button class="dlp dlp-button-blue" disabled>蓝色 disabled</button>
183+
<button class="dlp dlp-button-yellow">黄 色</button>
184+
<button class="dlp dlp-button-yellow" disabled>黄色 disabled</button>
185+
</div>
172186
</div>
173187
</body>
174188
<script src="china.js"></script>

0 commit comments

Comments
 (0)