@inkline/inkline/components/ICollapsibleItem/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 Item
 */
.collapsible > .collapsible-item {
  position: relative;
  display: block;
  box-shadow: var(--collapsible--box-shadow, var(--collapsible--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--collapsible--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--collapsible--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--collapsible--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--collapsible--box-shadow-color, var(--box-shadow-color)));
}
.collapsible > .collapsible-item > .collapsible-header {
  border-style: var(--collapsible--header--border-style, var(--collapsible--border-style, var(--collapsible--header--border-top-style, var(--collapsible--border-top-style, var(--border-top-style))) var(--collapsible--header--border-right-style, var(--collapsible--border-right-style, var(--border-right-style))) var(--collapsible--header--border-bottom-style, var(--collapsible--border-bottom-style, var(--border-bottom-style))) var(--collapsible--header--border-left-style, var(--collapsible--border-left-style, var(--border-left-style)))));
  border-width: var(--collapsible--header--border-width, var(--collapsible--border-width, var(--collapsible--header--border-top-width, var(--collapsible--border-top-width, var(--border-top-width))) var(--collapsible--header--border-right-width, var(--collapsible--border-right-width, var(--border-right-width))) var(--collapsible--header--border-bottom-width, var(--collapsible--border-bottom-width, var(--border-bottom-width))) var(--collapsible--header--border-left-width, var(--collapsible--border-left-width, var(--border-left-width)))));
  border-color: var(--collapsible--header--border-color, var(--collapsible--border-color, var(--collapsible--header--border-top-color, var(--collapsible--border-top-color, var(--border-top-color))) var(--collapsible--header--border-right-color, var(--collapsible--border-right-color, var(--border-right-color))) var(--collapsible--header--border-bottom-color, var(--collapsible--border-bottom-color, var(--border-bottom-color))) var(--collapsible--header--border-left-color, var(--collapsible--border-left-color, var(--border-left-color)))));
  color: var(--collapsible--header--color, var(--collapsible--color));
  background-color: var(--collapsible--header--background, var(--collapsible--background));
  padding: var(--collapsible--header--padding, var(--collapsible--padding, var(--collapsible--header--padding-top, var(--collapsible--padding-top, var(--padding-top))) var(--collapsible--header--padding-right, var(--collapsible--padding-right, var(--padding-right))) var(--collapsible--header--padding-bottom, var(--collapsible--padding-bottom, var(--padding-bottom))) var(--collapsible--header--padding-left, var(--collapsible--padding-left, var(--padding-left)))));
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  transition-property: var(--collapsible--transition-property, var(--collapsible--transition-property, background-color, border-radius));
  transition-duration: var(--collapsible--transition-duration, var(--collapsible--transition-duration, var(--transition-duration)));
  transition-timing-function: var(--collapsible--transition-timing-function, var(--transition-timing-function));
}
.collapsible > .collapsible-item > .collapsible-header > .icon {
  background-color: var(--collapsible--icon--color, var(--collapsible--header--color, var(--collapsible--color)));
  width: var(--collapsible--icon--size, 12px);
  height: var(--collapsible--icon--size, 12px);
  mask-size: var(--collapsible--icon--size, 12px) var(--collapsible--icon--size, 12px);
  display: inline-block;
  position: relative;
  transform: rotate(-90deg);
  transition-property: var(--collapsible--transition-property, var(--collapsible--transition-property, background-color, transform));
  transition-duration: var(--collapsible--transition-duration, var(--collapsible--transition-duration, var(--transition-duration)));
  transition-timing-function: var(--collapsible--transition-timing-function, var(--transition-timing-function));
  mask-image: url('data:image/svg+xml; utf8, <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><title>chevron-down</title><path d="M26.297 12.625l-11.594 11.578c-0.391 0.391-1.016 0.391-1.406 0l-11.594-11.578c-0.391-0.391-0.391-1.031 0-1.422l2.594-2.578c0.391-0.391 1.016-0.391 1.406 0l8.297 8.297 8.297-8.297c0.391-0.391 1.016-0.391 1.406 0l2.594 2.578c0.391 0.391 0.391 1.031 0 1.422z"></path></svg>');
  -webkit-mask-image: url('data:image/svg+xml; utf8, <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><title>chevron-down</title><path d="M26.297 12.625l-11.594 11.578c-0.391 0.391-1.016 0.391-1.406 0l-11.594-11.578c-0.391-0.391-0.391-1.031 0-1.422l2.594-2.578c0.391-0.391 1.016-0.391 1.406 0l8.297 8.297 8.297-8.297c0.391-0.391 1.016-0.391 1.406 0l2.594 2.578c0.391 0.391 0.391 1.031 0 1.422z"></path></svg>');
  mask-position: center center;
  -webkit-mask-position: center center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}
