dbushell.com
Attic is a cozy space with lofty ambitions.
attic.social
1input,
2.Tags {
3 border: 15px solid transparent;
4 border-image: var(--input-border) 15 fill stretch;
5 block-size: calc(var(--font-size-button) + 30px);
6 color: rgb(var(--color-black));
7 font-family: var(--font-family-1);
8 font-size: var(--font-size-3);
9 font-weight: 400;
10 inline-size: min(100%, 400px);
11 line-height: var(--line-height-1);
12 padding: 0;
13}
14
15input {
16 &::placeholder {
17 color: rgb(var(--color-black) / 0.5);
18 opacity: 1;
19 }
20
21 &:disabled {
22 opacity: 0.5;
23 pointer-events: none;
24 }
25
26 &:user-invalid {
27 border-image-source: var(--input-border-error);
28 }
29}
30
31.Tags {
32 block-size: auto;
33 column-gap: 5px;
34 display: flex;
35 flex-wrap: wrap;
36 inline-size: 100%;
37 min-inline-size: 0;
38 row-gap: 15px;
39
40 &:has(:focus-visible) {
41 outline: 4px solid magenta;
42 outline-offset: 2px;
43 }
44
45 & :is(input) {
46 border: 2px solid black;
47 block-size: calc(var(--font-size-button) + 10px);
48 field-sizing: content;
49 inline-size: fit-content;
50 line-height: 1;
51 margin-block: -5px;
52 min-inline-size: 0;
53 overflow: hidden;
54 padding: 5px;
55 text-overflow: ellipsis;
56 white-space: nowrap;
57
58 &:focus-visible {
59 outline: none;
60 }
61
62 &:not([readonly]) {
63 border-color: transparent;
64 min-inline-size: 5ch;
65 flex-grow: 1;
66 }
67
68 &[readonly] {
69 background: rgb(var(--color-yellow));
70
71 &::selection {
72 background: transparent;
73 }
74
75 &:focus-visible {
76 background: rgb(var(--color-light-yellow));
77 }
78
79 &:hover {
80 background: rgb(var(--color-light-yellow));
81 cursor: pointer;
82 }
83 }
84 }
85}