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

/**
 * Breakpoint mixins
 */
.table-wrapper {
  display: block;
  position: relative;
}
@media screen and (max-width: 575.99px) {
  .table-wrapper.-responsive-xs {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .table-wrapper.-responsive-xs .table.-border {
    border: none;
  }
}
@media screen and (max-width: 767.99px) {
  .table-wrapper.-responsive-sm {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .table-wrapper.-responsive-sm .table.-border {
    border: none;
  }
}
@media screen and (max-width: 991.99px) {
  .table-wrapper.-responsive-md {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .table-wrapper.-responsive-md .table.-border {
    border: none;
  }
}
@media screen and (max-width: 1199.99px) {
  .table-wrapper.-responsive-lg {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .table-wrapper.-responsive-lg .table.-border {
    border: none;
  }
}
@media screen and (max-width: 1399.99px) {
  .table-wrapper.-responsive-xl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  .table-wrapper.-responsive-xl .table.-border {
    border: none;
  }
}
.table-wrapper.-responsive-2xl {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.table-wrapper.-responsive-2xl .table.-border {
  border: none;
}
.table-wrapper .table {
  width: 100%;
  max-width: 100%;
  margin-bottom: var(--table--margin-bottom, var(--margin-bottom));
  border-top-color: var(--table--border-color, var(--table--border-top-color, var(--border-top-color)) var(--table--border-right-color, var(--border-right-color)) var(--table--border-bottom-color, var(--border-bottom-color)) var(--table--border-left-color, var(--border-left-color)));
  color: var(--table--color);
}
.table-wrapper .table th,
.table-wrapper .table td {
  padding: var(--table--padding, var(--table--padding-top, var(--padding-top)) var(--table--padding-right, var(--padding-right)) var(--table--padding-bottom, var(--padding-bottom)) var(--table--padding-left, var(--padding-left)));
  vertical-align: top;
  border-style: var(--table--border-style, var(--table--border-top-style, var(--border-top-style)) var(--table--border-right-style, var(--border-right-style)) var(--table--border-bottom-style, var(--border-bottom-style)) var(--table--border-left-style, var(--border-left-style)));
  border-color: var(--table--border-color, var(--table--border-top-color, var(--border-top-color)) var(--table--border-right-color, var(--border-right-color)) var(--table--border-bottom-color, var(--border-bottom-color)) var(--table--border-left-color, var(--border-left-color)));
  border-width: var(--table--border-width, var(--table--border-top-width, 0) var(--table--border-right-width, 0) var(--table--border-bottom-width, var(--border-bottom-width)) var(--table--border-left-width, 0));
  background-color: var(--table--background);
  transition-duration: var(--table--transition-duration, var(--transition-duration));
  transition-timing-function: var(--table--transition-timing-function, var(--transition-timing-function));
  transition-property: var(--table--transition-property, color, background-color, border);
}
.table-wrapper .table thead th {
  vertical-align: bottom;
  border-bottom-width: var(--table--thead--th--border-bottom-width, var(--table--border-bottom-width, var(--border-bottom-width)));
}
.table-wrapper .table tbody + tbody {
  border-top-style: var(--table--tbody--adjacent--border-top-style, solid);
  border-top-width: var(--table--tbody--adjacent--border-top-width, var(--table--border-top-width, var(--border-top-width)));
  border-top-color: var(--table--tbody--adjacent--border-top-color, transparent);
}
.table-wrapper .table th,
.table-wrapper .table td,
.table-wrapper .table tbody + tbody {
  border-color: var(--table--border-color, var(--table--border-top-color, var(--border-top-color)) var(--table--border-right-color, var(--border-right-color)) var(--table--border-bottom-color, var(--border-bottom-color)) var(--table--border-left-color, var(--border-left-color)));
}
.table-wrapper.-condensed .table th,
.table-wrapper.-condensed .table td {
  padding: var(--table--condensed--padding, var(--table--condensed--padding-top, calc(var(--table--padding-top, var(--padding-top)) * 0.5)) var(--table--condensed--padding-right, calc(var(--table--padding-right, var(--padding-right)) * 0.5)) var(--table--condensed--padding-bottom, calc(var(--table--padding-bottom, var(--padding-bottom)) * 0.5)) var(--table--condensed--padding-left, calc(var(--table--padding-left, var(--padding-left)) * 0.5)));
}
.table-wrapper.-border .table {
  border-style: var(--table--border-style, var(--table--border-top-style, var(--border-top-style)) var(--table--border-right-style, var(--border-right-style)) var(--table--border-bottom-style, var(--border-bottom-style)) var(--table--border-left-style, var(--border-left-style)));
  border-color: var(--table--border-color, var(--table--border-top-color, var(--border-top-color)) var(--table--border-right-color, var(--border-right-color)) var(--table--border-bottom-color, var(--border-bottom-color)) var(--table--border-left-color, var(--border-left-color)));
  border-width: var(--table--border-width, var(--table--border-top-width, var(--border-top-width)) var(--table--border-right-width, var(--border-right-width)) var(--table--border-bottom-width, var(--border-bottom-width)) var(--table--border-left-width, var(--border-left-width)));
}
.table-wrapper.-border .table th,
.table-wrapper.-border .table td {
  border-style: var(--table--border-style, var(--table--border-top-style, var(--border-top-style)) var(--table--border-right-style, var(--border-right-style)) var(--table--border-bottom-style, var(--border-bottom-style)) var(--table--border-left-style, var(--border-left-style)));
  border-color: var(--table--border-color, var(--table--border-top-color, var(--border-top-color)) var(--table--border-right-color, var(--border-right-color)) var(--table--border-bottom-color, var(--border-bottom-color)) var(--table--border-left-color, var(--border-left-color)));
  border-width: var(--table--border-width, var(--table--border-top-width, var(--border-top-width)) var(--table--border-right-width, var(--border-right-width)) var(--table--border-bottom-width, var(--border-bottom-width)) var(--table--border-left-width, var(--border-left-width)));
}
.table-wrapper.-nowrap .table th,
.table-wrapper.-nowrap .table td {
  white-space: nowrap;
}
.table-wrapper.-striped .table > tr:nth-of-type(odd) th,
.table-wrapper.-striped .table > tr:nth-of-type(odd) td,
.table-wrapper.-striped .table tbody > tr:nth-of-type(odd) th,
.table-wrapper.-striped .table tbody > tr:nth-of-type(odd) td {
  background: var(--table--striped--background);
}
.table-wrapper.-hover .table tbody tr th,
.table-wrapper.-hover .table tbody tr td {
  transition-property: var(--table--transition-property, color, background-color, border);
  transition-duration: var(--table--transition-duration, var(--transition-duration));
  transition-timing-function: var(--table--transition-timing-function, var(--transition-timing-function));
}
.table-wrapper.-hover .table tbody tr:hover th,
.table-wrapper.-hover .table tbody tr:hover td {
  background: var(--table--hover--background);
}

/**
 * Color variants
 */
.table-wrapper.-primary {
  --table--background: var(--table--primary--background, var(--color-primary));
  --table--hover--background: var(
      --table--primary--hover--background,
      var(--color-primary-shade-100)
  );
  --table--striped--background: var(
      --table--primary--striped--background,
      var(--color-primary-shade-50)
  );
  --table--border-color: var(--table--primary--border-color, var(--color-primary-shade-50));
  --table--color: var(--table--primary--color, var(--contrast-text-color-primary));
}
.table-wrapper.-secondary {
  --table--background: var(--table--secondary--background, var(--color-secondary));
  --table--hover--background: var(
      --table--secondary--hover--background,
      var(--color-secondary-shade-100)
  );
  --table--striped--background: var(
      --table--secondary--striped--background,
      var(--color-secondary-shade-50)
  );
  --table--border-color: var(
      --table--secondary--border-color,
      var(--color-secondary-shade-50)
  );
  --table--color: var(--table--secondary--color, var(--contrast-text-color-secondary));
}
.table-wrapper.-light {
  --table--background: var(--table--light--background, var(--color-white));
  --table--hover--background: var(--table--light--hover--background, var(--color-gray-100));
  --table--striped--background: var(
      --table--light--striped--background,
      var(--color-gray-50)
  );
  --table--border-color: var(--table--light--border-color, var(--color-gray-50));
  --table--color: var(--table--light--color, var(--contrast-text-color-light));
}
.table-wrapper.-dark {
  --table--background: var(--table--dark--background, var(--color-dark));
  --table--hover--background: var(
      --table--dark--hover--background,
      var(--color-dark-tint-100)
  );
  --table--striped--background: var(
      --table--dark--striped--background,
      var(--color-dark-tint-50)
  );
  --table--border-color: var(--table--dark--border-color, var(--color-dark-tint-50));
  --table--color: var(--table--dark--color, var(--contrast-text-color-dark));
}
.table-wrapper.-info {
  --table--background: var(--table--info--background, var(--color-info));
  --table--hover--background: var(
      --table--hover--info--background,
      var(--color-info-shade-100)
  );
  --table--striped--background: var(
      --table--info--striped--background,
      var(--color-info-shade-50)
  );
  --table--border-color: var(--table--info--border-color, var(--color-info-shade-50));
  --table--color: var(--table--info--color, var(--contrast-text-color-info));
}
.table-wrapper.-success {
  --table--background: var(--table--success--background, var(--color-success));
  --table--hover--background: var(
      --table--success--hover--background,
      var(--color-success-shade-100)
  );
  --table--striped--background: var(
      --table--success--striped--background,
      var(--color-success-shade-50)
  );
  --table--border-color: var(--table--success--border-color, var(--color-success-shade-50));
  --table--color: var(--table--success--color, var(--contrast-text-color-success));
}
.table-wrapper.-warning {
  --table--background: var(--table--warning--background, var(--color-warning));
  --table--hover--background: var(
      --table--warning--hover--background,
      var(--color-warning-shade-100)
  );
  --table--striped--background: var(
      --table--warning--striped--background,
      var(--color-warning-shade-50)
  );
  --table--border-color: var(--table--warning--border-color, var(--color-warning-shade-50));
  --table--color: var(--table--warning--color, var(--contrast-text-color-warning));
}
.table-wrapper.-danger {
  --table--background: var(--table--danger--background, var(--color-danger));
  --table--hover--background: var(
      --table--danger--hover--background,
      var(--color-danger-shade-100)
  );
  --table--striped--background: var(
      --table--danger--striped--background,
      var(--color-danger-shade-50)
  );
  --table--border-color: var(--table--danger--border-color, var(--color-danger-shade-50));
  --table--color: var(--table--danger--color, var(--contrast-text-color-danger));
}