@thl-ui/styles 0.0.0-stage → 0.1.1

package/src/layout/_app.scss

@@ -0,0 +1,804 @@
+@use '../mixins' as *;
+
+/*
+ * App layout — vertical, mini and horizontal shells.
+ * Driven by data attributes on <html> (set by createThl().applyToDocument()) and modifier classes on .thl-app:
+ *   .thl-app--mini        sidebar collapsed to 60px (desktop)
+ *   .thl-app--mobile-open sidebar slid in on small screens
+ *   .thl-app--horizontal  horizontal menu under topbar
+ */
+.#{$p}-app {
+  min-height: 100vh;
+  background: v(body-bg);
+  color: v(text);
+  font-family: v(font-family);
+  font-size: v(font-size);
+  line-height: v(line-height);
+  position: relative;
+}
+
+/* ---------- topbar ---------- */
+.#{$p}-topbar {
+  position: relative;
+  z-index: calc(#{v(z-sidebar)} + 1);
+  display: flex;
+  align-items: stretch;
+  height: v(topbar-height);
+  color: v(topbar-text);
+  background: v(topbar-1);
+  background: linear-gradient(to right, #{v(topbar-1)} 1%, #{v(topbar-2)} 100%);
+  &__brand {
+    width: v(sidebar-width);
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 0 18px;
+    background: rgba(0, 0, 0, 0.1);
+    color: #fff;
+    font-weight: 700;
+    font-size: 20px;
+    overflow: hidden;
+    white-space: nowrap;
+    transition: width 0.2s ease;
+    img {
+      height: 32px;
+    }
+    a {
+      color: inherit;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+  }
+  &__brand-text {
+    transition: opacity 0.2s;
+  }
+  &__left,
+  &__right {
+    display: flex;
+    align-items: stretch;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  &__right {
+    margin-inline-start: auto;
+  }
+  &__item {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  &__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    height: v(topbar-height);
+    min-width: 60px;
+    padding: 0 16px;
+    border: 0;
+    background: none;
+    color: #fff;
+    font: inherit;
+    cursor: pointer;
+    position: relative;
+    &:hover {
+      background: rgba(0, 0, 0, 0.1);
+      color: #fff;
+    }
+  }
+  &__btn-text {
+    text-transform: uppercase;
+    font-size: 12px;
+  }
+  &__dot {
+    position: absolute;
+    top: 18px;
+    inset-inline-end: 18px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: v(color-danger);
+    box-shadow: 0 0 0 0 rgba(231, 74, 37, 0.6);
+    animation: #{$p}-ping 1.8s infinite;
+  }
+  &__search {
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    input {
+      width: 180px;
+      height: 36px;
+      border-radius: 40px;
+      border: 0;
+      padding-block: 0;
+      padding-inline: 16px 36px;
+      background: rgba(255, 255, 255, 0.2);
+      color: #fff;
+      font: inherit;
+      transition:
+        width 0.3s,
+        background 0.3s;
+      &::placeholder {
+        color: rgba(255, 255, 255, 0.75);
+      }
+      &:focus {
+        outline: none;
+        width: 240px;
+        background: rgba(255, 255, 255, 0.3);
+      }
+    }
+  }
+  &__user {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: #fff;
+    padding: 0 16px;
+    img {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      object-fit: cover;
+    }
+  }
+  &__dropdown {
+    position: absolute;
+    top: calc(100% - 4px);
+    inset-inline-end: 0;
+    width: 310px;
+    padding: 0;
+    overflow: hidden;
+    color: v(text);
+    @include down(sm) {
+      position: fixed;
+      top: v(topbar-height);
+      inset-inline: 8px;
+      width: auto;
+    }
+  }
+  &__drop-title {
+    padding: 12px 20px;
+    font-weight: 600;
+    color: v(heading);
+    border-bottom: 1px solid v(border-color);
+  }
+  &__drop-footer {
+    display: block;
+    padding: 12px;
+    text-align: center;
+    border-top: 1px solid v(border-color);
+    color: v(text-strong);
+    font-size: 13px;
+    &:hover {
+      color: v(theme-text);
+    }
+  }
+  @include down(sm) {
+    &__brand {
+      width: auto;
+    }
+    &__brand-text {
+      display: none;
+    }
+    &__search {
+      display: none;
+    }
+    &__btn {
+      min-width: 48px;
+      padding: 0 10px;
+    }
+  }
+  /* phones: 7 icon buttons must fit in 320–479px */
+  @include down(xs) {
+    &__brand {
+      padding: 0 12px;
+    }
+    &__right {
+      min-width: 0;
+    }
+    &__btn {
+      min-width: 40px;
+      padding: 0 6px;
+    }
+    &__dot {
+      top: 16px;
+      inset-inline-end: 8px;
+    }
+    /* language code ("EN") is redundant next to the globe icon */
+    &__btn-text {
+      display: none;
+    }
+  }
+}
+@keyframes #{$p}-ping {
+  70% {
+    box-shadow: 0 0 0 8px rgba(231, 74, 37, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(231, 74, 37, 0);
+  }
+}
+
+/* message-center inside topbar dropdowns */
+.#{$p}-message-center {
+  max-height: 300px;
+  overflow-y: auto;
+  &__item {
+    display: flex;
+    gap: 12px;
+    padding: 12px 20px;
+    border-bottom: 1px solid v(border-color);
+    color: v(text);
+    &:hover {
+      background: v(surface-muted);
+    }
+  }
+  &__body {
+    flex: 1;
+    min-width: 0;
+    h5,
+    &-title {
+      margin: 0 0 2px !important;
+      color: v(heading);
+      font-size: 14px !important;
+    }
+  }
+  &__desc {
+    display: block;
+    font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &__time {
+    display: block;
+    font-size: 11px;
+    color: v(text);
+    opacity: 0.8;
+  }
+}
+
+/* ---------- sidebar ---------- */
+.#{$p}-sidebar {
+  position: absolute;
+  top: v(topbar-height);
+  bottom: 0;
+  inset-inline-start: 0;
+  z-index: v(z-sidebar);
+  width: v(sidebar-width);
+  background: v(sidebar-bg);
+  border-inline-end: 1px solid v(sidebar-border);
+  transition:
+    width 0.2s ease,
+    transform 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  &__scroll {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: #dcdcdc transparent;
+  }
+  &__footer {
+    padding: 20px 30px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+}
+[data-#{$p}-fixed-sidebar] .#{$p}-sidebar {
+  position: fixed;
+}
+
+/* user profile block */
+.#{$p}-user-profile {
+  padding: 30px 15px 15px;
+  text-align: center;
+  position: relative;
+  &__avatar {
+    position: relative;
+    display: block;
+    width: 79px;
+    margin: 0 auto;
+    img {
+      width: 79px;
+      height: 79px;
+      border-radius: 50%;
+      object-fit: cover;
+    }
+  }
+  &__badge {
+    position: absolute;
+    top: 0;
+    inset-inline-end: -4px;
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    border: 3px solid v(sidebar-bg);
+    background: v(color-danger);
+    color: #fff;
+    font-size: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  &__name {
+    margin-top: 12px;
+    color: v(sidebar-active);
+    font-weight: 500;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    background: none;
+    border: 0;
+    font: inherit;
+    cursor: pointer;
+  }
+  &__role {
+    font-size: 12px;
+    color: v(sidebar-text);
+  }
+  .#{$p}-menu {
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+/* side menu (metisMenu replacement) */
+.#{$p}-side-menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  &__heading {
+    padding: 18px 30px 6px;
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: v(sidebar-text);
+    opacity: 0.7;
+    white-space: nowrap;
+  }
+  &__divider {
+    height: 1px;
+    margin: 10px 30px;
+    background: v(sidebar-border);
+  }
+  &__link {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    width: 100%;
+    padding-block: 14px;
+    padding-inline: 30px 25px;
+    color: v(sidebar-text);
+    font: inherit;
+    font-size: 15px;
+    font-weight: 500;
+    text-align: start;
+    background: none;
+    border: 0;
+    cursor: pointer;
+    white-space: nowrap;
+    text-decoration: none;
+    transition: color 0.2s;
+    position: relative;
+    &:hover {
+      color: v(theme-text);
+    }
+    &.is-active {
+      color: v(sidebar-active);
+      .#{$p}-side-menu__icon {
+        color: v(theme-text);
+      }
+    }
+    &.is-current::before {
+      content: '';
+      position: absolute;
+      inset-inline-end: 0;
+      top: 0;
+      bottom: 0;
+      width: 2px;
+      background: v(theme);
+    }
+  }
+  &__icon {
+    width: 20px;
+    margin-inline-end: 10px;
+    font-size: 18px;
+    display: inline-flex;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  &__label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  &__badge {
+    margin-inline-start: 8px;
+  }
+  &__arrow {
+    margin-inline-start: 8px;
+    font-size: 12px;
+    transition: transform 0.2s;
+  }
+  &__link[aria-expanded='true'] &__arrow {
+    transform: rotate(90deg);
+  }
+  &__sub {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    padding-inline-start: 30px;
+    overflow: hidden;
+    .#{$p}-side-menu__link {
+      padding-block: 8px;
+      padding-inline: 34px 25px;
+      font-size: 14px;
+      font-weight: 400;
+    }
+    .#{$p}-side-menu__sub {
+      padding-inline-start: 20px;
+    }
+  }
+  &__collapse {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.25s ease;
+    > * {
+      overflow: hidden;
+    }
+    &.is-open {
+      grid-template-rows: 1fr;
+    }
+  }
+}
+[dir='rtl'] .#{$p}-side-menu__link[aria-expanded='true'] .#{$p}-side-menu__arrow {
+  transform: rotate(-90deg);
+}
+
+/* ---------- page wrapper ---------- */
+.#{$p}-page {
+  margin-inline-start: v(sidebar-width);
+  min-height: calc(100vh - #{v(topbar-height)});
+  display: flex;
+  flex-direction: column;
+  transition: margin 0.2s ease;
+  background: v(body-bg);
+}
+.#{$p}-page__content {
+  flex: 1;
+  padding: v(container-padding) v(container-padding) 0;
+  min-width: 0;
+}
+.#{$p}-page__content > .#{$p}-row + .#{$p}-row {
+  margin-top: 0;
+}
+.#{$p}-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 15px v(container-padding);
+  background: v(surface);
+  border-bottom: 1px solid v(border-color);
+  margin-bottom: 0;
+  &__title {
+    margin: 0 !important;
+    font-size: 14px !important;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: v(heading);
+    letter-spacing: 0.03em;
+    line-height: 1.5 !important;
+  }
+  &__actions {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+}
+.#{$p}-footer {
+  padding: 20px v(container-padding);
+  color: v(text);
+  background: v(surface);
+  border-top: 1px solid v(border-color);
+  text-align: center;
+  font-size: 13px;
+  margin-top: v(space-7);
+}
+
+/* fixed header */
+[data-#{$p}-fixed-header] {
+  .#{$p}-topbar {
+    position: fixed;
+    top: 0;
+    inset-inline: 0;
+  }
+  .#{$p}-app:not(.#{$p}-app--blank) {
+    padding-top: v(topbar-height);
+  }
+  .#{$p}-sidebar {
+    position: fixed;
+  }
+}
+
+/* ---------- mini sidebar ---------- */
+.#{$p}-app--mini {
+  .#{$p}-topbar__brand {
+    width: v(sidebar-mini-width);
+    padding: 0 14px;
+  }
+  .#{$p}-topbar__brand-text {
+    opacity: 0;
+    width: 0;
+  }
+  .#{$p}-sidebar {
+    width: v(sidebar-mini-width);
+  }
+  .#{$p}-sidebar:not(:hover) {
+    .#{$p}-side-menu__label,
+    .#{$p}-side-menu__arrow,
+    .#{$p}-side-menu__badge,
+    .#{$p}-side-menu__heading,
+    .#{$p}-user-profile,
+    .#{$p}-sidebar__footer {
+      display: none;
+    }
+    .#{$p}-side-menu__collapse {
+      display: none;
+    }
+    .#{$p}-side-menu__link {
+      padding-inline: 20px;
+    }
+  }
+  /* expand on hover as an overlay (265px flyout) */
+  .#{$p}-sidebar:hover {
+    width: v(sidebar-width);
+    box-shadow: v(shadow-lg);
+  }
+  .#{$p}-page {
+    margin-inline-start: v(sidebar-mini-width);
+  }
+}
+
+/* ---------- mobile (<768) ---------- */
+@include down(sm) {
+  .#{$p}-sidebar,
+  .#{$p}-app--mini .#{$p}-sidebar {
+    width: v(sidebar-width);
+    transform: translateX(-100%);
+    position: fixed;
+    box-shadow: none;
+  }
+  [dir='rtl'] .#{$p}-sidebar {
+    transform: translateX(100%);
+  }
+  .#{$p}-app--mini .#{$p}-sidebar:not(:hover) {
+    .#{$p}-side-menu__label,
+    .#{$p}-side-menu__arrow,
+    .#{$p}-side-menu__badge,
+    .#{$p}-side-menu__heading {
+      display: revert;
+    }
+    .#{$p}-side-menu__link {
+      padding-inline: 30px 25px;
+    }
+    .#{$p}-user-profile,
+    .#{$p}-sidebar__footer {
+      display: block;
+    }
+    .#{$p}-side-menu__collapse {
+      display: grid;
+    }
+  }
+  .#{$p}-app--mobile-open .#{$p}-sidebar {
+    transform: none !important;
+    box-shadow: v(shadow-lg);
+  }
+  .#{$p}-page,
+  .#{$p}-app--mini .#{$p}-page {
+    margin-inline-start: 0;
+  }
+  .#{$p}-page__content {
+    padding: 15px 15px 0;
+  }
+  .#{$p}-page-header {
+    padding: 12px 15px;
+  }
+  .#{$p}-sidebar-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: calc(#{v(z-sidebar)} - 1);
+    background: rgba(0, 0, 0, 0.4);
+    animation: #{$p}-fade-in 0.2s;
+  }
+}
+@include up(sm) {
+  .#{$p}-sidebar-backdrop {
+    display: none;
+  }
+}
+
+/* ---------- horizontal ---------- */
+.#{$p}-app--horizontal {
+  .#{$p}-sidebar {
+    position: sticky;
+    top: 0;
+    bottom: auto;
+    width: 100% !important;
+    height: auto;
+    flex-direction: row;
+    border-inline-end: 0;
+    border-bottom: 1px solid v(sidebar-border);
+    box-shadow: 1px 0 20px rgba(0, 0, 0, 0.08);
+    transform: none !important;
+  }
+  .#{$p}-sidebar__scroll {
+    overflow: visible;
+  }
+  .#{$p}-user-profile,
+  .#{$p}-sidebar__footer,
+  .#{$p}-side-menu__heading,
+  .#{$p}-side-menu__divider {
+    display: none;
+  }
+  .#{$p}-side-menu {
+    display: flex;
+    flex-wrap: nowrap;
+    padding: 0 15px;
+    > li {
+      position: relative;
+      flex-shrink: 0;
+    }
+    /* items that do not fit stay measurable but out of flow; they are repeated inside "More" */
+    > li.is-overflow {
+      position: absolute;
+      top: 0;
+      inset-inline-start: 0;
+      visibility: hidden;
+      pointer-events: none;
+    }
+    > .#{$p}-side-menu__more > .#{$p}-side-menu__collapse .#{$p}-side-menu__sub {
+      max-height: calc(100vh - #{v(topbar-height)} - 70px);
+      overflow-y: auto;
+    }
+    > li > .#{$p}-side-menu__link {
+      padding: 15px;
+    }
+    > li > .#{$p}-side-menu__collapse {
+      position: absolute;
+      top: 100%;
+      inset-inline-start: 0;
+      width: 260px;
+      z-index: v(z-dropdown);
+      background: v(surface);
+      box-shadow: v(shadow-lg);
+      border-radius: 0 0 v(radius) v(radius);
+      display: none;
+      grid-template-rows: 1fr;
+    }
+    > li:hover > .#{$p}-side-menu__collapse,
+    > li:focus-within > .#{$p}-side-menu__collapse {
+      display: grid;
+    }
+    > li:last-child > .#{$p}-side-menu__collapse,
+    > li:nth-last-child(2) > .#{$p}-side-menu__collapse {
+      inset-inline-start: auto;
+      inset-inline-end: 0;
+    }
+    .#{$p}-side-menu__sub {
+      padding: 8px 0;
+      .#{$p}-side-menu__link {
+        color: v(text-strong);
+        padding: 8px 20px;
+        &:hover {
+          color: v(theme-text);
+        }
+      }
+    }
+  }
+  .#{$p}-side-menu__link[aria-expanded] .#{$p}-side-menu__arrow {
+    transform: rotate(90deg);
+  }
+  .#{$p}-page {
+    margin-inline-start: 0 !important;
+  }
+  .#{$p}-topbar__brand {
+    width: auto;
+    padding: 0 25px;
+  }
+  .#{$p}-topbar__toggler {
+    display: none;
+  }
+  @include down(sm) {
+    .#{$p}-sidebar {
+      position: fixed;
+      top: v(topbar-height);
+      bottom: 0;
+      width: v(sidebar-width) !important;
+      flex-direction: column;
+      transform: translateX(-100%) !important;
+    }
+    &.#{$p}-app--mobile-open .#{$p}-sidebar {
+      transform: none !important;
+    }
+    .#{$p}-sidebar__scroll {
+      overflow-y: auto;
+    }
+    .#{$p}-side-menu {
+      flex-direction: column;
+      flex-wrap: nowrap;
+      padding: 0;
+      > li > .#{$p}-side-menu__collapse {
+        position: static;
+        width: auto;
+        box-shadow: none;
+        display: grid;
+      }
+    }
+    .#{$p}-topbar__toggler {
+      display: inline-flex;
+    }
+  }
+}
+[data-#{$p}-fixed-header] .#{$p}-app--horizontal .#{$p}-sidebar {
+  top: v(topbar-height);
+  position: sticky;
+}
+
+/* ---------- settings panel (right-sidebar) ---------- */
+.#{$p}-settings {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+  &__section :is(h3, h5) {
+    margin: 0 0 10px !important;
+    line-height: 18px;
+    font-size: 13px !important;
+    text-transform: uppercase;
+    font-weight: 600;
+    color: v(heading);
+    letter-spacing: 0.04em;
+  }
+  &__skins {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 8px;
+    list-style: none;
+    padding: 0;
+    margin: 0 0 8px;
+  }
+  &__skin {
+    width: 100%;
+    aspect-ratio: 1;
+    border-radius: v(radius-sm);
+    border: 2px solid transparent;
+    cursor: pointer;
+    padding: 0;
+    position: relative;
+    overflow: hidden;
+    &--dark::after {
+      content: '';
+      position: absolute;
+      inset: 0 0 0 50%;
+      background: #4f5467;
+    }
+    &.is-active {
+      border-color: v(text-strong);
+      box-shadow: 0 0 0 2px v(surface) inset;
+    }
+  }
+  &__options {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+}