.collapsible > .collapsible-item > .collapsible-body {
  display: block;
  position: relative;
  border-style: var(--collapsible--body--border-style, var(--collapsible--border-style, var(--collapsible--body--border-top-style, var(--collapsible--border-top-style, var(--border-top-style))) var(--collapsible--body--border-right-style, var(--collapsible--border-right-style, var(--border-right-style))) var(--collapsible--body--border-bottom-style, var(--collapsible--border-bottom-style, var(--border-bottom-style))) var(--collapsible--body--border-left-style, var(--collapsible--border-left-style, var(--border-left-style)))));
  border-width: var(--collapsible--body--border-width, var(--collapsible--border-width, var(--collapsible--body--border-top-width, var(--collapsible--border-top-width, var(--border-top-width))) var(--collapsible--body--border-right-width, var(--collapsible--border-right-width, var(--border-right-width))) var(--collapsible--body--border-bottom-width, var(--collapsible--border-bottom-width, var(--border-bottom-width))) var(--collapsible--body--border-left-width, var(--collapsible--border-left-width, var(--border-left-width)))));
  border-color: var(--collapsible--body--border-color, var(--collapsible--border-color, var(--collapsible--body--border-top-color, var(--collapsible--border-top-color, var(--border-top-color))) var(--collapsible--body--border-right-color, var(--collapsible--border-right-color, var(--border-right-color))) var(--collapsible--body--border-bottom-color, var(--collapsible--border-bottom-color, var(--border-bottom-color))) var(--collapsible--body--border-left-color, var(--collapsible--border-left-color, var(--border-left-color)))));
  color: var(--collapsible--body--color, var(--collapsible--color));
  background-color: var(--collapsible--body--background, var(--collapsible--background));
}
.collapsible > .collapsible-item > .collapsible-body > .content {
  padding: var(--collapsible--body--padding, var(--collapsible--padding, var(--collapsible--body--padding-top, var(--collapsible--padding-top, var(--padding-top))) var(--collapsible--body--padding-right, var(--collapsible--padding-right, var(--padding-right))) var(--collapsible--body--padding-bottom, var(--collapsible--padding-bottom, var(--padding-bottom))) var(--collapsible--body--padding-left, var(--collapsible--padding-left, var(--padding-left)))));
}
.collapsible > .collapsible-item:first-of-type > .collapsible-header {
  border-top-left-radius: var(--collapsible--header--border-top-left-radius, var(--collapsible--border-top-left-radius, var(--border-top-left-radius)));
  border-top-right-radius: var(--collapsible--header--border-top-right-radius, var(--collapsible--border-top-right-radius, var(--border-top-right-radius)));
}
.collapsible > .collapsible-item:last-of-type > .collapsible-header {
  border-bottom-left-radius: var(--collapsible--header--border-bottom-left-radius, var(--collapsible--border-bottom-left-radius, var(--border-bottom-left-radius)));
  border-bottom-right-radius: var(--collapsible--header--border-bottom-right-radius, var(--collapsible--border-bottom-right-radius, var(--border-bottom-right-radius)));
}
.collapsible > .collapsible-item:last-of-type > .collapsible-body {
  border-bottom-left-radius: var(--collapsible--body--border-bottom-left-radius, var(--collapsible--border-bottom-left-radius, var(--border-bottom-left-radius)));
  border-bottom-right-radius: var(--collapsible--body--border-bottom-right-radius, var(--collapsible--border-bottom-right-radius, var(--border-bottom-right-radius)));
}
.collapsible > .collapsible-item.-active > .collapsible-header {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.collapsible > .collapsible-item.-active > .collapsible-header > .icon {
  transform: rotate(0deg);
}
.collapsible > .collapsible-item + .collapsible-item > .collapsible-header {
  border-top-width: 0;
}