@esportsplus/ui 0.6.1 → 0.7.1

package/build/components/link/hover.d.ts

@@ -0,0 +1,10 @@
+declare const _default: ({ attributes, content }: {
+    attributes?: Record<string, any>;
+    content: any;
+}) => {
+    attributes: {
+        class: string;
+    };
+    content: import("@esportsplus/template/build/types").RenderableTemplate;
+};
+export default _default;

package/build/components/link/hover.js

@@ -0,0 +1,17 @@
+import { html } from '@esportsplus/template';
+export default ({ attributes, content }) => {
+    return {
+        attributes: {
+            class: 'link--hover'
+        },
+        content: html `
+            <span class='link-hover link-hover--one' ${attributes}>
+                ${content}
+            </span>
+
+            <span class='link-hover link-hover--two' ${attributes}>
+                ${content}
+            </span>
+        `
+    };
+};

package/build/components/link/index.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    hover: ({ attributes, content }: {
+        attributes?: Record<string, any>;
+        content: any;
+    }) => {
+        attributes: {
+            class: string;
+        };
+        content: import("@esportsplus/template/build/types").RenderableTemplate;
+    };
+};
+export default _default;

package/build/components/link/index.js

@@ -0,0 +1,2 @@
+import hover from './hover';
+export default { hover };

package/build/index.d.ts

@@ -5,6 +5,7 @@ export { default as counter } from './components/counter';
 export { default as ellipsis } from './components/ellipsis';
 export { default as form } from './components/form';
 export { default as json } from './components/json';
+export { default as link } from './components/link';
 export { default as loader } from './components/loader';
 export { default as loading } from './components/loading';
 export { default as magnet } from './components/magnet';

package/build/index.js

@@ -5,6 +5,7 @@ export { default as counter } from './components/counter';
 export { default as ellipsis } from './components/ellipsis';
 export { default as form } from './components/form';
 export { default as json } from './components/json';
+export { default as link } from './components/link';
 export { default as loader } from './components/loader';
 export { default as loading } from './components/loading';
 export { default as magnet } from './components/magnet';

package/components/styles.css

@@ -14,7 +14,7 @@
 .group{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0 calc(var(--margin-horizontal)/-2);position:relative;width:calc(100% + var(--margin-horizontal))}.group--offset-bottom{margin-bottom:calc(var(--margin-vertical)*-1)}.group--offset-top{margin-top:calc(var(--margin-vertical)*-1)}.group--scroller{flex-flow:row;margin-bottom:calc(var(--scrollbar-width)*-1);overflow-y:hidden;padding-bottom:var(--scrollbar-width)}.group-item{display:flex;margin:var(--margin-vertical) calc(var(--margin-horizontal)/2) 0;position:relative;width:var(--width)}.group-item[class*="--width"]{width:calc(var(--width) - var(--margin-horizontal))}
 .highlight{background:linear-gradient(90deg, var(--background) 50%, transparent 50%) 110% 0/200% 100% no-repeat;background-position:calc((1 - var(--highlight))*110%) 0;transition:background-position .32s}
 .icon{color:var(--color);display:flex;flex:0 0 var(--width);height:var(--height);position:relative;width:var(--width)}.icon svg{color:currentColor;fill:currentColor;height:100%;width:100%}
