wix-style-react/dist/src/SidebarNext/SidebarNext.st.css

wix-style-react

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: D60, D10, D10-42, D10-66, D70, D80, D80-00;
}

:import {
  -st-from: "../Foundation/stylable/mixins/calc_rgba";
  -st-default: calc_rgba;
}

:import {
  -st-from: '../Foundation/stylable/easing.st.css';
  -st-named: ease-8;
}

:vars {
  sidebarWidth: 228px;
  backgroundColor: #131720;
}

.root {
  -st-states: hidden;
  position: relative;
  height: 100%;
  transition: width 0.3s ease-in-out, margin-left 0.6s, margin-right 0.6s, visibility 0.6s;
}

.section {
  -st-states: skin(enum(dark, light, neutral)), hidden;

  width: value(sidebarWidth);
  height: 100%;

  min-height: 0;

  display: flex;
  flex-direction: column;

  z-index: 2;
  margin-left: 0;
  margin-right: 0;

  overflow: hidden;
  transition: width 0.3s ease-in-out;
}

.section:skin(dark) {
  background-color: value(backgroundColor);
}

.section:skin(light) {
  background-color: value(D80);
  border-right: 1px solid value(D60);
}

.section:skin(neutral) {
  background-color: #F0F4F7;
}

.root:hidden {
  margin-right: 0;
  visibility: hidden;
}

:global([dir="rtl"]) .section:hidden {
  margin-left: 0;
  visibility: hidden;
}

.content {
  height: 100%;
  position: relative;
}

.scrollArea {
  -st-states: skin(enum(dark, light, neutral));

  position: absolute;
  width: value(sidebarWidth);
  overflow: auto;
  overflow-y: overlay !important;
  box-sizing: border-box;
  height: 100%;
  padding-top: 12px;

  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-timing-function: value(ease-8);
}

.scrollArea:skin(dark) {
  background-color: value(backgroundColor);
}

.scrollArea:skin(light) {
  background-color: value(D80);
}

.scrollArea:skin(neutral) {
  background-color: value(D70);
}

.scrollArea::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 8px;
}

.scrollArea::-webkit-scrollbar-thumb {
  border-radius: 4px;
}

.scrollArea::-webkit-scrollbar-thumb:hover {
  border-radius: 4px;
}

.scrollArea:skin(dark)::-webkit-scrollbar-thumb {
  background-color: #717479;;
}

.scrollArea:skin(dark)::-webkit-scrollbar-thumb:hover {
  background: #B8B9BC;
}

.scrollArea:skin(light)::-webkit-scrollbar-thumb {
  background-color: value(D10-42);
}

.scrollArea:skin(light)::-webkit-scrollbar-thumb:hover {
  background: value(D10-66);
}

.scrollAreaGradient {
  -st-states: skin(enum(dark, light, neutral));
  position: sticky;
  bottom: 0;
  height: 36px;
  min-height: 36px;
  pointer-events: none;
}

.scrollAreaGradient:skin(dark) {
  background-image: linear-gradient(to bottom, calc_rgba(value(backgroundColor), 0), value(backgroundColor));
}

.scrollAreaGradient:skin(light) {
  background-image: linear-gradient(to bottom, value(D80-00), value(D80));
}

.listItems {
  overflow: hidden;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* st-namespace-reference="../../../src/SidebarNext/SidebarNext.st.css" */