tdesign-react/esm/style/web/components/menu/_docs.less

TDesign Component for React

[class*="@{d-prefix}-demo-item__subtitle"] {
  font-size: 18px;
  height: 26px;
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 5px;
  font-weight: bold;
}

[class*="@{d-prefix}-demo-menu__logo"] {
  position: relative;
  top: 20px;
  left: 24px;
  width: 140px;
  height: 24px;
  background: #5b6270;
  border-radius: @border-radius-default;
}

[class*="@{d-prefix}-demo-menu__sidelogo"] {
  position: relative;
  width: 100%;
  background-color: #f0f0f0;
}

[class*="@{d-prefix}-demo-menu__block"] {
  position: relative;
  width: 288px;
  height: 40px;
  line-height: 40px;
  margin: 12px;
  background: rgba(255, 255, 255, 20%);
  color: #fff;
  text-align: center;
}

[class*="@{d-prefix}-demo-item__body__200"] {
  height: 250px;
}

.t-default-menu__demo--height {
  height: 900px;
}

.mr-48 {
  margin-right: 20px;
}

[class*="@{d-prefix}-demo-menu__logo"] {
  width: 140px;
  height: 30px;

  &.margin_0 {
    margin: 0;
  }
}

[class*="@{d-prefix}-demo-menu__style"] {
  margin: 12px auto;
  width: 200px;
  line-height: 48px;
  text-align: center;
  background: #fafafa;
  border: 1px solid #e9e9e9;
  color: #888;

  &.demo-style1 {
    height: 48px;
  }

  &.demo-style2 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    height: 112px;
    line-height: 112px;
  }
}

.@{d-prefix}-demo-item--menu {
  --bg-color-demo: var(--bg-color-demo-secondary);
}

.@{d-prefix}-demo-item--menu-multiple {
  .@{d-prefix}-demo-item__body {
    overflow: unset;
  }

  --bg-color-demo: var(--bg-color-demo-secondary);
}

[class*="@{d-prefix}-demo-menu__operations"] {
  .t-button {
    margin-left: 8px;
  }
}

[class*="@{d-prefix}-demo-menu__operations--dark"] {
  .t-button {
    margin-left: 8px;
    color: #fff;

    --ripple-color: #383838;

    &:hover {
      color: #fff;
      background-color: #4b4b4b;
      border-color: transparent;
    }
  }
}

[class*="@{d-prefix}-demo-menu-collapse--dark"] {
  .t-button {
    color: #fff;

    --ripple-color: #383838 !important;

    &:hover {
      color: #fff;
      background-color: #4b4b4b;
      border-color: transparent;

      --ripple-color: #383838;
    }
  }
}

:root[theme-mode="dark"] {
  .tdesign-demo-item--menu {
    .@{d-prefix}-demo-item__body {
      background-color: transparent;
    }
  }
}