@esportsplus/ui 0.0.114 → 0.0.117

package/src/components/accordion/scss/variables.scss

@@ -1,4 +0,0 @@
-.accordion {
-    --max-height: 0;
-    --transition-duration: var(--transition-duration-400);
-}

package/src/components/alert/scss/index.scss

@@ -1,55 +0,0 @@
-@use '/lib';
-@use '/tokens';
-
-.alert {
-    max-width: var(--max-width);
-    width: calc(100% - (var(--margin-horizontal) * 2));
-
-
-    &--deactivating {
-        opacity: 0;
-        transform: translateY(-50%);
-    }
-
-    &--activating {
-        @include tokens.state(inactive) {
-            transform: translateY(50%);
-        }
-    }
-
-
-    &-close {
-        @include lib.position(absolute, 0 100% 0 null);
-        animation: alert-close var(--transition-duration) ease-in-out;
-        transition: transform var(--transition-duration) ease-in-out;
-        z-index: 0;
-    }
-
-    &-message {
-        opacity: 0;
-        transition:
-            opacity var(--transition-duration) ease-in-out,
-            transform var(--transition-duration) ease-in-out;
-
-        @include tokens.state(inactive) {
-            pointer-events: none;
-            position: absolute;
-            transform: translateX(calc(25% * -1));
-            left: 0;
-            top: 0;
-        }
-
-        @include tokens.state(active) {
-            opacity: 1;
-        }
-    }
-}
-
-@keyframes alert-close {
-    from {
-        transform: translateX(150%);
-    }
-    to {
-        transform: translateX(0);
-    }
-}

package/src/components/alert/scss/variables.scss

@@ -1,8 +0,0 @@
-.alert {
-    --max-width: 480px;
-
-    &-close,
-    &-message {
-        --transition-duration: var(--transition-duration-400);
-    }
-}

package/src/components/anchor/scss/index.scss

@@ -1,41 +0,0 @@
-@use '/tokens';
-
-.anchor {
-    max-height: calc(var(--max-height, 100%) - (var(--margin-vertical) * 2));
-    max-width: calc(var(--max-width, 100%) - (var(--margin-horizontal) * 2));
-    position: absolute;
-    transition:
-        opacity var(--transition-duration) ease-in-out,
-        transform var(--transition-duration) ease-in-out;
-    z-index: 9;
-
-
-    @include tokens.state(inactive) {
-        opacity: 0;
-
-        &, * {
-            pointer-events: none;
-        }
-    }
-
-
-    &--ne,
-    &--nw {
-        top: var(--margin-vertical);
-    }
-
-    &--se,
-    &--sw {
-        bottom: var(--margin-vertical);
-    }
-
-    &--ne,
-    &--se {
-        right: var(--margin-horizontal);
-    }
-
-    &--nw,
-    &--sw {
-        left: var(--margin-horizontal);
-    }
-}

package/src/components/anchor/scss/variables.scss

@@ -1,5 +0,0 @@
-.anchor {
-    --margin-horizontal: var(--size-400);
-    --margin-vertical: var(--size-400);
-    --transition-duration: var(--transition-duration-400);
-}

package/src/components/banner/scss/index.scss

@@ -1,40 +0,0 @@
-@use '/lib';
-
-.banner {
-    @include lib.position(absolute, full);
-    background-position: center;
-    background-size: cover;
-    z-index: -1;
-
-
-    &--backdrop {
-        background-position: bottom;
-        height: 80svh;
-    }
-
-    &--blur {
-        filter: blur(24px);
-        left: -2svh;
-        right: -2svh;
-        top: -2svh;
-
-        &.banner--backdrop {
-            height: 90svh;
-        }
-    }
-
-    &--fixed {
-        position: fixed;
-    }
-
-    &--gradient {
-        &::before {
-            @include lib.position(absolute, full);
-            background:
-                radial-gradient(circle at top, transparent 64%, var(--to) 88%),
-                linear-gradient(to bottom, var(--from) 0%, var(--to) 100%);
-            content: '';
-            z-index: 0;
-        }
-    }
-}

package/src/components/banner/scss/variables.scss

@@ -1,6 +0,0 @@
-.banner {
-    &--gradient {
-        --from: rgba(3,0,19, 0.32);
-        --to: var(--color-black-500);
-    }
-}

package/src/components/border/scss/index.scss

@@ -1,10 +0,0 @@
-.border {
-    border-top: var(--border-width) var(--border-style) var(--border-color);
-    position: relative;
-    width: 100%;
-
-
-    & + & {
-        display: none;
-    }
-}

package/src/components/border/scss/variables.scss

