@hortonstudio/main 1.7.13 → 1.7.14

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.
Files changed (28) hide show
  1. package/autoInit/form.js +46 -603
  2. package/index.js +0 -1
  3. package/package.json +1 -1
  4. package/utils/css-animations/buttons/main/bgbasic/btn-main-bgbasic.html +10 -0
  5. package/utils/css-animations/buttons/main/bgfill/btn-main-bgfill.html +29 -0
  6. package/utils/css-animations/buttons/navbar/bgbasic/navbar-main-bgbasic.html +17 -0
  7. package/utils/css-animations/buttons/navbar/bgbasic/navbar-menu-bgbasic.html +16 -0
  8. package/utils/css-animations/buttons/navbar/bgfill/navbar-main-bgfill.html +46 -0
  9. package/utils/css-animations/buttons/navbar/bgfill/navbar-menu-bgfill.html +39 -0
  10. package/utils/css-animations/buttons/navbar/color/navbar-announce-color.html +5 -0
  11. package/utils/css-animations/buttons/navbar/color/navbar-main-color.html +7 -0
  12. package/utils/css-animations/buttons/navbar/color/navbar-menu-color.html +7 -0
  13. package/utils/css-animations/buttons/navbar/double-slide/navbar-announce-double-slide.html +40 -0
  14. package/utils/css-animations/buttons/navbar/double-slide/navbar-main-double-slide.html +77 -0
  15. package/utils/css-animations/buttons/navbar/scale/navbar-announce-scale.html +6 -0
  16. package/utils/css-animations/buttons/navbar/scale/navbar-main-scale.html +9 -0
  17. package/utils/css-animations/buttons/navbar/scale/navbar-menu-scale.html +8 -0
  18. package/utils/css-animations/buttons/navbar/underline/navbar-announce-underline.html +32 -0
  19. package/utils/css-animations/buttons/navbar/underline/navbar-main-underline.html +56 -0
  20. package/utils/css-animations/buttons/text/color/text-footer-color.html +5 -0
  21. package/utils/css-animations/buttons/text/color/text-main-color.html +5 -0
  22. package/utils/css-animations/buttons/text/double-slide/text-main-double-slide.html +56 -0
  23. package/utils/css-animations/buttons/text/scale/text-footer-scale.html +6 -0
  24. package/utils/css-animations/buttons/text/scale/text-main-scale.html +6 -0
  25. package/utils/css-animations/buttons/text/underline/text-footer-underline.html +45 -0
  26. package/utils/css-animations/buttons/text/underline/text-main-underline.html +58 -0
  27. package/utils/css-animations/cards/card-clickable.html +11 -0
  28. package/utils/css-animations/defaults.html +69 -0
package/index.js CHANGED
@@ -1,4 +1,3 @@
1
- // Version:1.7.13
2
1
  const API_NAME = "hsmain";
3
2
 
4
3
  const initializeHsMain = async () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hortonstudio/main",
3
- "version": "1.7.13",
3
+ "version": "1.7.14",
4
4
  "description": "Animation and utility library for client websites",
5
5
  "main": "index.js",
6
6
  "type": "module",
