@ozen-ui/kit

Version:
React component library
42 lines (39 loc) • 1.17 kB
CSS
.Menu {
  --scroll-bar-size: 12px;
}
  .Menu::-webkit-scrollbar {
    inline-size: var(--scroll-bar-size);
  }
  .Menu::-webkit-scrollbar-thumb {
    background-color: var(--color-background-secondary);
    border-radius: calc(var(--scroll-bar-size) / 2);
    border: calc(var(--scroll-bar-size) / 4) solid transparent;
    background-clip: padding-box;
    border-image: initial;
    min-block-size: 24px;
  }
  .Menu::-webkit-scrollbar-thumb:hover,
    .Menu::-webkit-scrollbar-thumb:active {
      border: calc(var(--scroll-bar-size) / 4) solid transparent;
      background-clip: padding-box;
    }
  .Menu::-webkit-scrollbar-thumb:hover {
      background-color: var(--color-background-secondary-hover);
    }
  .Menu::-webkit-scrollbar-thumb:active {
      background-color: var(--color-background-secondary-pressed);
    }
  .Menu::-webkit-scrollbar-corner {
    background: transparent;
  }
  .Menu {
  overflow: hidden auto;
  max-block-size: var(--menu-max-height);
  background-color: var(--menu-bg-color);
}

  .Menu_color_main {
    --menu-bg-color: var(--color-background-main);
  }

  .Menu_color_accent {
    --menu-bg-color: var(--color-accent-main);
  }