@@ -1,6 +0,0 @@
-.border {
-    --border-color: var(--border-color-default);
-    --border-color-default: var(--color-border-400);
-    --border-style: solid;
-    --border-width: var(--border-width-400);
-}

package/src/components/bubble/scss/index.scss

@@ -1,30 +0,0 @@
-.bubble {
-    background: var(--background);
-    border-radius: var(--border-radius);
-    height: var(--height);
-    width: var(--width);
-
-
-    &--bottom,
-    &--top {
-        &-left,
-        &-right {
-            position: absolute;
-        }
-
-        @each $direction in 'left' 'right' {
-            &-#{$direction} {
-                #{$direction}: var(--position-horizontal);
-            }
-        }
-    }
-
-    @each $direction in 'bottom' 'top' {
-        &--#{$direction} {
-            &-left,
-            &-right {
-                #{$direction}: var(--position-vertical);
-            }
-        }
-    }
-}

package/src/components/bubble/scss/variables.scss

@@ -1,19 +0,0 @@
-.bubble {
-    --background: var(--background-default);
-    --background-default: var(--color-border-400);
-    --border-radius: var(--border-radius-circle);
-    --height: var(--size);
-    --margin-horizontal: var(--size-100);
-    --width: var(--size);
-    --size: 6px;
-
-
-    &--bottom,
-    &--top {
-        &-left,
-        &-right {
-            --position-horizontal: calc(var(--size) / -2);
-            --position-vertical: calc(var(--size) / -2);
-        }
-    }
-}

package/src/components/button/scss/index.scss

@@ -1,92 +0,0 @@
-@use '/lib';
-@use '/tokens';
-
-.button {
-    align-content: center;
-    align-items: center;
-    background: var(--background);
-    border-radius: var(--border-radius);
-    color: var(--color);
-    cursor: pointer;
-    display: flex;
-    flex-wrap: wrap;
-    font-size: var(--font-size);
-    font-weight: var(--font-weight);
-    justify-content: center;
-    line-height: var(--line-height);
-    padding: calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));
-    position: relative;
-    transition: all var(--transition-duration) ease-in-out;
-    width: var(--width);
-
-
-    // Pseudo Element Box Shadow
-    &::after {
-        @include lib.position(absolute, full);
-        border-radius: inherit;
-        box-shadow: var(--box-shadow);
-        content: '';
-        pointer-events: none;
-        transition:
-            box-shadow var(--transition-duration) ease-in-out,
-            opacity var(--transition-duration) ease-in-out;
-        z-index: 0;
-    }
-
-
-    &--flat {
-        &::after {
-            display: none;
-        }
-    }
-
-    &--processing {
-        color: transparent;
-        pointer-events: none;
-
-        &::before {
-            @include lib.position(absolute, center);
-            animation: button--processing var(--animation-duration) infinite linear;
-            border: var(--border-width) solid var(--border-color);
-            border-radius: 100%;
-            border-right-color: transparent;
-            border-top-color: transparent;
-            content: '';
-            height: var(--size);
-            width: var(--size);
-        }
-
-        * {
-            opacity: 0;
-        }
-
-        @keyframes button--processing {
-            0% {
-                transform: translate(50%, 50%) rotate(0deg);
-            }
-            100% {
-                transform: translate(50%, 50%) rotate(359deg);
-            }
-        }
-    }
-
-    &--top {
-        &-left,
-        &-right {
-            position: absolute;
-            top: calc((#{var(--padding-vertical)} + #{var(--line-height) / 2}) * -1);
-        }
-
-        @each $direction in 'left' 'right' {
-            &-#{$direction} {
-                #{$direction}: calc((#{var(--padding-horizontal)} + #{var(--line-height) / 2}) * -1);
-            }
-        }
-    }
-
-    &--underline {
-        @include tokens.state(active hover) {
-            text-decoration: underline;
-        }
-    }
-}

package/src/components/button/scss/variables.scss

@@ -1,69 +0,0 @@
-@use '/lib';
-@use '/tokens';
-
-.button {
-    --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;
-    --box-shadow: var(--box-shadow-default);
-    --box-shadow-active: var(--box-shadow-300);
-    --box-shadow-default: none;
-    --box-shadow-hover: var(--box-shadow-400);
-    --box-shadow-pressed: none;
-    --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-400);
-    --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);
-        --box-shadow: var(--box-shadow-active);
-        --color: var(--color-active);
-    }
-
-    @include tokens.state(hover) {
-        --background: var(--background-hover);
-        --border-color: var(--border-color-hover);
-        --box-shadow: var(--box-shadow-hover);
-        --color: var(--color-hover);
-    }
-
-    @include tokens.state(pressed) {
-        --background: var(--background-pressed);
-        --border-color: var(--border-color-pressed);
-        --box-shadow: var(--box-shadow-pressed);
-        --color: var(--color-pressed);
-    }
-
-
-    &--processing {
-        --animation-duration: 0.64s;
-        --border-color: var(--color);
-        --border-width: var(--border-width-400);
-        --size: var(--size-400);
-
-        @each $key in lib.map-keys(tokens.$border-width) {
-            &-#{$key} {
-                --border-width: var(--border-width-#{$key});
-            }
-        }
-    }
-}

