@thl-ui/styles 0.0.0-stage → 0.1.0

package/src/components/_overlay.scss

@@ -0,0 +1,382 @@
+@use '../mixins' as *;
+
+/* modal */
+.#{$p}-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: v(z-modal);
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 30px 16px;
+  overflow-y: auto;
+  animation: #{$p}-fade-in 0.2s both;
+  &--centered {
+    align-items: center;
+  }
+}
+.#{$p}-modal {
+  background: v(surface);
+  color: v(text);
+  border-radius: v(radius);
+  box-shadow: v(shadow-modal);
+  width: 600px;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  animation: #{$p}-slide-down 0.25s both;
+  outline: none;
+  margin: auto 0;
+  &--sm {
+    width: 300px;
+  }
+  &--lg {
+    width: 900px;
+  }
+  &--xl {
+    width: 1140px;
+  }
+  &--full {
+    width: 100%;
+    min-height: calc(100vh - 60px);
+  }
+  &--scrollable {
+    max-height: calc(100vh - 60px);
+  }
+  &--scrollable &__body {
+    overflow-y: auto;
+  }
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 15px 20px;
+    border-bottom: 1px solid v(border-color);
+  }
+  &__title {
+    margin: 0 !important;
+    font-size: 18px !important;
+    font-weight: 600;
+    color: v(heading);
+  }
+  &__close {
+    background: none;
+    border: 0;
+    font-size: 24px;
+    line-height: 1;
+    cursor: pointer;
+    color: v(text);
+    padding: 0 4px;
+    &:hover {
+      color: v(text-strong);
+    }
+  }
+  &__body {
+    padding: 20px;
+  }
+  &__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 15px 20px;
+    border-top: 1px solid v(border-color);
+  }
+  /* confirm dialog */
+  &--confirm {
+    text-align: center;
+    width: 440px;
+  }
+  &--confirm &__body {
+    padding: 30px 30px 10px;
+    > h2,
+    > h3 {
+      font-size: v(h3);
+      line-height: 30px;
+      margin: 10px 0;
+    }
+  }
+  &--confirm &__footer {
+    justify-content: center;
+    border-top: 0;
+    padding-bottom: 30px;
+  }
+  &__confirm-icon {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    border: 4px solid currentColor;
+    margin: 0 auto 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 40px;
+    &--warning {
+      color: v(color-warning-text);
+    }
+    &--danger {
+      color: v(color-danger-text);
+    }
+    &--success {
+      color: v(color-success-text);
+    }
+    &--info {
+      color: v(color-info-text);
+    }
+    &--question {
+      color: v(color-primary-text);
+    }
+  }
+}
+
+/* dropdown / menu */
+.#{$p}-dropdown {
+  position: relative;
+  display: inline-flex;
+}
+.#{$p}-menu {
+  position: absolute;
+  z-index: v(z-dropdown);
+  min-width: 180px;
+  padding: 6px 0;
+  margin: 0;
+  list-style: none;
+  background: v(surface);
+  border: 1px solid v(border-color);
+  border-radius: v(radius);
+  box-shadow: v(shadow-lg);
+  animation: #{$p}-bounce-in-down 0.4s both;
+  text-align: start;
+  &--fixed {
+    position: fixed;
+  }
+  &--end {
+    inset-inline-end: 0;
+  }
+  &--start {
+    inset-inline-start: 0;
+  }
+  &--top {
+    bottom: 100%;
+    margin-bottom: 4px;
+  }
+  &--bottom {
+    top: 100%;
+    margin-top: 4px;
+  }
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    padding: 9px 20px;
+    color: v(text-strong);
+    background: none;
+    border: 0;
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+    text-decoration: none;
+    white-space: nowrap;
+    &:hover,
+    &.is-highlighted {
+      background: v(surface-muted);
+      color: v(theme-text);
+    }
+    &.is-active {
+      color: v(theme-text);
+      font-weight: 600;
+    }
+    &:disabled,
+    &.is-disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+    &--danger {
+      color: v(color-danger-text);
+    }
+  }
+  &__divider {
+    height: 1px;
+    margin: 6px 0;
+    background: v(border-color);
+  }
+  &__header {
+    padding: 8px 20px;
+    font-size: 12px;
+    color: v(text);
+    text-transform: uppercase;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+  }
+}
+
+/* tooltip / popover */
+.#{$p}-tooltip {
+  position: absolute;
+  z-index: v(z-popover);
+  max-width: 260px;
+  padding: 6px 10px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: #fff;
+  background: v(color-inverse);
+  border-radius: v(radius-sm);
+  pointer-events: none;
+  animation: #{$p}-fade-in 0.15s both;
+  @each $c in (primary, success, info, warning, danger) {
+    &--#{$c} {
+      background: v(color-#{$c});
+      color: on($c);
+    }
+  }
+}
+.#{$p}-popover {
+  position: absolute;
+  z-index: v(z-popover);
+  max-width: 300px;
+  background: v(surface);
+  border: 1px solid v(border-color);
+  border-radius: v(radius);
+  box-shadow: v(shadow-lg);
+  animation: #{$p}-zoom-in 0.15s both;
+  &__title {
+    padding: 10px 14px;
+    font-weight: 600;
+    color: v(heading);
+    border-bottom: 1px solid v(border-color);
+    background: v(surface-muted);
+  }
+  &__body {
+    padding: 10px 14px;
+  }
+  @each $c in (primary, success, info, warning, danger) {
+    &--#{$c} &__title {
+      background: v(color-#{$c});
+      color: on($c);
+      border-color: transparent;
+    }
+  }
+}
+
+/* spinner & preloader */
+.#{$p}-spinner {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  border: 3px solid v(theme);
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: #{$p}-spin 0.6s linear infinite;
+  &--sm {
+    width: 18px;
+    height: 18px;
+    border-width: 2px;
+  }
+  &--lg {
+    width: 48px;
+    height: 48px;
+    border-width: 4px;
+  }
+}
+.#{$p}-preloader {
+  position: fixed;
+  inset: 0;
+  z-index: v(z-preloader);
+  background: v(surface);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.4s;
+  &.is-hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.#{$p}-skeleton {
+  background: linear-gradient(90deg, #{v(surface-muted)} 25%, #{v(border-color)} 37%, #{v(surface-muted)} 63%);
+  background-size: 400% 100%;
+  animation: #{$p}-skeleton 1.4s ease infinite;
+  border-radius: v(radius-sm);
+  height: 14px;
+  margin-bottom: 8px;
+  &--circle {
+    border-radius: 50%;
+  }
+}
+@keyframes #{$p}-skeleton {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+
+/* drawer (right-sidebar) */
+.#{$p}-drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: v(z-overlay);
+  animation: #{$p}-fade-in 0.2s;
+}
+.#{$p}-drawer {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  inset-inline-end: 0;
+  z-index: calc(#{v(z-overlay)} + 1);
+  width: v(right-sidebar-width);
+  max-width: 100vw;
+  background: v(surface);
+  box-shadow: v(shadow-lg);
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 0.3s ease;
+  overflow: hidden;
+  &.is-open {
+    transform: none;
+  }
+  &--start {
+    inset-inline-end: auto;
+    inset-inline-start: 0;
+    transform: translateX(-100%);
+  }
+  &--wide {
+    width: 320px;
+  }
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    height: v(topbar-height);
+    flex-shrink: 0;
+    color: #fff;
+    background: linear-gradient(to right, #{v(topbar-1)} 1%, #{v(topbar-2)} 100%);
+    font-weight: 600;
+  }
+  &__close {
+    background: none;
+    border: 0;
+    color: inherit;
+    font-size: 22px;
+    cursor: pointer;
+  }
+  &__body {
+    padding: 20px;
+    overflow-y: auto;
+    flex: 1;
+  }
+}
+[dir='rtl'] .#{$p}-drawer:not(.is-open) {
+  transform: translateX(-100%);
+}
+[dir='rtl'] .#{$p}-drawer--start:not(.is-open) {
+  transform: translateX(100%);
+}

