wix-style-react/dist/src/Themes/businessDashboard/components/Sidebar.st.css

wix-style-react

@st-namespace "BMSidebar";

:import {
  -st-from: "../../../Sidebar/Sidebar.st.css";
  -st-default: Sidebar;
}

:import {
  -st-from: "../../../SidebarDivider/SidebarDivider.st.css";
  -st-default: SidebarDivider;
}

:import {
  -st-from: "../../../SidebarSectionTitle/SidebarSectionTitle.st.css";
  -st-default: SidebarSectionTitle;
}

:import {
  -st-from: "../../../SidebarSectionItem/SidebarSectionItem.st.css";
  -st-default: SidebarSectionItem;
}

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

:import {
  -st-from: "../foundations/colors.st.css";
  -st-named: disabledTextColor, collapsiblleNonActive, hoveredTextColor, sidebarHoveredColor, collapsibleBackgroundActive, selectedTextColor, sidebarBackgroundColor, darkScrollbarThumbColor, darkScrollbarThumbHoverColor, collapsibleBackground, collapsibleDividerColor, collapsibleBackgroundActive;
}

.root {
  -st-extends: Sidebar;
}

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

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

.root:skin(dark) {
  background-color: value(sidebarBackgroundColor);
}

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

.root::slider:skin(dark)::-webkit-scrollbar-thumb {
  background-color: value(darkScrollbarThumbColor);
}

.root::slider:skin(dark)::-webkit-scrollbar-thumb:hover {
  background: value(darkScrollbarThumbHoverColor);
}

.root:skin(dark)::innerMenu {
  background-color: value(collapsibleBackground);
}

.root:skin(dark)::innerMenu button {
  background-color: value(collapsibleBackground);
  min-height: 28px;
}

.root:skin(dark)::innerMenu button:hover {
  background-color: value(sidebarHoveredColor);
  min-height: 28px;
  color: value(hoveredTextColor);
}

.root:skin(dark)::innerMenu SidebarDivider {
  width: 84px;
  padding: 4px 20px 5px 28px;
}


.root:skin(dark) SidebarDivider::divider {
  background-color: value(collapsibleDividerColor);
}

.root:skin(dark)::innerMenu SidebarSectionTitle {
  background-color: value(collapsibleBackground);
}

.root::innerMenu {
  padding-bottom: 4px;
}
.root::innerMenu SidebarSectionTitle  {
  padding: 6px 28px;
}

.root::innerMenu SidebarSectionItem::text {
  font-size: 12px;
  line-height: 16px;
  padding-left: 8px;
  margin: 6px 0 6px 0;
  color: value(collapsiblleNonActive);
}

.root:skin(dark)::innerMenu SidebarSectionItem::text {
  color: value(collapsiblleNonActive);
}

.root:skin(dark)::innerMenu SidebarSectionItem:disabled::text {
  color: value(disabledTextColor);
}

.root:skin(dark)::innerMenu SidebarSectionItem:hover::text {
  color: value(hoveredTextColor);
}

.root:skin(dark)::openInnerMenu SidebarSectionItem,
.root:skin(dark)::openingInnerMenuAfterClosingOther SidebarSectionItem,
.root:skin(dark)::openingInnerMenu SidebarSectionItem {
  background-color: value(collapsibleBackground);
}

.root SidebarSectionItem::chevron {
      transform-origin: 50% 55%;
}
.root::openingInnerMenu SidebarSectionItem::chevron,
.root::openingInnerMenuAfterClosingOther SidebarSectionItem::chevron{
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-name: rotateChevronUp;
  opacity: 1;
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}

.root::openingInnerMenu SidebarSectionItem::chevron {
  animation-delay: 0s;
}

.root::openingInnerMenuAfterClosingOther SidebarSectionItem::chevron {
  animation-delay: 0.5s;
}

.root::openingInnerMenu SidebarSectionItem::chevron {
  animation-delay: 0s;
}

.root::openingInnerMenuAfterClosingOther SidebarSectionItem::chevron {
  animation-delay: 0.5s;
}

.root:skin(dark)::closingInnerMenu SidebarSectionItem {
  background-color: value(collapsibleBackgroundActive);
}

.root::closedInnerMenu SidebarSectionItem::chevron {
  opacity: 0.6;
}

.root::closingInnerMenu SidebarSectionItem::chevron {
  opacity: 1;
}
.root::closedInnerMenu SidebarSectionItem::chevron,
.root::closingInnerMenu SidebarSectionItem::chevron {
  animation-duration: 0.5s;
  animation-fill-mode: backwards;
  animation-delay: 0s;
  animation-name: rotateChevronBack;
  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
}

.root::openInnerMenu SidebarSectionItem::chevron {
  transform: rotate(-90deg);
  opacity: 1;
}

.root:skin(dark)::openingInnerMenu SidebarSectionItem::chevron,
.root:skin(dark)::openingInnerMenuAfterClosingOther SidebarSectionItem::chevron,
.root:skin(dark)::openInnerMenu SidebarSectionItem::chevron,
.root:skin(dark)::closingInnerMenu SidebarSectionItem::chevron {
  color: value(selectedTextColor);
}

.root:skin(dark)::openingInnerMenu SidebarSectionItem::text,
.root:skin(dark)::openInnerMenu SidebarSectionItem::text,
.root:skin(dark)::openingInnerMenuAfterClosingOther SidebarSectionItem::text,
.root:skin(dark)::closingInnerMenu SidebarSectionItem::text {
  color: value(selectedTextColor);
}

.root:skin(dark)::openInnerMenu SidebarSectionItem:hover,
.root:skin(dark)::openingInnerMenuAfterClosingOther SidebarSectionItem:hover,
.root:skin(dark)::openingInnerMenu SidebarSectionItem:hover {
  background-color: value(sidebarHoveredColor);
  color: value(selectedTextColor);
}

.root:skin(dark) SidebarSectionItem:hover::text
{
    color: value(hoveredTextColor);
}

.root:skin(dark) SidebarSectionItem:hover .chevron,
.root:skin(dark) SidebarSectionItem:drillable:focus-visible .chevron {
  position: static;
  opacity: 1;
  transition: all .5s;
}

/* st-namespace-reference="../../../../../src/Themes/businessDashboard/components/Sidebar.st.css" */