@esportsplus/ui 0.24.5 → 0.25.0

package/src/components/field/scss/range.scss

@@ -1,46 +0,0 @@
-@mixin css() {
-    &-mask {
-        &--range {
-            margin: calc((var(--height) - var(--thumb-size)) / 2) 0;
-
-            .field-mask-tag {
-                background: var(--background);
-                border-radius: 240px;
-                border: 0px;
-                height: var(--height);
-                transition: opacity .2s;
-                width: var(--width);
-
-                &::-moz-range-thumb,
-                &::-webkit-slider-thumb {
-                    background: var(--thumb-background);
-                    border-radius: 100%;
-                    border: var(--border-width) solid var(--border-color);
-                    cursor: pointer;
-                    height: var(--thumb-size);
-                    width: var(--thumb-size);
-                }
-
-                &,
-                &::-moz-range-thumb,
-                &::-webkit-slider-thumb {
-                    appearance: none;
-                    outline: none;
-                }
-            }
-        }
-    }
-}
-
-@mixin variables() {
-    &-mask {
-        &--range {
-            --background-default: var(--color-black-300);
-            --border-width: var(--border-width-700);
-            --height: var(--size-200);
-            --thumb-background: var(--color-white-400);
-            --thumb-size: var(--size-400);
-            --width: 100%;
-        }
-    }
-}

package/src/components/field/scss/text.scss

