little-dizzy 1.1.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/little-dizzy.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { createElementBlock as
|
|
2
|
-
const
|
|
1
|
+
import { createElementBlock as n, openBlock as s, normalizeClass as u, renderSlot as r, createCommentVNode as i, createElementVNode as l, toDisplayString as f } from "vue";
|
|
2
|
+
const p = (t, e) => {
|
|
3
3
|
const o = t.__vccOpts || t;
|
|
4
4
|
for (const [a, d] of e)
|
|
5
5
|
o[a] = d;
|
|
6
6
|
return o;
|
|
7
|
-
},
|
|
7
|
+
}, g = ["disabled"], B = {
|
|
8
8
|
__name: "Button",
|
|
9
9
|
props: {
|
|
10
10
|
// 按钮类型
|
|
@@ -32,7 +32,7 @@ const m = (t, e) => {
|
|
|
32
32
|
},
|
|
33
33
|
emits: ["click"],
|
|
34
34
|
setup(t, { emit: e }) {
|
|
35
|
-
return (o, a) => (
|
|
35
|
+
return (o, a) => (s(), n("button", {
|
|
36
36
|
class: u(["btn", [
|
|
37
37
|
`btn-${t.type}`,
|
|
38
38
|
`btn-${t.size}`,
|
|
@@ -42,19 +42,19 @@ const m = (t, e) => {
|
|
|
42
42
|
disabled: t.disabled,
|
|
43
43
|
onClick: a[0] || (a[0] = (d) => o.$emit("click", d))
|
|
44
44
|
}, [
|
|
45
|
-
|
|
46
|
-
], 10,
|
|
45
|
+
r(o.$slots, "default", {}, void 0, !0)
|
|
46
|
+
], 10, g));
|
|
47
47
|
}
|
|
48
|
-
},
|
|
48
|
+
}, k = /* @__PURE__ */ p(B, [["__scopeId", "data-v-75f082b2"]]), $ = {
|
|
49
49
|
key: 0,
|
|
50
50
|
class: "card-header"
|
|
51
|
-
},
|
|
51
|
+
}, z = {
|
|
52
52
|
key: 0,
|
|
53
53
|
class: "card-header-title"
|
|
54
|
-
},
|
|
54
|
+
}, w = { class: "card-body" }, S = {
|
|
55
55
|
key: 1,
|
|
56
56
|
class: "card-footer"
|
|
57
|
-
},
|
|
57
|
+
}, _ = {
|
|
58
58
|
__name: "Card",
|
|
59
59
|
props: {
|
|
60
60
|
// 卡片标题
|
|
@@ -69,31 +69,31 @@ const m = (t, e) => {
|
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
71
|
setup(t) {
|
|
72
|
-
return (e, o) => (
|
|
72
|
+
return (e, o) => (s(), n("div", {
|
|
73
73
|
class: u(["card", { "card-shadow": t.shadow }])
|
|
74
74
|
}, [
|
|
75
|
-
e.$slots.header || t.title ? (
|
|
76
|
-
t.title ? (
|
|
77
|
-
|
|
78
|
-
])) :
|
|
79
|
-
l("div",
|
|
80
|
-
|
|
75
|
+
e.$slots.header || t.title ? (s(), n("div", $, [
|
|
76
|
+
t.title ? (s(), n("h3", z, f(t.title), 1)) : i("", !0),
|
|
77
|
+
r(e.$slots, "header", {}, void 0, !0)
|
|
78
|
+
])) : i("", !0),
|
|
79
|
+
l("div", w, [
|
|
80
|
+
r(e.$slots, "default", {}, void 0, !0)
|
|
81
81
|
]),
|
|
82
|
-
e.$slots.footer ? (
|
|
83
|
-
|
|
84
|
-
])) :
|
|
82
|
+
e.$slots.footer ? (s(), n("div", S, [
|
|
83
|
+
r(e.$slots, "footer", {}, void 0, !0)
|
|
84
|
+
])) : i("", !0)
|
|
85
85
|
], 2));
|
|
86
86
|
}
|
|
87
|
-
},
|
|
87
|
+
}, C = /* @__PURE__ */ p(_, [["__scopeId", "data-v-2d83e63a"]]), x = { class: "modal-dialog" }, M = { class: "modal-content" }, E = { class: "modal-header" }, L = {
|
|
88
88
|
key: 0,
|
|
89
89
|
class: "modal-header-title"
|
|
90
|
-
},
|
|
90
|
+
}, D = { class: "modal-body" }, I = {
|
|
91
91
|
key: 0,
|
|
92
92
|
class: "modal-footer"
|
|
93
|
-
},
|
|
93
|
+
}, A = {
|
|
94
94
|
key: 1,
|
|
95
95
|
class: "modal-footer"
|
|
96
|
-
},
|
|
96
|
+
}, F = {
|
|
97
97
|
__name: "Modal",
|
|
98
98
|
props: {
|
|
99
99
|
// 是否显示模态框
|
|
@@ -121,25 +121,25 @@ const m = (t, e) => {
|
|
|
121
121
|
}, v = () => {
|
|
122
122
|
o("confirm");
|
|
123
123
|
};
|
|
124
|
-
return (c,
|
|
124
|
+
return (c, G) => t.visible ? (s(), n("div", {
|
|
125
125
|
key: 0,
|
|
126
126
|
class: u(["modal", { "modal-show": t.visible }])
|
|
127
127
|
}, [
|
|
128
|
-
l("div",
|
|
129
|
-
l("div",
|
|
130
|
-
l("div",
|
|
131
|
-
t.title ? (
|
|
128
|
+
l("div", x, [
|
|
129
|
+
l("div", M, [
|
|
130
|
+
l("div", E, [
|
|
131
|
+
t.title ? (s(), n("h3", L, f(t.title), 1)) : i("", !0),
|
|
132
132
|
l("button", {
|
|
133
133
|
class: "modal-header-close",
|
|
134
134
|
onClick: a
|
|
135
135
|
}, "×")
|
|
136
136
|
]),
|
|
137
|
-
l("div",
|
|
138
|
-
|
|
137
|
+
l("div", D, [
|
|
138
|
+
r(c.$slots, "default", {}, void 0, !0)
|
|
139
139
|
]),
|
|
140
|
-
c.$slots.footer ? (
|
|
141
|
-
|
|
142
|
-
])) : t.showFooter ? (
|
|
140
|
+
c.$slots.footer ? (s(), n("div", I, [
|
|
141
|
+
r(c.$slots, "footer", {}, void 0, !0)
|
|
142
|
+
])) : t.showFooter ? (s(), n("div", A, [
|
|
143
143
|
l("button", {
|
|
144
144
|
class: "btn btn-secondary",
|
|
145
145
|
onClick: d
|
|
@@ -148,12 +148,12 @@ const m = (t, e) => {
|
|
|
148
148
|
class: "btn btn-primary",
|
|
149
149
|
onClick: v
|
|
150
150
|
}, "确定")
|
|
151
|
-
])) :
|
|
151
|
+
])) : i("", !0)
|
|
152
152
|
])
|
|
153
153
|
])
|
|
154
|
-
], 2)) :
|
|
154
|
+
], 2)) : i("", !0);
|
|
155
155
|
}
|
|
156
|
-
},
|
|
156
|
+
}, N = /* @__PURE__ */ p(F, [["__scopeId", "data-v-c66cec30"]]), O = {
|
|
157
157
|
name: "Button",
|
|
158
158
|
type: "vue",
|
|
159
159
|
label: "Button 按钮",
|
|
@@ -167,7 +167,7 @@ const m = (t, e) => {
|
|
|
167
167
|
<script setup>
|
|
168
168
|
import { Button } from 'little-dizzy'
|
|
169
169
|
<\/script>`
|
|
170
|
-
},
|
|
170
|
+
}, V = {
|
|
171
171
|
name: "Card",
|
|
172
172
|
type: "vue",
|
|
173
173
|
label: "Card 卡片",
|
|
@@ -187,7 +187,7 @@ import { Button } from 'little-dizzy'
|
|
|
187
187
|
<script setup>
|
|
188
188
|
import { Card, Button } from 'little-dizzy'
|
|
189
189
|
<\/script>`
|
|
190
|
-
},
|
|
190
|
+
}, j = {
|
|
191
191
|
name: "Modal",
|
|
192
192
|
type: "vue",
|
|
193
193
|
label: "Modal 模态框",
|
|
@@ -212,13 +212,59 @@ import { Modal, Button } from 'little-dizzy'
|
|
|
212
212
|
|
|
213
213
|
const visible = ref(false)
|
|
214
214
|
<\/script>`
|
|
215
|
-
},
|
|
215
|
+
}, H = {
|
|
216
|
+
name: "lzbutton",
|
|
217
|
+
type: "html",
|
|
218
|
+
label: "LzButton 渐变按钮",
|
|
219
|
+
code: `<button class="button">
|
|
220
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24">
|
|
221
|
+
<path d="m18 0 8 12 10-8-4 20H4L0 4l10 8 8-12z"></path>
|
|
222
|
+
</svg>
|
|
223
|
+
Unlock Pro
|
|
224
|
+
</button>
|
|
225
|
+
|
|
226
|
+
<style>
|
|
227
|
+
.button {
|
|
228
|
+
width: fit-content;
|
|
229
|
+
display: flex;
|
|
230
|
+
padding: 1.2em 1rem;
|
|
231
|
+
cursor: pointer;
|
|
232
|
+
gap: 0.4rem;
|
|
233
|
+
font-weight: bold;
|
|
234
|
+
border-radius: 30px;
|
|
235
|
+
text-shadow: 2px 2px 3px rgb(136 0 136 / 50%);
|
|
236
|
+
background: linear-gradient(15deg, #880088, #aa2068, #cc3f47, #de6f3d, #f09f33, #de6f3d, #cc3f47, #aa2068, #880088) no-repeat;
|
|
237
|
+
background-size: 300%;
|
|
238
|
+
color: #fff;
|
|
239
|
+
border: none;
|
|
240
|
+
background-position: left center;
|
|
241
|
+
box-shadow: 0 30px 10px -20px rgba(0,0,0,.2);
|
|
242
|
+
transition: background .3s ease;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.button:hover {
|
|
246
|
+
background-size: 320%;
|
|
247
|
+
background-position: right center;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.button:hover svg {
|
|
251
|
+
fill: #fff;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.button svg {
|
|
255
|
+
width: 23px;
|
|
256
|
+
fill: #f09f33;
|
|
257
|
+
transition: .3s ease;
|
|
258
|
+
}
|
|
259
|
+
</style>`
|
|
260
|
+
}, P = [
|
|
261
|
+
O,
|
|
216
262
|
V,
|
|
217
263
|
j,
|
|
218
|
-
|
|
219
|
-
],
|
|
220
|
-
function
|
|
221
|
-
return !t || !t.name ? (console.warn("[LittleDizzy] Snippet must have a name property"), !1) : (
|
|
264
|
+
H
|
|
265
|
+
], m = /* @__PURE__ */ new Map();
|
|
266
|
+
function b(t) {
|
|
267
|
+
return !t || !t.name ? (console.warn("[LittleDizzy] Snippet must have a name property"), !1) : (m.set(t.name, {
|
|
222
268
|
name: t.name,
|
|
223
269
|
type: t.type || "html",
|
|
224
270
|
label: t.label || t.name,
|
|
@@ -227,43 +273,43 @@ function y(t) {
|
|
|
227
273
|
...t
|
|
228
274
|
}), !0);
|
|
229
275
|
}
|
|
230
|
-
function
|
|
276
|
+
function y(t) {
|
|
231
277
|
if (!Array.isArray(t))
|
|
232
278
|
return console.warn("[LittleDizzy] registerSnippets expects an array"), 0;
|
|
233
279
|
let e = 0;
|
|
234
280
|
return t.forEach((o) => {
|
|
235
|
-
|
|
281
|
+
b(o) && e++;
|
|
236
282
|
}), e;
|
|
237
283
|
}
|
|
238
|
-
function
|
|
284
|
+
function R() {
|
|
239
285
|
const t = {};
|
|
240
|
-
return
|
|
286
|
+
return m.forEach((e, o) => {
|
|
241
287
|
t[o] = e;
|
|
242
288
|
}), t;
|
|
243
289
|
}
|
|
244
|
-
function
|
|
245
|
-
return
|
|
290
|
+
function U(t) {
|
|
291
|
+
return m.get(t);
|
|
246
292
|
}
|
|
247
|
-
|
|
293
|
+
y(P);
|
|
248
294
|
const h = {
|
|
249
|
-
Button:
|
|
250
|
-
Card:
|
|
251
|
-
Modal:
|
|
252
|
-
},
|
|
295
|
+
Button: k,
|
|
296
|
+
Card: C,
|
|
297
|
+
Modal: N
|
|
298
|
+
}, q = (t, e = {}) => {
|
|
253
299
|
Object.entries(h).forEach(([o, a]) => {
|
|
254
300
|
t.component(e.prefix ? `${e.prefix}${o}` : o, a);
|
|
255
301
|
});
|
|
256
|
-
},
|
|
257
|
-
install:
|
|
302
|
+
}, K = R, Q = b, T = y, W = U, X = {
|
|
303
|
+
install: q,
|
|
258
304
|
...h
|
|
259
305
|
};
|
|
260
306
|
export {
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
307
|
+
k as Button,
|
|
308
|
+
C as Card,
|
|
309
|
+
N as Modal,
|
|
264
310
|
X as default,
|
|
265
311
|
W as getSnippet,
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
312
|
+
Q as registerSnippet,
|
|
313
|
+
T as registerSnippets,
|
|
314
|
+
K as snippets
|
|
269
315
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.LittleDizzy={},l.Vue))})(this,(function(l,e){"use strict";const
|
|
1
|
+
(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.LittleDizzy={},l.Vue))})(this,(function(l,e){"use strict";const r=(t,o)=>{const n=t.__vccOpts||t;for(const[a,s]of o)n[a]=s;return n},y=["disabled"],c=r({__name:"Button",props:{type:{type:String,default:"primary",validator:t=>["primary","success","warning","danger","info","secondary"].includes(t)},size:{type:String,default:"medium",validator:t=>["small","medium","large"].includes(t)},block:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:o}){return(n,a)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["btn",[`btn-${t.type}`,`btn-${t.size}`,{"btn-block":t.block},{"btn-disabled":t.disabled}]]),disabled:t.disabled,onClick:a[0]||(a[0]=s=>n.$emit("click",s))},[e.renderSlot(n.$slots,"default",{},void 0,!0)],10,y))}},[["__scopeId","data-v-75f082b2"]]),h={key:0,class:"card-header"},B={key:0,class:"card-header-title"},g={class:"card-body"},k={key:1,class:"card-footer"},m=r({__name:"Card",props:{title:{type:String,default:""},shadow:{type:Boolean,default:!0}},setup(t){return(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["card",{"card-shadow":t.shadow}])},[o.$slots.header||t.title?(e.openBlock(),e.createElementBlock("div",h,[t.title?(e.openBlock(),e.createElementBlock("h3",B,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"header",{},void 0,!0)])):e.createCommentVNode("",!0),e.createElementVNode("div",g,[e.renderSlot(o.$slots,"default",{},void 0,!0)]),o.$slots.footer?(e.openBlock(),e.createElementBlock("div",k,[e.renderSlot(o.$slots,"footer",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}},[["__scopeId","data-v-2d83e63a"]]),S={class:"modal-dialog"},_={class:"modal-content"},z={class:"modal-header"},C={key:0,class:"modal-header-title"},$={class:"modal-body"},w={key:0,class:"modal-footer"},E={key:1,class:"modal-footer"},p=r({__name:"Modal",props:{visible:{type:Boolean,default:!1},title:{type:String,default:""},showFooter:{type:Boolean,default:!0}},emits:["close","cancel","confirm"],setup(t,{emit:o}){const n=o,a=()=>{n("close")},s=()=>{n("cancel")},O=()=>{n("confirm")};return(d,U)=>t.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["modal",{"modal-show":t.visible}])},[e.createElementVNode("div",S,[e.createElementVNode("div",_,[e.createElementVNode("div",z,[t.title?(e.openBlock(),e.createElementBlock("h3",C,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.createElementVNode("button",{class:"modal-header-close",onClick:a},"×")]),e.createElementVNode("div",$,[e.renderSlot(d.$slots,"default",{},void 0,!0)]),d.$slots.footer?(e.openBlock(),e.createElementBlock("div",w,[e.renderSlot(d.$slots,"footer",{},void 0,!0)])):t.showFooter?(e.openBlock(),e.createElementBlock("div",E,[e.createElementVNode("button",{class:"btn btn-secondary",onClick:s},"取消"),e.createElementVNode("button",{class:"btn btn-primary",onClick:O},"确定")])):e.createCommentVNode("",!0)])])],2)):e.createCommentVNode("",!0)}},[["__scopeId","data-v-c66cec30"]]),V=[{name:"Button",type:"vue",label:"Button 按钮",code:`<template>
|
|
2
2
|
<Button type="primary">主要按钮</Button>
|
|
3
3
|
<Button type="success">成功按钮</Button>
|
|
4
4
|
<Button type="warning">警告按钮</Button>
|
|
@@ -42,4 +42,44 @@ import { ref } from 'vue'
|
|
|
42
42
|
import { Modal, Button } from 'little-dizzy'
|
|
43
43
|
|
|
44
44
|
const visible = ref(false)
|
|
45
|
-
<\/script>`}
|
|
45
|
+
<\/script>`},{name:"lzbutton",type:"html",label:"LzButton 渐变按钮",code:`<button class="button">
|
|
46
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24">
|
|
47
|
+
<path d="m18 0 8 12 10-8-4 20H4L0 4l10 8 8-12z"></path>
|
|
48
|
+
</svg>
|
|
49
|
+
Unlock Pro
|
|
50
|
+
</button>
|
|
51
|
+
|
|
52
|
+
<style>
|
|
53
|
+
.button {
|
|
54
|
+
width: fit-content;
|
|
55
|
+
display: flex;
|
|
56
|
+
padding: 1.2em 1rem;
|
|
57
|
+
cursor: pointer;
|
|
58
|
+
gap: 0.4rem;
|
|
59
|
+
font-weight: bold;
|
|
60
|
+
border-radius: 30px;
|
|
61
|
+
text-shadow: 2px 2px 3px rgb(136 0 136 / 50%);
|
|
62
|
+
background: linear-gradient(15deg, #880088, #aa2068, #cc3f47, #de6f3d, #f09f33, #de6f3d, #cc3f47, #aa2068, #880088) no-repeat;
|
|
63
|
+
background-size: 300%;
|
|
64
|
+
color: #fff;
|
|
65
|
+
border: none;
|
|
66
|
+
background-position: left center;
|
|
67
|
+
box-shadow: 0 30px 10px -20px rgba(0,0,0,.2);
|
|
68
|
+
transition: background .3s ease;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.button:hover {
|
|
72
|
+
background-size: 320%;
|
|
73
|
+
background-position: right center;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.button:hover svg {
|
|
77
|
+
fill: #fff;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.button svg {
|
|
81
|
+
width: 23px;
|
|
82
|
+
fill: #f09f33;
|
|
83
|
+
transition: .3s ease;
|
|
84
|
+
}
|
|
85
|
+
</style>`}],i=new Map;function u(t){return!t||!t.name?(console.warn("[LittleDizzy] Snippet must have a name property"),!1):(i.set(t.name,{name:t.name,type:t.type||"html",label:t.label||t.name,code:t.code||"",isCustom:t.isCustom||!1,...t}),!0)}function f(t){if(!Array.isArray(t))return console.warn("[LittleDizzy] registerSnippets expects an array"),0;let o=0;return t.forEach(n=>{u(n)&&o++}),o}function N(){const t={};return i.forEach((o,n)=>{t[n]=o}),t}function M(t){return i.get(t)}f(V);const b={Button:c,Card:m,Modal:p},v=(t,o={})=>{Object.entries(b).forEach(([n,a])=>{t.component(o.prefix?`${o.prefix}${n}`:n,a)})},x=N,D=u,L=f,j=M,I={install:v,...b};l.Button=c,l.Card=m,l.Modal=p,l.default=I,l.getSnippet=j,l.registerSnippet=D,l.registerSnippets=L,l.snippets=x,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
package/package.json
CHANGED
|
@@ -7,16 +7,18 @@
|
|
|
7
7
|
import buttonSnippet from './button.js'
|
|
8
8
|
import cardSnippet from './card.js'
|
|
9
9
|
import modalSnippet from './modal.js'
|
|
10
|
+
import lzbuttonSnippet from './lzbutton.js'
|
|
10
11
|
|
|
11
12
|
// 所有预设代码片段
|
|
12
13
|
export const presetSnippets = [
|
|
13
14
|
buttonSnippet,
|
|
14
15
|
cardSnippet,
|
|
15
|
-
modalSnippet
|
|
16
|
+
modalSnippet,
|
|
17
|
+
lzbuttonSnippet
|
|
16
18
|
]
|
|
17
19
|
|
|
18
20
|
// 单独导出
|
|
19
|
-
export { buttonSnippet, cardSnippet, modalSnippet }
|
|
21
|
+
export { buttonSnippet, cardSnippet, modalSnippet, lzbuttonSnippet }
|
|
20
22
|
|
|
21
23
|
export default presetSnippets
|
|
22
24
|
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* LzButton 代码片段
|
|
3
|
+
* 渐变动画按钮
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
name: 'lzbutton',
|
|
8
|
+
type: 'html',
|
|
9
|
+
label: 'LzButton 渐变按钮',
|
|
10
|
+
code: `<button class="button">
|
|
11
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24">
|
|
12
|
+
<path d="m18 0 8 12 10-8-4 20H4L0 4l10 8 8-12z"></path>
|
|
13
|
+
</svg>
|
|
14
|
+
Unlock Pro
|
|
15
|
+
</button>
|
|
16
|
+
|
|
17
|
+
<style>
|
|
18
|
+
.button {
|
|
19
|
+
width: fit-content;
|
|
20
|
+
display: flex;
|
|
21
|
+
padding: 1.2em 1rem;
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
gap: 0.4rem;
|
|
24
|
+
font-weight: bold;
|
|
25
|
+
border-radius: 30px;
|
|
26
|
+
text-shadow: 2px 2px 3px rgb(136 0 136 / 50%);
|
|
27
|
+
background: linear-gradient(15deg, #880088, #aa2068, #cc3f47, #de6f3d, #f09f33, #de6f3d, #cc3f47, #aa2068, #880088) no-repeat;
|
|
28
|
+
background-size: 300%;
|
|
29
|
+
color: #fff;
|
|
30
|
+
border: none;
|
|
31
|
+
background-position: left center;
|
|
32
|
+
box-shadow: 0 30px 10px -20px rgba(0,0,0,.2);
|
|
33
|
+
transition: background .3s ease;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.button:hover {
|
|
37
|
+
background-size: 320%;
|
|
38
|
+
background-position: right center;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.button:hover svg {
|
|
42
|
+
fill: #fff;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.button svg {
|
|
46
|
+
width: 23px;
|
|
47
|
+
fill: #f09f33;
|
|
48
|
+
transition: .3s ease;
|
|
49
|
+
}
|
|
50
|
+
</style>`
|
|
51
|
+
}
|
|
52
|
+
|