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

/**
 * Breadcrumb
 */
.breadcrumb {
  display: flex;
  margin-bottom: var(--breadcrumb--margin-bottom, var(--margin-bottom));
  font-size: var(--breadcrumb--font-size, var(--font-size));
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
}

/**
 * Color variants
 */
.breadcrumb.-light {
  --breadcrumb--color: var(--breadcrumb--light--color, var(--color-dark));
  --breadcrumb--link--color: var(--breadcrumb--light--link--color, var(--color-primary));
  --breadcrumb--active--color: var(--breadcrumb--light--active--color, var(--color-gray-500));
}
.breadcrumb.-dark {
  --breadcrumb--color: var(--breadcrumb--dark--color, var(--color-light));
  --breadcrumb--link--color: var(--breadcrumb--dark--link--color, var(--color-primary));
  --breadcrumb--active--color: var(--breadcrumb--dark--active--color, var(--color-gray-500));
}

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