Skip to content

Commit 6ab704a

Browse files
felixverduinfelixverduin
authored
changed variables and moved README file
1 parent 47698da commit 6ab704a

File tree

2 files changed

+78
-78
lines changed

2 files changed

+78
-78
lines changed

‎power-apps/animated-buttons/assets/README.md renamed to ‎power-apps/animated-buttons/README.md

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -70,19 +70,19 @@ Animated CSS SVG Button | [Felix Verduin](https://github.com/felixverduin) ([Has
7070
Properties:
7171
Height: =Parent.Height
7272
HoverFill: =
73-
Image: "=\"data:image/svg+xml;utf8, \" & EncodeUrl(\"\r\n<svg xmlns='http://www.w3.org/2000/svg' fill='black' class='bi bi-list' viewBox='-6.5 -6 28 28'>\r\n <style>\r\n @keyframes animate {\r\n from {\r\n transform: translateY(0px);\r\n }\r\n to {\r\n transform: translateY(\r\n var(--bounce-offset)\r\n );\r\n fill: \"& nfIconColorSelectedHex &\" \r\n }\r\n }\r\n\r\n .animate\"& varTimeStamp1 &\" {\r\n animation:\r\n \r\n animate alternate 4;\r\n cubic-bezier(.2, .65, .6, 1);\r\n --bounce-offset: -5px;\r\n animation-duration: 200ms;\r\n }\r\n \r\n</style>\r\n <path class = 'animate\"& varTimeStamp1 &\"' d='M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5zm13-3H1v2h14zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5'/>\r\n</svg>\r\n\"\r\n)\r\n\r\n\r\n/*\r\n\"data:image/svg+xml;utf8, \" & EncodeUrl(\"\r\n<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#FFFFFH' viewBox='-2 -2 20 20' style='animation: shake 1s infinite;'>\r\n <style>\r\n @keyframes shake {\r\n 0%, 100% { transform: translate3d(0, 0, 0); }\r\n 25% { transform: translate3d(-10px, 0, 0); }\r\n 50% { transform: translate3d(10px, 0, 0); }\r\n 75% { transform: translate3d(-10px, 0, 0); }\r\n }\r\n</style>\r\n <rect width='50' height='15' rx='6' fill='#5227CC'/>\r\n</svg>\r\n\")\r\n*/"
73+
Image: "=\"data:image/svg+xml;utf8, \" & EncodeUrl(\"\r\n<svg xmlns='http://www.w3.org/2000/svg' fill='white' class='bi bi-list' viewBox='-6.5 -6 28 28'>\r\n <style>\r\n @keyframes animate {\r\n from {\r\n transform: translateY(0px);\r\n }\r\n to {\r\n transform: translateY(\r\n var(--bounce-offset)\r\n );\r\n fill: \"& \"#3A3B3C\" &\" \r\n }\r\n }\r\n\r\n .animate\"& varTimeStamp1 &\" {\r\n animation:\r\n \r\n animate alternate 4;\r\n cubic-bezier(.2, .65, .6, 1);\r\n --bounce-offset: -5px;\r\n animation-duration: 200ms;\r\n }\r\n \r\n</style>\r\n <path class = 'animate\"& varTimeStamp1 &\"' d='M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5zm13-3H1v2h14zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5'/>\r\n</svg>\r\n\"\r\n)\r\n\r\n\r\n/*\r\n\"data:image/svg+xml;utf8, \" & EncodeUrl(\"\r\n<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='#FFFFFH' viewBox='-2 -2 20 20' style='animation: shake 1s infinite;'>\r\n <style>\r\n @keyframes shake {\r\n 0%, 100% { transform: translate3d(0, 0, 0); }\r\n 25% { transform: translate3d(-10px, 0, 0); }\r\n 50% { transform: translate3d(10px, 0, 0); }\r\n 75% { transform: translate3d(-10px, 0, 0); }\r\n }\r\n</style>\r\n <rect width='50' height='15' rx='6' fill='#5227CC'/>\r\n</svg>\r\n\")\r\n*/"
7474
OnSelect: |-
7575
=UpdateContext({locShowSettingsMenu: false});
7676
UpdateContext({locShowSettingsMenu: true})
7777
PaddingBottom: =10
7878
PaddingLeft: =10
7979
PaddingRight: =10
8080
PaddingTop: =10
81-
PressedFill: =varPressedFill
82-
RadiusBottomLeft: =varBorderRadiusCircle
83-
RadiusBottomRight: =varBorderRadiusCircle
84-
RadiusTopLeft: =varBorderRadiusCircle
85-
RadiusTopRight: =varBorderRadiusCircle
81+
PressedFill: =ColorFade(RGBA(0, 0, 0, 0), -20%)
82+
RadiusBottomLeft: =100
83+
RadiusBottomRight: =100
84+
RadiusTopLeft: =100
85+
RadiusTopRight: =100
8686
Width: =Parent.Width
8787
X: =(Parent.Width - Self.Width) / 2
8888
Y: =(Parent.Height - Self.Height) / 2
@@ -113,10 +113,10 @@ Animated CSS SVG Button | [Felix Verduin](https://github.com/felixverduin) ([Has
113113
PressedBorderColor: =Self.Fill
114114
PressedColor: =Self.Fill
115115
PressedFill: =RGBA(196,196,196,0.4)
116-
RadiusBottomLeft: =varBorderRadiusCircle
117-
RadiusBottomRight: =varBorderRadiusCircle
118-
RadiusTopLeft: =varBorderRadiusCircle
119-
RadiusTopRight: =varBorderRadiusCircle
116+
RadiusBottomLeft: =100
117+
RadiusBottomRight: =100
118+
RadiusTopLeft: =100
119+
RadiusTopRight: =100
120120
Text: =""
121121
Width: =Parent.Width * 0.69
122122
X: =(Parent.Width - Self.Width) / 2
@@ -161,19 +161,19 @@ Animated CSS SVG Button | [Felix Verduin](https://github.com/felixverduin) ([Has
161161
Properties:
162162
Height: =Parent.Height
163163
HoverFill: =
164-
Image: "=\"data:image/svg+xml;utf8, \" & EncodeUrl(\"\r\n<svg xmlns='http://www.w3.org/2000/svg' fill='black' class='bi bi-list' viewBox='-6.5 -6 28 28'>\r\n <style>\r\n .animate\"& varTimeStamp2 &\" {\r\n animation-name: shake;\r\n animation-duration: 1.5s;\r\n animation-fill-mode: both;\r\n }\r\n @keyframes shake {\r\n 0%, 100% { transform: translate3d(0, 0, 0); }\r\n 25% { transform: translate3d(-5px, 0, 0); fill: \"& nfIconColorSelectedHex &\" }\r\n 50% { transform: translate3d(5px, 0, 0); fill: red }\r\n 75% { transform: translate3d(-5px, 0, 0); fill: \"& nfIconColorSelectedHex &\" }\r\n }\r\n\r\n \r\n \r\n</style>\r\n <path class = 'animate\"& varTimeStamp2 &\"' d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/>\r\n</svg>\r\n\"\r\n)\r\n\r\n\r\n/*\r\nstyle='animation: shake 1.5s infinite;'>\r\n <style>\r\n @keyframes shake {\r\n 0%, 100% { transform: translate3d(0, 0, 0); }\r\n 25% { transform: translate3d(-10px, 0, 0); }\r\n 50% { transform: translate3d(10px, 0, 0); }\r\n 75% { transform: translate3d(-10px, 0, 0); }\r\n }\r\n </style>\r\n*/"
164+
Image: "=\"data:image/svg+xml;utf8, \" & EncodeUrl(\"\r\n<svg xmlns='http://www.w3.org/2000/svg' fill='white' class='bi bi-list' viewBox='-6.5 -6 28 28'>\r\n <style>\r\n .animate\"& varTimeStamp2 &\" {\r\n animation-name: shake;\r\n animation-duration: 1.5s;\r\n animation-fill-mode: both;\r\n }\r\n @keyframes shake {\r\n 0%, 100% { transform: translate3d(0, 0, 0); }\r\n 25% { transform: translate3d(-5px, 0, 0); fill: \"& \"#3A3B3C\" &\" }\r\n 50% { transform: translate3d(5px, 0, 0); fill: red }\r\n 75% { transform: translate3d(-5px, 0, 0); fill: \"& \"#3A3B3C\" &\" }\r\n }\r\n\r\n \r\n \r\n</style>\r\n <path class = 'animate\"& varTimeStamp2 &\"' d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/>\r\n</svg>\r\n\"\r\n)\r\n\r\n\r\n/*\r\nstyle='animation: shake 1.5s infinite;'>\r\n <style>\r\n @keyframes shake {\r\n 0%, 100% { transform: translate3d(0, 0, 0); }\r\n 25% { transform: translate3d(-10px, 0, 0); }\r\n 50% { transform: translate3d(10px, 0, 0); }\r\n 75% { transform: translate3d(-10px, 0, 0); }\r\n }\r\n </style>\r\n*/"
165165
OnSelect: |-
166166
=UpdateContext({locShowSettingsMenu: false});
167167
UpdateContext({locShowSettingsMenu: true})
168168
PaddingBottom: =10
169169
PaddingLeft: =10
170170
PaddingRight: =10
171171
PaddingTop: =10
172-
PressedFill: =varPressedFill
173-
RadiusBottomLeft: =varBorderRadiusCircle
174-
RadiusBottomRight: =varBorderRadiusCircle
175-
RadiusTopLeft: =varBorderRadiusCircle
176-
RadiusTopRight: =varBorderRadiusCircle
172+
PressedFill: =ColorFade(RGBA(0, 0, 0, 0), -20%)
173+
RadiusBottomLeft: =100
174+
RadiusBottomRight: =100
175+
RadiusTopLeft: =100
176+
RadiusTopRight: =100
177177
Width: =Parent.Width
178178
X: =(Parent.Width - Self.Width) / 2
179179
Y: =(Parent.Height - Self.Height) / 2
@@ -223,10 +223,10 @@ Animated CSS SVG Button | [Felix Verduin](https://github.com/felixverduin) ([Has
223223
PressedBorderColor: =Self.Fill
224224
PressedColor: =Self.Fill
225225
PressedFill: =RGBA(196,196,196,0.4)
226-
RadiusBottomLeft: =varBorderRadiusCircle
227-
RadiusBottomRight: =varBorderRadiusCircle
228-
RadiusTopLeft: =varBorderRadiusCircle
229-
RadiusTopRight: =varBorderRadiusCircle
226+
RadiusBottomLeft: =100
227+
RadiusBottomRight: =100
228+
RadiusTopLeft: =100
229+
RadiusTopRight: =100
230230
Text: =""
231231
Width: =Parent.Width * 0.69
232232
X: =(Parent.Width - Self.Width) / 2
@@ -287,7 +287,7 @@ Animated CSS SVG Button | [Felix Verduin](https://github.com/felixverduin) ([Has
287287
50% {
288288
transform: scale(1.15);
289289
opacity: 0.8;
290-
fill: "& nfIconColorSelectedHex &"
290+
fill: "& "#3A3B3C" &"
291291
}
292292
}
293293
</style>
@@ -303,11 +303,11 @@ Animated CSS SVG Button | [Felix Verduin](https://github.com/felixverduin) ([Has
303303
PaddingLeft: =10
304304
PaddingRight: =10
305305
PaddingTop: =10
306-
PressedFill: =varPressedFill
307-
RadiusBottomLeft: =varBorderRadiusCircle
308-
RadiusBottomRight: =varBorderRadiusCircle
309-
RadiusTopLeft: =varBorderRadiusCircle
310-
RadiusTopRight: =varBorderRadiusCircle
306+
PressedFill: =ColorFade(RGBA(0, 0, 0, 0), -20%)
307+
RadiusBottomLeft: =100
308+
RadiusBottomRight: =100
309+
RadiusTopLeft: =100
310+
RadiusTopRight: =100
311311
Width: =Parent.Width
312312
X: =(Parent.Width - Self.Width) / 2
313313
Y: =(Parent.Height - Self.Height) / 2
@@ -338,10 +338,10 @@ Animated CSS SVG Button | [Felix Verduin](https://github.com/felixverduin) ([Has
338338
PressedBorderColor: =Self.Fill
339339
PressedColor: =Self.Fill
340340
PressedFill: =RGBA(196,196,196,0.4)
341-
RadiusBottomLeft: =varBorderRadiusCircle
342-
RadiusBottomRight: =varBorderRadiusCircle
343-
RadiusTopLeft: =varBorderRadiusCircle
344-
RadiusTopRight: =varBorderRadiusCircle
341+
RadiusBottomLeft: =100
342+
RadiusBottomRight: =100
343+
RadiusTopLeft: =100
344+
RadiusTopRight: =100
345345
Text: =""
346346
Width: =Parent.Width * 0.69
347347
X: =(Parent.Width - Self.Width) / 2
@@ -418,11 +418,11 @@ Animated CSS SVG Button | [Felix Verduin](https://github.com/felixverduin) ([Has
418418
PaddingLeft: =10
419419
PaddingRight: =10
420420
PaddingTop: =10
421-
PressedFill: =varPressedFill
422-
RadiusBottomLeft: =varBorderRadiusCircle
423-
RadiusBottomRight: =varBorderRadiusCircle
424-
RadiusTopLeft: =varBorderRadiusCircle
425-
RadiusTopRight: =varBorderRadiusCircle
421+
PressedFill: =ColorFade(RGBA(0, 0, 0, 0), -20%)
422+
RadiusBottomLeft: =100
423+
RadiusBottomRight: =100
424+
RadiusTopLeft: =100
425+
RadiusTopRight: =100
426426
Width: =Parent.Width
427427
X: =(Parent.Width - Self.Width) / 2
428428
Y: =(Parent.Height - Self.Height) / 2
@@ -472,10 +472,10 @@ Animated CSS SVG Button | [Felix Verduin](https://github.com/felixverduin) ([Has
472472
PressedBorderColor: =Self.Fill
473473
PressedColor: =Self.Fill
474474
PressedFill: =RGBA(196,196,196,0.4)
475-
RadiusBottomLeft: =varBorderRadiusCircle
476-
RadiusBottomRight: =varBorderRadiusCircle
477-
RadiusTopLeft: =varBorderRadiusCircle
478-
RadiusTopRight: =varBorderRadiusCircle
475+
RadiusBottomLeft: =100
476+
RadiusBottomRight: =100
477+
RadiusTopLeft: =100
478+
RadiusTopRight: =100
479479
Text: =""
480480
Width: =Parent.Width * 0.69
481481
X: =(Parent.Width - Self.Width) / 2

0 commit comments

Comments
 (0)