@esportsplus/ui 0.7.16 → 0.8.2

package/src/components/loader/scss/index.scss

@@ -1,69 +1,69 @@
-.loader {
-    background-color: var(--color-black-500);
-    bottom: 0;
-    left: 0;
-    position: fixed;
-    opacity: 1;
-    pointer-events: none;
-    right: 0;
-    top: 0;
-    transition: all 0.3s ease-in-out;
-    visibility: visible;
-    z-index: 9999;
-
-
-    &--load {
-        animation: 0.6s 0.2s ease-in-out 1 both move;
-
-        & & {
-            animation: 0.6s ease-in-out 1 both move;
-        }
-    }
-
-
-    @keyframes move {
-        0% {
-            transform: translateY(0);
-        }
-        80% {
-            transform: translateY(-102%);
-        }
-        100% {
-            transform: translateY(-102%);
-        }
-    }
-
-
-    & & {
-        background-color: var(--color-black-400);
-    }
-
-    &-content {
-        bottom: auto;
-        left: 50%;
-        position: absolute;
-        right: auto;
-        top: 50%;
-        transform: translateX(-50%) translateY(-50%);
-    }
-
-    &-logo {
-        color: white;
-
-        &--scale {
-            animation: scale 0.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);
-                }
-            }
-        }
-    }
+.loader {
+    background-color: var(--color-black-500);
+    bottom: 0;
+    left: 0;
+    position: fixed;
+    opacity: 1;
+    pointer-events: none;
+    right: 0;
+    top: 0;
+    transition: all 0.3s ease-in-out;
+    visibility: visible;
+    z-index: 9999;
+
+
+    &--load {
+        animation: 0.6s 0.2s ease-in-out 1 both move;
+
+        & & {
+            animation: 0.6s ease-in-out 1 both move;
+        }
+    }
+
+
+    @keyframes move {
+        0% {
+            transform: translateY(0);
+        }
+        80% {
+            transform: translateY(-102%);
+        }
+        100% {
+            transform: translateY(-102%);
+        }
+    }
+
+
+    & & {
+        background-color: var(--color-black-400);
+    }
+
+    &-content {
+        bottom: auto;
+        left: 50%;
+        position: absolute;
+        right: auto;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+    }
+
+    &-logo {
+        color: white;
+
+        &--scale {
+            animation: scale 0.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);
+                }
+            }
+        }
+    }
 }

package/src/components/loader/scss/variables.scss

@@ -1,6 +1,6 @@
-.loader {
-    &-logo{
-        --size: 10svh;
-        --translateY: 8px;
-    }
+.loader {
+    &-logo{
+        --size: 10svh;
+        --translateY: 8px;
+    }
 }

package/src/components/loading/index.ts

@@ -1,8 +1,8 @@
-import { html } from '@esportsplus/template';
-
-
-export default (properties?: Record<PropertyKey, unknown>) => {
-    return html`
-        <div class="loading --border-width-700 --size-800" style='--border-color: var(--color-border-500);' ${properties}></div>
-    `;
+import { html } from '@esportsplus/template';
+
+
+export default (properties?: Record<PropertyKey, unknown>) => {
+    return html`
+        <div class="loading --border-width-700 --size-800" style='--border-color: var(--color-border-500);' ${properties}></div>
+    `;
 };

package/src/components/loading/scss/index.scss

@@ -1,17 +1,17 @@
-.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)
-    }
+.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)
+    }
 }

package/src/components/loading/scss/variables.scss

