@inkline/inkline/components/INav/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.

/**
 * Nav
 */
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav.-vertical {
  flex-direction: column;
  align-items: flex-start;
}

/**
 * Color variants
 */
.nav.-light {
  --nav--color: var(--nav--light--color, var(--contrast-text-color-light));
  --nav--active--color: var(--nav--light--active--color, var(--contrast-text-color-light));
  --nav--disabled--color: var(--nav--light--disabled--color, var(--text-color-weak));
}
.nav.-dark {
  --nav--color: var(--nav--dark--color, var(--contrast-text-color-dark));
  --nav--active--color: var(--nav--primary--active--color, var(--contrast-text-color-dark));
  --nav--disabled--color: var(--nav--dark--disabled--color, var(--text-color-weak));
}

/**
 * Size variants
 */
.nav.-sm {
  --nav--font-size: var(
      --nav--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --nav--padding-top: var(
      --nav--sm--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-sm))
  );
  --nav--padding-right: var(
      --nav--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --nav--padding-bottom: var(
      --nav--sm--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-sm))
  );
  --nav--padding-left: var(
      --nav--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
}
.nav.-md {
  --nav--font-size: var(
      --nav--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --nav--padding-top: var(
      --nav--md--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-md))
  );
  --nav--padding-right: var(
      --nav--md--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --nav--padding-bottom: var(
      --nav--md--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-md))
  );
  --nav--padding-left: var(
      --nav--md--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
}
.nav.-lg {
  --nav--font-size: var(
      --nav--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --nav--padding-top: var(
      --nav--lg--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-lg))
  );
  --nav--padding-right: var(
      --nav--lg--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --nav--padding-bottom: var(
      --nav--lg--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-lg))
  );
  --nav--padding-left: var(
      --nav--lg--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
}