oui-kit/src/app.styl

🎯 *UI toolkit with a French touch* 🇫🇷

@require "../stylus/default-app.styl";

.default {
  color: var(--fg);
  background-color: var(--bg);
  padding: 8;
}

.oui-form {
  oui-form-defaults();
}

.oui-demo {
  height: 100%;
  use: stack-y;

  &-header {
    use: stack-x;
    padding: 16;
    background: var(--t3-bg);
    border-bottom: 1px solid var(--t3-fg);
    gap: 8;

    ._middle {
      use: center;
    }
  }

  &-body {
    use: stack-x;
    use: grow;
  }

  &-sidebar {
    use: stack-y;
    background: var(--s2-bg);
  }

  &-props {
    use: stack-y;
    use: grow;
    gap: 8;

    label {
      display: block;
    }
  }

  &-state, &-props {
    use: scroll;
    padding: 16;
  }

  &-sandbox {
    use: grow;

    &:not(._sidebyside) {
      use: scroll;
      padding: 16;
    }

    &._sidebyside {
      use: stack-x;
      padding: 0;

      > div {
        use: grow;
        use: scroll;
        padding: 16;
        min-height: 100%;
      }
    }
  }

  &-navigation {
    background: var(--t3-bg);
    border-right: 1px solid var(--t3-border);

    @media (max-width: 768px) {
      display: none;
    }
  }

  &-nav-content {
    height: 100%;
    overflow-y: auto;

    h3 {
      margin: 0 0 16px 0;
      font-size: 14px;
      font-weight: 600;
      color: var(--t3-fg);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
  }

  &-nav-list {
    padding: 8;
    display: flex;
    use: stack-y;
  }

  &-nav-open {
    padding-y: 4;
    opacity: 0;
  }

  &-nav-item {
    use: stack-x;
    width: 100%;
    padding-x: 12;
    text-align: left;
    font-size: 14px;
    color: var(--s2-fg);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      background: var(--s2-bg);
      color: var(--s2-fg);

      .oui-demo-nav-open {
        opacity: 1;
      }
    }

    &.active {
      background: var(--p1-fg);
      color: white;
      font-weight: 600;
    }
  }

  &-nav-button {
    use: grow;
    padding-y: 4;
    text-align: left;
    font-weight: inherit;
  }

  &-sidebar-toggle {
    @media (max-width: 768px) {
      display: none;
    }
  }

}

html.dark .shiki, html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important; /* Optional, if you also want font styles */
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}