@esportsplus/ui 0.0.1

package/components/icon/scss/icon.scss

@@ -0,0 +1,18 @@
+.icon {
+    color: var(--color);
+    display: flex;
+    flex: 0 0 var(--width);
+    height: var(--height);
+    pointer-events: none;
+    position: relative;
+    transform: rotate(var(--rotate));
+    width: var(--width);
+
+
+    svg {
+        color: currentColor;
+        fill: currentColor;
+        height: 100%;
+        width: 100%;
+    }
+}

package/components/icon/scss/variables.scss

@@ -0,0 +1,8 @@
+.icon {
+    --color: inherit;
+    --height: var(--size);
+    --margin-horizontal: var(--size-300);
+    --rotate: 0deg;
+    --size: var(--size-400);
+    --width: var(--size);
+}

package/components/link/scss/link.scss

@@ -0,0 +1,29 @@
+@use 'ui/lib';
+@use 'ui/tokens';
+
+.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);
+
+
+    &--underline {
+        @include tokens.state(active hover) {
+            text-decoration: underline;
+        }
+    }
+}

package/components/link/scss/variables.scss

@@ -0,0 +1,48 @@
+@use 'ui/lib';
+@use 'ui/tokens';
+
+.link {
+    --background: var(--background-default);
+    --background-active: var(--background-default);
+    --background-default: transparent;
+    --background-hover: var(--background-default);
+    --background-pressed: var(--background-default);
+    --border-color: var(--border-color-default);
+    --border-color-active: var(--border-color-default);
+    --border-color-default: var(--background);
+    --border-color-hover: var(--border-color-default);
+    --border-color-pressed: var(--border-color-default);
+    --border-radius: var(--border-radius-400);
+    --border-width: 0px;
+    --color: var(--color-default);
+    --color-active: var(--color-default);
+    --color-default: var(--color-text-400);
+    --color-hover: var(--color-default);
+    --color-pressed: var(--color-default);
+    --font-size: var(--font-size-400);
+    --font-weight: var(--font-weight-500);
+    --line-height: var(--line-height-400);
+    --padding-horizontal: var(--size-400);
+    --padding-vertical: var(--size-400);
+    --transition-duration: var(--transition-duration-400);
+    --width: auto;
+
+
+    @include tokens.state(active) {
+        --background: var(--background-active);
+        --border-color: var(--border-color-active);
+        --color: var(--color-active);
+    }
+
+    @include tokens.state(hover) {
+        --background: var(--background-hover);
+        --border-color: var(--border-color-hover);
+        --color: var(--color-hover);
+    }
+
+    @include tokens.state(pressed) {
+        --background: var(--background-pressed);
+        --border-color: var(--border-color-pressed);
+        --color: var(--color-pressed);
+    }
+}

package/components/loading/scss/loading.scss

@@ -0,0 +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);
+    }
+}

package/components/loading/scss/variables.scss

@@ -0,0 +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;
+                }
+            }
+        }
+    }
+}

package/components/page/scss/page.scss

@@ -0,0 +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);
+    }
+}

package/components/page/scss/variables.scss

@@ -0,0 +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);
+    }
+}

package/components/processing/scss/processing.scss

@@ -0,0 +1,47 @@
+@use 'ui/lib';
+
+.processing {
+    height: var(--size);
+    position: relative;
+    width: var(--size);
+    animation: processing var(--animation-duration) linear infinite;
+
+    &-ring {
+        clip: rect(calc(var(--size) / 2), var(--size), var(--size), 0);
+
+        &,
+        &::after,
+        &::before {
+            @include lib.position(absolute, full);
+        }
+
+        &,
+        &::before {
+            animation: processing calc(var(--animation-duration) / 2) cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
+        }
+
+        &::after,
+        &::before {
+            border-radius: 50%;
+            content: "";
+        }
+
+        &::after {
+            border: var(--border-width) var(--border-style) var(--border-color-secondary);
+            opacity: var(--opacity);
+        }
+
+        &::before {
+            border-top: var(--border-width) var(--border-style) var(--border-color-primary);
+        }
+    }
+}
+
+@keyframes processing {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/components/processing/scss/variables.scss

@@ -0,0 +1,11 @@
+.processing {
+    --animation-duration: 2.64s;
+    --border-color-primary: var(--color-black-500);
+    --border-color-secondary: var(--color-border-300);
+    --border-style: solid;
+    --border-width: var(--border-width-600);
+    --height: var(--size);
+    --opacity: 0.64;
+    --size: var(--size-600);
+    --width: var(--size);
+}

package/components/root/scss/root.scss

@@ -0,0 +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;
+}

package/components/root/scss/variables.scss