package/src/components/_progress.scss

@@ -0,0 +1,103 @@
+@use '../mixins' as *;
+
+.#{$p}-progress {
+  --_h: 8px;
+  --_c: #{v(color-primary)};
+  display: flex;
+  height: var(--_h);
+  overflow: hidden;
+  background: v(color-light);
+  border-radius: v(radius-sm);
+  margin-bottom: 18px;
+  box-shadow: none;
+  &--size-xs {
+    --_h: 3px;
+  }
+  &--size-sm {
+    --_h: 5px;
+  }
+  &--size-md {
+    --_h: 8px;
+  }
+  &--size-lg {
+    --_h: 18px;
+  }
+  &__bar {
+    width: 0;
+    background: var(--_c);
+    color: var(--_on, #fff);
+    font-size: 11px;
+    line-height: var(--_h);
+    text-align: center;
+    white-space: nowrap;
+    transition:
+      width 0.6s ease,
+      height 0.6s ease;
+  }
+  @each $c in $colors {
+    &--#{$c} {
+      --_c: #{v(color-#{$c})};
+      --_on: #{on($c)};
+    }
+  }
+  &--striped &__bar {
+    background-image: linear-gradient(
+      45deg,
+      rgba(255, 255, 255, 0.15) 25%,
+      transparent 25%,
+      transparent 50%,
+      rgba(255, 255, 255, 0.15) 50%,
+      rgba(255, 255, 255, 0.15) 75%,
+      transparent 75%,
+      transparent
+    );
+    background-size: 40px 40px;
+  }
+  &--animated &__bar {
+    animation: #{$p}-stripes 2s linear infinite;
+  }
+  &--vertical {
+    flex-direction: column-reverse;
+    width: var(--_h);
+    height: 250px;
+    display: inline-flex;
+    margin-inline-end: 20px;
+    margin-bottom: 0;
+    .#{$p}-progress__bar {
+      width: 100% !important;
+    }
+  }
+  &--vertical-top {
+    flex-direction: column;
+  }
+}
+.#{$p}-progress-label {
+  display: flex;
+  justify-content: space-between;
+  font-size: 13px;
+  margin-bottom: 6px;
+  color: v(text-strong);
+}
+
+/* circular progress / gauge */
+.#{$p}-progress-circle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    transform: rotate(-90deg);
+  }
+  &__track {
+    stroke: v(color-light);
+  }
+  &__value {
+    transition: stroke-dashoffset 0.8s ease;
+  }
+  &__label {
+    position: absolute;
+    font-weight: 600;
+    color: v(heading);
+    font-size: 18px;
+  }
+}

