@inchurch/matcha-theme 22.38.2 → 22.38.3

package/components/matcha-horizontal-tree.scss

@@ -1,247 +1,247 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-horizontal-tree.scss — Horizontal org tree with connector lines
-// Angular: matcha-horizontal-tree
-// =============================================================================
-
-@mixin matcha-horizontal-tree-theme($theme) {
-
-  .svg-line line {
-    // Mesma cor que TODOS os outros conectores deste arquivo usam
-    // (.the-line-connect-first/-last/etc = --matcha-color-accent). Estava
-    // --matcha-color-text-placeholder (cinza), que sempre vencia a classe
-    // stroke-primary aplicada pelo consumidor no <line> (.svg-line line e
-    // seletor composto, mais especifico que uma unica classe) -- a linha
-    // rendia cinza mesmo com a intencao de ser colorida.
-    stroke: var(--matcha-color-accent);
-  }
-
-  .child {
-    .the-line-connect-first {
-      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent);
-    }
-
-    .the-line-connect {
-      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent);
-    }
-
-    .the-line-connect-last {
-      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent);
-    }
-
-    .the-line-connect-first-modal {
-      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha);
-    }
-
-    .the-line-connect-second-modal {
-      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha);
-    }
-
-    .the-line-connect-last-modal {
-      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha);
-    }
-
-    .the-line-connect-middle {
-      box-shadow: inset 2px -2px 0 2px var(--matcha-color-border);
-    }
-  }
-
-  .tree-first-node {
-    &-begin {
-      &-btn-add-node {
-        background: var(--matcha-color-surface);
-        box-shadow: inset 0 0 0 3px var(--matcha-color-accent);
-
-        &-i {
-          color: var(--matcha-color-accent);
-        }
-      }
-    }
-  }
-}
-
-// ── Layout ──────────────────────────────────────────────────────────────────
-
-.svg-line {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 0;
-  pointer-events: none;
-
-  line {
-    stroke-width: var(--matcha-border-medium, 4px);
-  }
-}
-
-.child {
-  display: flex;
-  position: relative;
-  pointer-events: none;
-
-  div {
-    pointer-events: all;
-  }
-
-  .the-line-connect-first {
-    width: 56px;
-    height: var(--matcha-border-medium, 4px);
-    margin: 56px -16px 56px -40px;
-    display: flex;
-    position: absolute;
-    z-index: 0;
-    background: transparent;
-  }
-
-  .the-line-connect {
-    width: 56px;
-    height: 92px;
-    margin: -34px -16px 56px -40px;
-    display: flex;
-    position: absolute;
-    z-index: 0;
-    background: transparent;
-    border-radius: 0 0 0 40px;
-  }
-
-  .the-line-connect-last {
-    width: 56px;
-    height: 136px;
-    margin: -80px -16px 56px -40px;
-    display: flex;
-    position: absolute;
-    z-index: 0;
-    border-radius: 0 0 0 40px;
-    background: transparent;
-  }
-
-  .the-line-connect-first-modal {
-    width: 56px;
-    height: var(--matcha-border-medium, 4px);
-    margin: 56px -16px 56px -40px;
-    display: flex;
-    position: absolute;
-    z-index: 0;
-    background: transparent;
-  }
-
-  .the-line-connect-second-modal {
-    width: 56px;
-    border-radius: 0 0 0 40px;
-    z-index: 1;
-    margin: -16px -16px 56px -40px;
-    height: 72px;
-    display: flex;
-    position: absolute;
-    background: transparent;
-  }
-
-  .the-line-connect-last-modal {
-    width: 56px;
-    height: 150px;
-    margin: -90px -16px 56px -40px;
-    display: flex;
-    position: absolute;
-    border-radius: 0 0 0 40px;
-    z-index: 1;
-    background: transparent;
-  }
-
-  .the-line-connect-middle {
-    height: 92px;
-    margin: -34px -16px 56px -40px;
-    width: 56px;
-    border-radius: 0 0 0 40px;
-    z-index: 0;
-    display: flex;
-    position: absolute;
-    background: transparent;
-  }
-}
-
-.tree-node {
-  min-width: 264px;
-  max-width: 264px;
-  width: 264px;
-  height: 80px;
-  z-index: 1;
-
-  // &-header, &-content e &-content-profile saíram: eram só display:flex +
-  // justify-content/align-items — hoje cobertos por utilitárias
-  // (flex-between/flex-align-center/flex-grow-1/min-w-0) direto no consumidor,
-  // sem precisar de uma classe própria do tema pra isso. &-content-btn-add-node
-  // e &-content-profile-avatar saíram por não terem mais consumidor (canonização
-  // do control-panel-v2 pro matcha-card/matcha-avatar reais).
-  &-content {
-    &-profile {
-      &-name {
-        width: calc(100% - 48px);
-        // display:flex aqui era o bug: -webkit-line-clamp exige display:-webkit-box
-        // pra funcionar, e nowrap+ellipsis exige block/inline-block — nenhum dos
-        // dois mecanismos de truncamento funcionava com flex, resultando em corte
-        // cru sem "...". block resolve o ellipsis de 1 linha (não há espaço
-        // vertical pra 2 linhas nesta altura de row).
-        display: block;
-        line-height: var(--matcha-leading-body-md, 20px);
-        font-size: var(--matcha-text-title-sm, 16px);
-        margin: 0 0 0 var(--matcha-space-100, 8px);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        word-break: break-word;
-        white-space: nowrap;
-      }
-    }
-  }
-}
-
-.tree-first-node {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-width: 264px;
-  max-width: 264px;
-  width: 264px;
-  height: 80px;
-  margin: var(--matcha-space-200, 16px) var(--matcha-space-200, 16px) -10px var(--matcha-space-200, 16px);
-  border-radius: var(--matcha-radius-lg, 8px);
-  position: relative;
-  z-index: 1;
-
-  &-begin {
-    font-family: var(--matcha-font-family);
-    font-size: var(--matcha-text-title-sm, 16px);
-    font-weight: var(--matcha-weight-bold, 700);
-    line-height: var(--matcha-leading-body-sm, 16px);
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-word;
-    white-space: initial;
-    -webkit-box-orient: vertical;
-    text-transform: capitalize;
-
-    &-btn-add-node {
-      width: var(--matcha-icon-size-md, 24px);
-      height: var(--matcha-icon-size-md, 24px);
-      display: block;
-      margin: 0 auto;
-      position: relative;
-      z-index: 1;
-
-      &-i {
-        line-height: var(--matcha-leading-body-sm, 16px);
-        border-radius: var(--matcha-radius-pill, 9999px);
-      }
-    }
-  }
-}
-
-.matcha-horizontal-tree {
-  overflow: auto;
-  user-select: none;
-  -webkit-user-select: none;
-}
+@use "sass:map";
+
+// =============================================================================
+// matcha-horizontal-tree.scss — Horizontal org tree with connector lines
+// Angular: matcha-horizontal-tree
+// =============================================================================
+
+@mixin matcha-horizontal-tree-theme($theme) {
+
+  .svg-line line {
+    // Mesma cor que TODOS os outros conectores deste arquivo usam
+    // (.the-line-connect-first/-last/etc = --matcha-color-accent). Estava
+    // --matcha-color-text-placeholder (cinza), que sempre vencia a classe
+    // stroke-primary aplicada pelo consumidor no <line> (.svg-line line e
+    // seletor composto, mais especifico que uma unica classe) -- a linha
+    // rendia cinza mesmo com a intencao de ser colorida.
+    stroke: var(--matcha-color-accent);
+  }
+
+  .child {
+    .the-line-connect-first {
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent);
+    }
+
+    .the-line-connect {
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent);
+    }
+
+    .the-line-connect-last {
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent);
+    }
+
+    .the-line-connect-first-modal {
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha);
+    }
+
+    .the-line-connect-second-modal {
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha);
+    }
+
+    .the-line-connect-last-modal {
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-accent-alpha);
+    }
+
+    .the-line-connect-middle {
+      box-shadow: inset 2px -2px 0 2px var(--matcha-color-border);
+    }
+  }
+
+  .tree-first-node {
+    &-begin {
+      &-btn-add-node {
+        background: var(--matcha-color-surface);
+        box-shadow: inset 0 0 0 3px var(--matcha-color-accent);
+
+        &-i {
+          color: var(--matcha-color-accent);
+        }
+      }
+    }
+  }
+}
+
+// ── Layout ──────────────────────────────────────────────────────────────────
+
+.svg-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+  pointer-events: none;
+
+  line {
+    stroke-width: var(--matcha-border-medium, 4px);
+  }
+}
+
+.child {
+  display: flex;
+  position: relative;
+  pointer-events: none;
+
+  div {
+    pointer-events: all;
+  }
+
+  .the-line-connect-first {
+    width: 56px;
+    height: var(--matcha-border-medium, 4px);
+    margin: 56px -16px 56px -40px;
+    display: flex;
+    position: absolute;
+    z-index: 0;
+    background: transparent;
+  }
+
+  .the-line-connect {
+    width: 56px;
+    height: 92px;
+    margin: -34px -16px 56px -40px;
+    display: flex;
+    position: absolute;
+    z-index: 0;
+    background: transparent;
+    border-radius: 0 0 0 40px;
+  }
+
+  .the-line-connect-last {
+    width: 56px;
+    height: 136px;
+    margin: -80px -16px 56px -40px;
+    display: flex;
+    position: absolute;
+    z-index: 0;
+    border-radius: 0 0 0 40px;
+    background: transparent;
+  }
+
+  .the-line-connect-first-modal {
+    width: 56px;
+    height: var(--matcha-border-medium, 4px);
+    margin: 56px -16px 56px -40px;
+    display: flex;
+    position: absolute;
+    z-index: 0;
+    background: transparent;
+  }
+
+  .the-line-connect-second-modal {
+    width: 56px;
+    border-radius: 0 0 0 40px;
+    z-index: 1;
+    margin: -16px -16px 56px -40px;
+    height: 72px;
+    display: flex;
+    position: absolute;
+    background: transparent;
+  }
+
+  .the-line-connect-last-modal {
+    width: 56px;
+    height: 150px;
+    margin: -90px -16px 56px -40px;
+    display: flex;
+    position: absolute;
+    border-radius: 0 0 0 40px;
+    z-index: 1;
+    background: transparent;
+  }
+
+  .the-line-connect-middle {
+    height: 92px;
+    margin: -34px -16px 56px -40px;
+    width: 56px;
+    border-radius: 0 0 0 40px;
+    z-index: 0;
+    display: flex;
+    position: absolute;
+    background: transparent;
+  }
+}
+
+.tree-node {
+  min-width: 264px;
+  max-width: 264px;
+  width: 264px;
+  height: 80px;
+  z-index: 1;
+
+  // &-header, &-content e &-content-profile saíram: eram só display:flex +
+  // justify-content/align-items — hoje cobertos por utilitárias
+  // (flex-between/flex-align-center/flex-grow-1/min-w-0) direto no consumidor,
+  // sem precisar de uma classe própria do tema pra isso. &-content-btn-add-node
+  // e &-content-profile-avatar saíram por não terem mais consumidor (canonização
+  // do control-panel-v2 pro matcha-card/matcha-avatar reais).
+  &-content {
+    &-profile {
+      &-name {
+        width: calc(100% - 48px);
+        // display:flex aqui era o bug: -webkit-line-clamp exige display:-webkit-box
+        // pra funcionar, e nowrap+ellipsis exige block/inline-block — nenhum dos
+        // dois mecanismos de truncamento funcionava com flex, resultando em corte
+        // cru sem "...". block resolve o ellipsis de 1 linha (não há espaço
+        // vertical pra 2 linhas nesta altura de row).
+        display: block;
+        line-height: var(--matcha-leading-body-md, 20px);
+        font-size: var(--matcha-text-title-sm, 16px);
+        margin: 0 0 0 var(--matcha-space-100, 8px);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-word;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
+.tree-first-node {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 264px;
+  max-width: 264px;
+  width: 264px;
+  height: 80px;
+  margin: var(--matcha-space-200, 16px) var(--matcha-space-200, 16px) -10px var(--matcha-space-200, 16px);
+  border-radius: var(--matcha-radius-lg, 8px);
+  position: relative;
+  z-index: 1;
+
+  &-begin {
+    font-family: var(--matcha-font-family);
+    font-size: var(--matcha-text-title-sm, 16px);
+    font-weight: var(--matcha-weight-bold, 700);
+    line-height: var(--matcha-leading-body-sm, 16px);
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-word;
+    white-space: initial;
+    -webkit-box-orient: vertical;
+    text-transform: capitalize;
+
+    &-btn-add-node {
+      width: var(--matcha-icon-size-md, 24px);
+      height: var(--matcha-icon-size-md, 24px);
+      display: block;
+      margin: 0 auto;
+      position: relative;
+      z-index: 1;
+
+      &-i {
+        line-height: var(--matcha-leading-body-sm, 16px);
+        border-radius: var(--matcha-radius-pill, 9999px);
+      }
+    }
+  }
+}
+
+.matcha-horizontal-tree {
+  overflow: auto;
+  user-select: none;
+  -webkit-user-select: none;
+}