@inchurch/matcha-theme 21.4.0 → 22.1.0

package/components/matcha-horizontal-tree.scss

@@ -1,316 +1,316 @@
-@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 {
-    stroke: var(--matcha-color-text-placeholder);
-  }
-
-  .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-start-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-node {
-    &-content {
-      &-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);
-        }
-      }
-    }
-  }
-
-  .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-start-modal {
-    height: 92px;
-    margin: -34px -16px 56px -40px;
-    width: 56px;
-    border-radius: 0 0 0 40px;
-    z-index: 1;
-    display: flex;
-    position: absolute;
-    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 {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: var(--matcha-space-050, 4px);
-
-    &-title {
-      font-family: var(--matcha-font-family);
-      font-size: var(--matcha-text-body-sm, 12px);
-      line-height: var(--matcha-leading-body-sm, 16px);
-      display: flex;
-      margin: 0 0 var(--matcha-space-050, 4px) 0;
-      align-items: center;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      font-weight: var(--matcha-weight-bold, 700);
-
-      &-bullet {
-        height: var(--matcha-space-200, 16px);
-        width: var(--matcha-space-100, 8px);
-        margin: 0 var(--matcha-space-100, 8px) 0 0;
-        display: inline-block;
-        position: relative;
-        border-radius: var(--matcha-radius-pill, 9999px);
-      }
-    }
-  }
-
-  &-content {
-    display: flex;
-    justify-content: space-between;
-
-    &-profile {
-      display: flex;
-      align-items: center;
-      width: 100%;
-
-      &-avatar {
-        border-radius: var(--matcha-radius-pill, 9999px);
-        min-width: var(--matcha-icon-size-md, 24px);
-        min-height: var(--matcha-icon-size-md, 24px);
-        width: var(--matcha-icon-size-md, 24px);
-        height: var(--matcha-icon-size-md, 24px);
-        max-width: var(--matcha-icon-size-md, 24px);
-        max-height: var(--matcha-icon-size-md, 24px);
-      }
-
-      &-name {
-        width: calc(100% - 48px);
-        display: flex;
-        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);
-        -webkit-line-clamp: 2;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        word-break: break-word;
-        white-space: nowrap;
-        -webkit-box-orient: vertical;
-      }
-    }
-
-    &-btn-add-node {
-      position: absolute;
-      margin: var(--matcha-space-300, 24px) 0 0 236px;
-      width: var(--matcha-icon-size-md, 24px);
-      height: var(--matcha-icon-size-md, 24px);
-
-      &-i {
-        line-height: var(--matcha-leading-body-sm, 16px);
-        border-radius: var(--matcha-radius-pill, 9999px);
-      }
-    }
-  }
-}
-
-.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 {
+    stroke: var(--matcha-color-text-placeholder);
+  }
+
+  .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-start-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-node {
+    &-content {
+      &-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);
+        }
+      }
+    }
+  }
+
+  .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-start-modal {
+    height: 92px;
+    margin: -34px -16px 56px -40px;
+    width: 56px;
+    border-radius: 0 0 0 40px;
+    z-index: 1;
+    display: flex;
+    position: absolute;
+    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 {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: var(--matcha-space-050, 4px);
+
+    &-title {
+      font-family: var(--matcha-font-family);
+      font-size: var(--matcha-text-body-sm, 12px);
+      line-height: var(--matcha-leading-body-sm, 16px);
+      display: flex;
+      margin: 0 0 var(--matcha-space-050, 4px) 0;
+      align-items: center;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      font-weight: var(--matcha-weight-bold, 700);
+
+      &-bullet {
+        height: var(--matcha-space-200, 16px);
+        width: var(--matcha-space-100, 8px);
+        margin: 0 var(--matcha-space-100, 8px) 0 0;
+        display: inline-block;
+        position: relative;
+        border-radius: var(--matcha-radius-pill, 9999px);
+      }
+    }
+  }
+
+  &-content {
+    display: flex;
+    justify-content: space-between;
+
+    &-profile {
+      display: flex;
+      align-items: center;
+      width: 100%;
+
+      &-avatar {
+        border-radius: var(--matcha-radius-pill, 9999px);
+        min-width: var(--matcha-icon-size-md, 24px);
+        min-height: var(--matcha-icon-size-md, 24px);
+        width: var(--matcha-icon-size-md, 24px);
+        height: var(--matcha-icon-size-md, 24px);
+        max-width: var(--matcha-icon-size-md, 24px);
+        max-height: var(--matcha-icon-size-md, 24px);
+      }
+
+      &-name {
+        width: calc(100% - 48px);
+        display: flex;
+        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);
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-word;
+        white-space: nowrap;
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    &-btn-add-node {
+      position: absolute;
+      margin: var(--matcha-space-300, 24px) 0 0 236px;
+      width: var(--matcha-icon-size-md, 24px);
+      height: var(--matcha-icon-size-md, 24px);
+
+      &-i {
+        line-height: var(--matcha-leading-body-sm, 16px);
+        border-radius: var(--matcha-radius-pill, 9999px);
+      }
+    }
+  }
+}
+
+.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;
+}