@esportsplus/ui 0.0.114 → 0.0.117

package/src/components/tooltip/scss/_center.scss

@@ -1,13 +0,0 @@
-@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/src/components/tooltip/scss/_east.scss

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

package/src/components/tooltip/scss/_north.scss

@@ -1,34 +0,0 @@
-@mixin north($active) {
-    &--ne,
-    &--nw {
-        bottom: calc(100% - var(--spacer));
-        position: absolute;
-        transform: scale(var(--scaleX), var(--scaleY));
-
-        #{$active} {
-            transform: translateY(calc(var(--spacer) * -2));
-        }
-    }
-
-    &--n {
-        bottom: calc(100% - var(--spacer));
-        position: absolute;
-        right: 50%;
-        transform: translateX(50%) scaleY(var(--scaleY));
-        transform-origin: center bottom;
-
-        #{$active} {
-            transform: translate(50%, calc(var(--spacer) * -2)) scale(1);
-        }
-    }
-
-    &--ne {
-        right: 0;
-        transform-origin: bottom right;
-    }
-
-    &--nw {
-        left: 0;
-        transform-origin: bottom left;
-    }
-}

package/src/components/tooltip/scss/_south.scss

@@ -1,35 +0,0 @@
-@mixin south($active) {
-    &--se,
-    &--sw {
-        position: absolute;
-        top: calc(100% - var(--spacer));
-        transform: scale(var(--scaleX), var(--scaleY));
-
-        #{$active} {
-            transform: translateY(calc(var(--spacer) * 2));
-        }
-    }
-
-    &--s {
-        position: absolute;
-        right: 50%;
-        top: calc(100% - var(--spacer));
-        transform: translateX(50%) scaleY(var(--scaleY));
-        transform-origin: center top;
-
-        #{$active} {
-            transform: translate(50%, calc(var(--spacer) * 2)) scale(1);
-        }
-    }
-
-    &--se {
-        right: 0;
-        transform-origin: top right;
-    }
-
-    &--sw {
-        left: 0;
-        transform-origin: top left;
-    }
-
-}

package/src/components/tooltip/scss/_west.scss

@@ -1,34 +0,0 @@
-@mixin west($active) {
-    &--wn,
-    &--ws {
-        position: absolute;
-        right: calc(100% - var(--spacer));
-        transform: scale(var(--scale));
-
-        #{$active} {
-            transform: translateX(calc(var(--spacer) * -2));
-        }
-    }
-
-    &--w {
-        bottom: 50%;
-        position: absolute;
-        right: calc(100% - var(--spacer));
-        transform: translateY(50%) scaleX(var(--scaleX));
-        transform-origin: center right;
-
-        #{$active} {
-            transform: translate(calc(var(--spacer) * -2), 50%) scale(1);
-        }
-    }
-
-    &--wn {
-        top: 0;
-        transform-origin: top right;
-    }
-
-    &--ws {
-        bottom: 0;
-        transform-origin: bottom right;
-    }
-}

package/src/components/tooltip/scss/index.scss

