@esportsplus/ui 0.0.1 → 0.0.2

package/components/loading/scss/loading.scss

@@ -1,24 +1,24 @@
-.loading {
-    animation: loading var(--animation-duration) infinite linear;
-    animation-delay: var(--animation-delay);
-    border: var(--border-width) var(--border-style) var(--border-color);
-    border-radius: 100%;
-    border-right-color: transparent;
-    border-top-color: transparent;
-    box-shadow: var(--box-shadow);
-    height: var(--height);
-    pointer-events: none;
-    position: relative;
-    transition: border-color var(--transition-duration) ease-in-out;
-    width: var(--width);
-    z-index: 0;
-}
-
-@keyframes loading {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
+.loading {
+    animation: loading var(--animation-duration) infinite linear;
+    animation-delay: var(--animation-delay);
+    border: var(--border-width) var(--border-style) var(--border-color);
+    border-radius: 100%;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    box-shadow: var(--box-shadow);
+    height: var(--height);
+    pointer-events: none;
+    position: relative;
+    transition: border-color var(--transition-duration) ease-in-out;
+    width: var(--width);
+    z-index: 0;
+}
+
+@keyframes loading {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/components/loading/scss/variables.scss

@@ -1,31 +1,31 @@
-.loading {
-    --animation-delay: calc(0s + (0.032s * var(--i)));
-    --animation-duration: calc(0.64s * (var(--i) + 1.5));
-    --border-color: inherit;
-    --border-style: solid;
-    --border-width: var(--border-width-400);
-    --box-shadow: none;
-    --height: calc(var(--size) * var(--multiplier));
-    --i: 0;
-    --multiplier: calc(1 - (.2 * var(--i)));
-    --size: var(--size-400);
-    --transition-duration: var(--transition-duration-400);
-    --width: calc(var(--size) * var(--multiplier));
-
-    .loading {
-        --i: 1;
-        --size: inherit;
-
-        .loading {
-            --i: 2;
-
-            .loading {
-                --i: 3;
-
-                .loading {
-                    --i: 4;
-                }
-            }
-        }
-    }
-}
+.loading {
+    --animation-delay: calc(0s + (0.032s * var(--i)));
+    --animation-duration: calc(0.64s * (var(--i) + 1.5));
+    --border-color: inherit;
+    --border-style: solid;
+    --border-width: var(--border-width-400);
+    --box-shadow: none;
+    --height: calc(var(--size) * var(--multiplier));
+    --i: 0;
+    --multiplier: calc(1 - (.2 * var(--i)));
+    --size: var(--size-400);
+    --transition-duration: var(--transition-duration-400);
+    --width: calc(var(--size) * var(--multiplier));
+
+    .loading {
+        --i: 1;
+        --size: inherit;
+
+        .loading {
+            --i: 2;
+
+            .loading {
+                --i: 3;
+
+                .loading {
+                    --i: 4;
+                }
+            }
+        }
+    }
+}

package/components/page/scss/page.scss

@@ -1,22 +1,22 @@
-.page {
-    min-height: var(--min-height);
-    position: relative;
-    width: var(--width);
-
-
-    &-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);
-    }
-}
+.page {
+    min-height: var(--min-height);
+    position: relative;
+    width: var(--width);
+
+
+    &-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);
+    }
+}

package/components/page/scss/variables.scss

@@ -1,19 +1,19 @@
-.page {
-    --min-height: 100vh;
-    --width: 100vw;
-
-
-    &-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 {
+    --min-height: 100vh;
+    --width: 100vw;
+
+
+    &-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/components/root/scss/root.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/components/root/scss/variables.scss

@@ -1,54 +1,54 @@
-@use 'ui/lib';
-@use 'ui/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(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 'ui/lib';
+@use 'ui/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(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/components/row/scss/row.scss

@@ -1,8 +1,8 @@
-.row {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    min-height: var(--min-height);
-    position: relative;
-    width: 100%;
-}
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    min-height: var(--min-height);
+    position: relative;
+    width: 100%;
+}

package/components/scrollbar/scss/scrollbar.scss

@@ -1,51 +1,51 @@
-// Hide Chrome Mobile Scrollbar
-::-webkit-scrollbar,
-::-webkit-scrollbar-track,
-::-webkit-scrollbar-thumb,
-::-webkit-scrollbar-thumb:window-inactive {
-    background: transparent;
-    box-shadow: unset;
-}
-
-// Scrollable container
-.--scrollbar {
-    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: var(--width);
-    }
-
-    &::before {
-        background: var(--background-default);
-        border-radius: var(--border-radius);
-        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;
+}
+
+// Scrollable container
+.--scrollbar {
+    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: var(--width);
+    }
+
+    &::before {
+        background: var(--background-default);
+        border-radius: var(--border-radius);
+        content: '';
+        height: var(--height);
+        transform: var(--translate);
+        transform-origin: top center;
+    }
+
+
+    &--fixed {
+        position: fixed;
+    }
+
+    &--hidden {
+        opacity: 0;
+    }
+}

package/components/scrollbar/scss/variables.scss

@@ -1,8 +1,8 @@
-.scrollbar {
-    --background-default: transparent;
-    --border-radius: 1px 0 0 1px;
-    --height: 0;
-    --transition-duration: var(--transition-duration-400);
-    --translate: translate3d(0, 0, 0);
-    --width: var(--size-100);
-}
+.scrollbar {
+    --background-default: transparent;
+    --border-radius: 1px 0 0 1px;
+    --height: 0;
+    --transition-duration: var(--transition-duration-400);
+    --translate: translate3d(0, 0, 0);
+    --width: var(--size-100);
+}