@esportsplus/ui 0.1.8 → 0.2.2

package/src/css-utilities/line-height/scss/variables.scss

@@ -1,10 +1,10 @@
-@use '/lib';
-@use '/tokens';
-
-.--line-height {
-    @each $key in lib.map-keys(tokens.$line-height) {
-        &-#{$key} {
-            --line-height: var(--line-height-#{$key});
-        }
-    }
-}
+@use '/lib';
+@use '/tokens';
+
+.--line-height {
+    @each $key in lib.map-keys(tokens.$line-height) {
+        &-#{$key} {
+            --line-height: var(--line-height-#{$key});
+        }
+    }
+}

package/src/css-utilities/not-allowed/scss/index.scss

@@ -1,7 +1,7 @@
-.--not-allowed {
-    cursor: not-allowed;
-
-    * {
-        pointer-events: none;
-    }
-}
+.--not-allowed {
+    cursor: not-allowed;
+
+    * {
+        pointer-events: none;
+    }
+}

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

@@ -1,5 +1,5 @@
-.--overflow {
-    &-hidden {
-        overflow: hidden;
-    }
+.--overflow {
+    &-hidden {
+        overflow: hidden;
+    }
 }

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

@@ -1,5 +1,5 @@
-.--pointer {
-    &-none {
-        pointer-events: none;
-    }
-}
+.--pointer {
+    &-none {
+        pointer-events: none;
+    }
+}

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

@@ -1,12 +1,12 @@
-@use '/lib';
-@use '/tokens';
-
-.--size {
-    --size: var(--size-400);
-
-    @each $key in lib.map-keys(tokens.$size) {
-        &-#{$key} {
-            --size: var(--size-#{$key});
-        }
-    }
-}
+@use '/lib';
+@use '/tokens';
+
+.--size {
+    --size: var(--size-400);
+
+    @each $key in lib.map-keys(tokens.$size) {
+        &-#{$key} {
+            --size: var(--size-#{$key});
+        }
+    }
+}

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

@@ -1,21 +1,21 @@
-.--slide {
-    &-in,
-    &-in-reverse {
-        animation-duration: var(--transition-duration);
-        animation-name: --slide-in;
-        animation-timing-function: ease-in-out;
-        transform-origin: top center;
-
-        @keyframes --slide-in {
-            from {
-                opacity: 0;
-                transform: translateY(var(--translateY));
-            }
-
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-    }
-}
+.--slide {
+    &-in,
+    &-in-reverse {
+        animation-duration: var(--transition-duration);
+        animation-name: --slide-in;
+        animation-timing-function: ease-in-out;
+        transform-origin: top center;
+
+        @keyframes --slide-in {
+            from {
+                opacity: 0;
+                transform: translateY(var(--translateY));
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+    }
+}

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

@@ -1,10 +1,10 @@
-.--slide {
-    &-in {
-        --transition-duration: 0.48s;
-        --translateY: 32px;
-
-        &-reverse {
-            --translateY: -32px;
-        }
-    }
-}
+.--slide {
+    &-in {
+        --transition-duration: 0.48s;
+        --translateY: 32px;
+
+        &-reverse {
+            --translateY: -32px;
+        }
+    }
+}

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

@@ -1,93 +1,93 @@
-@use '/lib';
-@use '/tokens';
-
-.--text {
-    &-bold {
-        font-weight: var(--font-weight-500);
-
-        @each $key in lib.map-keys(tokens.$font-weight) {
-            @if $key > 500 {
-                &-#{$key} {
-                    font-weight: var(--font-weight-#{$key});
-                }
-            }
-        }
-    }
-
-    &-center {
-        text-align: center;
-    }
-
-    &-crop {
-        &::after,
-        &::before,
-        &-bottom::after,
-        &-top::before {
-            content: '';
-            display: block;
-            height: 0;
-            width: 100%;
-        }
-
-        &::after,
-        &-bottom::after {
-            margin-bottom: calc((1 - var(--line-height)) * 0.618em);
-        }
-
-        &::before,
-        &-top::before {
-            margin-top: calc((1 - var(--line-height)) * 0.618em);
-        }
-    }
-
-    &-italic {
-        font-style: italic;
-    }
-
-    &-linethrough {
-        text-decoration: line-through;
-    }
-
-    &-multiplier {
-        font-size: calc(var(--font-size) * var(--text-multiplier));
-    }
-
-    &-outline {
-        color: var(--color);
-        word-break: break-word;
-        word-wrap: break-word;
-
-        @supports (-webkit-text-stroke-width: 1px) {
-            color: transparent;
-            -webkit-text-fill-color: transparent;
-            -webkit-text-stroke-color: var(--color);
-            -webkit-text-stroke-width: var(--stroke-width);
-        }
-    }
-
-    &-strike-through {
-        text-decoration: line-through;
-        text-decoration-thickness: var(--line-width);
-    }
-
-    &-truncate {
-        line-height: var(--size);
-        max-width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    &-underline {
-        text-decoration: underline;
-
-        &-dotted {
-            text-decoration: underline;
-            text-decoration-style: dotted;
-        }
-    }
-
-    &-uppercase {
-        text-transform: uppercase;
-    }
-}
+@use '/lib';
+@use '/tokens';
+
+.--text {
+    &-bold {
+        font-weight: var(--font-weight-500);
+
+        @each $key in lib.map-keys(tokens.$font-weight) {
+            @if $key > 500 {
+                &-#{$key} {
+                    font-weight: var(--font-weight-#{$key});
+                }
+            }
+        }
+    }
+
+    &-center {
+        text-align: center;
+    }
+
+    &-crop {
+        &::after,
+        &::before,
+        &-bottom::after,
+        &-top::before {
+            content: '';
+            display: block;
+            height: 0;
+            width: 100%;
+        }
+
+        &::after,
+        &-bottom::after {
+            margin-bottom: calc((1 - var(--line-height)) * 0.618em);
+        }
+
+        &::before,
+        &-top::before {
+            margin-top: calc((1 - var(--line-height)) * 0.618em);
+        }
+    }
+
+    &-italic {
+        font-style: italic;
+    }
+
+    &-linethrough {
+        text-decoration: line-through;
+    }
+
+    &-multiplier {
+        font-size: calc(var(--font-size) * var(--text-multiplier));
+    }
+
+    &-outline {
+        color: var(--color);
+        word-break: break-word;
+        word-wrap: break-word;
+
+        @supports (-webkit-text-stroke-width: 1px) {
+            color: transparent;
+            -webkit-text-fill-color: transparent;
+            -webkit-text-stroke-color: var(--color);
+            -webkit-text-stroke-width: var(--stroke-width);
+        }
+    }
+
+    &-strike-through {
+        text-decoration: line-through;
+        text-decoration-thickness: var(--line-width);
+    }
+
+    &-truncate {
+        line-height: var(--size);
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    &-underline {
+        text-decoration: underline;
+
+        &-dotted {
+            text-decoration: underline;
+            text-decoration-style: dotted;
+        }
+    }
+
+    &-uppercase {
+        text-transform: uppercase;
+    }
+}

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

@@ -1,31 +1,31 @@
-@use '/lib';
-@use '/tokens';
-
-.--text {
-    @each $key in lib.map-keys(tokens.$font-size) {
-        &-#{$key} {
-            --font-size: var(--font-size-#{$key});
-        }
-    }
-
-    &-outline {
-        --color: inherit;
-        --stroke-width: var(--border-width-400);
-
-        @each $key in lib.map-keys(tokens.$border-width) {
-            &-#{$key} {
-                --stroke-width: var(--border-width-#{$key});
-            }
-        }
-    }
-
-    &-strike-through {
-        --line-width: var(--border-width-400);
-
-        @each $key in lib.map-keys(tokens.$border-width) {
-            &-#{$key} {
-                --line-width: var(--border-width-#{$key});
-            }
-        }
-    }
-}
+@use '/lib';
+@use '/tokens';
+
+.--text {
+    @each $key in lib.map-keys(tokens.$font-size) {
+        &-#{$key} {
+            --font-size: var(--font-size-#{$key});
+        }
+    }
+
+    &-outline {
+        --color: inherit;
+        --stroke-width: var(--border-width-400);
+
+        @each $key in lib.map-keys(tokens.$border-width) {
+            &-#{$key} {
+                --stroke-width: var(--border-width-#{$key});
+            }
+        }
+    }
+
+    &-strike-through {
+        --line-width: var(--border-width-400);
+
+        @each $key in lib.map-keys(tokens.$border-width) {
+            &-#{$key} {
+                --line-width: var(--border-width-#{$key});
+            }
+        }
+    }
+}

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

@@ -1,14 +1,14 @@
-@use '/lib';
-@use '/tokens';
-
-.--transition {
-    &-duration {
-        --transition-duration: var(--transition-duration-400);
-
-        @each $key in lib.map-keys(tokens.$transition-duration) {
-            &-#{$key} {
-                --transition-duration: var(--transition-duration-#{$key});
-            }
-        }
-    }
-}
+@use '/lib';
+@use '/tokens';
+
+.--transition {
+    &-duration {
+        --transition-duration: var(--transition-duration-400);
+
+        @each $key in lib.map-keys(tokens.$transition-duration) {
+            &-#{$key} {
+                --transition-duration: var(--transition-duration-#{$key});
+            }
+        }
+    }
+}

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

@@ -1,5 +1,5 @@
-.--viewport {
-    overflow: hidden;
-    height: calc(100svh - var(--margin-vertical, 0px) * 2);
-    width: calc(100vw - var(--margin-horizontal, 0px) * 2);
+.--viewport {
+    overflow: hidden;
+    height: calc(100svh - var(--margin-vertical, 0px) * 2);
+    width: calc(100vw - var(--margin-horizontal, 0px) * 2);
 }

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

@@ -1,3 +1,3 @@
-.--width {
-    width: var(--width);
-}
+.--width {
+    width: var(--width);
+}

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

@@ -1,9 +1,9 @@
-.--width {
-    &-full {
-        --width: 100%;
-    }
-
-    &-half {
-        --width: 50%;
-    }
-}
+.--width {
+    &-full {
+        --width: 100%;
+    }
+
+    &-half {
+        --width: 50%;
+    }
+}

package/src/index.ts

@@ -1,12 +1,12 @@
-import '@esportsplus/webpack/global.d.ts';
-
-export { default as alert }from './components/alert';
-export { default as export }from './components/export';
-export { default as field }from './components/field';
-export { default as form }from './components/form';
-export { default as number }from './components/number';
-export { default as page }from './components/page';
-export { default as root }from './components/root';
-export { default as scrollbar }from './components/scrollbar';
-export { default as site }from './components/site';
+import '@esportsplus/webpack/global.d.ts';
+
+export { default as alert }from './components/alert';
+export { default as export }from './components/export';
+export { default as field }from './components/field';
+export { default as form }from './components/form';
+export { default as number }from './components/number';
+export { default as page }from './components/page';
+export { default as root }from './components/root';
+export { default as scrollbar }from './components/scrollbar';
+export { default as site }from './components/site';
 export { default as tooltip }from './components/tooltip';

package/src/lib/index.scss

@@ -1,7 +1,7 @@
-@forward 'scss/breakpoint';
-@forward 'scss/color' as color-*;
-@forward 'scss/css-variables';
-@forward 'scss/list' as list-*;
-@forward 'scss/map' as map-*;
-@forward 'scss/position';
-@forward 'scss/string' as string-*;
+@forward 'scss/breakpoint';
+@forward 'scss/color' as color-*;
+@forward 'scss/css-variables';
+@forward 'scss/list' as list-*;
+@forward 'scss/map' as map-*;
+@forward 'scss/position';
+@forward 'scss/string' as string-*;

package/src/lib/scss/breakpoint.scss

@@ -1,41 +1,41 @@
-@mixin breakpoint($function, $param: null) {
-    @if $function == min-width or $function == min-height {
-        @media only screen and ($function: $param + 1px) {
-            @content;
-        }
-    }
-    @else if $function == max-width or $function == max-height {
-        @media only screen and ($function: $param) {
-            @content;
-        }
-    }
-    @else if $function == between-width {
-        @media only screen and (min-width: nth($param, 1) + 1px) and (max-width: nth($param, 2)) {
-            @content;
-        }
-    }
-    @else if $function == orientation {
-        @if $param == landscape {
-            @media only screen and (min-aspect-ratio: 13/9) {
-                @content;
-            }
-        } 
-        @else if $param == portrait {
-            @media only screen and (max-aspect-ratio: 13/9) {
-                @content;
-            }
-        }
-    }
-    @else if $function == retina {
-        @media
-            only screen and (-webkit-min-device-pixel-ratio: 1.25),
-            only screen and ( min--moz-device-pixel-ratio: 1.25),
-            only screen and ( -o-min-device-pixel-ratio: 1.25/1),
-            only screen and ( min-device-pixel-ratio: 1.25),
-            only screen and ( min-resolution: 200dpi),
-            only screen and ( min-resolution: 1.25dppx)
-        {
-            @content;
-        }
-    }
-}
+@mixin breakpoint($function, $param: null) {
+    @if $function == min-width or $function == min-height {
+        @media only screen and ($function: $param + 1px) {
+            @content;
+        }
+    }
+    @else if $function == max-width or $function == max-height {
+        @media only screen and ($function: $param) {
+            @content;
+        }
+    }
+    @else if $function == between-width {
+        @media only screen and (min-width: nth($param, 1) + 1px) and (max-width: nth($param, 2)) {
+            @content;
+        }
+    }
+    @else if $function == orientation {
+        @if $param == landscape {
+            @media only screen and (min-aspect-ratio: 13/9) {
+                @content;
+            }
+        } 
+        @else if $param == portrait {
+            @media only screen and (max-aspect-ratio: 13/9) {
+                @content;
+            }
+        }
+    }
+    @else if $function == retina {
+        @media
+            only screen and (-webkit-min-device-pixel-ratio: 1.25),
+            only screen and ( min--moz-device-pixel-ratio: 1.25),
+            only screen and ( -o-min-device-pixel-ratio: 1.25/1),
+            only screen and ( min-device-pixel-ratio: 1.25),
+            only screen and ( min-resolution: 200dpi),
+            only screen and ( min-resolution: 1.25dppx)
+        {
+            @content;
+        }
+    }
+}

package/src/lib/scss/color.scss

@@ -1 +1 @@
-@forward 'sass:color';
+@forward 'sass:color';

package/src/lib/scss/css-variables.scss

@@ -1,13 +1,13 @@
-@mixin css-variables($prefix, $tokens) {
-    @each $key, $value in $tokens {
-        @if type-of($value) == 'map' {
-            @each $subkey, $subvalue in $value {
-                --#{$prefix}-#{$key}-#{$subkey}: #{$subvalue};
-            }
-        }
-        @else {
-            --#{$prefix}-#{$key}: #{$value};
-        }
-    }
-}
- 
+@mixin css-variables($prefix, $tokens) {
+    @each $key, $value in $tokens {
+        @if type-of($value) == 'map' {
+            @each $subkey, $subvalue in $value {
+                --#{$prefix}-#{$key}-#{$subkey}: #{$subvalue};
+            }
+        }
+        @else {
+            --#{$prefix}-#{$key}: #{$value};
+        }
+    }
+}
+