@inkline/inkline/components/IHamburgerMenu/css/index.css

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

/**
 * Hamburger menu
 */
.hamburger-menu {
  opacity: var(--hamburger-menu--opacity, 0.75);
  padding: var(--hamburger-menu--padding, var(--hamburger-menu--padding-top, 0) var(--hamburger-menu--padding-right, 0) var(--hamburger-menu--padding-bottom, 0) var(--hamburger-menu--padding-left, 0));
  width: var(--hamburger-menu--bar--width);
  height: calc(var(--hamburger-menu--bar--height) * 3 + var(--hamburger-menu--bar--spacing) * 2);
  display: inline-flex;
  position: relative;
  box-sizing: content-box;
  cursor: pointer;
  transition-property: var(--hamburger-menu--transition-property, background-color, color, border-color);
  transition-duration: var(--hamburger-menu--transition-duration, var(--transition-duration));
  transition-timing-function: var(--hamburger-menu--transition-timing-function, var(--transition-timing-function));
}
.hamburger-menu:hover {
  opacity: var(--hamburger-menu--hover--opacity, 1);
}
.hamburger-menu > .hamburger-menu-bars {
  display: block;
  top: 50%;
  margin-top: calc(var(--hamburger-menu--bar--height) / -2);
}
.hamburger-menu > .hamburger-menu-bars, .hamburger-menu > .hamburger-menu-bars::before, .hamburger-menu > .hamburger-menu-bars::after {
  width: var(--hamburger-menu--bar--width);
  height: var(--hamburger-menu--bar--height);
  border-radius: var(--hamburger-menu--bar--border-radius, var(--border-radius-sm));
  background: var(--hamburger-menu--background);
  position: absolute;
  transition-property: var(--hamburger-menu--bar--transition-property, background-color, transform);
  transition-duration: var(--hamburger-menu--bar--transition-duration, 175ms);
  transition-timing-function: var(--hamburger-menu--bar--transition-timing-function, var(--transition-timing-function));
}
.hamburger-menu > .hamburger-menu-bars::before, .hamburger-menu > .hamburger-menu-bars::after {
  content: "";
  display: block;
}
.hamburger-menu > .hamburger-menu-bars::before {
  top: calc(var(--hamburger-menu--bar--spacing) * -1 + var(--hamburger-menu--bar--height) * -1);
}
.hamburger-menu > .hamburger-menu-bars::after {
  bottom: calc(var(--hamburger-menu--bar--spacing) * -1 + var(--hamburger-menu--bar--height) * -1);
}
.hamburger-menu.-close > .hamburger-menu-bars {
  transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), background var(--hamburger-menu--bar--transition-duration, 175ms) var(--hamburger-menu--bar--transition-timing-function, var(--transition-timing-function));
}
.hamburger-menu.-close > .hamburger-menu-bars::before {
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in, background var(--hamburger-menu--bar--transition-duration, 175ms) var(--hamburger-menu--bar--transition-timing-function, var(--transition-timing-function));
}
.hamburger-menu.-close > .hamburger-menu-bars::after {
  transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), background var(--hamburger-menu--bar--transition-duration, 175ms) var(--hamburger-menu--bar--transition-timing-function, var(--transition-timing-function));
}
.hamburger-menu.-close.-active > .hamburger-menu-bars {
  transform: rotate(225deg);
  transition: transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger-menu.-close.-active > .hamburger-menu-bars::before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.hamburger-menu.-close.-active > .hamburger-menu-bars::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.hamburger-menu.-arrow-left.-active > .hamburger-menu-bars::before {
  transform: translate3d(calc(var(--hamburger-menu--bar--width) * -0.2), 0, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-left.-active > .hamburger-menu-bars::after {
  transform: translate3d(calc(var(--hamburger-menu--bar--width) * -0.2), 0, 0) rotate(45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-right.-active > .hamburger-menu-bars::before {
  transform: translate3d(calc(var(--hamburger-menu--bar--width) * 0.2), 0, 0) rotate(45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-right.-active > .hamburger-menu-bars::after {
  transform: translate3d(calc(var(--hamburger-menu--bar--width) * 0.2), 0, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-up.-active > .hamburger-menu-bars {
  transform: rotate(-90deg);
}
.hamburger-menu.-arrow-up.-active > .hamburger-menu-bars::before {
  transform: translate3d(calc(var(--hamburger-menu--bar--width) * 0.2), 0, 0) rotate(45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-up.-active > .hamburger-menu-bars::after {
  transform: translate3d(calc(var(--hamburger-menu--bar--width) * 0.2), 0, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-down.-active > .hamburger-menu-bars {
  transform: rotate(90deg);
}
.hamburger-menu.-arrow-down.-active > .hamburger-menu-bars::before {
  transform: translate3d(calc(var(--hamburger-menu--bar--width) * 0.2), 0, 0) rotate(45deg) scale(0.7, 1);
}
.hamburger-menu.-arrow-down.-active > .hamburger-menu-bars::after {
  transform: translate3d(calc(var(--hamburger-menu--bar--width) * 0.2), 0, 0) rotate(-45deg) scale(0.7, 1);
}
.hamburger-menu.-minus.-active > .hamburger-menu-bars::before {
  transform: translate3d(0, calc(var(--hamburger-menu--bar--spacing) + var(--hamburger-menu--bar--height)), 0);
}
.hamburger-menu.-minus.-active > .hamburger-menu-bars::after {
  transform: translate3d(0, calc(var(--hamburger-menu--bar--spacing) * -1 + var(--hamburger-menu--bar--height) * -1), 0);
}
.hamburger-menu.-plus.-active > .hamburger-menu-bars::before {
  transform: translate3d(0, calc(var(--hamburger-menu--bar--spacing) + var(--hamburger-menu--bar--height)), 0);
}
.hamburger-menu.-plus.-active > .hamburger-menu-bars::after {
  transform: translate3d(0, calc(var(--hamburger-menu--bar--spacing) * -1 + var(--hamburger-menu--bar--height) * -1), 0) rotate(90deg);
}

/**
 * Color variants
 */
.hamburger-menu.-light {
  --hamburger-menu--background: var(--hamburger-menu--light--background, var(--color-dark));
}
.hamburger-menu.-dark {
  --hamburger-menu--background: var(--hamburger-menu--dark--background, var(--color-light));
}

/**
 * Size variants
 */
.hamburger-menu.-sm {
  --hamburger-menu--bar--width: var(
      --hamburger-menu--sm--bar--width,
      calc(30px * var(--size-multiplier-sm))
  );
  --hamburger-menu--bar--height: var(--hamburger-menu--sm--bar--height, 2px);
  --hamburger-menu--bar--spacing: var(--hamburger-menu--sm--bar--spacing, 4px);
  --hamburger-menu--bar--border-radius: var(--hamburger-menu--sm--bar--border-radius, 1px);
}
.hamburger-menu.-md {
  --hamburger-menu--bar--width: var(
      --hamburger-menu--md--bar--width,
      calc(30px * var(--size-multiplier-md))
  );
  --hamburger-menu--bar--height: var(--hamburger-menu--md--bar--height, 3px);
  --hamburger-menu--bar--spacing: var(--hamburger-menu--md--bar--spacing, 5px);
  --hamburger-menu--bar--border-radius: var(--hamburger-menu--md--bar--border-radius, 2px);
}
.hamburger-menu.-lg {
  --hamburger-menu--bar--width: var(
      --hamburger-menu--lg--bar--width,
      calc(30px * var(--size-multiplier-lg))
  );
  --hamburger-menu--bar--height: var(--hamburger-menu--lg--bar--height, 4px);
  --hamburger-menu--bar--spacing: var(--hamburger-menu--lg--bar--spacing, 6px);
  --hamburger-menu--bar--border-radius: var(--hamburger-menu--lg--bar--border-radius, 3px);
}