@esportsplus/ui 0.1.8 → 0.2.2

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

@@ -1,59 +1,59 @@
-@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;
-            }
-        }
-    }
-}
+@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 +1,27 @@
-@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);
-}
+@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 +1,21 @@
-.--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);
-    }
-}
+.--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 +1,66 @@
-@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);
-}
+@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 +1,31 @@
-@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);
-}
+@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 +1,4 @@
-.--disabled {
-    opacity: 0.64;
-    pointer-events: none;
-}
+.--disabled {
+    opacity: 0.64;
+    pointer-events: none;
+}

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

@@ -1,65 +1,65 @@
-.--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;
-        }
-    }
-}
+.--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 +1,3 @@
-.--glass {
-    backdrop-filter: blur(var(--blur));
+.--glass {
+    backdrop-filter: blur(var(--blur));
 }

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

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

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

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

package/src/css-utilities/index.scss

@@ -1,14 +1,14 @@
-@use '/lib';
-@use '/tokens';
-@use 'background/scss/variables' as background;
-@use 'border/scss/variables' as border;
-@use 'color/scss/variables' as color;
-
-
-@mixin css-variables($colors) {
-    @include background.css-variables($colors);
-    @include border.css-variables($colors);
-    @include color.css-variables($colors);
-}
-
-@include css-variables(lib.list-join(primary secondary, lib.map-keys(tokens.$color)));
+@use '/lib';
+@use '/tokens';
+@use 'background/scss/variables' as background;
+@use 'border/scss/variables' as border;
+@use 'color/scss/variables' as color;
+
+
+@mixin css-variables($colors) {
+    @include background.css-variables($colors);
+    @include border.css-variables($colors);
+    @include color.css-variables($colors);
+}
+
+@include css-variables(lib.list-join(primary secondary, lib.map-keys(tokens.$color)));

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

@@ -1,7 +1,7 @@
-.--inline {
-    display: inline;
-    font-size: inherit;
-    line-height: inherit;
-    margin: 0;
-    padding: 0;
-}
+.--inline {
+    display: inline;
+    font-size: inherit;
+    line-height: inherit;
+    margin: 0;
+    padding: 0;
+}