initial commit

src/app/atoms/header/Header.scss

@@ -0,0 +1,63 @@
+.header {
+  padding: {
+    left: var(--sp-normal);
+    right: var(--sp-extra-tight);
+  }
+  width: 100%;
+  height: var(--header-height);
+  border-bottom: 1px solid var(--bg-surface-border);
+  display: flex;
+  align-items: center;
+
+  [dir=rtl] & {
+    padding: {
+      left: var(--sp-extra-tight);
+      right: var(--sp-normal);
+    }
+  }
+
+  &__title-wrapper {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    margin: 0 var(--sp-tight);
+
+    &:first-child {
+      margin-left: 0;
+      [dir=rtl] & {
+        margin-right: 0;
+      }
+    }
+
+    & > .text:first-child {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    & > .text-b3{
+      flex: 1;
+      min-width: 0;
+
+      margin-top: var(--sp-ultra-tight);
+      margin-left: var(--sp-tight);
+      padding-left: var(--sp-tight);
+      border-left: 1px solid var(--bg-surface-border);
+      max-height: calc(2 * var(--lh-b3));
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      display: -webkit-box;
+
+      [dir=rtl] & {
+        margin-left: 0;
+        padding-left: 0;
+        border-left: none;
+        margin-right: var(--sp-tight);
+        padding-right: var(--sp-tight);
+        border-right: 1px solid var(--bg-surface-border);
+      }
+    }
+  }
+}