@esportsplus/ui 0.1.8 → 0.2.2

package/src/components/root/onclick.ts

@@ -1,21 +1,21 @@
-let queue: VoidFunction[] = [];
-
-
-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[] = [];
+
+
+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,93 +1,93 @@
-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;
-    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;
+    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;
+}

package/src/components/root/scss/variables.scss

@@ -1,55 +1,55 @@
-@use '/lib';
-@use '/tokens';
-
-body {
-    @include lib.css-variables(border-radius, tokens.$border-radius);
-    @include lib.css-variables(box-shadow, tokens.$box-shadow);
-    @include lib.css-variables(border-width, tokens.$border-width);
-    @include lib.css-variables(color, tokens.$color);
-    @include lib.css-variables(font-size, tokens.$font-size);
-    @include lib.css-variables(font-weight, tokens.$font-weight);
-    @include lib.css-variables(line-height, tokens.$line-height);
-    @include lib.css-variables(size, tokens.$size);
-    @include lib.css-variables(spacer, tokens.$spacer);
-    @include lib.css-variables(transition-duration, tokens.$transition-duration);
-
-    --background: var(--color-grey-400);
-    --color: var(--color-text-400);
-    --font-family: 'Montserrat', sans-serif;
-    --font-size: var(--font-size-400);
-    --font-weight: var(--font-weight-400);
-    --line-height: var(--line-height-400);
-    --min-width: 320px;
-
-    // Used by components requiring scrollbar width
-    // - Should be updated using JS on load
-    --scrollbar-width: 17px;
-}
-
-section {
-    --width: 100%;
-}
-
-h1, h2, h3, h4, h5 {
-    --color: var(--color-text-400);
-    --font-weight: var(--font-weight-600);
-    --line-height: var(--line-height-300);
-}
-
-// Loop Through Font Size Keys To Set Header Font Size + Line Height
-$keys: lib.map-keys(tokens.$font-size);
-$i: nth($keys, lib.list-length($keys));
-
-@each $h in h1 h2 h3 h4 h5 {
-    #{$h} {
-        --font-size: var(--font-size-#{$i});
-    }
-
-    $i: $i - 100;
-}
-
-b,
-strong {
-    --color: var(--color-text-400);
-    --font-weight: var(--font-weight-500);
-}
+@use '/lib';
+@use '/tokens';
+
+body {
+    @include lib.css-variables(border-radius, tokens.$border-radius);
+    @include lib.css-variables(box-shadow, tokens.$box-shadow);
+    @include lib.css-variables(border-width, tokens.$border-width);
+    @include lib.css-variables(color, tokens.$color);
+    @include lib.css-variables(font-size, tokens.$font-size);
+    @include lib.css-variables(font-weight, tokens.$font-weight);
+    @include lib.css-variables(line-height, tokens.$line-height);
+    @include lib.css-variables(size, tokens.$size);
+    @include lib.css-variables(spacer, tokens.$spacer);
+    @include lib.css-variables(transition-duration, tokens.$transition-duration);
+
+    --background: var(--color-grey-400);
+    --color: var(--color-text-400);
+    --font-family: 'Montserrat', sans-serif;
+    --font-size: var(--font-size-400);
+    --font-weight: var(--font-weight-400);
+    --line-height: var(--line-height-400);
+    --min-width: 320px;
+
+    // Used by components requiring scrollbar width
+    // - Should be updated using JS on load
+    --scrollbar-width: 17px;
+}
+
+section {
+    --width: 100%;
+}
+
+h1, h2, h3, h4, h5 {
+    --color: var(--color-text-400);
+    --font-weight: var(--font-weight-600);
+    --line-height: var(--line-height-300);
+}
+
+// Loop Through Font Size Keys To Set Header Font Size + Line Height
+$keys: lib.map-keys(tokens.$font-size);
+$i: nth($keys, lib.list-length($keys));
+
+@each $h in h1 h2 h3 h4 h5 {
+    #{$h} {
+        --font-size: var(--font-size-#{$i});
+    }
+
+    $i: $i - 100;
+}
+
+b,
+strong {
+    --color: var(--color-text-400);
+    --font-weight: var(--font-weight-500);
+}

package/src/components/row/scss/index.scss