package/src/components/_ribbon.scss

@@ -0,0 +1,136 @@
+@use '../mixins' as *;
+
+.#{$p}-ribbon-wrapper {
+  position: relative;
+  padding: 50px 15px 15px;
+  background: v(surface-muted);
+  border-radius: v(radius);
+  overflow: hidden;
+  margin-bottom: 30px;
+  &--reverse {
+    padding: 50px 15px 15px;
+    text-align: end;
+  }
+  &--bottom {
+    padding: 15px 15px 50px;
+  }
+  &--vertical {
+    padding: 15px;
+    padding-inline-start: 50px;
+  }
+  &--vertical.#{$p}-ribbon-wrapper--reverse {
+    padding: 15px;
+    padding-inline-end: 50px;
+  }
+}
+.#{$p}-ribbon {
+  --_c: #{v(color-default)};
+  --_fg: #fff;
+  position: absolute;
+  top: 15px;
+  inset-inline-start: -2px;
+  padding: 0 20px;
+  height: 30px;
+  line-height: 30px;
+  clear: left;
+  color: var(--_fg);
+  background: var(--_c);
+  font-size: 13px;
+  z-index: 1;
+  @each $c in $colors {
+    &--#{$c} {
+      --_c: #{v(color-#{$c})};
+      --_fg: #{on($c)};
+    }
+  }
+  &--default {
+    --_fg: #{v(text-strong)};
+  }
+  &--right {
+    inset-inline-start: auto;
+    inset-inline-end: -2px;
+  }
+  &--bottom {
+    top: auto;
+    bottom: 15px;
+  }
+  /* bookmark */
+  &--bookmark {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      inset-inline-start: 100%;
+      border: 15px solid var(--_c);
+      border-inline-end: 10px solid transparent;
+    }
+  }
+  &--bookmark.#{$p}-ribbon--right::before {
+    inset-inline-start: auto;
+    inset-inline-end: 100%;
+    border-inline-end: 15px solid var(--_c);
+    border-inline-start: 10px solid transparent;
+  }
+  /* corner */
+  &--corner {
+    inset-inline-start: 0;
+    top: 0;
+    height: 30px;
+    width: 30px;
+    padding: 0;
+    text-align: center;
+    font-size: 14px;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      inset-inline-start: 100%;
+      border: 15px solid transparent;
+      border-top-color: var(--_c);
+      border-inline-start-color: var(--_c);
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      inset-inline-start: 0;
+      border: 15px solid transparent;
+      border-top-color: var(--_c);
+      border-inline-start-color: var(--_c);
+    }
+  }
+  /* vertical */
+  &--vertical-left,
+  &--vertical-right {
+    clear: none;
+    padding: 0 5px;
+    height: 70px;
+    width: 30px;
+    line-height: 70px;
+    text-align: center;
+    top: -2px;
+    inset-inline-start: 12px;
+  }
+  &--vertical-right {
+    inset-inline-start: auto;
+    inset-inline-end: 12px;
+  }
+  /* badge (rotated corner) */
+  &--badge {
+    top: 15px;
+    inset-inline-start: auto;
+    inset-inline-end: -40px;
+    width: 150px;
+    text-align: center;
+    transform: rotate(45deg);
+    padding: 0;
+  }
+  &--badge.#{$p}-ribbon--left {
+    inset-inline-end: auto;
+    inset-inline-start: -40px;
+    transform: rotate(-45deg);
+  }
+  &__content {
+    color: v(text);
+  }
+}