@@ -0,0 +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);
+}

package/components/row/scss/row.scss

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

package/components/row/scss/variables.scss

@@ -0,0 +1,3 @@
+.row {
+    --min-height: auto;
+}

package/components/scrollbar/scss/scrollbar.scss

@@ -0,0 +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;
+    }
+}

package/components/scrollbar/scss/variables.scss

@@ -0,0 +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);
+}

package/components/sidebar/scss/sidebar.scss

@@ -0,0 +1,50 @@
+@use 'ui/lib';
+@use 'ui/tokens';
+
+.sidebar {
+    @include lib.position(absolute, var(--position-vertical) null var(--position-vertical) null);
+    cursor: default;
+    max-width: var(--width);
+    overflow: hidden;
+    pointer-events: auto;
+    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);
+    }
+}

package/components/sidebar/scss/sidebars.scss

@@ -0,0 +1,13 @@
+@use 'ui/lib';
+
+.sidebars {
+    @include lib.position(absolute, full);
+    pointer-events: none;
+    transition: opacity var(--transition-duration) ease-in-out;
+    z-index: 7;
+
+
+    &--fixed {
+        position: fixed;
+    }
+}

package/components/sidebar/scss/variables.scss

@@ -0,0 +1,25 @@
+@use 'ui/tokens';
+
+.sidebar {
+    --position-horizontal: 0px;
+    --position-vertical: 0px;
+    --transition-duration: var(--transition-duration-400);
+    --width: var(--width-default);
+    --width-closed: var(--width-default);
+    --width-default: 400px;
+
+
+    @include tokens.state(default) {
+        --width: var(--width-closed);
+    }
+
+
+    &--floating {
+        --position-horizontal: var(--size-100);
+        --position-vertical: var(--size-100);
+    }
+}
+
+.sidebars {
+    --transition-duration: var(--transition-duration-400);
+}

package/components/site/scss/site.scss

@@ -0,0 +1,3 @@
+.site {
+    z-index: 0;
+}

package/components/text/scss/text.scss

@@ -0,0 +1,12 @@
+.text {
+    align-items: center;
+    color: var(--color);
+    display: flex;
+    flex-flow: wrap;
+    font-size: var(--font-size);
+    font-weight: var(--font-weight);
+    line-height: var(--line-height);
+    position: relative;
+    transition: color var(--transition-duration) ease-in-out;
+    width: var(--width);
+}

package/components/text/scss/variables.scss

@@ -0,0 +1,9 @@
+.text {
+    --color: var(--color-default);
+    --color-default: inherit;
+    --font-size: var(--font-size-400);
+    --font-weight: var(--font-weight-400);
+    --line-height: var(--line-height-400);
+    --transition-duration: var(--transition-duration-400);
+    --width: auto;
+}

package/components/thumbnail/scss/thumbnail.scss

@@ -0,0 +1,7 @@
+.thumbnail {
+    background: var(--background);
+    border-radius: var(--border-radius);
+    height: var(--height);
+    position: relative;
+    width: var(--width);
+}

package/components/thumbnail/scss/variables.scss

@@ -0,0 +1,7 @@
+.thumbnail {
+    --background: transparent;
+    --border-radius: var(--border-radius-300);
+    --height: var(--size);
+    --size: var(--size-700);
+    --width: var(--size);
+}

package/components/tooltip/scss/_center.scss

@@ -0,0 +1,13 @@
+@mixin center($active) {
+    &--c {
+        bottom: 50%;
+        position: absolute;
+        right: 50%;
+        transform: translate(50%, 50%) scale(var(--scaleX), var(--scaleY));
+        transform-origin: center center;
+
+        #{$active} {
+            transform: translate(50%, 50%) scale(1);
+        }
+    }
+}

package/components/tooltip/scss/_east.scss

@@ -0,0 +1,34 @@
+@mixin east($active) {
+    &--en,
+    &--es {
+        left: calc(100% - var(--spacer));
+        position: absolute;
+        transform: scale(var(--scaleX), var(--scaleY));
+
+        #{$active} {
+            transform: translateX(calc(var(--spacer) * 2));
+        }
+    }
+
+    &--e {
+        bottom: 50%;
+        left: calc(100% - var(--spacer));
+        position: absolute;
+        transform: translateY(50%) scaleX(var(--scaleX));
+        transform-origin: center left;
+
+        #{$active} {
+            transform: translate(calc(var(--spacer) * 2), 50%) scale(1);
+        }
+    }
+
+    &--en {
+        top: 0;
+        transform-origin: top left;
+    }
+
+    &--es {
+        bottom: 0;
+        transform-origin: bottom left;
+    }
+}