@@ -1,6 +1,6 @@
-.loading {
-    --animation-duration: 0.64s;
-    --border-color: var(--color);
-    --border-width: var(--border-width-400);
-    --size: var(--size-400);
+.loading {
+    --animation-duration: 0.64s;
+    --border-color: var(--color);
+    --border-width: var(--border-width-400);
+    --size: var(--size-400);
 }

package/src/components/magnet/index.ts

@@ -1,55 +1,55 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-
-
-export default ({ attributes, hide }: { attributes?: Record<string, unknown>, hide?: boolean }) => {
-    let active = false,
-        events: Record<string, Function> = {
-            onmouseover: function (this: HTMLElement) {
-                let { offsetHeight, offsetLeft, offsetTop, offsetWidth } = this;
-
-                active = true;
-
-                state.height = offsetHeight;
-                state.left = offsetLeft;
-                state.opacity = 1;
-                state.top = offsetTop;
-                state.width = offsetWidth;
-            }
-        },
-        state = reactive({
-            height: null as number | null,
-            hide: true,
-            left: 0,
-            opacity: 0,
-            top: 0,
-            width: 0
-        });
-
-    if (hide === true) {
-        events.onmouseout = () => {
-            active = false;
-            setTimeout(() => {
-                if (active === true) {
-                    return;
-                }
-
-                state.opacity = 0;
-            }, 50);
-        };
-    }
-
-    return {
-        html: html`
-            <div class='magnet' style='${() => `
-                height: ${state.height ? `${state.height}px` : '100%'};
-                opacity: ${state.opacity};
-                transform: translate(${state.left}px, ${state.top}px);
-                width: ${state.width}px;
-            `}' ${attributes}></div>
-        `,
-        sibling: {
-            attributes: events
-        }
-    };
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+
+
+export default ({ attributes, hide }: { attributes?: Record<string, unknown>, hide?: boolean }) => {
+    let active = false,
+        events: Record<string, Function> = {
+            onmouseover: function (this: HTMLElement) {
+                let { offsetHeight, offsetLeft, offsetTop, offsetWidth } = this;
+
+                active = true;
+
+                state.height = offsetHeight;
+                state.left = offsetLeft;
+                state.opacity = 1;
+                state.top = offsetTop;
+                state.width = offsetWidth;
+            }
+        },
+        state = reactive({
+            height: null as number | null,
+            hide: true,
+            left: 0,
+            opacity: 0,
+            top: 0,
+            width: 0
+        });
+
+    if (hide === true) {
+        events.onmouseout = () => {
+            active = false;
+            setTimeout(() => {
+                if (active === true) {
+                    return;
+                }
+
+                state.opacity = 0;
+            }, 50);
+        };
+    }
+
+    return {
+        html: html`
+            <div class='magnet' style='${() => `
+                height: ${state.height ? `${state.height}px` : '100%'};
+                opacity: ${state.opacity};
+                transform: translate(${state.left}px, ${state.top}px);
+                width: ${state.width}px;
+            `}' ${attributes}></div>
+        `,
+        sibling: {
+            attributes: events
+        }
+    };
 };

package/src/components/magnet/scss/index.scss

@@ -1,16 +1,16 @@
-@use '/lib';
-
-.magnet {
-    @include lib.position(absolute, 0 null null 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;
-}
+@use '/lib';
+
+.magnet {
+    @include lib.position(absolute, 0 null null 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/src/components/magnet/scss/variables.scss

@@ -1,5 +1,5 @@
-.magnet {
-    --background: transparent;
-    --border-radius: var(--border-radius-400);
-    --timing-function: var(--timing-circ);
+.magnet {
+    --background: transparent;
+    --border-radius: var(--border-radius-400);
+    --timing-function: var(--timing-circ);
 }

package/src/components/modal/scss/index.scss

@@ -1,35 +1,35 @@
-@use '/lib';
-@use '/tokens';
-
-.modal {
-    @include lib.position(fixed, center);
-    max-height: var(--max-height);
-    overflow: hidden;
-    transition:
-        opacity var(--transition-duration) ease-in-out,
-        transform var(--transition-duration) ease-in-out;
-    transform-origin: center;
-    width: min(var(--max-width), calc(100svw - (var(--margin-horizontal) * 2)));
-    z-index: 2;
-
-    @include tokens.state(inactive) {
-        opacity: 0;
-        pointer-events: none;
-        transform: translate(50%, 50%) scale(0.8);
-
-        input[type='password'] {
-            display: none;
-        }
-    }
-
-    &-frame {
-        transition:
-            opacity var(--transition-duration) ease-in-out,
-            transform var(--transition-duration) ease-in-out;
-        transform-origin: center;
-
-        @include tokens.state(inactive) {
-            display: none;
-        }
-    }
+@use '/lib';
+@use '/tokens';
+
+.modal {
+    @include lib.position(fixed, center);
+    max-height: var(--max-height);
+    overflow: hidden;
+    transition:
+        opacity var(--transition-duration) ease-in-out,
+        transform var(--transition-duration) ease-in-out;
+    transform-origin: center;
+    width: min(var(--max-width), calc(100svw - (var(--margin-horizontal) * 2)));
+    z-index: 2;
+
+    @include tokens.state(inactive) {
+        opacity: 0;
+        pointer-events: none;
+        transform: translate(50%, 50%) scale(0.8);
+
+        input[type='password'] {
+            display: none;
+        }
+    }
+
+    &-frame {
+        transition:
+            opacity var(--transition-duration) ease-in-out,
+            transform var(--transition-duration) ease-in-out;
+        transform-origin: center;
+
+        @include tokens.state(inactive) {
+            display: none;
+        }
+    }
 }

package/src/components/modal/scss/variables.scss

@@ -1,6 +1,6 @@
-.modal {
-    --margin-horizontal: 0px;
-    --margin-vertical: 0px;
-    --max-height: calc(100svh - (var(--margin-vertical) * 2));
-    --max-width: 320px;
-}
+.modal {
+    --margin-horizontal: 0px;
+    --margin-vertical: 0px;
+    --max-height: calc(100svh - (var(--margin-vertical) * 2));
+    --max-width: 320px;
+}

package/src/components/number/index.ts

@@ -1,24 +1,24 @@
-let formatter: null | Intl.NumberFormat = null,
-    suffixes = ['th', 'st', 'nd', 'rd'];
-
-
-const abbreviate = (number: number) => {
-    if (formatter === null) {
-        formatter = new Intl.NumberFormat('en-GB', {
-            notation: 'compact',
-            compactDisplay: 'short'
-        });
-    }
-
-    return formatter.format(number);
-};
-
-const ordinal = (number: number) => {
-    let value = number % 100;
-
-    return suffixes[(value - 20) % 10] || suffixes[value] || suffixes[0];
-};
-
-
-export default { abbreviate, ordinal };
+let formatter: null | Intl.NumberFormat = null,
+    suffixes = ['th', 'st', 'nd', 'rd'];
+
+
+const abbreviate = (number: number) => {
+    if (formatter === null) {
+        formatter = new Intl.NumberFormat('en-GB', {
+            notation: 'compact',
+            compactDisplay: 'short'
+        });
+    }
+
+    return formatter.format(number);
+};
+
+const ordinal = (number: number) => {
+    let value = number % 100;
+
+    return suffixes[(value - 20) % 10] || suffixes[value] || suffixes[0];
+};
+
+
+export default { abbreviate, ordinal };
 export { abbreviate, ordinal };

package/src/components/page/index.ts

@@ -1,15 +1,15 @@
-const subtitle = {
-    class: 'page-subtitle --margin-200 --text-crop-bottom'
-};
-
-const suptitle = {
-    class: 'page-suptitle --text-bold-600 --text-crop --text-uppercase --text-300'
-};
-
-const title = {
-    class: 'page-title --line-height-200 --margin-400 --text-crop'
-};
-
-
-export default { subtitle, suptitle, title };
+const subtitle = {
+    class: 'page-subtitle --margin-200 --text-crop-bottom'
+};
+
+const suptitle = {
+    class: 'page-suptitle --text-bold-600 --text-crop --text-uppercase --text-300'
+};
+
+const title = {
+    class: 'page-title --line-height-200 --margin-400 --text-crop'
+};
+
+
+export default { subtitle, suptitle, title };
 export { subtitle, suptitle, title };

package/src/components/page/scss/index.scss

@@ -1,31 +1,31 @@
-.page {
-    min-height: 100svh;
-    position: relative;
-    width: 100vw;
-
-
-    &-subtitle,
-    &-suptitle,
-    &-title {
-        color: var(--color);
-        display: block;
-        line-height: var(--line-height);
-        position: relative;
-        width: 100%;
-        z-index: 1;
-    }
-
-    &-subtitle,
-    &-suptitle {
-        font-size: var(--font-size);
-    }
-
-    &-suptitle + &-title,
-    &-title + &-subtitle {
-        margin-top: var(--margin-vertical);
-    }
-
-    &-title {
-        text-wrap: balance;
-    }
-}
+.page {
+    min-height: 100svh;
+    position: relative;
+    width: 100vw;
+
+
+    &-subtitle,
+    &-suptitle,
+    &-title {
+        color: var(--color);
+        display: block;
+        line-height: var(--line-height);
+        position: relative;
+        width: 100%;
+        z-index: 1;
+    }
+
+    &-subtitle,
+    &-suptitle {
+        font-size: var(--font-size);
+    }
+
+    &-suptitle + &-title,
+    &-title + &-subtitle {
+        margin-top: var(--margin-vertical);
+    }
+
+    &-title {
+        text-wrap: balance;
+    }
+}

package/src/components/page/scss/variables.scss

@@ -1,15 +1,15 @@
-.page {
-    &-subtitle,
-    &-suptitle {
-        --color: var(--color-default);
-        --color-default: var(--color-text-400);
-        --font-size: var(--font-size-400);
-        --line-height: var(--line-height-400);
-    }
-
-    &-title {
-        --color: var(--color-default);
-        --color-default: var(--color-text-500);
-        --line-height: var(--line-height-400);
-    }
-}
+.page {
+    &-subtitle,
+    &-suptitle {
+        --color: var(--color-default);
+        --color-default: var(--color-text-400);
+        --font-size: var(--font-size-400);
+        --line-height: var(--line-height-400);
+    }
+
+    &-title {
+        --color: var(--color-default);
+        --color-default: var(--color-text-500);
+        --line-height: var(--line-height-400);
+    }
+}

package/src/components/root/index.ts

@@ -1,5 +1,5 @@
-import onclick from './onclick';
-
-
-export default { onclick };
+import onclick from './onclick';
+
+
+export default { onclick };
 export { onclick };