@thl-ui/styles 0.0.0-stage → 0.1.1

package/src/components/_nav.scss

@@ -0,0 +1,738 @@
+@use '../mixins' as *;
+
+/* ---------- tabs ---------- */
+.#{$p}-tabs {
+  &__list {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+    gap: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    border-bottom: 1px solid v(border-color);
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+  &__tab {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 18px;
+    margin-bottom: -1px;
+    color: v(text);
+    background: none;
+    font: inherit;
+    border: 1px solid transparent;
+    border-radius: v(radius) v(radius) 0 0;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: color v(transition);
+    &:hover {
+      color: v(theme-text);
+    }
+    &.is-active {
+      color: v(heading);
+      background: v(surface);
+      border-color: v(border-color) v(border-color) v(surface);
+    }
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+  &__panel {
+    padding: 20px 0;
+    animation: #{$p}-fade-in 0.25s;
+    &:focus-visible {
+      outline: none;
+    }
+  }
+  &--justified &__tab {
+    flex: 1;
+    justify-content: center;
+  }
+
+  /* underline: underline in theme color */
+  &--underline &__tab {
+    border: 0;
+    border-bottom: 2px solid transparent;
+    border-radius: 0;
+    &.is-active {
+      border-bottom-color: v(theme);
+      color: v(theme-text);
+      background: transparent;
+    }
+  }
+  /* filled: filled theme tabs */
+  &--filled &__list {
+    border-bottom: 0;
+    gap: 4px;
+  }
+  &--filled &__tab {
+    border: 0;
+    border-radius: v(radius-sm);
+    margin: 0;
+    &.is-active {
+      background: v(theme);
+      color: v(on-theme);
+    }
+  }
+  /* pills */
+  &--pills &__list,
+  &--pills-rounded &__list {
+    border: 0;
+    gap: 6px;
+  }
+  &--pills &__tab,
+  &--pills-rounded &__tab {
+    border: 0;
+    border-radius: v(radius);
+    margin: 0;
+    &.is-active {
+      background: v(theme);
+      color: v(on-theme);
+    }
+  }
+  &--pills-rounded &__tab {
+    border-radius: v(radius-pill);
+  }
+  /* line */
+  &--line &__tab {
+    border: 0;
+    border-radius: 0;
+    position: relative;
+    &::after {
+      content: '';
+      position: absolute;
+      inset-inline: 0;
+      bottom: 0;
+      height: 3px;
+      background: v(theme);
+      transform: scaleX(0);
+      transition: transform 0.3s;
+    }
+    &.is-active {
+      background: transparent;
+      color: v(theme-text);
+      &::after {
+        transform: scaleX(1);
+      }
+    }
+  }
+  /* vertical */
+  &--vertical {
+    display: flex;
+    gap: 0;
+  }
+  &--vertical &__list {
+    flex-direction: column;
+    border-bottom: 0;
+    border-inline-end: 1px solid v(border-color);
+    min-width: 160px;
+  }
+  &--vertical &__tab {
+    border: 0;
+    border-inline-end: 2px solid transparent;
+    border-radius: 0;
+    margin: 0;
+    margin-inline-end: -1px;
+    justify-content: flex-start;
+    &.is-active {
+      border-inline-end-color: v(theme);
+      background: v(surface-muted);
+      color: v(theme-text);
+    }
+  }
+  &--vertical &__panel {
+    padding: 0 20px;
+    flex: 1;
+  }
+  @include down(sm) {
+    &--vertical {
+      flex-direction: column;
+    }
+    &--vertical &__list {
+      flex-direction: row;
+      overflow-x: auto;
+      border-inline-end: 0;
+      border-bottom: 1px solid v(border-color);
+    }
+  }
+}
+
+/* ---------- breadcrumb ---------- */
+.#{$p}-breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 14px;
+  &__item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    color: v(text);
+    a {
+      color: v(text-strong);
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      &:hover {
+        color: v(theme-text);
+      }
+    }
+    & + &::before {
+      content: '/';
+      color: v(text);
+      opacity: 0.6;
+    }
+    &.is-active {
+      color: v(theme-text);
+    }
+  }
+}
+
+/* ---------- pagination ---------- */
+.#{$p}-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0;
+  margin: 10px 0;
+  row-gap: 6px;
+  padding: 0;
+  list-style: none;
+  &__item {
+    min-width: 36px;
+    height: 36px;
+    padding: 0 10px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font: inherit;
+    color: v(text-strong);
+    background: v(surface);
+    border: 1px solid v(border-color);
+    margin-inline-start: -1px;
+    cursor: pointer;
+    &:hover {
+      background: v(surface-muted);
+      color: v(theme-text);
+    }
+    &.is-active {
+      background: v(theme);
+      border-color: v(theme);
+      color: v(on-theme);
+      z-index: 1;
+    }
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    &--ellipsis {
+      cursor: default;
+      &:hover {
+        background: v(surface);
+        color: v(text-strong);
+      }
+    }
+  }
+  > li:first-child .#{$p}-pagination__item {
+    border-start-start-radius: v(radius);
+    border-end-start-radius: v(radius);
+    margin-inline-start: 0;
+  }
+  > li:last-child .#{$p}-pagination__item {
+    border-start-end-radius: v(radius);
+    border-end-end-radius: v(radius);
+  }
+  &--split {
+    gap: 6px;
+    .#{$p}-pagination__item {
+      border-radius: v(radius) !important;
+      margin: 0;
+    }
+  }
+  &--rounded {
+    gap: 6px;
+    .#{$p}-pagination__item {
+      border-radius: 50% !important;
+      margin: 0;
+      padding: 0;
+    }
+  }
+  &--size-sm &__item {
+    min-width: 30px;
+    height: 30px;
+    font-size: 12px;
+  }
+  &--size-lg &__item {
+    min-width: 46px;
+    height: 46px;
+    font-size: 18px;
+  }
+  &__total {
+    margin-inline-end: 12px;
+    color: v(text);
+    font-size: 13px;
+  }
+  &__size {
+    margin-inline-start: 12px;
+  }
+}
+
+/* ---------- steps ---------- */
+.#{$p}-steps {
+  display: flex;
+  margin: 0 0 20px;
+  padding: 0;
+  list-style: none;
+  counter-reset: step;
+  &__item {
+    flex: 1;
+    position: relative;
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    padding: 15px 20px;
+    background: v(surface-muted);
+    color: v(text);
+    min-width: 0;
+    border: 0;
+    font: inherit;
+    text-align: start;
+    &.is-active {
+      background: v(theme);
+      color: v(on-theme);
+      .#{$p}-steps__title {
+        color: v(on-theme);
+      }
+      .#{$p}-steps__desc {
+        color: v(on-theme);
+      }
+    }
+    &.is-done {
+      .#{$p}-steps__number {
+        background: v(color-success);
+        color: v(on-success);
+        border-color: v(color-success);
+      }
+    }
+    &.is-clickable {
+      cursor: pointer;
+    }
+  }
+  &__number {
+    width: 36px;
+    height: 36px;
+    flex-shrink: 0;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    font-weight: 600;
+    border: 2px solid currentColor;
+  }
+  &__title {
+    font-weight: 600;
+    color: v(heading);
+    font-size: 15px;
+  }
+  &__desc {
+    font-size: 12px;
+  }
+  /* no-bg */
+  &--no-bg &__item {
+    background: transparent;
+    border-bottom: 3px solid v(border-color);
+    &.is-active {
+      background: transparent;
+      color: v(theme-text);
+      border-bottom-color: v(theme);
+      .#{$p}-steps__title {
+        color: v(theme-text);
+      }
+      .#{$p}-steps__desc {
+        color: v(text-strong);
+      }
+    }
+    &.is-done {
+      border-bottom-color: v(color-success);
+    }
+  }
+  /* thin: compact */
+  &--thin &__item {
+    padding: 8px 14px;
+  }
+  &--thin &__number {
+    width: 26px;
+    height: 26px;
+    font-size: 13px;
+  }
+  /* line: dots + connecting line */
+  &--line &__item {
+    flex-direction: column;
+    text-align: center;
+    background: transparent;
+    padding: 0 8px;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 18px;
+      inset-inline-start: calc(-50% + 18px);
+      width: calc(100% - 36px);
+      height: 2px;
+      background: v(border-color);
+    }
+    &:first-child::before {
+      display: none;
+    }
+    &.is-done::before,
+    &.is-active::before {
+      background: v(theme);
+    }
+    &.is-active {
+      background: transparent;
+      color: v(theme-text);
+      .#{$p}-steps__title {
+        color: v(theme-text);
+      }
+      .#{$p}-steps__desc {
+        color: v(text-strong);
+      }
+      .#{$p}-steps__number {
+        background: v(theme);
+        color: v(on-theme);
+        border-color: v(theme);
+      }
+    }
+  }
+  &--line &__number {
+    background: v(surface);
+  }
+  &--vertical {
+    flex-direction: column;
+    gap: 4px;
+  }
+  @include down(sm) {
+    &:not(&--line) {
+      flex-direction: column;
+    }
+  }
+}
+
+/* ---------- timeline ---------- */
+.#{$p}-timeline {
+  list-style: none;
+  padding: 20px 0;
+  margin: 0;
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    inset-inline-start: 50%;
+    width: 3px;
+    margin-inline-start: -1.5px;
+    background: v(border-color);
+  }
+  &__item {
+    position: relative;
+    margin-bottom: 30px;
+    display: flex;
+    justify-content: flex-start;
+    padding-inline-end: calc(50% + 40px);
+    &--inverted {
+      justify-content: flex-end;
+      padding-inline-end: 0;
+      padding-inline-start: calc(50% + 40px);
+    }
+  }
+  &__badge {
+    --_c: #{v(color-inverse)};
+    --_on: #{on('inverse')};
+    position: absolute;
+    top: 16px;
+    inset-inline-start: 50%;
+    margin-inline-start: -25px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--_on, #fff);
+    background: var(--_c);
+    font-size: 1.3em;
+    overflow: hidden;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    @each $c in $colors {
+      &--#{$c} {
+        --_c: #{v(color-#{$c})};
+        --_on: #{on($c)};
+      }
+    }
+  }
+  &__panel {
+    position: relative;
+    width: 100%;
+    padding: 20px;
+    background: v(surface);
+    border: 1px solid v(border-color);
+    border-radius: v(radius);
+    box-shadow: v(shadow);
+    &::before {
+      content: '';
+      position: absolute;
+      top: 26px;
+      inset-inline-end: -15px;
+      border: 15px solid transparent;
+      border-inline-start-color: v(border-color);
+      border-inline-end: 0;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      top: 27px;
+      inset-inline-end: -14px;
+      border: 14px solid transparent;
+      border-inline-start-color: v(surface);
+      border-inline-end: 0;
+    }
+  }
+  &__item--inverted &__panel {
+    &::before {
+      inset-inline-end: auto;
+      inset-inline-start: -15px;
+      border-inline-start: 0;
+      border-inline-end: 15px solid v(border-color);
+    }
+    &::after {
+      inset-inline-end: auto;
+      inset-inline-start: -14px;
+      border-inline-start: 0;
+      border-inline-end: 14px solid v(surface);
+    }
+  }
+  &__title {
+    margin: 0 0 6px !important;
+    color: v(heading);
+    font-weight: 400;
+    font-size: 16px !important;
+    line-height: 22px !important;
+  }
+  &__time {
+    font-size: 12px;
+    color: v(text);
+    display: block;
+    margin-bottom: 8px;
+  }
+  /* left-aligned variant */
+  &--left::before {
+    inset-inline-start: 25px;
+  }
+  &--left &__item,
+  &--left &__item--inverted {
+    padding-inline: 80px 0;
+    justify-content: flex-start;
+  }
+  &--left &__badge {
+    inset-inline-start: 25px;
+  }
+  &--left &__panel::before {
+    inset-inline-end: auto;
+    inset-inline-start: -15px;
+    border-inline-start: 0;
+    border-inline-end: 15px solid v(border-color);
+  }
+  &--left &__panel::after {
+    inset-inline-end: auto;
+    inset-inline-start: -14px;
+    border-inline-start: 0;
+    border-inline-end: 14px solid v(surface);
+  }
+  @include down(sm) {
+    &::before {
+      inset-inline-start: 25px;
+    }
+    &__item,
+    &__item--inverted {
+      padding-inline: 80px 0;
+      justify-content: flex-start;
+    }
+    &__badge {
+      inset-inline-start: 25px;
+    }
+    &__panel::before {
+      inset-inline-end: auto !important;
+      inset-inline-start: -15px !important;
+      border-inline-start: 0 !important;
+      border-inline-end: 15px solid v(border-color) !important;
+    }
+    &__panel::after {
+      inset-inline-end: auto !important;
+      inset-inline-start: -14px !important;
+      border-inline-start: 0 !important;
+      border-inline-end: 14px solid v(surface) !important;
+    }
+  }
+}
+/* activity feed */
+.#{$p}-activity-feed {
+  position: relative;
+  border-inline-start: 1px solid v(border-color);
+  margin-inline-start: 20px;
+  &__item {
+    display: flex;
+    gap: 15px;
+    margin-top: -10px;
+    margin-bottom: 30px;
+  }
+  &__left {
+    margin-inline-start: -20px;
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: v(on-theme);
+    background: v(theme);
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  &__right {
+    flex: 1;
+    min-width: 0;
+    padding-top: 6px;
+  }
+  &__time {
+    font-size: 12px;
+    color: v(text);
+    margin-inline-start: 6px;
+  }
+}
+/* horizontal timeline */
+.#{$p}-htimeline {
+  position: relative;
+  &__track {
+    display: flex;
+    position: relative;
+    overflow-x: auto;
+    padding: 30px 10px 20px;
+    gap: 0;
+  }
+  &__dot {
+    --dot: 14px;
+    flex: 1;
+    min-width: 100px;
+    position: relative;
+    text-align: center;
+    background: none;
+    border: 0;
+    font: inherit;
+    color: v(text);
+    cursor: pointer;
+    padding: 0 0 calc(var(--dot) + 12px);
+    font-size: 13px;
+    /* the track line: one segment per item, through the centre of the dot */
+    &::before {
+      content: '';
+      position: absolute;
+      inset-inline: 0;
+      bottom: calc(var(--dot) / 2 - 1px);
+      height: 2px;
+      background: v(border-color);
+      transition: background 0.3s;
+    }
+    &:first-child::before {
+      inset-inline-start: 50%;
+    }
+    &:last-child::before {
+      inset-inline-end: 50%;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      bottom: 0;
+      transform: translateX(-50%);
+      width: var(--dot);
+      height: var(--dot);
+      box-sizing: border-box;
+      border-radius: 50%;
+      border: 2px solid v(border-color);
+      background: v(surface);
+      transition:
+        transform 0.3s,
+        background 0.3s,
+        border-color 0.3s;
+    }
+    &:hover::after,
+    &:focus-visible::after {
+      border-color: v(theme);
+    }
+    &.is-done::before {
+      background: v(theme);
+    }
+    &.is-done::after {
+      border-color: v(theme);
+      background: v(theme);
+    }
+    /* active: line filled up to the dot */
+    &.is-active::before {
+      background: linear-gradient(to right, #{v(theme)} 50%, #{v(border-color)} 50%);
+    }
+    &.is-active:first-child::before {
+      background: v(border-color);
+    }
+    &.is-active:last-child::before {
+      background: v(theme);
+    }
+    &.is-active {
+      color: v(theme-text);
+      font-weight: 600;
+      &::after {
+        border-color: v(theme);
+        background: v(theme);
+        transform: translateX(-50%) scale(1.3);
+      }
+    }
+  }
+  [dir='rtl'] &__dot.is-active:not(:first-child):not(:last-child)::before {
+    background: linear-gradient(to left, #{v(theme)} 50%, #{v(border-color)} 50%);
+  }
+  &__content {
+    padding: 20px 10px;
+    animation: #{$p}-fade-in 0.3s;
+    > :first-child {
+      font-size: v(h3);
+      line-height: 30px;
+      color: v(heading);
+      margin: 10px 0;
+    }
+  }
+  &__nav {
+    display: flex;
+    justify-content: space-between;
+  }
+}