little-dizzy 1.1.0 → 1.2.1
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
|
|
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
2
|
const m = (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__ */ m(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__ */ m(_, [["__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__ */ m(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,12 +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
|
+
isCustom: !0,
|
|
220
|
+
code: `<button class="button">
|
|
221
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24">
|
|
222
|
+
<path d="m18 0 8 12 10-8-4 20H4L0 4l10 8 8-12z"></path>
|
|
223
|
+
</svg>
|
|
224
|
+
Unlock Pro
|
|
225
|
+
</button>
|
|
226
|
+
|
|
227
|
+
<style>
|
|
228
|
+
.button {
|
|
229
|
+
width: fit-content;
|
|
230
|
+
display: flex;
|
|
231
|
+
padding: 1.2em 1rem;
|
|
232
|
+
cursor: pointer;
|
|
233
|
+
gap: 0.4rem;
|
|
234
|
+
font-weight: bold;
|
|
235
|
+
border-radius: 30px;
|
|
236
|
+
text-shadow: 2px 2px 3px rgb(136 0 136 / 50%);
|
|
237
|
+
background: linear-gradient(15deg, #880088, #aa2068, #cc3f47, #de6f3d, #f09f33, #de6f3d, #cc3f47, #aa2068, #880088) no-repeat;
|
|
238
|
+
background-size: 300%;
|
|
239
|
+
color: #fff;
|
|
240
|
+
border: none;
|
|
241
|
+
background-position: left center;
|
|
242
|
+
box-shadow: 0 30px 10px -20px rgba(0,0,0,.2);
|
|
243
|
+
transition: background .3s ease;
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
.button:hover {
|
|
247
|
+
background-size: 320%;
|
|
248
|
+
background-position: right center;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.button:hover svg {
|
|
252
|
+
fill: #fff;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.button svg {
|
|
256
|
+
width: 23px;
|
|
257
|
+
fill: #f09f33;
|
|
258
|
+
transition: .3s ease;
|
|
259
|
+
}
|
|
260
|
+
</style>`
|
|
261
|
+
}, P = [
|
|
262
|
+
O,
|
|
216
263
|
V,
|
|
217
264
|
j,
|
|
218
|
-
|
|
265
|
+
H
|
|
219
266
|
], p = /* @__PURE__ */ new Map();
|
|
220
|
-
function
|
|
267
|
+
function b(t) {
|
|
221
268
|
return !t || !t.name ? (console.warn("[LittleDizzy] Snippet must have a name property"), !1) : (p.set(t.name, {
|
|
222
269
|
name: t.name,
|
|
223
270
|
type: t.type || "html",
|
|
@@ -227,43 +274,43 @@ function y(t) {
|
|
|
227
274
|
...t
|
|
228
275
|
}), !0);
|
|
229
276
|
}
|
|
230
|
-
function
|
|
277
|
+
function y(t) {
|
|
231
278
|
if (!Array.isArray(t))
|
|
232
279
|
return console.warn("[LittleDizzy] registerSnippets expects an array"), 0;
|
|
233
280
|
let e = 0;
|
|
234
281
|
return t.forEach((o) => {
|
|
235
|
-
|
|
282
|
+
b(o) && e++;
|
|
236
283
|
}), e;
|
|
237
284
|
}
|
|
238
|
-
function
|
|
285
|
+
function R() {
|
|
239
286
|
const t = {};
|
|
240
287
|
return p.forEach((e, o) => {
|
|
241
288
|
t[o] = e;
|
|
242
289
|
}), t;
|
|
243
290
|
}
|
|
244
|
-
function
|
|
291
|
+
function U(t) {
|
|
245
292
|
return p.get(t);
|
|
246
293
|
}
|
|
247
|
-
|
|
294
|
+
y(P);
|
|
248
295
|
const h = {
|
|
249
|
-
Button:
|
|
250
|
-
Card:
|
|
251
|
-
Modal:
|
|
252
|
-
},
|
|
296
|
+
Button: k,
|
|
297
|
+
Card: C,
|
|
298
|
+
Modal: N
|
|
299
|
+
}, q = (t, e = {}) => {
|
|
253
300
|
Object.entries(h).forEach(([o, a]) => {
|
|
254
301
|
t.component(e.prefix ? `${e.prefix}${o}` : o, a);
|
|
255
302
|
});
|
|
256
|
-
},
|
|
257
|
-
install:
|
|
303
|
+
}, K = R, Q = b, T = y, W = U, X = {
|
|
304
|
+
install: q,
|
|
258
305
|
...h
|
|
259
306
|
};
|
|
260
307
|
export {
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
308
|
+
k as Button,
|
|
309
|
+
C as Card,
|
|
310
|
+
N as Modal,
|
|
264
311
|
X as default,
|
|
265
312
|
W as getSnippet,
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
313
|
+
Q as registerSnippet,
|
|
314
|
+
T as registerSnippets,
|
|
315
|
+
K as snippets
|
|
269
316
|
};
|
|
@@ -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 渐变按钮",isCustom:!0,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,53 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* LzButton 代码片段
|
|
3
|
+
* 渐变动画按钮
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
name: 'lzbutton',
|
|
8
|
+
type: 'html',
|
|
9
|
+
label: 'LzButton 渐变按钮',
|
|
10
|
+
isCustom: true,
|
|
11
|
+
code: `<button class="button">
|
|
12
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24">
|
|
13
|
+
<path d="m18 0 8 12 10-8-4 20H4L0 4l10 8 8-12z"></path>
|
|
14
|
+
</svg>
|
|
15
|
+
Unlock Pro
|
|
16
|
+
</button>
|
|
17
|
+
|
|
18
|
+
<style>
|
|
19
|
+
.button {
|
|
20
|
+
width: fit-content;
|
|
21
|
+
display: flex;
|
|
22
|
+
padding: 1.2em 1rem;
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
gap: 0.4rem;
|
|
25
|
+
font-weight: bold;
|
|
26
|
+
border-radius: 30px;
|
|
27
|
+
text-shadow: 2px 2px 3px rgb(136 0 136 / 50%);
|
|
28
|
+
background: linear-gradient(15deg, #880088, #aa2068, #cc3f47, #de6f3d, #f09f33, #de6f3d, #cc3f47, #aa2068, #880088) no-repeat;
|
|
29
|
+
background-size: 300%;
|
|
30
|
+
color: #fff;
|
|
31
|
+
border: none;
|
|
32
|
+
background-position: left center;
|
|
33
|
+
box-shadow: 0 30px 10px -20px rgba(0,0,0,.2);
|
|
34
|
+
transition: background .3s ease;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.button:hover {
|
|
38
|
+
background-size: 320%;
|
|
39
|
+
background-position: right center;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.button:hover svg {
|
|
43
|
+
fill: #fff;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.button svg {
|
|
47
|
+
width: 23px;
|
|
48
|
+
fill: #f09f33;
|
|
49
|
+
transition: .3s ease;
|
|
50
|
+
}
|
|
51
|
+
</style>`
|
|
52
|
+
}
|
|
53
|
+
|