@fest-lib/veela 0.1.20 → 1.0.1

package/src/scss/ui/components/text.scss

@@ -0,0 +1,241 @@
+@layer components {
+    :host(ui-longtext) {
+        //
+        & {
+            --background-tone-shift: 0.01;
+            //--ui-text-background-color: transparent;//--c2-surface(var(--background-tone-shift, 0.0), var(--current, transparent));
+            --ui-text-background-color: --c2-surface(var(--background-tone-shift, 0.0), var(--current, transparent));
+            --ui-text-color: --c2-on-surface(var(--ui-text-tone-shift, 0.0), var(--current, currentColor));
+            --ui-text-font-size: 0.9rem;
+            --ui-text-font-family: "InterVariable", "Inter", Helvetica, Calibri, Carlito;
+            --ui-text-border-width: 0.0625rem;
+            --ui-text-radius: 0.5rem;
+            --ui-text-border-radius: 0.5rem;
+            --ui-text-border-color: --c2-on-surface(var(--ui-text-tone-shift, 0.0), var(--current, currentColor));
+        }
+
+        //
+        & {
+            max-inline-size: none;
+            max-block-size: stretch;
+            inline-size: stretch;
+            block-size: fit-content;
+            min-block-size: 2rem;
+            display: grid !important;
+            place-content: stretch;
+            place-items: stretch;
+            text-align: start;
+            pointer-events: none;
+            user-select: none;
+            background-color: transparent !important;
+            border: none 0px transparent;
+            outline: none 0px transparent;
+            padding: 0 !important;
+            margin: 0 !important;
+            font-size: var(--ui-text-font-size, 1rem);
+            grid-template-columns: minmax(0px, 1fr) !important;
+            grid-template-rows: minmax(0px, 1fr) !important;
+            position: relative;
+            overflow: hidden;
+            container-type: size;
+            contain: none;
+            line-height: 0;
+            content-visibility: visible;
+        }
+
+        //
+        &, *, ::slotted(*) {
+            box-sizing: border-box;
+            transition-behavior: allow-discrete;
+            interpolate-size: allow-keywords;
+            border: none 0px transparent;
+            outline: none 0px transparent;
+            padding: 0px;
+            margin: 0px;
+            white-space: nowrap;
+            text-spacing-trim: normal;
+            text-wrap: nowrap;
+            word-break: keep-all;
+        }
+
+        slot {
+            display: contents !important;
+            pointer-events: none !important;
+            background-color: transparent !important;
+            color: inherit !important;
+            box-shadow: none !important;
+            border-width: 0px !important;
+            border-style: none !important;
+            border-color: transparent !important;
+            outline: none !important;
+            contain: none !important;
+            container-type: normal !important;
+            white-space: nowrap !important;
+            text-spacing-trim: normal !important;
+            text-wrap: nowrap !important;
+            word-break: keep-all !important;
+            padding: 0px !important;
+            margin: 0px !important;
+        }
+
+        //
+        &, * {
+            box-sizing: border-box;
+            transition-behavior: allow-discrete;
+            interpolate-size: allow-keywords;
+            user-select: none;
+            pointer-events: none;
+        }
+
+        //
+        & {
+            border-radius: var(--ui-text-border-radius, 0.5rem);
+            border-width: 0px;
+            //border-width: var(--ui-text-border-width, 0.0625rem);
+            border-color: var(--ui-text-border-color, --c2-on-surface(var(--ui-text-tone-shift, 0.0), var(--current, currentColor)));
+            border-style: solid;
+        }
+
+        //
+        & > * {
+            grid-column: 1 / -1;
+            grid-row: 1 / -1;
+            justify-content: start;
+            text-align: start;
+            user-select: none;
+            pointer-events: none;
+            background-color: transparent;
+            border: none 0px transparent;
+            outline: none 0px transparent;
+            padding: 0px;
+            margin: 0px;
+            font-size: var(--ui-text-font-size, 1rem);
+            font-family: var(--ui-text-font-family, inherit);
+            inline-size: 100%;
+            block-size: 100%;
+            max-inline-size: none;
+            max-block-size: none;
+            overflow: hidden;
+        }
+
+        //
+        .box-layer {
+            content-visibility: visible;
+            font-size: 0rem;
+            line-height: 0;
+            grid-column: 1 / -1;
+            grid-row: 1 / -1;
+            min-block-size: fit-content;
+            inline-size: stretch;
+            block-size: stretch;
+            max-inline-size: stretch;
+            max-block-size: stretch;
+            display: block;
+            flex-direction: row;
+            text-align: start;
+            place-content: stretch;
+            place-items: stretch;
+            justify-content: start;
+            justify-items: start;
+            align-content: center;
+            align-items: center;
+            user-select: none;
+            border: none 0px transparent !important;
+            outline: none 0px transparent !important;
+            padding: 0px !important;
+            margin: 0px !important;
+            font-family: var(--ui-text-font-family, inherit);
+            overflow: visible;
+            overflow-inline: scroll;
+            overflow-block: visible;
+            contain: none;
+            position: relative;
+            white-space: nowrap;
+            text-spacing-trim: normal;
+            text-wrap: nowrap;
+            word-break: keep-all;
+            scrollbar-width: none;
+            scrollbar-color: transparent transparent;
+            clip-path: inset(0px 0.125rem round 0.125rem);
+            background-color: var(--ui-text-background-color, transparent);
+            pointer-events: auto;
+
+            /*
+             * Mask for smooth crop of input in left and right edges
+             */
+            mask-image: linear-gradient(
+                to right,
+                transparent 0rem,
+                transparent 0.125rem,
+                black 0.5rem,
+                black calc(100% - 0.5rem),
+                transparent calc(100% - 0.125rem),
+                transparent 100%
+            );
+            mask-size: 100% 100%;
+            mask-repeat: no-repeat;
+            mask-position: center center;
+            mask-mode: alpha;
+            mask-origin: content-box;
+            mask-clip: padding-box;
+        }
+
+        //
+        ::slotted(*) {
+            inline-size: stretch;
+            block-size: stretch;
+            max-inline-size: stretch;
+            max-block-size: stretch;
+            place-self: stretch;
+        }
+
+        //
+        ::slotted(ui-scrollframe) {
+            inline-size: stretch !important;
+            block-size: stretch !important;
+            min-block-size: 2rem;
+            max-inline-size: none;
+            max-block-size: none;
+            place-self: stretch;
+            z-index: 99 !important;
+        }
+
+        //
+        ::slotted(input) {
+            font-size: var(--ui-text-font-size, 1rem);
+            display: inline-block;
+            min-inline-size: -webkit-fill-available;
+            min-inline-size: stretch;
+            min-block-size: fit-content;
+            inline-size: max-content !important;
+            block-size: stretch;
+            max-inline-size: none !important;
+            max-block-size: stretch;
+            place-self: stretch;
+            place-content: stretch;
+            place-items: stretch;
+            text-align: start;
+            justify-self: start;
+            justify-content: start;
+            user-select: text;
+            cursor: text;
+            padding: 0.25rem 0.5rem 0.333rem 0.5rem;
+            field-sizing: content;
+            font-family: var(--ui-text-font-family, inherit);
+            box-sizing: border-box;
+            overflow: visible !important;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            text-spacing-trim: normal;
+            text-wrap: nowrap;
+            word-break: keep-all;
+            visibility: visible;
+            pointer-events: auto;
+
+            margin: 0 !important;
+            background-color: transparent !important;
+            border: none 0px transparent !important;
+            outline: none 0px transparent !important;
+        }
+    }
+}