@hortonstudio/main 1.7.13 → 1.7.15

package/utils/css-animations/buttons/text/double-slide/text-main-double-slide.html

@@ -0,0 +1,56 @@
+<style>
+/* ===== DOUBLE SLIDE ANIMATION ===== */
+[data-wf--btn-text--variant="main"] .btn_text_text.is-placeholder,
+[data-wf--btn-text--variant="main"] .btn_text_urarrow.is-placeholder,
+[data-wf--btn-text--variant="main"] .btn_text_arrow.is-placeholder,
+[data-wf--btn-text--variant="main"] .btn_text_icon.is-placeholder{
+  display:block
+}
+
+[data-wf--btn-text--variant="main"] .btn_text_text.is-placeholder,
+[data-wf--btn-text--variant="main"] .btn_text_icon.is-placeholder{
+  transform:translateY(200%)
+}
+
+[data-wf--btn-text--variant="main"] .btn_text_urarrow.is-placeholder{
+  transform:translateY(200%) translateX(-200%)
+}
+
+[data-wf--btn-text--variant="main"] .btn_text_arrow.is-placeholder{
+  transform:translateY(200%)
+}
+
+/* Hover States */
+[data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_text.is-main,
+[data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_icon.is-main,
+[data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_arrow.is-main{
+  transform:translateY(-200%)
+}
+
+[data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_text.is-placeholder,
+[data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_icon.is-placeholder,
+[data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_arrow.is-placeholder{
+  transform:translateY(0%)
+}
+
+[data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_urarrow.is-main{
+  transform:translateY(-200%) translateX(200%)
+}
+
+[data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_urarrow.is-placeholder{
+  transform:translateY(0%) translateX(0%)
+}
+
+/* ===== IS-LEFT VARIANT ===== */
+[data-wf--btn-text--variant="main"] .btn_text_arrow_wrap.is-left .btn_text_arrow.is-placeholder{
+  transform:translateY(-200%)
+}
+
+[data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_arrow_wrap.is-left .btn_text_arrow.is-main{
+  transform:translateY(200%)
+}
+
+[data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_arrow_wrap.is-left .btn_text_arrow.is-placeholder{
+  transform:translateY(0%)
+}
+</style>

package/utils/css-animations/buttons/text/scale/text-footer-scale.html

@@ -0,0 +1,6 @@
+<style>
+/* ===== SCALE ANIMATION ===== */
+[data-wf--btn-text--variant="footer"] .btn_text_content:hover{
+  transform:scale3d(1.075,1.075,1)
+}
+</style>

package/utils/css-animations/buttons/text/scale/text-main-scale.html

@@ -0,0 +1,6 @@
+<style>
+/* ===== SCALE ANIMATION ===== */
+[data-wf--btn-text--variant="main"] .btn_text_content:hover{
+  transform:scale3d(1.075,1.075,1)
+}
+</style>

package/utils/css-animations/buttons/text/underline/text-footer-underline.html

@@ -0,0 +1,45 @@
+<style>
+/* ===== UNDERLINE ANIMATION ===== */
+[data-wf--btn-text--variant="footer"] .btn_text_line_wrap{
+  display:block
+}
+
+[data-wf--btn-text--variant="footer"] .btn_text_line.is-main{
+  transform:translateX(-110%)
+}
+
+/* Line Hover States */
+[data-wf--btn-text--variant="footer"] .btn_text_contain:hover .btn_text_line.is-main{
+  transform:translateX(0%)
+}
+
+/* ===== UNDERLINE ANIMATION EXTRAS ===== */
+[data-wf--btn-text--variant="footer"] .btn_text_urarrow.is-placeholder,
+[data-wf--btn-text--variant="footer"] .btn_text_arrow.is-placeholder{
+  display:block
+}
+
+[data-wf--btn-text--variant="footer"] .btn_text_urarrow.is-placeholder{
+  transform:translateY(200%) translateX(-200%)
+}
+
+[data-wf--btn-text--variant="footer"] .btn_text_arrow.is-placeholder{
+  transform:translateX(-200%)
+}
+
+[data-wf--btn-text--variant="footer"] .btn_text_contain:hover .btn_text_urarrow.is-main{
+  transform:translateY(-200%) translateX(200%)
+}
+
+[data-wf--btn-text--variant="footer"] .btn_text_contain:hover .btn_text_urarrow.is-placeholder{
+  transform:translateY(0%) translateX(0%)
+}
+
+[data-wf--btn-text--variant="footer"] .btn_text_contain:hover .btn_text_arrow.is-main{
+  transform:translateX(200%)
+}
+
+[data-wf--btn-text--variant="footer"] .btn_text_contain:hover .btn_text_arrow.is-placeholder{
+  transform:translateX(0%)
+}
+</style>

package/utils/css-animations/buttons/text/underline/text-main-underline.html

@@ -0,0 +1,58 @@
+<style>
+/* ===== UNDERLINE ANIMATION ===== */
+[data-wf--btn-text--variant="main"] .btn_text_line_wrap{
+  display:block
+}
+
+[data-wf--btn-text--variant="main"] .btn_text_line.is-placeholder{
+  display:block;
+  transform:translateX(-110%);
+  transition-delay:0s
+}
+
+[data-wf--btn-text--variant="main"] .btn_text_line.is-main{
+  transform:translateX(0%);
+  transition-delay:0.1s
+}
+
+/* Line Hover States */
+[data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_line.is-placeholder{
+  transform:translateX(0%);
+  transition-delay:0.1s
+}
+
+[data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_line.is-main{
+  transform:translateX(110%);
+  transition-delay:0s
+}
+
+/* ===== UNDERLINE ANIMATION EXTRAS ===== */
+[data-wf--btn-text--variant="main"] .btn_text_urarrow.is-placeholder,
+[data-wf--btn-text--variant="main"] .btn_text_arrow.is-placeholder{
+  display:block
+}
+
+[data-wf--btn-text--variant="main"] .btn_text_urarrow.is-placeholder{
+  transform:translateY(200%) translateX(-200%)
+}
+
+[data-wf--btn-text--variant="main"] .btn_text_arrow.is-placeholder{
+  transform:translateX(-200%)
+}
+
+[data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_urarrow.is-main{
+  transform:translateY(-200%) translateX(200%)
+}
+
+[data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_urarrow.is-placeholder{
+  transform:translateY(0%) translateX(0%)
+}
+
+[data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_arrow.is-main{
+  transform:translateX(200%)
+}
+
+[data-wf--btn-text--variant="main"] .btn_text_contain:hover .btn_text_arrow.is-placeholder{
+  transform:translateX(0%)
+}
+</style>

package/utils/css-animations/cards/card-clickable.html

@@ -0,0 +1,11 @@
+<style>
+/* ===== CARD ANIMATIONS ===== */
+[data-card-anim="clickable-card"]{
+  transition:filter 0.3s ease,transform 0.3s ease
+}
+
+[data-card-anim="clickable-card"]:hover{
+  transform:translate(0.2rem,0.2rem);
+  filter:brightness(90%)
+}
+</style>

package/utils/css-animations/defaults.html

@@ -0,0 +1,69 @@
+<style>
+/* ===== DEFAULT STYLES ===== */
+/* ===== ARROW ROTATION ===== */
+.navbar_btn_1_wrap:not([data-hs-nav="menu-dropdown"] *) .navbar_btn_1_link:hover .navbar_btn_1_darrow,
+[data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap .navbar_btn_1_darrow,
+[data-hs-nav="menu-dropdown"].is-active > .navbar_btn_1_wrap .navbar_btn_1_darrow{
+  rotate:90deg
+}
+
+.navbar_btn_1_line_wrap{
+  display:none
+}
+
+.navbar_btn_1_darrow.is-placeholder,
+.navbar_btn_1_arrow.is-placeholder,
+.navbar_btn_1_text.is-placeholder,
+.navbar_btn_1_icon.is-placeholder{
+  display:none
+}
+
+.btn_text_text.is-placeholder,
+.btn_text_icon.is-placeholder,
+.btn_text_urarrow.is-placeholder,
+.btn_text_arrow.is-placeholder,
+.btn_text_line.is-placeholder,.btn_text_line_wrap{
+  display:none
+}
+
+/* ===== SHARED ANIMATION PROPERTIES ===== */
+.navbar_btn_1_line,
+.navbar_btn_1_text,
+.navbar_btn_1_icon,
+.btn_text_text,
+.btn_text_icon,
+.btn_text_line{
+  transition:transform 500ms cubic-bezier(0.76,0,0.24,1)
+}
+
+.navbar_btn_1_darrow,
+.navbar_btn_1_arrow,
+.btn_text_arrow,
+.btn_text_urarrow{
+  transition:rotate 300ms ease,transform 500ms cubic-bezier(0.76,0,0.24,1)
+}
+
+.navbar_btn_1_content,
+.btn_text_content{
+  transition:transform 200ms ease
+}
+
+.navbar_btn_1_link,
+.btn_text_contain{
+  transition:color 250ms ease
+}
+
+/* ===== PREVENT ANIMATIONS ===== */
+.btn_text_contain[data-cssanim="prevent"] *{
+  transition:none !important;
+  transform:none !important
+}
+
+.btn_text_contain[data-cssanim="prevent"]:hover *{
+  transform:none !important
+}
+
+.btn_text_contain[data-cssanim="prevent"] .btn_text_line_wrap{
+  display:none !important
+}
+</style>