@esportsplus/ui 0.0.1 → 0.0.2

package/components/field/scss/_normalize.scss

@@ -1,36 +1,36 @@
-@mixin normalize() {
-    button,
-    input,
-    select,
-    textarea {
-        background: transparent;
-        border-radius: 0;
-        border: 0;
-        font-family: inherit;
-        font-size: inherit;
-        line-height: inherit;
-        margin: 0;
-        padding: 0;
-
-        &,
-        &:active,
-        &:focus,
-        &:hover {
-            outline: none;
-        }
-
-        &:invalid {
-            box-shadow: none;
-        }
-    }
-
-    form {
-        margin: 0;
-        padding: 0;
-        width: 100%;
-    }
-
-    label {
-        cursor: pointer;
-    }
-}
+@mixin normalize() {
+    button,
+    input,
+    select,
+    textarea {
+        background: transparent;
+        border-radius: 0;
+        border: 0;
+        font-family: inherit;
+        font-size: inherit;
+        line-height: inherit;
+        margin: 0;
+        padding: 0;
+
+        &,
+        &:active,
+        &:focus,
+        &:hover {
+            outline: none;
+        }
+
+        &:invalid {
+            box-shadow: none;
+        }
+    }
+
+    form {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+    }
+
+    label {
+        cursor: pointer;
+    }
+}

package/components/field/scss/_text.scss

@@ -1,103 +1,103 @@
-@use 'ui/lib';
-@use 'ui/tokens';
-
-@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;
-                }
-            }
-        }
-
-        &--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 'ui/lib';
+@use 'ui/tokens';
+
+@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;
+                }
+            }
+        }
+
+        &--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/components/field/scss/field.scss

@@ -1,132 +1,137 @@
-/**
- *------------------------------------------------------------------------------
- *
- *  Form Fields
- *
- *  Fields Were Originally Placed Within A '.form' Selector BUT Fields Are Not
- *  Always Used Within A Form Tag So Here We Are.
- *
- */
-
-@use 'ui/lib';
-@use 'ui/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,
-    &-title {
-        color: var(--color);
-        font-size: var(--font-size);
-        position: relative;
-        width: 100%;
-        word-wrap: break-word;
-    }
-
-    &-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();
-}
+/**
+ *------------------------------------------------------------------------------
+ *
+ *  Form Fields
+ *
+ *  Fields Were Originally Placed Within A '.form' Selector BUT Fields Are Not
+ *  Always Used Within A Form Tag So Here We Are.
+ *
+ */
+
+ @use 'ui/lib';
+ @use 'ui/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 {
+             margin: 0;
+         }
+     }
+
+     &-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();
+ }