@esportsplus/ui 0.1.8 → 0.2.2

package/src/components/field/scss/_text.scss

@@ -1,106 +1,106 @@
-@use '/lib';
-
-@mixin css() {
-    &-mask {
-        &--input,
-        &--select {
-            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-tag {
-                color: var(--color);
-            }
-        }
-
-        // Truncate Overflowing Text
-        &--input .field-tag,
-        &--select .field-text {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        &--input {
-            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-tag {
-                flex: 1 1 auto;
-                padding: var(--padding-vertical) var(--padding-horizontal);
-                min-width: 0;
-
-                &[type='number'] {
-                    appearance: textfield;
-                }
-            }
-
-            textarea.field-tag {
-                white-space: normal;
-            }
-        }
-
-        &--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);
-    }
-}
-
-@mixin variables() {
-    &-mask {
-        &--input,
-        &--select {
-            --font-size: var(--font-size-400);
-            --line-height: var(--line-height-400);
-        }
-
-        &--input {
-            --size: var(--size-400);
-        }
-
-        &--select {
-            --arrow-spacer: 1px;
-            --arrow-size: 6px;
-        }
-
-        &-arrow {
-            --border-width: var(--border-width-500);
-        }
-    }
-}
+@use '/lib';
+
+@mixin css() {
+    &-mask {
+        &--input,
+        &--select {
+            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-tag {
+                color: var(--color);
+            }
+        }
+
+        // Truncate Overflowing Text
+        &--input .field-tag,
+        &--select .field-text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &--input {
+            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-tag {
+                flex: 1 1 auto;
+                padding: var(--padding-vertical) var(--padding-horizontal);
+                min-width: 0;
+
+                &[type='number'] {
+                    appearance: textfield;
+                }
+            }
+
+            textarea.field-tag {
+                white-space: normal;
+            }
+        }
+
+        &--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);
+    }
+}
+
+@mixin variables() {
+    &-mask {
+        &--input,
+        &--select {
+            --font-size: var(--font-size-400);
+            --line-height: var(--line-height-400);
+        }
+
+        &--input {
+            --size: var(--size-400);
+        }
+
+        &--select {
+            --arrow-spacer: 1px;
+            --arrow-size: 6px;
+        }
+
+        &-arrow {
+            --border-width: var(--border-width-500);
+        }
+    }
+}

package/src/components/field/scss/index.scss

