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

wix-style-react

@st-import SidebarItem from "../SidebarItemNext/SidebarItemNext.st.css";
@st-import Popover from "../Popover/Popover.st.css";
@st-import [D80, D10, B40] from "../Foundation/stylable/colors.st.css";

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

@keyframes rotateChevronUp {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-90deg);
  }
}

@keyframes rotateChevronBack {
  from {
    transform: rotate(-90deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes openItems {
  0% {
    max-height: 0;
    opacity: 0.1;
  }

  20% {
    opacity: 1;
  }

  100% {
    max-height: 1000px;
  }
}

@keyframes closeItems {
  0% {
    max-height: 1000px;
  }

  100% {
    max-height: 0px;
  }
}

.root:skin(dark) .subMenu:selected,
.root:skin(dark) .subMenuItems {
  background: #1F222B;
}

.root:skin(light) .subMenu:selected,
.root:skin(light) .subMenuItems {
  background: #EAF7FF;
}

.root:skin(neutral) .subMenu:selected,
.root:skin(neutral) .subMenuItems {
  background: value(B40);
}

.root:skin(neutral) .subMenu::suffix svg {
  color: value(D10);
}


.subMenu {
  -st-extends: SidebarItem;
  -st-states: selected, animation(enum(closing, opening)), animationWithDelay(boolean);
}

.subMenu .chevronRight {
  display: flex;
}

.subMenu:animation(opening) .chevronRight svg {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-name: rotateChevronUp;
  opacity: 1;
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}

.subMenu:animation(closing) .chevronRight svg {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-name: rotateChevronBack;
  opacity: 1;
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}

.subMenu:animation(opening):animationWithDelay .chevronRight svg {
  animation-delay: 0.5s;
}

.subMenuItems {
  max-height: 0;
  overflow: hidden;
  list-style-type: none;
  margin: 0;
  padding: 0;
  -st-states: animation(enum(closing, opening)), animationWithDelay(boolean);
}

.subMenuItems:animation(opening) {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-name: openItems;
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}

.subMenuItems:animation(closing) {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-name: closeItems;
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}

.subMenuItems:animation(closing):animationWithDelay {
  animation-duration: 0ms;
}

.subMenuItems:animation(opening):animationWithDelay {
  animation-delay: 0.5s;
}

.navigationPopoverRoot {
  -st-states: legacy;
  -st-extends: Popover;
  width: 100%;
}

.navigationPopoverRoot::content {
  display: flex;
  padding: 12px 0;
}

.root:skin(neutral) .navigationPopoverRoot::arrow {
  border-color: value(D10);
}

.navigationPopoverRoot:legacy::content:skin(dark) {
  background: #2c2e35;
}

.navigationPopoverRoot::content:skin(dark) {
  background: #1F222B;
}

.navigationPopoverRoot:legacy::arrow:skin(dark) {
  border-color: #2c2e35;
}

.navigationPopoverRoot::arrow:skin(dark) {
  border-color: #1F222B;
}

.navigationPopoverRoot::content .navigationPopover {
  padding: 0;
  margin: 0;
  max-height: 252px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fit, 28px);
}

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