@@ -1,93 +0,0 @@
-@use '/lib';
-@use '/tokens';
-@use 'center' as *;
-@use 'east' as *;
-@use 'north' as *;
-@use 'south' as *;
-@use 'west' as *;
-
-.tooltip {
-    cursor: pointer;
-    position: relative;
-    z-index: 8;
-
-    @include tokens.state(active) {
-        z-index: 9;
-
-        // Add invisible box to increase activation/hover area
-        &.tooltip--box {
-            $size: calc(100% + var(--spacer) * 2.5);
-
-            &::before {
-                @include lib.position(absolute, center);
-                content: '';
-                height: $size;
-                width: $size;
-                z-index: -1;
-            }
-        }
-
-        // Rotate arrow only if parent tooltip is active
-        :not(.tooltip) .tooltip-arrow,
-        > .tooltip-arrow {
-            transform: rotate(-90deg);
-        }
-    }
-
-
-    &-arrow {
-        margin: 0 -1px;
-        transform: rotate(90deg);
-    }
-
-
-    &-content,
-    &-message {
-        background: var(--background);
-        border-radius: var(--border-radius);
-        box-shadow: var(--box-shadow);
-        max-width: var(--max-width);
-        min-width: var(--min-width);
-        opacity: 0;
-        overflow: hidden;
-        transition:
-            opacity var(--transition-duration) ease-in-out,
-            transform var(--transition-duration) ease-in-out;
-        width: var(--width);
-        z-index: 9;
-
-
-        // Shared With Positioning CSS
-        $active: '#{tokens.state(active, ".tooltip")} > &, #{tokens.state(active, ".tooltip")} :not(.tooltip) > &';
-        $not-active: '#{tokens.state(inactive, ".tooltip")} > &, #{tokens.state(inactive, ".tooltip")} :not(.tooltip) > &';
-
-        #{$active} {
-            opacity: 1;
-        }
-
-        #{$not-active} {
-            &, * {
-                pointer-events: none;
-            }
-        }
-
-
-        @include center($active);
-        @include east($active);
-        @include north($active);
-        @include south($active);
-        @include west($active);
-    }
-
-    &-message {
-        background: var(--background);
-        color: var(--color);
-        cursor: auto;
-        font-size: var(--font-size);
-        font-weight: var(--font-weight);
-        line-height: normal;
-        padding: var(--padding-vertical) var(--padding-horizontal);
-        pointer-events: none;
-        white-space: nowrap;
-    }
-}

package/src/components/tooltip/scss/variables.scss

@@ -1,25 +0,0 @@
-.tooltip {
-    &-content,
-    &-message {
-        --background: var(--background-default);
-        --background-default: transparent;
-        --border-radius: var(--border-radius-300);
-        --box-shadow: var(--box-shadow-400);
-        --max-width: calc(90vw - (var(--size-700) * 2));
-        --min-width: auto;
-        --scaleX: 0.64;
-        --scaleY: 0.64;
-        --spacer: var(--size-300);
-        --transition-duration: var(--transition-duration-300);
-        --width: auto;
-    }
-
-    &-message {
-        --background-default: var(--color-black-400);
-        --color: var(--color-white-400);
-        --font-size: var(--font-size-300);
-        --font-weight: var(--font-weight-400);
-        --padding-horizontal: var(--size-300);
-        --padding-vertical: var(--size-300);
-    }
-}

package/src/css-utilities/[margin,padding]/scss/index.scss

@@ -1,41 +0,0 @@
-@each $property in margin padding {
-    .--#{$property} {
-        &,
-        &-horizontal {
-            #{$property}-left: var(--#{$property}-horizontal);
-            #{$property}-right: var(--#{$property}-horizontal);
-
-            @if ($property == padding) {
-                &.--border {
-                    padding-left: calc(var(--padding-horizontal) - var(--border-width));
-                    padding-right: calc(var(--padding-horizontal) - var(--border-width));
-                }
-            }
-        }
-
-        &,
-        &-vertical {
-            #{$property}-bottom: var(--#{$property}-vertical);
-            #{$property}-top: var(--#{$property}-vertical);
-
-            @if ($property == padding) {
-                &.--border {
-                    padding-bottom: calc(var(--padding-vertical) - var(--border-width));
-                    padding-top: calc(var(--padding-vertical) - var(--border-width));
-                }
-            }
-        }
-
-        @each $direction in 'bottom' 'top' {
-            &-#{$direction} {
-                #{$property}-#{$direction}: var(--#{$property}-vertical);
-            }
-        }
-
-        @each $direction in 'left' 'right' {
-            &-#{$direction} {
-                #{$property}-#{$direction}: var(--#{$property}-horizontal);
-            }
-        }
-    }
-}

package/src/css-utilities/[margin,padding]/scss/variables.scss