@@ -1,120 +0,0 @@
-@use '/lib';
-
-@mixin css() {
-    &-mask {
-        &--file,
-        &--input,
-        &--select,
-        &--textarea {
-            align-items: center;
-            background: var(--background);
-            border: var(--border-width) var(--border-style) var(--border-color);
-            border-radius: var(--border-radius);
-            display: flex;
-            flex-wrap: wrap;
-            font-size: var(--font-size);
-            line-height: var(--line-height);
-            position: relative;
-            width: 100%;
-
-            &:invalid,
-            &:required {
-                box-shadow: none;
-            }
-
-            &,
-            .field-mask-tag {
-                color: var(--color);
-            }
-
-            // Truncate Overflowing Text
-            &.field-text {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-        }
-
-        &--file,
-        &--input,
-        &--textarea {
-            cursor: text;
-            // Necessary To Maintain Height Of Hidden Password Fields In Floating Modals
-            // - Password Managers Cause Problems When Fields Are Not Using 'display:hidden' On Password Fields
-            min-height: calc((var(--padding-vertical) * 2) + var(--size));
-
-            .field-mask-tag {
-                flex: 1 1 auto;
-                padding: var(--padding-vertical) var(--padding-horizontal);
-                min-width: 0;
-
-                &[type='number'] {
-                    appearance: textfield;
-                }
-            }
-
-            textarea.field-mask-tag {
-                white-space: normal;
-            }
-        }
-
-        &--file {
-            cursor: pointer;
-        }
-
-        &--select {
-            cursor: pointer;
-            padding: var(--padding-vertical) calc((var(--padding-horizontal) / 1.5) + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal);
-
-            &.--padding {
-                padding-right: calc((var(--padding-horizontal) * 1.5) + var(--arrow-size));
-            }
-        }
-
-        // Down Arrow
-        &-arrow {
-            @include lib.position(absolute, null calc(var(--padding-horizontal) + var(--arrow-spacer)) calc(50% + var(--arrow-spacer)) null);
-            border-color: var(--border-color);
-            border-style: var(--border-style);
-            border-width: 0 var(--border-width) var(--border-width) 0;
-            content: '';
-            height: var(--arrow-size);
-            transform: translateY(50%) rotate(45deg);
-            width: var(--arrow-size);
-        }
-
-        &-text {
-            padding-right: var(--padding-horizontal);
-            pointer-events: none;
-        }
-    }
-}
-
-@mixin variables() {
-    &-mask {
-        &--file,
-        &--input,
-        &--select,
-        &--textarea {
-            --font-size: var(--font-size-400);
-            --line-height: var(--line-height-400);
-            --padding-horizontal: var(--size-400);
-            --padding-vertical: var(--size-400);
-        }
-
-        &--file,
-        &--input,
-        &--textarea {
-            --size: var(--size-400);
-        }
-
-        &--select {
-            --arrow-spacer: 1px;
-            --arrow-size: 6px;
-        }
-
-        &-arrow {
-            --border-width: var(--border-width-500);
-        }
-    }
-}

package/src/components/field/scss/variables.scss

@@ -1,128 +0,0 @@
-@use '/tokens';
-@use 'check' as check;
-@use 'range' as range;
-@use 'text' as text;
-
-.field {
-    --margin-horizontal: 0px;
-    --margin-vertical: var(--size-300);
-    --width: 100%;
-
-
-    &-description,
-    &-error {
-        --font-size: var(--font-size-300);
-    }
-
-    &-error {
-        --color: var(--color-red-400);
-    }
-
-    &-mask {
-        --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-default: var(--background);
-        --border-radius: var(--border-radius-400);
-        --border-style: solid;
-        --border-width: 0px;
-        --box-shadow: var(--box-shadow-default);
-        --box-shadow-default: 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);
-        --outline-opacity: var(--outline-opacity-default);
-        --outline-opacity-active: 0.32;
-        --outline-opacity-default: 0;
-        --outline-opacity-hover: 0;
-        --outline-opacity-pressed: 0;
-        --outline-spacing: 0px;
-        --outline-width: var(--outline-width-default);
-        --outline-width-active: 4px;
-        --outline-width-default: 0px;
-        --outline-width-hover: 0px;
-        --outline-width-pressed: 0px;
-        --padding-horizontal: 0px;
-        --padding-vertical: var(--size-400);
-
-
-        #{tokens.state(active, '.field')} > &,
-        #{tokens.state(active, '.field')} *:not(.field) & {
-            --background: var(--background-active);
-            --border-color: var(--border-color-active);
-            --box-shadow: var(--box-shadow-active);
-            --color: var(--color-active);
-            --outline-opacity: var(--outline-opacity-active);
-            --outline-width: var(--outline-width-active);
-        }
-
-        $inactive: tokens.state(inactive, '.field');
-
-        #{tokens.state(hover, 'label#{$inactive}')} > &,
-        #{tokens.state(hover, '#{$inactive}:not(label) &')} {
-            --background: var(--background-hover);
-            --border-color: var(--border-color-hover);
-            --box-shadow: var(--box-shadow-hover);
-            --color: var(--color-hover);
-            --outline-opacity: var(--outline-opacity-hover);
-            --outline-width: var(--outline-width-hover);
-        }
-
-        #{tokens.state(pressed, 'label#{$inactive}')} > &,
-        #{tokens.state(pressed, '#{$inactive}:not(label) &')} {
-            --background: var(--background-pressed);
-            --border-color: var(--border-color-pressed);
-            --box-shadow: var(--box-shadow-pressed);
-            --color: var(--color-pressed);
-            --outline-opacity: var(--outline-opacity-pressed);
-            --outline-width: var(--outline-width-pressed);
-        }
-
-        &--outline {
-            @include tokens.state(pressed) {
-                --border-color: var(--border-color-default);
-
-                &::before {
-                    --outline-width: 0px;
-                }
-            }
-        }
-    }
-
-    &-required {
-        --border-radius: 100%;
-        --size: 6px;
-    }
-
-    &-title {
-        --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-500);
-
-        #{tokens.state(active, '.field')} & {
-            --color: var(--color-active);
-        }
-
-        #{tokens.state(hover, '.field')} & {
-            --color: var(--color-hover);
-        }
-
-        #{tokens.state(pressed, '.field')} & {
-            --color: var(--color-pressed);
-        }
-    }
-
-
-    @include check.variables();
-    @include range.variables();
-    @include text.variables();
-}

package/src/components/field/title.ts

@@ -1,27 +0,0 @@
-import { html, Attributes } from '@esportsplus/template';
-import { omit } from '@esportsplus/utilities';
-import tooltip from '~/components/tooltip';
-import template from '~/components/template';
-
-
-const OMIT = ['required'];
-
-
-export default template.factory<Attributes & { required?: boolean }>(
-    (attributes, content) =>{
-        let required = attributes?.required;
-
-        return html`
-            <div
-                class='field-title --flex-horizontal-space-between --flex-vertical'
-                ${omit(attributes, OMIT)}
-            >
-                ${content}
-
-                ${required && tooltip.onhover({ class: 'bubble --background-primary --margin-left' }, html`
-                    <span class='tooltip-message tooltip-message--w'>Required</span>
-                `)}
-            </div>
-        `;
-    }
-);