@@ -1,159 +1,159 @@
-@use '/lib';
-@use '/tokens';
-@use 'check' as check;
-@use 'normalize' as *;
-@use 'text' as text;
-
-@include normalize();
-
-.field {
-    display: flex;
-    position: relative;
-    transition:
-        background var(--transition-duration) ease-in-out,
-        border-color var(--transition-duration) ease-in-out,
-        box-shadow var(--transition-duration) ease-in-out,
-        color var(--transition-duration) ease-in-out,
-        opacity var(--transition-duration) ease-in-out;
-    width: var(--width);
-    z-index: 1;
-
-    @include tokens.state(hover) {
-        z-index: 8;
-    }
-
-    @include tokens.state(active) {
-        z-index: 9;
-    }
-
-
-    &--optional {
-        max-height: var(--max-height);
-        opacity: 0;
-        pointer-events: none;
-        transition:
-            background var(--transition-duration) ease-in-out,
-            border-color var(--transition-duration) ease-in-out,
-            box-shadow var(--transition-duration) ease-in-out,
-            color var(--transition-duration) ease-in-out,
-            max-height var(--transition-duration) ease-in-out,
-            opacity var(--transition-duration) ease-in-out;
-
-        #{tokens.state(active, '.field')} & {
-            opacity: 1;
-            pointer-events: auto;
-        }
-    }
-
-
-    &-description,
-    &-error,
-    &-title {
-        color: var(--color);
-        font-size: var(--font-size);
-        position: relative;
-        width: 100%;
-        word-wrap: break-word;
-
-        &:empty {
-            height: 0px;
-            margin: 0;
-        }
-    }
-
-    &-error {
-        animation: field-error 0.32s 1 linear;
-
-        @keyframes field-error {
-            0% {
-                transform: translate(8px);
-            }
-
-            20% {
-                transform: translate(-8px);
-            }
-
-            40% {
-                transform: translate(4px);
-            }
-
-            60% {
-                transform: translate(-4px);
-            }
-
-            80% {
-                transform: translate(2px);
-            }
-
-            100% {
-                transform: translate(0px);
-            }
-        }
-    }
-
-    &-mask {
-
-        // Pseudo Element Box Shadow
-        &::after {
-            @include lib.position(absolute, full);
-            border-radius: inherit;
-            box-shadow: var(--box-shadow);
-            content: '';
-            pointer-events: none;
-            transition:
-                box-shadow var(--transition-duration) ease-in-out,
-                opacity var(--transition-duration) ease-in-out,
-                transform var(--transition-duration) ease-in-out;
-            z-index: 0;
-        }
-
-        &--flat {
-            &::after {
-                display: none;
-            }
-        }
-
-        &--outline {
-            &::before {
-                @include lib.position(absolute, full);
-                box-shadow: 0 0 0 var(--outline-width) var(--border-color);
-                border-radius: var(--border-radius);
-                content: '';
-                opacity: var(--outline-opacity);
-                pointer-events: none;
-                transition:
-                    box-shadow var(--transition-duration) ease-in-out,
-                    opacity var(--transition-duration) ease-in-out;
-                z-index: 0;
-            }
-        }
-    }
-
-    &-required {
-        background: var(--background);
-        border-radius: var(--border-radius);
-        height: var(--size);
-        width: var(--size);
-    }
-
-    &-tag {
-        &--hidden {
-            @include lib.position(absolute, 0 null null 0);
-            appearance: none;
-            height: 0px;
-            opacity: 0;
-            pointer-events: none;
-            width: 0px;
-            z-index: -1;
-        }
-    }
-
-    &-title {
-        font-weight: var(--font-weight);
-        z-index: 1;
-    }
-
-
-    @include check.css();
-    @include text.css();
+@use '/lib';
+@use '/tokens';
+@use 'check' as check;
+@use 'normalize' as *;
+@use 'text' as text;
+
+@include normalize();
+
+.field {
+    display: flex;
+    position: relative;
+    transition:
+        background var(--transition-duration) ease-in-out,
+        border-color var(--transition-duration) ease-in-out,
+        box-shadow var(--transition-duration) ease-in-out,
+        color var(--transition-duration) ease-in-out,
+        opacity var(--transition-duration) ease-in-out;
+    width: var(--width);
+    z-index: 1;
+
+    @include tokens.state(hover) {
+        z-index: 8;
+    }
+
+    @include tokens.state(active) {
+        z-index: 9;
+    }
+
+
+    &--optional {
+        max-height: var(--max-height);
+        opacity: 0;
+        pointer-events: none;
+        transition:
+            background var(--transition-duration) ease-in-out,
+            border-color var(--transition-duration) ease-in-out,
+            box-shadow var(--transition-duration) ease-in-out,
+            color var(--transition-duration) ease-in-out,
+            max-height var(--transition-duration) ease-in-out,
+            opacity var(--transition-duration) ease-in-out;
+
+        #{tokens.state(active, '.field')} & {
+            opacity: 1;
+            pointer-events: auto;
+        }
+    }
+
+
+    &-description,
+    &-error,
+    &-title {
+        color: var(--color);
+        font-size: var(--font-size);
+        position: relative;
+        width: 100%;
+        word-wrap: break-word;
+
+        &:empty {
+            height: 0px;
+            margin: 0;
+        }
+    }
+
+    &-error {
+        animation: field-error 0.32s 1 linear;
+
+        @keyframes field-error {
+            0% {
+                transform: translate(8px);
+            }
+
+            20% {
+                transform: translate(-8px);
+            }
+
+            40% {
+                transform: translate(4px);
+            }
+
+            60% {
+                transform: translate(-4px);
+            }
+
+            80% {
+                transform: translate(2px);
+            }
+
+            100% {
+                transform: translate(0px);
+            }
+        }
+    }
+
+    &-mask {
+
+        // Pseudo Element Box Shadow
+        &::after {
+            @include lib.position(absolute, full);
+            border-radius: inherit;
+            box-shadow: var(--box-shadow);
+            content: '';
+            pointer-events: none;
+            transition:
+                box-shadow var(--transition-duration) ease-in-out,
+                opacity var(--transition-duration) ease-in-out,
+                transform var(--transition-duration) ease-in-out;
+            z-index: 0;
+        }
+
+        &--flat {
+            &::after {
+                display: none;
+            }
+        }
+
+        &--outline {
+            &::before {
+                @include lib.position(absolute, full);
+                box-shadow: 0 0 0 var(--outline-width) var(--border-color);
+                border-radius: var(--border-radius);
+                content: '';
+                opacity: var(--outline-opacity);
+                pointer-events: none;
+                transition:
+                    box-shadow var(--transition-duration) ease-in-out,
+                    opacity var(--transition-duration) ease-in-out;
+                z-index: 0;
+            }
+        }
+    }
+
+    &-required {
+        background: var(--background);
+        border-radius: var(--border-radius);
+        height: var(--size);
+        width: var(--size);
+    }
+
+    &-tag {
+        &--hidden {
+            @include lib.position(absolute, 0 null null 0);
+            appearance: none;
+            height: 0px;
+            opacity: 0;
+            pointer-events: none;
+            width: 0px;
+            z-index: -1;
+        }
+    }
+
+    &-title {
+        font-weight: var(--font-weight);
+        z-index: 1;
+    }
+
+
+    @include check.css();
+    @include text.css();
 }