@esportsplus/ui 0.5.4 → 0.5.6

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 };

package/src/components/root/onclick.ts

@@ -1,21 +1,21 @@
-let queue: (VoidFunction | (() => Promise<void>))[] = [];
-
-
-const onclick = async () => {
-    if (queue.length === 0) {
-        return;
-    }
-
-    let item;
-
-    while (item = queue.pop()) {
-        await item();
-    }
-};
-
-onclick.add = (fn: VoidFunction) => {
-    queue.push(fn);
-};
-
-
+let queue: (VoidFunction | (() => Promise<void>))[] = [];
+
+
+const onclick = async () => {
+    if (queue.length === 0) {
+        return;
+    }
+
+    let item;
+
+    while (item = queue.pop()) {
+        await item();
+    }
+};
+
+onclick.add = (fn: VoidFunction) => {
+    queue.push(fn);
+};
+
+
 export default onclick;

package/src/components/root/scss/index.scss

@@ -1,94 +1,94 @@
-body,
-html {
-    height: 100%;
-    overflow-x: hidden;
-    width: 100%;
-}
-
-body {
-    background-color: var(--background);
-    color: var(--color);
-    font-family: var(--font-family);
-    font-size: var(--font-size);
-    font-weight: var(--font-weight);
-    line-height: var(--line-height);
-    min-width: var(--min-width);
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-*,
-*::after,
-*::before {
-    box-sizing: border-box;
-    transition: inherit;
-}
-
-section {
-    align-content: flex-start;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    position: relative;
-    width: var(--width);
-}
-
-h1, h2, h3, h4, h5 {
-    color: var(--color);
-    font-size: var(--font-size);
-    font-weight: var(--font-weight);
-    line-height: var(--line-height);
-    margin: 0;
-    padding: 0;
-    position: relative;
-    text-wrap: balance;
-    width: 100%;
-    word-wrap: break-word;
-
-    sub,
-    sup {
-        font-size: 0.64em;
-    }
-}
-
-a {
-    color: var(--color, inherit);
-    cursor: pointer;
-    outline: none;
-    text-decoration: none;
-}
-
-b,
-strong {
-    color: var(--color, inherit);
-    font-weight: var(--font-weight);
-}
-
-p {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    word-wrap: break-word;
-}
-
-pre {
-    margin: 0;
-    overflow-wrap: break-word;
-    padding: 0;
-    white-space: break-spaces;
-    width: 100%;
-}
-
-sub,
-sup {
-    font-size: 0.8em;
-}
-
-sub {
-    bottom: -0.48em;
-}
-
-sup {
-    top: -0.48em;
-}
+body,
+html {
+    height: 100%;
+    overflow-x: hidden;
+    width: 100%;
+}
+
+body {
+    background-color: var(--background);
+    color: var(--color);
+    font-family: var(--font-family);
+    font-size: var(--font-size);
+    font-weight: var(--font-weight);
+    line-height: var(--line-height);
+    min-width: var(--min-width);
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+*,
+*::after,
+*::before {
+    box-sizing: border-box;
+    transition: inherit;
+}
+
+section {
+    align-content: flex-start;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    position: relative;
+    width: var(--width);
+}
+
+h1, h2, h3, h4, h5 {
+    color: var(--color);
+    font-size: var(--font-size);
+    font-weight: var(--font-weight);
+    line-height: var(--line-height);
+    margin: 0;
+    padding: 0;
+    position: relative;
+    text-wrap: balance;
+    width: 100%;
+    word-wrap: break-word;
+
+    sub,
+    sup {
+        font-size: 0.64em;
+    }
+}
+
+a {
+    color: var(--color, inherit);
+    cursor: pointer;
+    outline: none;
+    text-decoration: none;
+}
+
+b,
+strong {
+    color: var(--color, inherit);
+    font-weight: var(--font-weight);
+}
+
+p {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    word-wrap: break-word;
+}
+
+pre {
+    margin: 0;
+    overflow-wrap: break-word;
+    padding: 0;
+    white-space: break-spaces;
+    width: 100%;
+}
+
+sub,
+sup {
+    font-size: 0.8em;
+}
+
+sub {
+    bottom: -0.48em;
+}
+
+sup {
+    top: -0.48em;
+}