@aimo.ui/aimo-sidemenu/dist/AimoSideMenu.css

Accordion Sidebar Menu for React

/*
 * Created on Tue Dec 06 2022
 *
 * Copyright (c) 2022 Mostafa Vahabzadeh
 *
 * License: MIT "https://opensource.org/licenses/MIT"
 */
* {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

/*
 * Copyright (c) 2023 Mostafa Vahabzadeh
 *
 * License: MIT "https://opensource.org/licenses/MIT"
 */
/*
 * Created on Sat Jun 25 2022
 *
 * Copyright (c) 2022 Mostafa Vahabzadeh
 *
 * License: MIT "https://opensource.org/licenses/MIT"
 */
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@keyframes rotation {
  20% {
    transform: rotate(var(--rotation-degree-start));
  }
  50% {
    transform: rotate(var(--rotation-degree-end));
  }
  80% {
    transform: rotate(0deg);
  }
}
@keyframes shakerX {
  10% {
    transform: translateX(var(--shake-size));
  }
  20% {
    transform: translateX(calc(0px - var(--shake-size)));
  }
  30% {
    transform: translateX(var(--shake-size));
  }
  40% {
    transform: translateX(0px);
  }
}
@keyframes shakerY {
  10% {
    transform: translateY(var(--shake-size));
  }
  20% {
    transform: translateY(calc(0px - var(--shake-size)));
  }
  30% {
    transform: translateY(var(--shake-size));
  }
  40% {
    transform: translateY(0px);
  }
}
/*
 * Created on Thu Jul 07 2022
 *
 * Copyright (c) 2022 Mostafa Vahabzadeh
 *
 * License: MIT "https://opensource.org/licenses/MIT"
 */
/*
 * Created on Thu Jul 07 2022
 *
 * Copyright (c) 2022 Mostafa Vahabzadeh
 *
 * License: MIT "https://opensource.org/licenses/MIT"
 */
.sideMenuClickableItem {
  cursor: pointer;
}

.sideMenuContainer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: unset;
  overflow: hidden;
  transition: max-width 0.2s ease-in-out 0s;
  background-color: #555555;
  color: #ffffff;
  font-size: 16px;
  height: 100%;
}

.sideMenuContainerHide {
  max-width: 0px;
}

.sideMenuContainerCompact {
  max-width: 40px;
}

.sideMenuContainerFull {
  max-width: 500px;
}

.sideMenuContainerBottom {
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  align-items: unset;
}
.sideMenuContainerBottom .sideMenuHeader {
  flex-direction: column-reverse;
}

.sideMenuHeader,
.sideMenuItems {
  display: flex;
  flex-direction: row;
  justify-content: unset;
  align-items: unset;
}

.sideMenuHeader {
  font-weight: unset;
}

.sideMenuFull {
  display: flex;
  flex-direction: column;
  justify-content: unset;
  align-items: unset;
  width: 100%;
}

.sideMenuFullHidden {
  display: flex;
  flex-direction: column;
  justify-content: unset;
  align-items: unset;
}

.sideMenuHeaderIcon,
.sideMenuItemIcon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 40px;
  min-width: 40px;
  width: 40px;
}

.sideMenuHeaderText,
.sideMenuItemText {
  display: flex;
  flex-direction: row;
  justify-content: unset;
  align-items: center;
  height: 40px;
  padding: 0px 5px;
  white-space: nowrap;
  width: 100%;
}

.sideMenuHeaderText {
  -webkit-padding-start: 10px;
          padding-inline-start: 10px;
}

.sideMenuItemRtl {
  flex-direction: row-reverse;
  padding-right: 0px;
}

.sideMenuSeparator {
  background-color: #f0f8ff;
  height: 1px;
  width: 100%;
}

.sideMenuItem {
  display: flex;
  flex-direction: row;
  justify-content: unset;
  align-items: unset;
}