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

/**
 * Collapsible
 */
.collapsible {
  position: relative;
  display: block;
  font-size: var(--collapsible--font-size, var(--font-size));
}

/**
 * Color variants
 */
.collapsible.-light {
  --collapsible--background: var(--collapsible--light--background, var(--color-light));
  --collapsible--border-top-color: var(
      --collapsible--light--border-top-color,
      var(--color-light-shade-50)
  );
  --collapsible--border-right-color: var(
      --collapsible--light--border-right-color,
      var(--color-light-shade-50)
  );
  --collapsible--border-bottom-color: var(
      --collapsible--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --collapsible--border-left-color: var(
      --collapsible--light--border-left-color,
      var(--color-light-shade-50)
  );
  --collapsible--color: var(--collapsible--light--color, var(--contrast-text-color-light));
  --collapsible--body--background: var(
      --collapsible--light--body--background,
      var(--color-white)
  );
}
.collapsible.-dark {
  --collapsible--background: var(--collapsible--dark--background, var(--color-dark));
  --collapsible--border-top-color: var(
      --collapsible--dark--border-top-color,
      var(--color-dark-tint-50)
  );
  --collapsible--border-right-color: var(
      --collapsible--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --collapsible--border-bottom-color: var(
      --collapsible--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --collapsible--border-left-color: var(
      --collapsible--dark--border-left-color,
      var(--color-dark-tint-50)
  );
  --collapsible--color: var(--collapsible--dark--color, var(--contrast-text-color-dark));
  --collapsible--body--background: var(
      --collapsible--dark--body--background,
      var(--color-dark-tint-50)
  );
}
.collapsible.-transparent {
  --collapsible--background: var(--collapsible--transparent--background, transparent);
  --collapsible--border-top-color: var(
      --collapsible--transparent--border-top-color,
      transparent
  );
  --collapsible--border-right-color: var(
      --collapsible--transparent--border-right-color,
      transparent
  );
  --collapsible--border-bottom-color: var(
      --collapsible--transparent--border-bottom-color,
      transparent
  );
  --collapsible--border-left-color: var(
      --collapsible--transparent--border-left-color,
      transparent
  );
  --collapsible--color: var(--collapsible--transparent--color, inherit);
  --collapsible--body--background: var(
      --collapsible--transparent--body--background,
      transparent
  );
  --collapsible--box-shadow-color: transparent;
}
.light-theme .collapsible.-transparent, .-light .collapsible.-transparent {
  --collapsible--icon--color: var(
      --collapsible--transparent--icon--light--color,
      var(--color-dark)
  );
}
.dark-theme .collapsible.-transparent, .-dark .collapsible.-transparent {
  --collapsible--icon--color: var(
      --collapsible--transparent--icon--dark--color,
      var(--color-light)
  );
}

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