package/utils/css-animations/buttons/main/bgbasic/btn-main-bgbasic.html ADDED
@@ -0,0 +1,10 @@
1
+ <style>
2
+ .btn_main_wrap{
3
+ transition:background 300ms ease,color 150ms ease
4
+ }
5
+
6
+ .btn_main_wrap:hover{
7
+ background:var(--_button-style---background-hover);
8
+ color:var(--_button-style---text-hover)
9
+ }
10
+ </style>
package/utils/css-animations/buttons/main/bgfill/btn-main-bgfill.html ADDED
@@ -0,0 +1,29 @@
1
+ <style>
2
+ .btn_main_wrap{
3
+ position:relative;
4
+ transition:color 150ms ease
5
+ }
6
+
7
+ .btn_main_wrap::before{
8
+ content:'';
9
+ position:absolute;
10
+ bottom:0;
11
+ left:0;
12
+ width:0;
13
+ height:0;
14
+ background:var(--_button-style---background-hover);
15
+ border-radius:50%;
16
+ transform:translate(-50%,50%);
17
+ transition:width 0.5s ease,height 0.5s ease;
18
+ z-index:0
19
+ }
20
+
21
+ .btn_main_wrap:hover{
22
+ color:var(--_button-style---text-hover)
23
+ }
24
+
25
+ .btn_main_wrap:hover::before{
26
+ width:300%;
27
+ height:300%
28
+ }
29
+ </style>
package/utils/css-animations/buttons/navbar/bgbasic/navbar-main-bgbasic.html ADDED
@@ -0,0 +1,17 @@
1
+ <style>
2
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link,
3
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link{
4
+ transition:background 300ms ease,color 150ms ease;
5
+ border-radius:var(--radius--main)
6
+ }
7
+
8
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover,
9
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover{
10
+ background:var(--_theme---border)
11
+ }
12
+
13
+ [data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link{
14
+ background:var(--_button-style---background);
15
+ color:var(--_button-style---text)
16
+ }
17
+ </style>
package/utils/css-animations/buttons/navbar/bgbasic/navbar-menu-bgbasic.html ADDED
@@ -0,0 +1,16 @@
1
+ <style>
2
+ [data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link{
3
+ transition:background 300ms ease,color 150ms ease;
4
+ border-radius:var(--radius--main)
5
+ }
6
+
7
+ [data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link:hover{
8
+ background:var(--_theme---border)
9
+ }
10
+
11
+ [data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link,
12
+ [data-hs-nav="menu-dropdown"].is-active > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link{
13
+ background:var(--_button-style---background);
14
+ color:var(--_button-style---text)
15
+ }
16
+ </style>
package/utils/css-animations/buttons/navbar/bgfill/navbar-main-bgfill.html ADDED
@@ -0,0 +1,46 @@
1
+ <style>
2
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link{
3
+ border-radius:var(--radius--main);
4
+ overflow:hidden;
5
+ position:relative;
6
+ transition:color 250ms ease
7
+ }
8
+
9
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link{
10
+ border-radius:var(--radius--small);
11
+ overflow:hidden;
12
+ position:relative;
13
+ transition:color 250ms ease
14
+ }
15
+
16
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link::before,
17
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link::before{
18
+ content:'';
19
+ position:absolute;
20
+ bottom:0;
21
+ left:0;
22
+ width:0;
23
+ height:0;
24
+ background:var(--_theme---border);
25
+ border-radius:50%;
26
+ transform:translate(-50%,50%);
27
+ transition:width 0.5s ease,height 0.5s ease;
28
+ z-index:0
29
+ }
30
+
31
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover::before,
32
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover::before{
33
+ width:300%;
34
+ height:300%
35
+ }
36
+
37
+ [data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link::before{
38
+ background:var(--_button-style---background);
39
+ width:300%;
40
+ height:300%
41
+ }
42
+
43
+ [data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link{
44
+ color:var(--_button-style---text)
45
+ }
46
+ </style>
package/utils/css-animations/buttons/navbar/bgfill/navbar-menu-bgfill.html ADDED
@@ -0,0 +1,39 @@
1
+ <style>
2
+ [data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link{
3
+ border-radius:var(--radius--main);
4
+ overflow:hidden;
5
+ position:relative;
6
+ transition:color 250ms ease
7
+ }
8
+
9
+ [data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link::before{
10
+ content:'';
11
+ position:absolute;
12
+ bottom:0;
13
+ left:0;
14
+ width:0;
15
+ height:0;
16
+ background:var(--_theme---border);
17
+ border-radius:50%;
18
+ transform:translate(-50%,50%);
19
+ transition:width 0.5s ease,height 0.5s ease;
20
+ z-index:0
21
+ }
22
+
23
+ [data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link:hover::before{
24
+ width:300%;
25
+ height:300%
26
+ }
27
+
28
+ [data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link::before,
29
+ [data-hs-nav="menu-dropdown"].is-active > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link::before{
30
+ background:var(--_button-style---background);
31
+ width:300%;
32
+ height:300%
33
+ }
34
+
35
+ [data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link,
36
+ [data-hs-nav="menu-dropdown"].is-active > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link{
37
+ color:var(--_button-style---text)
38
+ }
39
+ </style>
package/utils/css-animations/buttons/navbar/color/navbar-announce-color.html ADDED
@@ -0,0 +1,5 @@
1
+ <style>
2
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover{
3
+ color:var(--swatch--brand-1-500)
4
+ }
5
+ </style>
package/utils/css-animations/buttons/navbar/color/navbar-main-color.html ADDED
@@ -0,0 +1,7 @@
1
+ <style>
2
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover,
3
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover,
4
+ [data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link{
5
+ color:var(--swatch--brand-1-500)
6
+ }
7
+ </style>
package/utils/css-animations/buttons/navbar/color/navbar-menu-color.html ADDED
@@ -0,0 +1,7 @@
1
+ <style>
2
+ [data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link:hover,
3
+ [data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link,
4
+ [data-hs-nav="menu-dropdown"].is-active > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link{
5
+ color:var(--swatch--brand-1-500)
6
+ }
7
+ </style>
package/utils/css-animations/buttons/navbar/double-slide/navbar-announce-double-slide.html ADDED
@@ -0,0 +1,40 @@
1
+ <style>
2
+ /* ===== DOUBLE SLIDE ANIMATION ===== */
3
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_text.is-placeholder,
4
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_darrow.is-placeholder,
5
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_arrow.is-placeholder,
6
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_icon.is-placeholder{
7
+ display:block
8
+ }
9
+
10
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_text.is-placeholder,
11
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_icon.is-placeholder{
12
+ transform:translateY(200%)
13
+ }
14
+
15
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_darrow.is-placeholder,
16
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_arrow.is-placeholder{
17
+ transform:translateY(200%) translateX(-200%)
18
+ }
19
+
20
+ /* Hover States */
21
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_text.is-main,
22
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_icon.is-main{
23
+ transform:translateY(-200%)
24
+ }
25
+
26
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_text.is-placeholder,
27
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_icon.is-placeholder{
28
+ transform:translateY(0%)
29
+ }
30
+
31
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_darrow.is-main,
32
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-main{
33
+ transform:translateY(-200%) translateX(200%)
34
+ }
35
+
36
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_darrow.is-placeholder,
37
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-placeholder{
38
+ transform:translateY(0%) translateX(0%)
39
+ }
40
+ </style>
package/utils/css-animations/buttons/navbar/double-slide/navbar-main-double-slide.html ADDED
@@ -0,0 +1,77 @@
1
+ <style>
2
+ /* ===== DOUBLE SLIDE ANIMATION ===== */
3
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_text.is-placeholder,
4
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_text.is-placeholder,
5
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_darrow.is-placeholder,
6
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_darrow.is-placeholder,
7
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_arrow.is-placeholder,
8
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_arrow.is-placeholder,
9
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_icon.is-placeholder,
10
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_icon.is-placeholder{
11
+ display:block
12
+ }
13
+
14
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_text.is-placeholder,
15
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_text.is-placeholder,
16
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_icon.is-placeholder,
17
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_icon.is-placeholder{
18
+ transform:translateY(200%)
19
+ }
20
+
21
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_darrow.is-placeholder,
22
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_darrow.is-placeholder,
23
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_arrow.is-placeholder,
24
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_arrow.is-placeholder{
25
+ transform:translateY(200%) translateX(-200%)
26
+ }
27
+
28
+ /* Hover States */
29
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_text.is-main,
30
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_text.is-main,
31
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_icon.is-main,
32
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_icon.is-main{
33
+ transform:translateY(-200%)
34
+ }
35
+
36
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_text.is-placeholder,
37
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_text.is-placeholder,
38
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_icon.is-placeholder,
39
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_icon.is-placeholder{
40
+ transform:translateY(0%)
41
+ }
42
+
43
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_darrow.is-main,
44
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_darrow.is-main,
45
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-main,
46
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-main{
47
+ transform:translateY(-200%) translateX(200%)
48
+ }
49
+
50
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_darrow.is-placeholder,
51
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_darrow.is-placeholder,
52
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-placeholder,
53
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-placeholder{
54
+ transform:translateY(0%) translateX(0%)
55
+ }
56
+
57
+ /* Active States */
58
+ [data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_text.is-main,
59
+ [data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_icon.is-main{
60
+ transform:translateY(-200%)
61
+ }
62
+
63
+ [data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_text.is-placeholder,
64
+ [data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_icon.is-placeholder{
65
+ transform:translateY(0%)
66
+ }
67
+
68
+ [data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_darrow.is-main,
69
+ [data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_arrow.is-main{
70
+ transform:translateY(-200%) translateX(200%)
71
+ }
72
+
73
+ [data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_darrow.is-placeholder,
74
+ [data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_arrow.is-placeholder{
75
+ transform:translateY(0%) translateX(0%)
76
+ }
77
+ </style>
package/utils/css-animations/buttons/navbar/scale/navbar-announce-scale.html ADDED
@@ -0,0 +1,6 @@
1
+ <style>
2
+ /* ===== SCALE ANIMATION ===== */
3
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_content{
4
+ transform:scale3d(1.075,1.075,1)
5
+ }
6
+ </style>
package/utils/css-animations/buttons/navbar/scale/navbar-main-scale.html ADDED
@@ -0,0 +1,9 @@
1
+ <style>
2
+ /* ===== SCALE ANIMATION ===== */
3
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_content,
4
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_content,
5
+ [data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_content,
6
+ [data-hs-nav="menu-dropdown"].is-active > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_content{
7
+ transform:scale3d(1.075,1.075,1)
8
+ }
9
+ </style>
package/utils/css-animations/buttons/navbar/scale/navbar-menu-scale.html ADDED
@@ -0,0 +1,8 @@
1
+ <style>
2
+ /* ===== SCALE ANIMATION ===== */
3
+ [data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link:hover .navbar_btn_1_content,
4
+ [data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_content,
5
+ [data-hs-nav="menu-dropdown"].is-active > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_content{
6
+ transform:scale3d(1.075,1.075,1)
7
+ }
8
+ </style>
package/utils/css-animations/buttons/navbar/underline/navbar-announce-underline.html ADDED
@@ -0,0 +1,32 @@
1
+ <style>
2
+ /* ===== UNDERLINE ANIMATION ===== */
3
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_line_wrap{
4
+ display:block
5
+ }
6
+
7
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_line.is-main{
8
+ transform:translateX(-110%)
9
+ }
10
+
11
+ /* Line Hover States */
12
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_line.is-main{
13
+ transform:translateX(0%)
14
+ }
15
+
16
+ /* ===== UNDERLINE ANIMATION EXTRAS ===== */
17
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_arrow.is-placeholder{
18
+ display:block
19
+ }
20
+
21
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_arrow.is-placeholder{
22
+ transform:translateY(200%) translateX(-200%)
23
+ }
24
+
25
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-main{
26
+ transform:translateY(-200%) translateX(200%)
27
+ }
28
+
29
+ [data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-placeholder{
30
+ transform:translateY(0%) translateX(0%)
31
+ }
32
+ </style>
package/utils/css-animations/buttons/navbar/underline/navbar-main-underline.html ADDED
@@ -0,0 +1,56 @@
1
+ <style>
2
+ /* ===== UNDERLINE ANIMATION ===== */
3
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_line_wrap,
4
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_line_wrap{
5
+ display:block
6
+ }
7
+
8
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_line.is-main,
9
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_line.is-main{
10
+ transform:translateX(-110%)
11
+ }
12
+
13
+ /* Line Hover States */
14
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_line.is-main,
15
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_line.is-main{
16
+ transform:translateX(0%)
17
+ }
18
+
19
+ /* ===== UNDERLINE ANIMATION EXTRAS ===== */
20
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_darrow.is-placeholder,
21
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_darrow.is-placeholder,
22
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_arrow.is-placeholder,
23
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_arrow.is-placeholder{
24
+ display:block
25
+ }
26
+
27
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_darrow.is-placeholder,
28
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_darrow.is-placeholder{
29
+ transform:translateX(-200%)
30
+ }
31
+
32
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_arrow.is-placeholder,
33
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_arrow.is-placeholder{
34
+ transform:translateY(200%) translateX(-200%)
35
+ }
36
+
37
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_darrow.is-main,
38
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_darrow.is-main{
39
+ transform:translateX(200%)
40
+ }
41
+
42
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_darrow.is-placeholder,
43
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_darrow.is-placeholder{
44
+ transform:translateX(0%)
45
+ }
46
+
47
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-main,
48
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-main{
49
+ transform:translateY(-200%) translateX(200%)
50
+ }
51
+
52
+ [data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-placeholder,
53
+ [data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-placeholder{
54
+ transform:translateY(0%) translateX(0%)
55
+ }
56
+ </style>
package/utils/css-animations/buttons/text/color/text-footer-color.html ADDED
@@ -0,0 +1,5 @@
1
+ <style>
2
+ [data-wf--btn-text--variant="footer"] .btn_text_contain:hover{
3
+ color:var(--swatch--brand-1-500)
4
+ }
5
+ </style>
package/utils/css-animations/buttons/text/color/text-main-color.html ADDED
@@ -0,0 +1,5 @@
1
+ <style>
2
+ [data-wf--btn-text--variant="main"] .btn_text_contain:hover{
3
+ color:var(--swatch--brand-1-500)
4
+ }
5
+ </style>
package/utils/css-animations/buttons/text/double-slide/text-main-double-slide.html ADDED
@@ -0,0 +1,56 @@
1
+ <style>
2
+ /* ===== DOUBLE SLIDE ANIMATION ===== */
3
+ [data-wf--btn-text--variant="main"] .btn_text_text.is-placeholder,
4
+ [data-wf--btn-text--variant="main"] .btn_text_urarrow.is-placeholder,
5
+ [data-wf--btn-text--variant="main"] .btn_text_arrow.is-placeholder,
6
+ [data-wf--btn-text--variant="main"] .btn_text_icon.is-placeholder{
7
+ display:block
8
+ }
9
+
10
+ [data-wf--btn-text--variant="main"] .btn_text_text.is-placeholder,
11
+ [data-wf--btn-text--variant="main"] .btn_text_icon.is-placeholder{
12
+ transform:translateY(200%)
13
+ }
14
+
15
+ [data-wf--btn-text--variant="main"] .btn_text_urarrow.is-placeholder{
16
+ transform:translateY(200%) translateX(-200%)
17
+ }
18
+
19
+ [data-wf--btn-text--variant="main"] .btn_text_arrow.is-placeholder{
20
+ transform:translateY(200%)
21
+ }
22
+
23
+ /* Hover States */
24
+ [data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_text.is-main,
25
+ [data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_icon.is-main,
26
+ [data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_arrow.is-main{
27
+ transform:translateY(-200%)
28
+ }
29
+
30
+ [data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_text.is-placeholder,
31
+ [data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_icon.is-placeholder,
32
+ [data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_arrow.is-placeholder{
33
+ transform:translateY(0%)
34
+ }
35
+
36
+ [data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_urarrow.is-main{
37
+ transform:translateY(-200%) translateX(200%)
38
+ }
39
+
40
+ [data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_urarrow.is-placeholder{
41
+ transform:translateY(0%) translateX(0%)
42
+ }
43
+
44
+ /* ===== IS-LEFT VARIANT ===== */
45
+ [data-wf--btn-text--variant="main"] .btn_text_arrow_wrap.is-left .btn_text_arrow.is-placeholder{
46
+ transform:translateY(-200%)
47
+ }
48
+
49
+ [data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_arrow_wrap.is-left .btn_text_arrow.is-main{
50
+ transform:translateY(200%)
51
+ }
52
+
53
+ [data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_arrow_wrap.is-left .btn_text_arrow.is-placeholder{
54
+ transform:translateY(0%)
55
+ }
56
+ </style>
package/utils/css-animations/buttons/text/scale/text-footer-scale.html ADDED
@@ -0,0 +1,6 @@
1
+ <style>
2
+ /* ===== SCALE ANIMATION ===== */
3
+ [data-wf--btn-text--variant="footer"] .btn_text_content:hover{
4
+ transform:scale3d(1.075,1.075,1)
5
+ }
6
+ </style>
package/utils/css-animations/buttons/text/scale/text-main-scale.html ADDED
@@ -0,0 +1,6 @@
1
+ <style>
2
+ /* ===== SCALE ANIMATION ===== */
3
+ [data-wf--btn-text--variant="main"] .btn_text_content:hover{
4
+ transform:scale3d(1.075,1.075,1)
5
+ }
6
+ </style>
package/utils/css-animations/buttons/text/underline/text-footer-underline.html ADDED
@@ -0,0 +1,45 @@
1
+ <style>
2
+ /* ===== UNDERLINE ANIMATION ===== */
3
+ [data-wf--btn-text--variant="footer"] .btn_text_line_wrap{
4
+ display:block
5
+ }
6
+
7
+ [data-wf--btn-text--variant="footer"] .btn_text_line.is-main{
8
+ transform:translateX(-110%)
9
+ }
10
+
11
+ /* Line Hover States */
12
+ [data-wf--btn-text--variant="footer"] .btn_text_contain:hover .btn_text_line.is-main{
13
+ transform:translateX(0%)
14
+ }
15
+
16
+ /* ===== UNDERLINE ANIMATION EXTRAS ===== */
17
+ [data-wf--btn-text--variant="footer"] .btn_text_urarrow.is-placeholder,
18
+ [data-wf--btn-text--variant="footer"] .btn_text_arrow.is-placeholder{
19
+ display:block
20
+ }
21
+
22
+ [data-wf--btn-text--variant="footer"] .btn_text_urarrow.is-placeholder{
23
+ transform:translateY(200%) translateX(-200%)
24
+ }
25
+
26
+ [data-wf--btn-text--variant="footer"] .btn_text_arrow.is-placeholder{
27
+ transform:translateX(-200%)
28
+ }
29
+
30
+ [data-wf--btn-text--variant="footer"] .btn_text_contain:hover .btn_text_urarrow.is-main{
31
+ transform:translateY(-200%) translateX(200%)
32
+ }
33
+
34
+ [data-wf--btn-text--variant="footer"] .btn_text_contain:hover .btn_text_urarrow.is-placeholder{
35
+ transform:translateY(0%) translateX(0%)
36
+ }
37
+
38
+ [data-wf--btn-text--variant="footer"] .btn_text_contain:hover .btn_text_arrow.is-main{
39
+ transform:translateX(200%)
40
+ }
41
+
42
+ [data-wf--btn-text--variant="footer"] .btn_text_contain:hover .btn_text_arrow.is-placeholder{
43
+ transform:translateX(0%)
44
+ }
45
+ </style>
package/utils/css-animations/buttons/text/underline/text-main-underline.html ADDED
@@ -0,0 +1,58 @@
1
+ <style>
2
+ /* ===== UNDERLINE ANIMATION ===== */
3
+ [data-wf--btn-text--variant="main"] .btn_text_line_wrap{
4
+ display:block
5
+ }
6
+
7
+ [data-wf--btn-text--variant="main"] .btn_text_line.is-placeholder{
8
+ display:block;
9
+ transform:translateX(-110%);
10
+ transition-delay:0s
11
+ }
12
+
13
+ [data-wf--btn-text--variant="main"] .btn_text_line.is-main{
14
+ transform:translateX(0%);
15
+ transition-delay:0.1s
16
+ }
17
+
18
+ /* Line Hover States */
19
+ [data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_line.is-placeholder{
20
+ transform:translateX(0%);
21
+ transition-delay:0.1s
22
+ }
23
+
24
+ [data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_line.is-main{
25
+ transform:translateX(110%);
26
+ transition-delay:0s
27
+ }
28
+
29
+ /* ===== UNDERLINE ANIMATION EXTRAS ===== */
30
+ [data-wf--btn-text--variant="main"] .btn_text_urarrow.is-placeholder,
31
+ [data-wf--btn-text--variant="main"] .btn_text_arrow.is-placeholder{
32
+ display:block
33
+ }
34
+
35
+ [data-wf--btn-text--variant="main"] .btn_text_urarrow.is-placeholder{
36
+ transform:translateY(200%) translateX(-200%)
37
+ }
38
+
39
+ [data-wf--btn-text--variant="main"] .btn_text_arrow.is-placeholder{
40
+ transform:translateX(-200%)
41
+ }
42
+
43
+ [data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_urarrow.is-main{
44
+ transform:translateY(-200%) translateX(200%)
45
+ }
46
+
47
+ [data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_urarrow.is-placeholder{
48
+ transform:translateY(0%) translateX(0%)
49
+ }
50
+
51
+ [data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_arrow.is-main{
52
+ transform:translateX(200%)
53
+ }
54
+
55
+ [data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_arrow.is-placeholder{
56
+ transform:translateX(0%)
57
+ }
58
+ </style>
package/utils/css-animations/cards/card-clickable.html ADDED
@@ -0,0 +1,11 @@
1
+ <style>
2
+ /* ===== CARD ANIMATIONS ===== */
3
+ [data-card-anim="clickable-card"]{
4
+ transition:filter 0.3s ease,transform 0.3s ease
5
+ }
6
+
7
+ [data-card-anim="clickable-card"]:hover{
8
+ transform:translate(0.2rem,0.2rem);
9
+ filter:brightness(90%)
10
+ }
11
+ </style>