-.link{align-content:center;background:var(--background);color:var(--color);cursor:pointer;display:flex;flex-wrap:wrap;font-size:var(--font-size);justify-content:flex-start;line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;width:var(--width)}.link--underline.--active,.link--underline:not(.--active):hover{text-decoration:underline}
+.link{align-content:center;background:var(--background);color:var(--color);cursor:pointer;display:flex;flex-wrap:wrap;font-size:var(--font-size);justify-content:flex-start;line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;width:var(--width)}.link--hover.tooltip:hover .link-hover--one,.link--hover:not(.--active):hover .link-hover--one{opacity:0;transform:translateY(-75%)}.link--hover.tooltip:hover .link-hover--two,.link--hover:not(.--active):hover .link-hover--two{opacity:1;transform:translate(50%, 50%)}.link--underline.--active,.link--underline:not(.--active):hover{text-decoration:underline}.link-hover{transition:opacity .3s ease-in-out,.3s cubic-bezier(0.23, 0.65, 0.74, 1.09)}.link-hover--one{transform:translateY(0)}.link-hover--two{position:absolute;bottom:50%;right:50%;transform:translate(50%, 50%);opacity:0;padding:0 var(--padding-horizontal);transform:translate(50%, 125%);white-space:nowrap}
 .loader{background-color:var(--color-black-500);bottom:0;left:0;position:fixed;opacity:1;pointer-events:none;right:0;top:0;transition:all .3s ease-in-out;visibility:visible;z-index:9999}.loader--load{animation:.6s .2s ease-in-out 1 both move}.loader--load .loader--load{animation:.6s ease-in-out 1 both move}@keyframes move{0%{transform:translateY(0)}80%{transform:translateY(-102%)}100%{transform:translateY(-102%)}}.loader .loader{background-color:var(--color-black-400)}.loader-content{bottom:auto;left:50%;position:absolute;right:auto;top:50%;transform:translateX(-50%) translateY(-50%)}.loader-logo{color:#fff}.loader-logo--scale{animation:scale .32s 1;animation-fill-mode:both}@keyframes scale{from{opacity:1;transform:scale3d(1, 1, 1)}to{opacity:0;transform:scale3d(1.8, 1.8, 1.8)}}
 .loading{animation:Loading var(--animation-duration) linear infinite;border:var(--border-width) solid color-mix(in srgb, var(--border-color), transparent 90%);border-left-color:var(--border-color);border-radius:100%;height:var(--size);width:var(--size)}@keyframes Loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
 .magnet{position:absolute;top:0;left:0;background:var(--background);border-radius:var(--border-radius);height:0;opacity:0;transition:height var(--transition-duration) var(--timing-function),opacity var(--transition-duration) var(--timing-function),transform var(--transition-duration) var(--timing-function),width var(--transition-duration) var(--timing-function);width:0;z-index:-1}

package/package.json

@@ -21,5 +21,5 @@
     },
     "sideEffects": false,
     "types": "build/index.d.ts",
-    "version": "0.6.1"
+    "version": "0.7.1"
 }

package/src/components/link/hover.ts

@@ -0,0 +1,19 @@
+import { html } from '@esportsplus/template';
+
+
+export default ({ attributes, content }: { attributes?: Record<string, any>, content: any }) => {
+    return {
+        attributes: {
+            class: 'link--hover'
+        },
+        content: html`
+            <span class='link-hover link-hover--one' ${attributes}>
+                ${content}
+            </span>
+
+            <span class='link-hover link-hover--two' ${attributes}>
+                ${content}
+            </span>
+        `
+    };
+};

package/src/components/link/index.ts

@@ -0,0 +1,4 @@
+import hover from './hover';
+
+
+export default { hover };

package/src/components/link/scss/index.scss

@@ -1,3 +1,4 @@
+@use '/lib';
 @use '/tokens';
 
 .link {
@@ -20,9 +21,45 @@
     width: var(--width);
 
 
+    &--hover {
+        &.tooltip,
+        &:not(.--active) {
+            &:hover {
+                .link-hover {
+                    &--one {
+                        opacity: 0;
+                        transform: translateY(-75%);
+                    }
+
+                    &--two {
+                        opacity: 1;
+                        transform: translate(50%, 50%);
+                    }
+                }
+            }
+        }
+    }
+
     &--underline {
         @include tokens.state(active hover) {
             text-decoration: underline;
         }
     }
+
+
+    &-hover {
+        transition: opacity 0.3s ease-in-out, 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
+
+        &--one {
+            transform: translateY(0);
+        }
+
+        &--two {
+            @include lib.position(absolute, center);
+            opacity: 0;
+            padding: 0 var(--padding-horizontal);
+            transform: translate(50%, 125%);
+            white-space: nowrap;
+        }
+    }
 }

package/src/index.ts

@@ -6,6 +6,7 @@ export { default as counter }from './components/counter';
 export { default as ellipsis }from './components/ellipsis';
 export { default as form }from './components/form';
 export { default as json }from './components/json';
+export { default as link }from './components/link';
 export { default as loader }from './components/loader';
 export { default as loading }from './components/loading';
 export { default as magnet }from './components/magnet';