@esportsplus/ui 0.0.1 → 0.0.2

package/components/sidebar/scss/sidebar.scss

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

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

@@ -1,25 +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);
-}
+@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/text/scss/text.scss

@@ -1,12 +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);
-}
+.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

@@ -1,9 +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;
-}
+.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

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

package/components/thumbnail/scss/variables.scss

@@ -1,7 +1,7 @@
-.thumbnail {
-    --background: transparent;
-    --border-radius: var(--border-radius-300);
-    --height: var(--size);
-    --size: var(--size-700);
-    --width: var(--size);
-}
+.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

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

@@ -1,34 +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;
-    }
-}
+@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/components/tooltip/scss/_north.scss

@@ -1,34 +1,34 @@
-@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;
-    }
-}
+@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/components/tooltip/scss/_south.scss

@@ -1,35 +1,35 @@
-@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;
-    }
-
-}
+@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/components/tooltip/scss/_west.scss

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