package/src/components/card/scss/index.scss

@@ -1,35 +0,0 @@
-@use '/lib';
-
-.card {
-    background: var(--background);
-    border-radius: var(--border-radius);
-    padding: var(--padding-vertical) var(--padding-horizontal);
-    position: relative;
-    transition:
-        background var(--transition-duration) ease-in-out,
-        border-color var(--transition-duration) ease-in-out,
-        box-shadow var(--transition-duration) ease-in-out,
-        max-height var(--transition-duration) ease-in-out;
-    width: var(--width);
-
-
-    // Pseudo Element Box Shadow
-    &::after {
-        @include lib.position(absolute, full);
-        border-radius: inherit;
-        box-shadow: var(--box-shadow);
-        content: '';
-        pointer-events: none;
-        transition:
-            box-shadow var(--transition-duration) ease-in-out,
-            opacity var(--transition-duration) ease-in-out;
-        z-index: 0;
-    }
-
-
-    &--flat {
-        &::after {
-            display: none;
-        }
-    }
-}

package/src/components/card/scss/variables.scss

@@ -1,42 +0,0 @@
-@use '/tokens';
-
-.card {
-    --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);
-    --box-shadow: var(--box-shadow-default);
-    --box-shadow-active: var(--box-shadow-300);
-    --box-shadow-default: none;
-    --box-shadow-hover: var(--box-shadow-300);
-    --box-shadow-pressed: none;
-    --padding-horizontal: 0px;
-    --padding-vertical: 0px;
-    --transition-duration: var(--transition-duration-400);
-    --width: auto;
-
-    @include tokens.state(active) {
-        --background: var(--background-active);
-        --border-color: var(--border-color-active);
-        --box-shadow: var(--box-shadow-active);
-    }
-
-    @include tokens.state(hover) {
-        --background: var(--background-hover);
-        --border-color: var(--border-color-hover);
-        --box-shadow: var(--box-shadow-hover);
-    }
-
-    @include tokens.state(pressed) {
-        --background: var(--background-pressed);
-        --border-color: var(--border-color-pressed);
-        --box-shadow: var(--box-shadow-pressed);
-    }
-}

package/src/components/container/scss/index.scss

@@ -1,10 +0,0 @@
-.container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    margin: 0 auto;
-    max-width: var(--max-width);
-    padding: var(--padding-vertical) var(--padding-horizontal);
-    position: relative;
-    width: 100%;
-}

package/src/components/container/scss/variables.scss

@@ -1,5 +0,0 @@
-.container {
-    --max-width: 1400px;
-    --padding-horizontal: var(--size-600);
-    --padding-vertical: 0px;
-}

package/src/components/ellipsis/scss/index.scss

@@ -1,72 +0,0 @@
-.ellipsis {
-    &-dot {
-        &:nth-child(1) {
-            animation: ellipsis-dot-one var(--animation-duration) linear infinite;
-        }
-
-        &:nth-child(2) {
-            animation: ellipsis-dot-two var(--animation-duration) linear infinite;
-        }
-
-        &:nth-child(3) {
-            animation: ellipsis-dot-three var(--animation-duration) linear infinite;
-        }
-    }
-}
-
-@keyframes ellipsis-dot-one {
-    0% {
-        opacity: 1;
-    }
-    65% {
-        opacity: 1;
-    }
-    66% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 0;
-    }
-}
-
-@keyframes ellipsis-dot-two {
-    0% {
-        opacity: 0;
-    }
-    21% {
-        opacity: 0;
-    }
-    22% {
-        opacity: 1;
-    }
-    65% {
-        opacity: 1;
-    }
-    66% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 0;
-    }
-}
-
-@keyframes ellipsis-dot-three {
-    0% {
-        opacity: 0;
-    }
-    43% {
-        opacity: 0;
-    }
-    44% {
-        opacity: 1;
-    }
-    65% {
-        opacity: 1;
-    }
-    66% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 0;
-    }
-}

package/src/components/ellipsis/scss/variables.scss

@@ -1,3 +0,0 @@
-.ellipsis {
-    --animation-duration: 2s;
-}