@@ -1,7 +1,7 @@
-.row {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    position: relative;
-    width: 100%;
-}
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    position: relative;
+    width: 100%;
+}

package/src/components/scrollbar/index.ts

@@ -1,44 +1,44 @@
-import { reactive } from '@esportsplus/reactivity';
-import { html } from '@esportsplus/template';
-
-
-let root = document.body,
-    width: number | undefined;
-
-
-export default ({ fixed, style }: { fixed?: boolean, style?: string } = {}) => {
-    let state = reactive({
-            height: 100,
-            translate: 0
-        });
-
-    return {
-        attributes: {
-            class: () => {
-                return '--scrollbar-content';
-            },
-            onscroll: function(this: HTMLElement) {
-                if (width === undefined) {
-                    width = this.offsetWidth - this.clientWidth;
-
-                    if (width && width !== 17) {
-                        root.style.setProperty('--scrollbar-width', `${width}px`);
-                    }
-                }
-
-                state.height = (this.clientHeight / this.scrollHeight) * 100;
-                state.translate = (this.scrollTop / this.clientHeight) * 100;
-            }
-        },
-        html: html`
-            <div
-                class='scrollbar ${fixed ? 'scrollbar--fixed' : ''} ${() => state.height >= 100 ? 'scrollbar--hidden' : ''}'
-                style='${() => `
-                    ${style || ''}
-                    --translate: translate3d(0, ${state.translate}%, 0);
-                    --height: ${state.height}%;
-                `}'
-            ></div>
-        `
-    };
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+
+
+let root = document.body,
+    width: number | undefined;
+
+
+export default ({ fixed, style }: { fixed?: boolean, style?: string } = {}) => {
+    let state = reactive({
+            height: 100,
+            translate: 0
+        });
+
+    return {
+        attributes: {
+            class: () => {
+                return '--scrollbar-content';
+            },
+            onscroll: function(this: HTMLElement) {
+                if (width === undefined) {
+                    width = this.offsetWidth - this.clientWidth;
+
+                    if (width && width !== 17) {
+                        root.style.setProperty('--scrollbar-width', `${width}px`);
+                    }
+                }
+
+                state.height = (this.clientHeight / this.scrollHeight) * 100;
+                state.translate = (this.scrollTop / this.clientHeight) * 100;
+            }
+        },
+        html: html`
+            <div
+                class='scrollbar ${fixed ? 'scrollbar--fixed' : ''} ${() => state.height >= 100 ? 'scrollbar--hidden' : ''}'
+                style='${() => `
+                    ${style || ''}
+                    --translate: translate3d(0, ${state.translate}%, 0);
+                    --height: ${state.height}%;
+                `}'
+            ></div>
+        `
+    };
 };

package/src/components/scrollbar/scss/index.scss

@@ -1,59 +1,59 @@
-// Hide Chrome Mobile Scrollbar
-::-webkit-scrollbar,
-::-webkit-scrollbar-track,
-::-webkit-scrollbar-thumb,
-::-webkit-scrollbar-thumb:window-inactive {
-    background: transparent;
-    box-shadow: unset;
-}
-
-.--scrollbar {
-    &-container {
-        display: flex;
-        flex-flow: column;
-        overflow: hidden;
-        position: relative;
-    }
-
-    &-content {
-        height: 100%;
-        margin-right: calc(var(--scrollbar-width) * -1);
-        overflow-x: hidden;
-        overflow-y: scroll;
-        scroll-behavior: smooth;
-        width: calc(100% + var(--scrollbar-width));
-    }
-}
-
-.scrollbar {
-    height: 100%;
-    z-index: 9;
-
-
-    &,
-    &::before {
-        position: absolute;
-        right: 0;
-        top: 0;
-        transition: opacity var(--transition-duration) ease-in-out;
-        width: 4px;
-    }
-
-    &::before {
-        background: var(--background-default);
-        border-radius: 1px 0 0 1px;
-        content: '';
-        height: var(--height);
-        transform: var(--translate);
-        transform-origin: top center;
-    }
-
-
-    &--fixed {
-        position: fixed;
-    }
-
-    &--hidden {
-        opacity: 0;
-    }
-}
+// Hide Chrome Mobile Scrollbar
+::-webkit-scrollbar,
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-thumb:window-inactive {
+    background: transparent;
+    box-shadow: unset;
+}
+
+.--scrollbar {
+    &-container {
+        display: flex;
+        flex-flow: column;
+        overflow: hidden;
+        position: relative;
+    }
+
+    &-content {
+        height: 100%;
+        margin-right: calc(var(--scrollbar-width) * -1);
+        overflow-x: hidden;
+        overflow-y: scroll;
+        scroll-behavior: smooth;
+        width: calc(100% + var(--scrollbar-width));
+    }
+}
+
+.scrollbar {
+    height: 100%;
+    z-index: 9;
+
+
+    &,
+    &::before {
+        position: absolute;
+        right: 0;
+        top: 0;
+        transition: opacity var(--transition-duration) ease-in-out;
+        width: 4px;
+    }
+
+    &::before {
+        background: var(--background-default);
+        border-radius: 1px 0 0 1px;
+        content: '';
+        height: var(--height);
+        transform: var(--translate);
+        transform-origin: top center;
+    }
+
+
+    &--fixed {
+        position: fixed;
+    }
+
+    &--hidden {
+        opacity: 0;
+    }
+}

package/src/components/scrollbar/scss/variables.scss

@@ -1,6 +1,6 @@
-.scrollbar {
-    --background-default: transparent;
-    --height: 0;
-    --transition-duration: var(--transition-duration-400);
-    --translate: translate3d(0, 0, 0);
-}
+.scrollbar {
+    --background-default: transparent;
+    --height: 0;
+    --transition-duration: var(--transition-duration-400);
+    --translate: translate3d(0, 0, 0);
+}

package/src/components/sidebar/scss/index.scss

@@ -1,50 +1,50 @@
-@use '/lib';
-@use '/tokens';
-
-.sidebar {
-    @include lib.position(absolute, var(--position-vertical) null var(--position-vertical) null);
-    cursor: default;
-    height: calc(100% - (var(--position-vertical) * 2));
-    max-width: var(--width);
-    overflow: hidden;
-    transition:
-        max-width var(--transition-duration) ease-in-out,
-        opacity var(--transition-duration) ease-in-out,
-        transform var(--transition-duration) ease-in-out;
-    width: calc(100% - (var(--position-horizontal) * 2));
-    z-index: 1;
-
-
-    @include tokens.state(inactive) {
-        input[type='password'] {
-            display: none;
-        }
-    }
-
-
-    &--e {
-        right: var(--position-horizontal);
-
-        &.sidebar--offscreen {
-            @include tokens.state(inactive) {
-                transform: translateX(var(--width));
-            }
-        }
-    }
-
-    &--w {
-        left: var(--position-horizontal);
-
-        &.sidebar--offscreen {
-            @include tokens.state(inactive) {
-                transform: translateX(calc(var(--width) * -1));
-            }
-        }
-    }
-
-
-    &-content {
-        flex: 0 0 var(--width-default);
-        width: var(--width-default);
-    }
-}
+@use '/lib';
+@use '/tokens';
+
+.sidebar {
+    @include lib.position(absolute, var(--position-vertical) null var(--position-vertical) null);
+    cursor: default;
+    height: calc(100% - (var(--position-vertical) * 2));
+    max-width: var(--width);
+    overflow: hidden;
+    transition:
+        max-width var(--transition-duration) ease-in-out,
+        opacity var(--transition-duration) ease-in-out,
+        transform var(--transition-duration) ease-in-out;
+    width: calc(100% - (var(--position-horizontal) * 2));
+    z-index: 1;
+
+
+    @include tokens.state(inactive) {
+        input[type='password'] {
+            display: none;
+        }
+    }
+
+
+    &--e {
+        right: var(--position-horizontal);
+
+        &.sidebar--offscreen {
+            @include tokens.state(inactive) {
+                transform: translateX(var(--width));
+            }
+        }
+    }
+
+    &--w {
+        left: var(--position-horizontal);
+
+        &.sidebar--offscreen {
+            @include tokens.state(inactive) {
+                transform: translateX(calc(var(--width) * -1));
+            }
+        }
+    }
+
+
+    &-content {
+        flex: 0 0 var(--width-default);
+        width: var(--width-default);
+    }
+}