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

/**
 * Card
 */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border-radius: var(--card--border-radius, var(--card--border-top-left-radius, var(--border-top-left-radius)) var(--card--border-top-right-radius, var(--border-top-right-radius)) var(--card--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--card--border-bottom-left-radius, var(--border-bottom-left-radius)));
  font-size: var(--card--font-size, var(--font-size));
  box-shadow: var(--card--box-shadow, var(--card--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--card--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--card--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--card--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--card--box-shadow-color, var(--box-shadow-color)));
  transition-property: var(--card--transition-property, var(--card--transition-property, background-color));
  transition-duration: var(--card--transition-duration, var(--card--transition-duration, var(--transition-duration)));
  transition-timing-function: var(--card--transition-timing-function, var(--transition-timing-function));
}
.card > .card-header {
  color: var(--card--header--color, var(--card--color));
  background: var(--card--header--background, var(--card--background));
  border-style: var(--card--header--border-style, var(--card--header--border-top-style, var(--card--border-top-style, var(--border-top-style))) var(--card--header--border-right-style, var(--card--border-right-style, var(--border-right-style))) var(--card--header--border-bottom-style, var(--card--border-bottom-style, var(--border-bottom-style))) var(--card--header--border-left-style, var(--card--border-left-style, var(--border-left-style))));
  border-width: var(--card--header--border-width, var(--card--header--border-top-width, var(--card--border-top-width, var(--border-top-width))) var(--card--header--border-right-width, var(--card--border-right-width, var(--border-right-width))) var(--card--header--border-bottom-width, var(--card--border-bottom-width, var(--border-bottom-width))) var(--card--header--border-left-width, var(--card--border-left-width, var(--border-left-width))));
  border-color: var(--card--header--border-color, var(--card--header--border-top-color, var(--card--border-top-color, var(--border-top-color))) var(--card--header--border-right-color, var(--card--border-right-color, var(--border-right-color))) var(--card--header--border-bottom-color, var(--card--border-bottom-color, var(--border-bottom-color))) var(--card--header--border-left-color, var(--card--border-left-color, var(--border-left-color))));
  padding: var(--card--header--padding, var(--card--header--padding-top, var(--card--padding-top, var(--padding-top))) var(--card--header--padding-right, var(--card--padding-right, var(--padding-right))) var(--card--header--padding-bottom, var(--card--padding-bottom, var(--padding-bottom))) var(--card--header--padding-left, var(--card--padding-left, var(--padding-left))));
  border-bottom-width: 0;
  margin-bottom: 0;
  transition-property: var(--card--header--transition-property, var(--card--transition-property, border-color));
  transition-duration: var(--card--header--transition-duration, var(--card--transition-duration, var(--transition-duration)));
  transition-timing-function: var(--card--header--transition-timing-function, var(--card--transition-timing-function, var(--transition-timing-function)));
}
.card > .card-header > h1,
.card > .card-header > h2,
.card > .card-header > h3,
.card > .card-header > h4,
.card > .card-header > h5,
.card > .card-header > h6,
.card > .card-header > p,
.card > .card-header > .h1,
.card > .card-header > .h2,
.card > .card-header > .h3,
.card > .card-header > .h4,
.card > .card-header > .h5,
.card > .card-header > .h6,
.card > .card-header > .p {
  margin-bottom: 0;
  margin-top: 0;
}
.card > .card-header + img,
.card > .card-header + .card-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.card > .card-header + .list-group .list-group-item:first-of-type {
  border-top: 0;
}
.card > .card-header:first-of-type {
  border-top-left-radius: var(--card--header--border-top-left-radius, var(--card--border-top-left-radius));
  border-top-right-radius: var(--card--header--border-top-right-radius, var(--card--border-top-right-radius));
}
.card > .card-body {
  flex: 1 1 auto;
  background: var(--card--body--background, var(--card--background));
  border-style: var(--card--body--border-style, var(--card--body--border-top-style, var(--card--border-top-style, var(--border-top-style))) var(--card--body--border-right-style, var(--card--border-right-style, var(--border-right-style))) var(--card--body--border-bottom-style, var(--card--border-bottom-style, var(--border-bottom-style))) var(--card--body--border-left-style, var(--card--border-left-style, var(--border-left-style))));
  border-width: var(--card--body--border-width, var(--card--body--border-top-width, var(--card--border-top-width, var(--border-top-width))) var(--card--body--border-right-width, var(--card--border-right-width, var(--border-right-width))) var(--card--body--border-bottom-width, var(--card--border-bottom-width, var(--border-bottom-width))) var(--card--body--border-left-width, var(--card--border-left-width, var(--border-left-width))));
  border-color: var(--card--body--border-color, var(--card--body--border-top-color, var(--card--border-top-color, var(--border-top-color))) var(--card--body--border-right-color, var(--card--border-right-color, var(--border-right-color))) var(--card--body--border-bottom-color, var(--card--border-bottom-color, var(--border-bottom-color))) var(--card--body--border-left-color, var(--card--border-left-color, var(--border-left-color))));
  border-radius: var(--card--body--border-radius, var(--card--body--border-top-left-radius, var(--card--border-top-left-radius, var(--border-top-left-radius))) var(--card--body--border-top-right-radius, var(--card--border-top-right-radius, var(--border-top-right-radius))) var(--card--body--border-bottom-right-radius, var(--card--border-bottom-right-radius, var(--border-bottom-right-radius))) var(--card--body--border-bottom-left-radius, var(--card--border-bottom-left-radius, var(--border-bottom-left-radius))));
  padding: var(--card--body--padding, var(--card--body--padding-top, var(--card--padding-top, var(--padding-top))) var(--card--body--padding-right, var(--card--padding-right, var(--padding-right))) var(--card--body--padding-bottom, var(--card--padding-bottom, var(--padding-bottom))) var(--card--body--padding-left, var(--card--padding-left, var(--padding-left))));
  color: var(--card--body--color, var(--card--color));
  transition-property: var(--card--body--transition-property, var(--card--transition-property, border-color));
  transition-duration: var(--card--body--transition-duration, var(--card--transition-duration, var(--transition-duration)));
  transition-timing-function: var(--card--body--transition-timing-function, var(--card--transition-timing-function, var(--transition-timing-function)));
}
.card > .card-body:not(:first-child) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.card > .card-body:not(:last-child) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.card > .card-footer {
  background: var(--card--footer--background, var(--card--background));
  border-style: var(--card--footer--border-style, var(--card--footer--border-top-style, var(--card--border-top-style, var(--border-top-style))) var(--card--footer--border-right-style, var(--card--border-right-style, var(--border-right-style))) var(--card--footer--border-bottom-style, var(--card--border-bottom-style, var(--border-bottom-style))) var(--card--footer--border-left-style, var(--card--border-left-style, var(--border-left-style))));
  border-width: var(--card--footer--border-width, var(--card--footer--border-top-width, var(--card--border-top-width, var(--border-top-width))) var(--card--footer--border-right-width, var(--card--border-right-width, var(--border-right-width))) var(--card--footer--border-bottom-width, var(--card--border-bottom-width, var(--border-bottom-width))) var(--card--footer--border-left-width, var(--card--border-left-width, var(--border-left-width))));
  border-color: var(--card--footer--border-color, var(--card--footer--border-top-color, var(--card--border-top-color, var(--border-top-color))) var(--card--footer--border-right-color, var(--card--border-right-color, var(--border-right-color))) var(--card--footer--border-bottom-color, var(--card--border-bottom-color, var(--border-bottom-color))) var(--card--footer--border-left-color, var(--card--border-left-color, var(--border-left-color))));
  padding: var(--card--footer--padding, var(--card--footer--padding-top, var(--card--padding-top, var(--padding-top))) var(--card--footer--padding-right, var(--card--padding-right, var(--padding-right))) var(--card--footer--padding-bottom, var(--card--padding-bottom, var(--padding-bottom))) var(--card--footer--padding-left, var(--card--padding-left, var(--padding-left))));
  color: var(--card--footer--color, var(--card--color));
  border-top-width: 0;
  transition-property: var(--card--footer--transition-property, var(--card--transition-property, border-color));
  transition-duration: var(--card--footer--transition-duration, var(--card--transition-duration, var(--transition-duration)));
  transition-timing-function: var(--card--footer--transition-timing-function, var(--card--transition-timing-function, var(--transition-timing-function)));
  border-bottom-left-radius: var(--card--footer--border-bottom-left-radius, var(--card--border-bottom-left-radius));
  border-bottom-right-radius: var(--card--footer--border-bottom-right-radius, var(--card--border-bottom-right-radius));
}
.card > img {
  width: 100%;
  border-top-left-radius: var(--card--img--border-top-left-radius, var(--card--border-top-left-radius, var(--border-top-left-radius)));
  border-top-right-radius: var(--card--img--border-top-right-radius, var(--card--border-top-right-radius, var(--border-top-right-radius)));
}
.card > hr {
  margin-right: 0;
  margin-left: 0;
}
.card > .list-group:first-of-type,
.card .list-group-item:first-of-type {
  border-top-left-radius: var(--card--list-group--border-top-left-radius, var(--card--border-top-left-radius));
  border-top-right-radius: var(--card--list-group--border-top-right-radius, var(--card--border-top-right-radius));
}
.card > .list-group:last-of-type,
.card .list-group-item:last-of-type {
  border-bottom-left-radius: var(--card--list-group--border-bottom-left-radius, var(--card--border-bottom-left-radius));
  border-bottom-right-radius: var(--card--list-group--border-bottom-right-radius, var(--card--border-bottom-right-radius));
}

