noph-ui 0.2.1 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/icons/Icon.svelte
CHANGED
|
@@ -5,6 +5,29 @@
|
|
|
5
5
|
<span class="material-symbols-outlined">{@render children()}</span>
|
|
6
6
|
|
|
7
7
|
<style>
|
|
8
|
+
:global(.material-symbols-outlined) {
|
|
9
|
+
font-family: 'Material Symbols Outlined';
|
|
10
|
+
font-weight: normal;
|
|
11
|
+
font-style: normal;
|
|
12
|
+
font-size: 24px;
|
|
13
|
+
line-height: 1;
|
|
14
|
+
letter-spacing: normal;
|
|
15
|
+
text-transform: none;
|
|
16
|
+
display: inline-block;
|
|
17
|
+
white-space: nowrap;
|
|
18
|
+
word-wrap: normal;
|
|
19
|
+
direction: ltr;
|
|
20
|
+
font-feature-settings: 'liga';
|
|
21
|
+
-webkit-font-feature-settings: 'liga';
|
|
22
|
+
-webkit-font-smoothing: antialiased;
|
|
23
|
+
}
|
|
24
|
+
.material-symbols-outlined {
|
|
25
|
+
font-variation-settings:
|
|
26
|
+
'FILL' 0,
|
|
27
|
+
'wght' 400,
|
|
28
|
+
'GRAD' 0,
|
|
29
|
+
'opsz' 24;
|
|
30
|
+
}
|
|
8
31
|
:global(:where(.button-icon) .material-symbols-outlined) {
|
|
9
32
|
display: inline-flex;
|
|
10
33
|
fill: currentColor;
|
|
@@ -191,7 +191,7 @@
|
|
|
191
191
|
width: 100%;
|
|
192
192
|
z-index: 1;
|
|
193
193
|
}
|
|
194
|
-
.
|
|
194
|
+
.field:has(input:focus-visible) .active-indicator::after {
|
|
195
195
|
opacity: 1;
|
|
196
196
|
}
|
|
197
197
|
.active-indicator::after {
|
|
@@ -355,7 +355,7 @@
|
|
|
355
355
|
}
|
|
356
356
|
|
|
357
357
|
.no-label .content,
|
|
358
|
-
.
|
|
358
|
+
.field:has(input:focus-visible) .content,
|
|
359
359
|
.populated .content {
|
|
360
360
|
opacity: 1;
|
|
361
361
|
}
|
|
@@ -470,18 +470,6 @@
|
|
|
470
470
|
.field:not(.with-start) .label-wrapper {
|
|
471
471
|
margin-inline-start: 1rem;
|
|
472
472
|
}
|
|
473
|
-
.label.floating {
|
|
474
|
-
font-size: 0.75rem;
|
|
475
|
-
line-height: 1rem;
|
|
476
|
-
transform-origin: top left;
|
|
477
|
-
}
|
|
478
|
-
.label.floating {
|
|
479
|
-
position: absolute;
|
|
480
|
-
top: var(--floating-label-top, 0.5rem);
|
|
481
|
-
}
|
|
482
|
-
.with-start .label.floating {
|
|
483
|
-
left: var(--floating-label-left, 0);
|
|
484
|
-
}
|
|
485
473
|
.notch {
|
|
486
474
|
font-size: 0.75rem;
|
|
487
475
|
line-height: 1rem;
|
|
@@ -498,6 +486,19 @@
|
|
|
498
486
|
top: 1rem;
|
|
499
487
|
left: 0rem;
|
|
500
488
|
}
|
|
489
|
+
|
|
490
|
+
.label.floating {
|
|
491
|
+
font-size: 0.75rem;
|
|
492
|
+
line-height: 1rem;
|
|
493
|
+
transform-origin: top left;
|
|
494
|
+
}
|
|
495
|
+
.label.floating {
|
|
496
|
+
position: absolute;
|
|
497
|
+
top: var(--floating-label-top, 0.5rem);
|
|
498
|
+
}
|
|
499
|
+
.with-start .label.floating {
|
|
500
|
+
left: var(--floating-label-left, 0);
|
|
501
|
+
}
|
|
501
502
|
.label {
|
|
502
503
|
transition-property: all;
|
|
503
504
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -513,13 +514,13 @@
|
|
|
513
514
|
line-height: 1.5rem;
|
|
514
515
|
width: min-content;
|
|
515
516
|
}
|
|
517
|
+
.field:has(input:focus-visible) .label {
|
|
518
|
+
color: var(--np-color-primary);
|
|
519
|
+
}
|
|
516
520
|
.error .label,
|
|
517
|
-
.error
|
|
521
|
+
.error:has(input:focus-visible) .label {
|
|
518
522
|
color: var(--np-color-error);
|
|
519
523
|
}
|
|
520
|
-
.focused .label {
|
|
521
|
-
color: var(--np-color-primary);
|
|
522
|
-
}
|
|
523
524
|
.disabled .label {
|
|
524
525
|
color: var(--np-color-on-surface);
|
|
525
526
|
}
|
|
@@ -531,7 +532,6 @@
|
|
|
531
532
|
overflow: hidden;
|
|
532
533
|
}
|
|
533
534
|
.disabled.no-label .content,
|
|
534
|
-
.disabled.focused .content,
|
|
535
535
|
.disabled.populated .content {
|
|
536
536
|
opacity: 0.38;
|
|
537
537
|
}
|
|
@@ -603,7 +603,7 @@
|
|
|
603
603
|
border-bottom-style: solid;
|
|
604
604
|
border-top-style: none;
|
|
605
605
|
}
|
|
606
|
-
.field:not(
|
|
606
|
+
.field:not(:has(input:focus-visible)):not(.populated) .outline-notch::before {
|
|
607
607
|
border-top-style: solid;
|
|
608
608
|
}
|
|
609
609
|
|
|
@@ -641,9 +641,9 @@
|
|
|
641
641
|
opacity: 0;
|
|
642
642
|
transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1);
|
|
643
643
|
}
|
|
644
|
-
.
|
|
645
|
-
.
|
|
646
|
-
.
|
|
644
|
+
.field:has(input:focus-visible) .outline-start::after,
|
|
645
|
+
.field:has(input:focus-visible) .outline-end::after,
|
|
646
|
+
.field:has(input:focus-visible) .outline-notch::after {
|
|
647
647
|
opacity: 1;
|
|
648
648
|
}
|
|
649
649
|
.np-outline {
|
|
@@ -656,15 +656,15 @@
|
|
|
656
656
|
width: 100%;
|
|
657
657
|
z-index: 1;
|
|
658
658
|
}
|
|
659
|
-
.error .np-outline,
|
|
660
|
-
.error.focused .np-outline {
|
|
661
|
-
border-color: var(--np-color-error);
|
|
662
|
-
}
|
|
663
659
|
|
|
664
|
-
.
|
|
660
|
+
.field:has(input:focus-visible) .np-outline {
|
|
665
661
|
border-color: var(--np-color-primary);
|
|
666
662
|
color: var(--np-color-primary);
|
|
667
663
|
}
|
|
664
|
+
.error .np-outline,
|
|
665
|
+
.error:has(input:focus-visible) .np-outline {
|
|
666
|
+
border-color: var(--np-color-error);
|
|
667
|
+
}
|
|
668
668
|
.disabled .np-outline {
|
|
669
669
|
border-color: var(--np-color-on-surface);
|
|
670
670
|
color: var(--np-color-on-surface);
|