@@ -1,54 +0,0 @@
-@use '/lib';
-@use '/tokens';
-
-@each $property in margin padding {
-    .--#{$property} {
-        @each $direction in 'horizontal' 'vertical' {
-            &,
-            &-#{$direction} {
-                @each $key in lib.map-keys(tokens.$border-width) {
-                    &-border-width {
-                        --#{$property}-#{$direction}: var(--border-width-400);
-
-                        &-#{$key} {
-                            --#{$property}-#{$direction}: var(--border-width-#{$key});
-                        }
-                    }
-                }
-
-                @each $key in lib.map-keys(tokens.$spacer) {
-                    &-spacer {
-                        --#{$property}-#{$direction}: var(--spacer-400);
-
-                        &-#{$key} {
-                            --#{$property}-#{$direction}: var(--spacer-#{$key});
-                        }
-                    }
-                }
-
-                @each $key in lib.map-keys(tokens.$size) {
-                    &-#{$key} {
-                        --#{$property}-#{$direction}: var(--size-#{$key});
-                    }
-                }
-
-                &-inherit {
-                    --#{$property}-#{$direction}: inherit;
-                }
-            }
-        }
-    }
-}
-
-@each $property in margin {
-    .--#{$property} {
-        @each $direction in 'horizontal' 'vertical' {
-            &,
-            &-#{$direction} {
-                &-auto {
-                    --#{$property}-#{$direction}: auto;
-                }
-            }
-        }
-    }
-}

package/src/css-utilities/absolute/scss/index.scss

@@ -1,59 +0,0 @@
-@use '/lib';
-
-.--absolute {
-    &-bottom,
-    &-top {
-        left: 0;
-        position: absolute;
-        right: 0;
-    }
-
-    &-left,
-    &-right {
-        bottom: 0;
-        position: absolute;
-        top: 0;
-    }
-
-    &-center {
-        @include lib.position(absolute, center);
-    }
-
-    &-full {
-        @include lib.position(absolute, full);
-    }
-
-    &-horizontal {
-        &,
-        &-bottom,
-        &-top {
-            @include lib.position(absolute, horizontal);
-        }
-    }
-
-    &-vertical {
-        &,
-        &-left,
-        &-right {
-            @include lib.position(absolute, vertical);
-        }
-    }
-
-    @each $direction in 'bottom' 'top' {
-        &,
-        &-horizontal {
-            &-#{$direction} {
-                #{$direction}: 0;
-            }
-        }
-    }
-
-    @each $direction in 'left' 'right' {
-        &,
-        &-vertical {
-            &-#{$direction} {
-                #{$direction}: 0;
-            }
-        }
-    }
-}

package/src/css-utilities/background/scss/variables.scss

@@ -1,27 +0,0 @@
-@use '/tokens';
-
-.--background {
-    &-state {
-        --background: var(--background-default);
-        --background-active: var(--background-default);
-        --background-default: transparent;
-        --background-hover: var(--background-default);
-        --background-pressed: var(--background-default);
-
-        @include tokens.state(active) {
-            --background: var(--background-active);
-        }
-
-        @include tokens.state(hover) {
-            --background: var(--background-hover);
-        }
-
-        @include tokens.state(pressed) {
-            --background: var(--background-pressed);
-        }
-    }
-}
-
-@mixin css-variables($colors) {
-    @include tokens.state-utility('.--background', 'background', $colors);
-}

package/src/css-utilities/border/scss/index.scss

@@ -1,21 +0,0 @@
-.--border {
-    border: var(--border-width) var(--border-style) var(--border-color);
-
-    @each $key in 'bottom' 'left' 'right' 'top' {
-        &-#{$key} {
-            border-#{$key}: var(--border-width) var(--border-style) var(--border-color);
-        }
-    }
-
-    &-offset {
-        @each $key in 'bottom' 'left' 'right' 'top' {
-            &-#{$key} {
-                margin-#{$key}: calc(var(--border-width) * -1);
-            }
-        }
-    }
-
-    &-radius {
-        border-radius: var(--border-radius);
-    }
-}

package/src/css-utilities/border/scss/variables.scss