/**
 * Color variants
 */
.card.-primary {
  --card--background: var(--card--primary--background, var(--color-primary));
  --card--border-top-color: var(
      --card--primary--border-top-color,
      var(--color-primary-shade-50)
  );
  --card--border-right-color: var(
      --card--primary--border-right-color,
      var(--color-primary-shade-50)
  );
  --card--border-bottom-color: var(
      --card--primary--border-bottom-color,
      var(--color-primary-shade-50)
  );
  --card--border-left-color: var(
      --card--primary--border-left-color,
      var(--color-primary-shade-50)
  );
  --card--color: var(--card--primary--color, var(--contrast-text-color-primary));
  --card--header--background: var(
      --card--primary--header--background,
      var(--color-primary-shade-50)
  );
  --card--footer--background: var(
      --card--primary--footer--background,
      var(--color-primary-shade-50)
  );
}
.card.-secondary {
  --card--background: var(--card--secondary--background, var(--color-secondary));
  --card--border-top-color: var(
      --card--secondary--border-top-color,
      var(--color-secondary-shade-50)
  );
  --card--border-right-color: var(
      --card--secondary--border-right-color,
      var(--color-secondary-shade-50)
  );
  --card--border-bottom-color: var(
      --card--secondary--border-bottom-color,
      var(--color-secondary-shade-50)
  );
  --card--border-left-color: var(
      --card--secondary--border-left-color,
      var(--color-secondary-shade-50)
  );
  --card--color: var(--card--secondary--color, var(--contrast-text-color-secondary));
  --card--header--background: var(
      --card--secondary--header--background,
      var(--color-secondary-shade-50)
  );
  --card--footer--background: var(
      --card--secondary--footer--background,
      var(--color-secondary-shade-50)
  );
}
.card.-light {
  --card--background: var(--card--light--background, var(--color-white));
  --card--border-top-color: var(--card--light--border-top-color, var(--color-light-shade-50));
  --card--border-right-color: var(
      --card--light--border-right-color,
      var(--color-light-shade-50)
  );
  --card--border-bottom-color: var(
      --card--light--border-bottom-color,
      var(--color-light-shade-50)
  );
  --card--border-left-color: var(
      --card--light--border-left-color,
      var(--color-light-shade-50)
  );
  --card--color: var(--card--light--color, var(--contrast-text-color-light));
  --card--header--background: var(--card--light--header--background, var(--color-light-250));
  --card--footer--background: var(--card--light--footer--background, var(--color-light-250));
}
.card.-dark {
  --card--background: var(--card--dark--background, var(--color-dark));
  --card--border-top-color: var(--card--dark--border-top-color, var(--color-dark-tint-50));
  --card--border-right-color: var(
      --card--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --card--border-bottom-color: var(
      --card--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --card--border-left-color: var(--card--dark--border-left-color, var(--color-dark-tint-50));
  --card--color: var(--card--dark--color, var(--contrast-text-color-dark));
  --card--header--background: var(
      --card--dark--header--background,
      var(--color-dark-tint-50)
  );
  --card--footer--background: var(
      --card--dark--footer--background,
      var(--color-dark-tint-50)
  );
}
.card.-info {
  --card--background: var(--card--info--background, var(--color-info));
  --card--border-top-color: var(--card--info--border-top-color, var(--color-info-shade-50));
  --card--border-right-color: var(
      --card--info--border-right-color,
      var(--color-info-shade-50)
  );
  --card--border-bottom-color: var(
      --card--info--border-bottom-color,
      var(--color-info-shade-50)
  );
  --card--border-left-color: var(--card--info--border-left-color, var(--color-info-shade-50));
  --card--color: var(--card--info--color, var(--contrast-text-color-info));
  --card--header--background: var(
      --card--info--header--background,
      var(--color-info-shade-50)
  );
  --card--footer--background: var(
      --card--info--footer--background,
      var(--color-info-shade-50)
  );
}
.card.-success {
  --card--background: var(--card--success--background, var(--color-success));
  --card--border-top-color: var(
      --card--success--border-top-color,
      var(--color-success-shade-50)
  );
  --card--border-right-color: var(
      --card--success--border-right-color,
      var(--color-success-shade-50)
  );
  --card--border-bottom-color: var(
      --card--success--border-bottom-color,
      var(--color-success-shade-50)
  );
  --card--border-left-color: var(
      --card--success--border-left-color,
      var(--color-success-shade-50)
  );
  --card--color: var(--card--success--color, var(--contrast-text-color-success));
  --card--header--background: var(
      --card--success--header--background,
      var(--color-success-shade-50)
  );
  --card--footer--background: var(
      --card--success--footer--background,
      var(--color-success-shade-50)
  );
}
.card.-warning {
  --card--background: var(--card--warning--background, var(--color-warning));
  --card--border-top-color: var(
      --card--warning--border-top-color,
      var(--color-warning-shade-50)
  );
  --card--border-right-color: var(
      --card--warning--border-right-color,
      var(--color-warning-shade-50)
  );
  --card--border-bottom-color: var(
      --card--warning--border-bottom-color,
      var(--color-warning-shade-50)
  );
  --card--border-left-color: var(
      --card--warning--border-left-color,
      var(--color-warning-shade-50)
  );
  --card--color: var(--card--warning--color, var(--contrast-text-color-warning));
  --card--header--background: var(
      --card--warning--header--background,
      var(--color-warning-shade-50)
  );
  --card--footer--background: var(
      --card--warning--footer--background,
      var(--color-warning-shade-50)
  );
}
.card.-danger {
  --card--background: var(--card--danger--background, var(--color-danger));
  --card--border-top-color: var(
      --card--danger--border-top-color,
      var(--color-danger-shade-50)
  );
  --card--border-right-color: var(
      --card--danger--border-right-color,
      var(--color-danger-shade-50)
  );
  --card--border-bottom-color: var(
      --card--danger--border-bottom-color,
      var(--color-danger-shade-50)
  );
  --card--border-left-color: var(
      --card--danger--border-left-color,
      var(--color-danger-shade-50)
  );
  --card--color: var(--card--danger--color, var(--contrast-text-color-danger));
  --card--header--background: var(
      --card--danger--header--background,
      var(--color-danger-shade-50)
  );
  --card--footer--background: var(
      --card--danger--footer--background,
      var(--color-danger-shade-50)
  );
}

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