@inchurch/matcha-theme 22.39.0 → 22.40.1

package/components/matcha-table-cell.scss

@@ -1,107 +1,107 @@
-@mixin matcha-table-cell-theme($theme) {
-    .matcha-table{
-        .td-with-image,
-        .td-with-checkbox,
-        .td-with-icon,
-        .td-duble-line {
-            display: flex;
-            align-items: center;
-
-            .td-text-aside {
-                display: inline-block;
-                width: calc(100% - 48px);
-            }
-
-            .avatar {
-                width: 48px;
-                min-width: 48px;
-                height: 48px;
-                line-height: 48px;
-                border-width: 0;
-                margin-right: 24px;
-            }
-
-            .thumbnail {
-                width: 72px;
-                min-width: 72px;
-                height: 48px;
-                border-radius: var(--matcha-radius-lg, 8px);
-                margin: 0 8px 0 0;
-
-                &-portrait {
-                    width: 56px;
-                    min-width: 56px;
-                    height: 72px;
-                    border-radius: var(--matcha-radius-lg, 8px);
-                    margin: 0 8px 0 0;
-                }
-            }
-        }
-    }
-}
-
-// =============================================================================
-// Família matcha-cell-* (DSV3) — cells de tabela canônicas, seletor de atributo
-// em <td> nativo (td[matcha-cell-<tipo>]). Cada cell é um wrapper fino sobre um
-// átomo do DS (identity→matcha-avatar, status→matcha-status-pill,
-// contact→matcha-contact), então o estilo mora no átomo — não aqui.
-//
-// EXCEÇÃO: `media` (→matcha-image). As outras três envolvem átomos que já se
-// diagramam sozinhos; o `matcha-image` não posiciona nada ao lado dele, então a
-// linha miniatura+texto é responsabilidade da cell e mora aqui. O `.scss` do
-// componente segue vazio, como os irmãos: com encapsulation emulada um seletor
-// `td[attr]` escrito lá vira CSS morto (precisaria de `:host([attr])`).
-// =============================================================================
-
-.matcha-cell-media {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--matcha-space-100, 8px);
-    // Sem isto o texto não encolhe e a coluna estoura com nome longo.
-    max-width: 100%;
-}
-
-.matcha-cell-media__thumb {
-    // A altura vem do input `height`, por style inline no elemento. Radius e overflow NÃO
-    // entram aqui: o `.matcha-image` já traz os dois.
-    flex-shrink: 0;
-    display: flex;
-}
-
-// Inverte a direção do `matcha-image`, que por padrão é `width: 100%` + `aspect-ratio`
-// (largura mandando). Numa linha de tabela a altura é o recurso escasso, então ela manda e a
-// largura sai da razão — é o que faz `3:4` caber na linha em vez de esticá-la.
-.matcha-cell-media__thumb matcha-image {
-    height: 100%;
-    width: auto;
-}
-
-// O placeholder do matcha-image é `--matcha-icon-size-lg` (48px), maior que a miniatura de
-// 40px: ficaria recortado pelo overflow do proprio matcha-image.
-.matcha-cell-media__thumb .matcha-image__placeholder-icon {
-    width: var(--matcha-icon-size-md, 24px);
-    height: var(--matcha-icon-size-md, 24px);
-}
-
-.matcha-cell-media__text {
-    display: flex;
-    flex-direction: column;
-    // `min-width: 0` é o que permite o filho encolher abaixo do conteúdo e o ellipsis
-    // acontecer — sem ele o flex usa a largura intrínseca do texto. Mesmo motivo do
-    // `.matcha-avatar-text`.
-    min-width: 0;
-}
-
-// Truncam em uma linha, como matcha-avatar-name/-caption fazem na cell de identity:
-// numa linha de tabela a altura é fixa, então quebrar texto desalinha a linha inteira.
-.matcha-cell-media__name,
-.matcha-cell-media__caption {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.matcha-cell-media__caption {
-    font-variant-numeric: tabular-nums;
-}
+@mixin matcha-table-cell-theme($theme) {
+    .matcha-table{
+        .td-with-image,
+        .td-with-checkbox,
+        .td-with-icon,
+        .td-duble-line {
+            display: flex;
+            align-items: center;
+
+            .td-text-aside {
+                display: inline-block;
+                width: calc(100% - 48px);
+            }
+
+            .avatar {
+                width: 48px;
+                min-width: 48px;
+                height: 48px;
+                line-height: 48px;
+                border-width: 0;
+                margin-right: 24px;
+            }
+
+            .thumbnail {
+                width: 72px;
+                min-width: 72px;
+                height: 48px;
+                border-radius: var(--matcha-radius-lg, 8px);
+                margin: 0 8px 0 0;
+
+                &-portrait {
+                    width: 56px;
+                    min-width: 56px;
+                    height: 72px;
+                    border-radius: var(--matcha-radius-lg, 8px);
+                    margin: 0 8px 0 0;
+                }
+            }
+        }
+    }
+}
+
+// =============================================================================
+// Família matcha-cell-* (DSV3) — cells de tabela canônicas, seletor de atributo
+// em <td> nativo (td[matcha-cell-<tipo>]). Cada cell é um wrapper fino sobre um
+// átomo do DS (identity→matcha-avatar, status→matcha-status-pill,
+// contact→matcha-contact), então o estilo mora no átomo — não aqui.
+//
+// EXCEÇÃO: `media` (→matcha-image). As outras três envolvem átomos que já se
+// diagramam sozinhos; o `matcha-image` não posiciona nada ao lado dele, então a
+// linha miniatura+texto é responsabilidade da cell e mora aqui. O `.scss` do
+// componente segue vazio, como os irmãos: com encapsulation emulada um seletor
+// `td[attr]` escrito lá vira CSS morto (precisaria de `:host([attr])`).
+// =============================================================================
+
+.matcha-cell-media {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--matcha-space-100, 8px);
+    // Sem isto o texto não encolhe e a coluna estoura com nome longo.
+    max-width: 100%;
+}
+
+.matcha-cell-media__thumb {
+    // A altura vem do input `height`, por style inline no elemento. Radius e overflow NÃO
+    // entram aqui: o `.matcha-image` já traz os dois.
+    flex-shrink: 0;
+    display: flex;
+}
+
+// Inverte a direção do `matcha-image`, que por padrão é `width: 100%` + `aspect-ratio`
+// (largura mandando). Numa linha de tabela a altura é o recurso escasso, então ela manda e a
+// largura sai da razão — é o que faz `3:4` caber na linha em vez de esticá-la.
+.matcha-cell-media__thumb matcha-image {
+    height: 100%;
+    width: auto;
+}
+
+// O placeholder do matcha-image é `--matcha-icon-size-lg` (48px), maior que a miniatura de
+// 40px: ficaria recortado pelo overflow do proprio matcha-image.
+.matcha-cell-media__thumb .matcha-image__placeholder-icon {
+    width: var(--matcha-icon-size-md, 24px);
+    height: var(--matcha-icon-size-md, 24px);
+}
+
+.matcha-cell-media__text {
+    display: flex;
+    flex-direction: column;
+    // `min-width: 0` é o que permite o filho encolher abaixo do conteúdo e o ellipsis
+    // acontecer — sem ele o flex usa a largura intrínseca do texto. Mesmo motivo do
+    // `.matcha-avatar-text`.
+    min-width: 0;
+}
+
+// Truncam em uma linha, como matcha-avatar-name/-caption fazem na cell de identity:
+// numa linha de tabela a altura é fixa, então quebrar texto desalinha a linha inteira.
+.matcha-cell-media__name,
+.matcha-cell-media__caption {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.matcha-cell-media__caption {
+    font-variant-numeric: tabular-nums;
+}