@@ -1,66 +0,0 @@
-@use '/lib';
-@use '/tokens';
-
-.--border {
-    &,
-    &-bottom,
-    &-left,
-    &-right,
-    &-top {
-        --border-color: var(--border-color-default);
-        --border-style: solid;
-        --border-width: var(--border-width-400);
-    }
-
-    &-dashed {
-        --border-style: dashed;
-    }
-
-    &-dotted {
-        --border-style: dotted;
-    }
-
-    &-radius {
-        --border-radius: var(--border-radius-400);
-
-        @each $key in lib.map-keys(tokens.$border-radius) {
-            &-#{$key} {
-                --border-radius: var(--border-radius-#{$key});
-            }
-        }
-    }
-
-    &-state {
-        --border-color: var(--border-color-default);
-        --border-color-active: var(--border-color-default);
-        --border-color-default: transparent;
-        --border-color-hover: var(--border-color-default);
-        --border-color-pressed: var(--border-color-default);
-
-        @include tokens.state(active) {
-            --border-color: var(--border-color-active);
-        }
-
-        @include tokens.state(hover) {
-            --border-color: var(--border-color-hover);
-        }
-
-        @include tokens.state(pressed) {
-            --border-color: var(--border-color-pressed);
-        }
-    }
-
-    &-width {
-        --border-width: var(--border-width-400);
-
-        @each $key in lib.map-keys(tokens.$border-width) {
-            &-#{$key} {
-                --border-width: var(--border-width-#{$key});
-            }
-        }
-    }
-}
-
-@mixin css-variables($colors) {
-    @include tokens.state-utility('.--border', 'border-color', $colors);
-}

package/src/css-utilities/color/scss/variables.scss

@@ -1,31 +0,0 @@
-@use '/tokens';
-
-.--color {
-    &-inherit {
-        --color: inherit;
-    }
-
-    &-state {
-        --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);
-
-        @include tokens.state(active) {
-            --color: var(--color-active);
-        }
-
-        @include tokens.state(hover) {
-            --color: var(--color-hover);
-        }
-
-        @include tokens.state(pressed) {
-            --color: var(--color-pressed);
-        }
-    }
-}
-
-@mixin css-variables($colors) {
-    @include tokens.state-utility('.--color', 'color', $colors);
-}

package/src/css-utilities/disabled/scss/index.scss

@@ -1,4 +0,0 @@
-.--disabled {
-    opacity: 0.64;
-    pointer-events: none;
-}

package/src/css-utilities/flex/scss/index.scss

@@ -1,65 +0,0 @@
-.--flex {
-    &-center {
-        align-content: center;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-    }
-
-    &-column {
-        display: flex;
-        flex-flow: column;
-    }
-
-    &-end {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-end;
-    }
-
-    &-fill {
-        display: flex;
-        flex: 1;
-        min-width: 0;
-    }
-
-    &-fixed {
-        display: flex;
-        flex: 0 0 var(--width);
-    }
-
-    &-horizontal {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-
-        &-space-between {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-        }
-    }
-
-    &-row {
-        display: flex;
-        flex-flow: row;
-    }
-
-    &-start {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-    }
-
-    &-vertical {
-        align-items: center;
-        display: flex;
-        flex-wrap: wrap;
-
-        &-space-between {
-            align-items: space-between;
-            display: flex;
-            flex-wrap: wrap;
-        }
-    }
-}

package/src/css-utilities/glass/scss/index.scss

@@ -1,3 +0,0 @@
-.--glass {
-    backdrop-filter: blur(var(--blur));
-}

package/src/css-utilities/glass/scss/variables.scss

@@ -1,3 +0,0 @@
-.--glass {
-    --blur: 16px;
-}

package/src/css-utilities/hidden/scss/index.scss

@@ -1,28 +0,0 @@
-@use '/lib';
-@use '/tokens';
-
-.--hidden {
-    display: none;
-
-    &-active {
-        @include tokens.state(active) {
-            display: none;
-        }
-    }
-
-    &-inactive {
-        @include tokens.state(inactive) {
-            display: none;
-        }
-    }
-
-    &-visibility {
-        @include lib.position(absolute, 0 null null 0);
-        appearance: none;
-        height: 0px;
-        opacity: 0;
-        pointer-events: none;
-        width: 0px;
-        z-index: -1;
-    }
-}