@wikex/admin-kit 0.4.0 → 0.6.0

package/src/styles/_minimal-dashboard.scss

@@ -1,724 +0,0 @@
-@mixin styles {
-  :root {
-    --layout-transition-easing: linear;
-    --layout-transition-duration: 120ms;
-    --layout-nav-mini-width: 88px;
-    --layout-nav-vertical-width: 300px;
-    --layout-nav-mobile-width: 288px;
-    --layout-header-mobile-height: 64px;
-    --layout-header-desktop-height: 72px;
-    --layout-nav-z-index: 40;
-    --layout-header-z-index: 39;
-    --nav-width: var(--layout-nav-vertical-width);
-    --minimal-header-height: var(--layout-header-desktop-height);
-  }
-
-  .template-default {
-    background: var(--minimal-background);
-    grid-template-columns: var(--nav-width) minmax(0, 1fr) !important;
-    min-height: 100vh;
-    overflow-x: clip;
-    transition: grid-template-columns var(--layout-transition-duration)
-      var(--layout-transition-easing);
-  }
-
-  .template-default__wrap {
-    min-width: 0;
-    padding-top: var(--layout-header-desktop-height);
-  }
-
-  .wikex-dashboard-nav {
-    align-self: start;
-    background: var(--minimal-background);
-    border-right: 1px solid var(--minimal-divider);
-    color: var(--minimal-text-primary);
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    opacity: 0;
-    overflow: visible;
-    position: sticky;
-    top: 0;
-    transition:
-      opacity 120ms ease,
-      transform var(--layout-transition-duration) var(--layout-transition-easing),
-      width var(--layout-transition-duration) var(--layout-transition-easing);
-    width: var(--nav-width);
-    z-index: var(--layout-nav-z-index);
-
-    &--hydrated {
-      opacity: 1;
-    }
-
-    &__top {
-      align-items: center;
-      display: flex;
-      flex: 0 0 auto;
-      height: var(--layout-header-desktop-height);
-      justify-content: space-between;
-      padding: 0 28px;
-    }
-
-    &__logo {
-      align-items: center;
-      display: inline-flex;
-      min-height: 40px;
-      min-width: 40px;
-      text-decoration: none;
-    }
-
-    &__logo-icon,
-    &__mobile-close {
-      display: none;
-    }
-
-    &__scrollbar {
-      flex: 1 1 auto;
-      min-height: 0;
-      overflow-x: hidden;
-      overflow-y: auto;
-      padding: 8px 16px 24px;
-      scrollbar-color: var(--minimal-grey-400) transparent;
-      scrollbar-width: thin;
-    }
-
-    &__scrollbar::-webkit-scrollbar {
-      width: 5px;
-    }
-
-    &__scrollbar::-webkit-scrollbar-thumb {
-      background: var(--minimal-grey-400);
-      border-radius: 999px;
-    }
-
-    &__toggle {
-      align-items: center;
-      background: var(--minimal-background);
-      border: 1px solid var(--minimal-divider);
-      border-radius: 50%;
-      color: var(--minimal-text-secondary);
-      cursor: pointer;
-      display: flex;
-      height: 28px;
-      justify-content: center;
-      padding: 0;
-      position: absolute;
-      right: -14px;
-      top: calc(var(--layout-header-desktop-height) / 2 - 14px);
-      transition:
-        color 120ms ease,
-        background-color 120ms ease;
-      width: 28px;
-      z-index: 2;
-
-      &:hover {
-        background: var(--minimal-neutral);
-        color: var(--minimal-text-primary);
-      }
-
-      &:focus-visible {
-        box-shadow: var(--minimal-focus-ring);
-      }
-
-      svg {
-        height: 16px;
-        width: 16px;
-      }
-    }
-
-    &--mini {
-      .wikex-dashboard-nav__top {
-        justify-content: center;
-        padding-inline: 0;
-      }
-
-      .wikex-dashboard-nav__logo-full {
-        display: none;
-      }
-
-      .wikex-dashboard-nav__logo-icon {
-        display: inline-flex;
-      }
-
-      .wikex-dashboard-nav__scrollbar {
-        padding-inline: 8px;
-      }
-    }
-  }
-
-  .wikex-nav-section {
-    --nav-item-gap: 4px;
-    --nav-item-radius: 8px;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-
-    &__group {
-      display: flex;
-      flex-direction: column;
-      gap: var(--nav-item-gap);
-      margin: 0;
-      padding: 0;
-    }
-
-    &__subheader {
-      color: var(--minimal-text-disabled);
-      font-size: 11px;
-      font-weight: 700;
-      letter-spacing: 0;
-      line-height: 20px;
-      margin: 0;
-      padding: 8px 12px;
-      text-transform: none;
-    }
-
-    &__item {
-      align-items: center;
-      border-radius: var(--nav-item-radius);
-      color: var(--minimal-text-secondary) !important;
-      display: flex;
-      font-size: 14px;
-      font-weight: 600;
-      min-height: 44px;
-      padding: 4px 8px 4px 12px;
-      text-decoration: none;
-      transition:
-        color 120ms ease,
-        background-color 120ms ease;
-
-      &:hover {
-        background: var(--minimal-action-hover);
-        color: var(--minimal-text-primary) !important;
-      }
-
-      &:focus-visible {
-        box-shadow: var(--minimal-focus-ring);
-      }
-
-      &--active {
-        background: rgb(214 181 111 / 10%);
-        color: var(--minimal-primary-dark) !important;
-      }
-    }
-
-    &__icon {
-      align-items: center;
-      display: inline-flex;
-      flex: 0 0 24px;
-      height: 24px;
-      justify-content: center;
-      margin-right: 12px;
-      width: 24px;
-
-      svg {
-        height: 22px;
-        width: 22px;
-      }
-    }
-
-    &__title {
-      min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    &--mini {
-      .wikex-nav-section__subheader {
-        display: none;
-      }
-
-      .wikex-nav-section__group {
-        gap: 4px;
-      }
-
-      .wikex-nav-section__item {
-        flex-direction: column;
-        font-size: 10px;
-        justify-content: center;
-        line-height: 14px;
-        min-height: 56px;
-        padding: 8px 4px 6px;
-        text-align: center;
-      }
-
-      .wikex-nav-section__icon {
-        flex-basis: 22px;
-        height: 22px;
-        margin: 0 0 6px;
-        width: 22px;
-      }
-
-      .wikex-nav-section__title {
-        max-width: 72px;
-      }
-    }
-  }
-
-  html[data-theme='dark'] .wikex-nav-section__item--active {
-    color: var(--minimal-primary-light) !important;
-  }
-
-  .wikex-logo {
-    align-items: center;
-    display: inline-flex;
-
-    &__image {
-      display: block;
-      height: auto;
-      max-height: 42px;
-      max-width: 190px;
-      width: auto;
-    }
-
-    &--icon .wikex-logo__image {
-      height: 32px;
-      max-width: 32px;
-      width: 32px;
-    }
-  }
-
-  .wikex-dashboard-header {
-    backdrop-filter: blur(8px);
-    background: color-mix(in srgb, var(--minimal-background) 82%, transparent);
-    color: var(--minimal-text-primary);
-    height: var(--layout-header-desktop-height);
-    left: var(--nav-width);
-    position: fixed;
-    right: 0;
-    top: 0;
-    transition: left var(--layout-transition-duration) var(--layout-transition-easing);
-    z-index: var(--layout-header-z-index);
-
-    &::after {
-      border-radius: 50%;
-      bottom: 0;
-      box-shadow: var(--minimal-shadow-z4);
-      content: '';
-      height: 16px;
-      left: 24px;
-      opacity: 0.08;
-      pointer-events: none;
-      position: absolute;
-      right: 24px;
-      z-index: -1;
-    }
-
-    &__container {
-      align-items: center;
-      display: flex;
-      height: 100%;
-      padding: 0 var(--gutter-h);
-    }
-
-    &__left,
-    &__actions,
-    &__workspace,
-    &__workspace-copy {
-      align-items: center;
-      display: flex;
-    }
-
-    &__left {
-      min-width: 0;
-    }
-
-    &__actions {
-      gap: 8px;
-      margin-left: auto;
-    }
-
-    &__menu,
-    &__mobile-logo {
-      display: none;
-    }
-
-    &__workspace {
-      gap: 12px;
-      min-width: 0;
-    }
-
-    &__workspace-icon {
-      align-items: center;
-      background: var(--minimal-neutral);
-      border-radius: 10px;
-      color: var(--minimal-primary-dark);
-      display: flex;
-      height: 40px;
-      justify-content: center;
-      width: 40px;
-
-      svg {
-        height: 20px;
-        width: 20px;
-      }
-    }
-
-    &__workspace-copy {
-      align-items: flex-start;
-      flex-direction: column;
-      min-width: 0;
-
-      small {
-        color: var(--minimal-text-secondary);
-        font-size: 11px;
-        line-height: 16px;
-      }
-
-      strong {
-        font-size: 13px;
-        line-height: 20px;
-        max-width: 240px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-  }
-
-  .wikex-account-button,
-  .wikex-dashboard-header__menu,
-  .wikex-dashboard-header__mobile-logo {
-    align-items: center;
-    background: transparent;
-    border: 0;
-    border-radius: 50%;
-    color: var(--minimal-text-secondary) !important;
-    cursor: pointer;
-    height: 40px;
-    justify-content: center;
-    padding: 0;
-    text-decoration: none;
-    width: 40px;
-
-    &:hover {
-      background: var(--minimal-action-hover);
-      color: var(--minimal-text-primary) !important;
-    }
-
-    &:focus-visible {
-      box-shadow: var(--minimal-focus-ring);
-    }
-  }
-
-  .wikex-account-button {
-    display: flex;
-
-    > span {
-      align-items: center;
-      background: linear-gradient(135deg, var(--minimal-primary), var(--minimal-primary-light));
-      border: 3px solid var(--minimal-paper);
-      border-radius: 50%;
-      box-shadow:
-        0 0 0 1px var(--minimal-primary),
-        0 0 0 4px rgb(214 181 111 / 12%);
-      color: #16120b;
-      display: flex;
-      font-size: 11px;
-      font-weight: 800;
-      height: 34px;
-      justify-content: center;
-      width: 34px;
-    }
-  }
-
-  .wikex-account-drawer {
-    &__backdrop {
-      background: rgb(20 26 33 / 18%);
-      border: 0;
-      cursor: default;
-      inset: 0;
-      opacity: 0;
-      padding: 0;
-      pointer-events: none;
-      position: fixed;
-      transition: opacity 180ms ease;
-      visibility: hidden;
-      z-index: 100;
-    }
-
-    &__panel {
-      background: var(--minimal-paper);
-      box-shadow: var(--minimal-shadow-z12);
-      display: flex;
-      flex-direction: column;
-      height: 100dvh;
-      max-width: calc(100vw - 32px);
-      position: fixed;
-      right: 0;
-      top: 0;
-      transform: translateX(105%);
-      transition: transform 220ms ease;
-      visibility: hidden;
-      width: 320px;
-      z-index: 101;
-    }
-
-    &--open {
-      .wikex-account-drawer__backdrop {
-        opacity: 1;
-        pointer-events: auto;
-        visibility: visible;
-      }
-
-      .wikex-account-drawer__panel {
-        transform: translateX(0);
-        visibility: visible;
-      }
-    }
-
-    &__close {
-      align-items: center;
-      background: transparent;
-      border: 0;
-      border-radius: 50%;
-      color: var(--minimal-text-secondary);
-      cursor: pointer;
-      display: flex;
-      height: 40px;
-      justify-content: center;
-      left: 12px;
-      padding: 0;
-      position: absolute;
-      top: 12px;
-      width: 40px;
-
-      &:hover {
-        background: var(--minimal-action-hover);
-      }
-
-      svg {
-        height: 20px;
-        width: 20px;
-      }
-    }
-
-    &__profile {
-      align-items: center;
-      display: flex;
-      flex-direction: column;
-      padding: 72px 24px 32px;
-
-      strong {
-        font-size: 15px;
-        margin-top: 18px;
-      }
-
-      small {
-        color: var(--minimal-text-secondary);
-        margin-top: 4px;
-        max-width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-    }
-
-    &__avatar {
-      align-items: center;
-      background: linear-gradient(135deg, var(--minimal-primary), var(--minimal-primary-light));
-      border: 6px solid var(--minimal-paper);
-      border-radius: 50%;
-      box-shadow:
-        0 0 0 1px var(--minimal-primary),
-        0 0 0 8px rgb(214 181 111 / 10%);
-      color: #16120b;
-      display: flex;
-      font-size: 22px;
-      font-weight: 800;
-      height: 88px;
-      justify-content: center;
-      width: 88px;
-    }
-
-    &__menu {
-      border-bottom: 1px dashed var(--minimal-divider);
-      border-top: 1px dashed var(--minimal-divider);
-      padding: 24px 20px;
-    }
-
-    &__link {
-      align-items: center;
-      border-radius: var(--minimal-radius-sm);
-      color: var(--minimal-text-secondary) !important;
-      display: flex;
-      font-size: 13px;
-      font-weight: 600;
-      gap: 12px;
-      min-height: 44px;
-      padding: 8px 12px;
-      text-decoration: none;
-
-      &:hover {
-        background: var(--minimal-action-hover);
-        color: var(--minimal-text-primary) !important;
-      }
-
-      svg {
-        height: 20px;
-        width: 20px;
-      }
-    }
-
-    &__footer {
-      margin-top: auto;
-      padding: 20px;
-
-      .admin-sign-out {
-        background: rgb(255 86 48 / 8%);
-        color: var(--minimal-error) !important;
-        justify-content: center;
-      }
-    }
-  }
-
-  .wikex-auth-intro {
-    margin-bottom: 28px;
-    text-align: center;
-
-    &__eyebrow {
-      color: var(--minimal-primary-dark);
-      display: block;
-      font-size: 11px;
-      font-weight: 800;
-      letter-spacing: 0.08em;
-      margin-bottom: 12px;
-      text-transform: uppercase;
-    }
-
-    h1 {
-      font-size: 30px;
-      letter-spacing: -0.03em;
-      margin: 0;
-    }
-
-    p {
-      color: var(--minimal-text-secondary);
-      line-height: 1.7;
-      margin: 12px 0 0;
-    }
-  }
-
-  html.wikex-live-preview-switching .wikex-dashboard-header,
-  html.wikex-live-preview-switching .wikex-dashboard-nav {
-    transition: none !important;
-  }
-
-  @media (min-width: 1025px) {
-    html.wikex-visual-preview-active body {
-      .wikex-dashboard-nav {
-        opacity: 0;
-        pointer-events: none;
-        transform: translateX(-16px);
-        width: 0;
-      }
-
-      .wikex-dashboard-header {
-        display: none;
-      }
-    }
-  }
-
-  @media (max-width: 768px) {
-    :root {
-      --minimal-header-height: var(--layout-header-mobile-height);
-      --nav-width: 0px;
-    }
-
-    .template-default {
-      display: block;
-      grid-template-columns: minmax(0, 1fr) !important;
-    }
-
-    .template-default__wrap {
-      padding-top: var(--layout-header-mobile-height);
-    }
-
-    .wikex-dashboard-header {
-      height: var(--layout-header-mobile-height);
-      left: 0;
-
-      &__container {
-        padding-inline: 16px;
-      }
-
-      &__menu,
-      &__mobile-logo {
-        display: flex;
-      }
-
-      &__mobile-logo {
-        margin-left: 4px;
-      }
-
-      &__workspace {
-        display: none;
-      }
-    }
-
-    .wikex-dashboard-nav,
-    .wikex-dashboard-nav--mini {
-      box-shadow: 40px 0 80px -16px rgb(20 26 33 / 36%);
-      left: 0;
-      max-width: min(88vw, var(--layout-nav-mobile-width));
-      position: fixed;
-      transform: translateX(-105%);
-      width: min(88vw, var(--layout-nav-mobile-width));
-      z-index: 102;
-
-      &.wikex-dashboard-nav--open {
-        transform: translateX(0);
-      }
-
-      .wikex-dashboard-nav__top {
-        justify-content: space-between;
-        padding-inline: 24px 12px;
-      }
-
-      .wikex-dashboard-nav__logo-full,
-      .wikex-dashboard-nav__mobile-close {
-        display: inline-flex;
-      }
-
-      .wikex-dashboard-nav__logo-icon,
-      .wikex-dashboard-nav__toggle {
-        display: none;
-      }
-
-      .wikex-dashboard-nav__scrollbar {
-        padding-inline: 16px;
-      }
-
-      .wikex-nav-section__subheader {
-        display: block;
-      }
-
-      .wikex-nav-section__item {
-        flex-direction: row;
-        font-size: 14px;
-        justify-content: flex-start;
-        line-height: normal;
-        min-height: 44px;
-        padding: 4px 8px 4px 12px;
-        text-align: left;
-      }
-
-      .wikex-nav-section__icon {
-        flex-basis: 24px;
-        height: 24px;
-        margin: 0 12px 0 0;
-        width: 24px;
-      }
-
-      .wikex-nav-section__title {
-        max-width: none;
-      }
-    }
-  }
-
-  @media (max-width: 560px) {
-    .wikex-dashboard-header .admin-view-site {
-      display: none;
-    }
-  }
-}