@inchurch/matcha-theme 22.35.1 → 22.36.0
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.
|
@@ -44,6 +44,64 @@
|
|
|
44
44
|
// Família matcha-cell-* (DSV3) — cells de tabela canônicas, seletor de atributo
|
|
45
45
|
// em <td> nativo (td[matcha-cell-<tipo>]). Cada cell é um wrapper fino sobre um
|
|
46
46
|
// átomo do DS (identity→matcha-avatar, status→matcha-status-pill,
|
|
47
|
-
// contact→matcha-contact), então o estilo mora no átomo — não aqui.
|
|
48
|
-
//
|
|
47
|
+
// contact→matcha-contact), então o estilo mora no átomo — não aqui.
|
|
48
|
+
//
|
|
49
|
+
// EXCEÇÃO: `media` (→matcha-image). As outras três envolvem átomos que já se
|
|
50
|
+
// diagramam sozinhos; o `matcha-image` não posiciona nada ao lado dele, então a
|
|
51
|
+
// linha miniatura+texto é responsabilidade da cell e mora aqui. O `.scss` do
|
|
52
|
+
// componente segue vazio, como os irmãos: com encapsulation emulada um seletor
|
|
53
|
+
// `td[attr]` escrito lá vira CSS morto (precisaria de `:host([attr])`).
|
|
49
54
|
// =============================================================================
|
|
55
|
+
|
|
56
|
+
.matcha-cell-media {
|
|
57
|
+
display: inline-flex;
|
|
58
|
+
align-items: center;
|
|
59
|
+
gap: var(--matcha-space-100, 8px);
|
|
60
|
+
// Sem isto o texto não encolhe e a coluna estoura com nome longo.
|
|
61
|
+
max-width: 100%;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.matcha-cell-media__thumb {
|
|
65
|
+
// A altura vem do input `height`, por style inline no elemento. Radius e overflow NÃO
|
|
66
|
+
// entram aqui: o `.matcha-image` já traz os dois.
|
|
67
|
+
flex-shrink: 0;
|
|
68
|
+
display: flex;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Inverte a direção do `matcha-image`, que por padrão é `width: 100%` + `aspect-ratio`
|
|
72
|
+
// (largura mandando). Numa linha de tabela a altura é o recurso escasso, então ela manda e a
|
|
73
|
+
// largura sai da razão — é o que faz `3:4` caber na linha em vez de esticá-la.
|
|
74
|
+
.matcha-cell-media__thumb matcha-image {
|
|
75
|
+
height: 100%;
|
|
76
|
+
width: auto;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// O placeholder do matcha-image é `--matcha-icon-size-lg` (48px), maior que a miniatura de
|
|
80
|
+
// 40px: ficaria recortado pelo overflow do proprio matcha-image.
|
|
81
|
+
.matcha-cell-media__thumb .matcha-image__placeholder-icon {
|
|
82
|
+
width: var(--matcha-icon-size-md, 24px);
|
|
83
|
+
height: var(--matcha-icon-size-md, 24px);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.matcha-cell-media__text {
|
|
87
|
+
display: flex;
|
|
88
|
+
flex-direction: column;
|
|
89
|
+
// `min-width: 0` é o que permite o filho encolher abaixo do conteúdo e o ellipsis
|
|
90
|
+
// acontecer — sem ele o flex usa a largura intrínseca do texto. Mesmo motivo do
|
|
91
|
+
// `.matcha-avatar-text`.
|
|
92
|
+
min-width: 0;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// Truncam em uma linha, como matcha-avatar-name/-caption fazem na cell de identity:
|
|
96
|
+
// numa linha de tabela a altura é fixa, então quebrar texto desalinha a linha inteira.
|
|
97
|
+
.matcha-cell-media__name,
|
|
98
|
+
.matcha-cell-media__caption {
|
|
99
|
+
display: block;
|
|
100
|
+
overflow: hidden;
|
|
101
|
+
text-overflow: ellipsis;
|
|
102
|
+
white-space: nowrap;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.matcha-cell-media__caption {
|
|
106
|
+
font-variant-numeric: tabular-nums;
|
|
107
|
+
}
|