@kelvininc/ui-components/dist/collection/components/tree-item/tree-item.night.css

Kelvin UI Components

/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
:host {
  /**
   * @prop --node-width: Tree Node height.
   * @prop --node-height: Tree Node height.
   * @prop --node-gap: Gap between child nodes in px.

   * @prop --connector-lines-color: Line color of children's connectors.
   * @prop --vertical-lines-height: Line height of children's connectors.

   * @prop --children-offset: Offset of the child nodes in px.
   * @prop --children-margin-top: Margin top of children in px.
   * @prop --children-margin-left: Margin left of the children in px.
   * @prop --children-padding-left: Padding left of the children in px.

   * @prop --background-color-default: Background color when state is default.
   * @prop --background-color-focused: Background color when state is focused.
   * @prop --background-color-disabled: Background color when state is disabled.
   * @prop --background-color-highlighted: Background color when state is highlighted.

   * @prop --border-color-default: Border color when state is default.
   * @prop --border-color-disabled: Border color when state is disabled.
   * @prop --border-color-selected: Border color when state is selected.
   * @prop --border-color-highlighted: Border color when state is highlighted.

   * @prop --icon-color-default: Node icon color when node state is default.
   * @prop --icon-color-disabled: Node icon color when node state is disabled.
   * @prop --icon-color-selected: Node icon color when node state is selected.
   * @prop --icon-color-no-filled: Node icon color when node state is no-filled.
   * @prop --node-icon-width: Node icon width in px.
   * @prop --node-icon-height: Node icon height in px.

   * @prop --title-color-default: Node title color when node state is default.
   * @prop --title-color-disabled: Node title color when node state is disabled.
   * @prop --title-color-selected: Node title color when node state is selected.
   * @prop --title-color-no-filled: Node title color when node state is not filled.

   * @prop --sub-title-color-default: Node sub-title color when node state is default.
   * @prop --sub-title-color-disabled: Node sub-title color when node state is disabled.
   * @prop --sub-title-color-no-filled: Node sub-title color when node state is not filled.
   */
  --node-width: 300px;
  --node-height: 40px;
  --node-gap: var(--kv-spacing-2x, 8px);
  --children-offset: var(--kv-spacing-3x, 12px);
  --vertical-lines-height: calc(var(--private-vertical-line-height) + var(--private-node-gap));
  --horizontal-lines-width: calc(var(--private-left-shift) - 2px);
  --children-margin-top: var(--node-gap);
  --children-padding-left: var(--kv-spacing-2x, 8px);
  --children-margin-left: 0;
  --border-radius: 2px;
  --node-icon-width: 24px;
  --node-icon-height: 24px;
  /* stylelint-disable-next-line length-zero-no-unit */
  --private-left-shift: 0px;
  --private-node-gap: 0;
  --private-vertical-line-height: 0;
  --private-padding-left: 0;
}
:host kv-icon {
  --icon-width: var(--node-icon-width);
  --icon-height: var(--node-icon-height);
}
:host .node-container {
  position: relative;
  user-select: none;
}
:host .node-container::after {
  content: "";
  position: absolute;
  border-left: 1px dashed var(--connector-lines-color);
  height: var(--vertical-lines-height);
  width: 0;
  top: calc(-1 * var(--private-node-gap));
  margin-left: calc(var(--children-margin-left) - var(--private-left-shift));
}
:host .children {
  margin-left: var(--children-margin-left);
  padding-left: var(--private-padding-left);
}
:host .children ::slotted(kv-tree-item) {
  --private-left-shift: var(--children-offset);
  --private-node-gap: var(--node-gap);
  --private-vertical-line-height: 100%;
  --children-margin-left: calc(var(--kv-spacing-5x, 20px) + var(--private-left-shift));
  --private-padding-left: var(--children-padding-left);
}
:host .children ::slotted(kv-tree-item:last-child) {
  --private-vertical-line-height: calc(var(--node-height) / 2 +4px);
}
:host .node-loading {
  display: flex;
  width: 100%;
  height: 100%;
}
:host .node-wrapper {
  position: relative;
  display: flex;
  width: var(--node-width);
  height: var(--node-height);
  margin: var(--children-margin-top) 0 0 var(--children-margin-left);
  align-items: center;
  box-sizing: border-box;
  padding: var(--kv-spacing-2x, 8px) 0 var(--kv-spacing-2x, 8px) var(--children-padding-left);
  background-color: var(--background-color-default);
  border: 1px solid var(--border-color-default);
  border-radius: var(--border-radius);
}
:host .node-wrapper::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--private-left-shift));
  width: var(--horizontal-lines-width);
  border-top: 1px dashed var(--connector-lines-color);
}
:host .node-wrapper:hover, :host .node-wrapper.selected:hover, :host .node-wrapper.highlighted:hover {
  background-color: var(--background-color-focused);
}
:host .node-wrapper.highlighted {
  background-color: var(--background-color-highlighted);
  border-color: var(--border-color-highlighted);
}
:host .node-wrapper.spotlight .title-small {
  font-family: var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--title-color-selected);
}
:host .node-wrapper.spotlight .title-regular {
  font-family: var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 21px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--title-color-selected);
}
:host .node-wrapper.selected {
  background-color: var(--background-color-focused);
  border-color: var(--border-color-selected);
  /* stylelint-disable-next-line selector-max-compound-selectors*/
}
:host .node-wrapper.selected .expander-arrow kv-icon {
  --icon-color: var(--icon-color-selected);
}
:host .node-wrapper.disabled:hover, :host .node-wrapper.disabled {
  background-color: var(--background-color-disabled);
  border-color: var(--border-color-disabled);
}
:host .node-wrapper.loading {
  padding: 0;
  background-color: unset;
  border: unset;
}
:host .expander-arrow {
  cursor: pointer;
  padding-left: var(--kv-spacing-2x, 8px);
}
:host .expander-arrow kv-icon {
  --icon-color: var(--icon-color-default);
  align-items: center;
}
:host .node-content-wrapper {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--kv-spacing-2x, 8px);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
}
:host .node-content-wrapper .node-icon {
  position: relative;
  width: var(--node-icon-width);
  height: var(--node-icon-height);
}
:host .node-content-wrapper .main-icon {
  --icon-color: var(--icon-color-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
:host .node-content-wrapper .state-icon {
  --icon-color: var(--kv-neutral-1, #f2f2f6);
  position: absolute;
  right: 0;
  bottom: 0;
}
:host .node-content-wrapper .state-icon.info {
  --icon-color: var(--kv-info, #276ef1);
  --icon-background-color: var(--kv-neutral-0, #fff);
}
:host .node-content-wrapper .state-icon.warning {
  --icon-color: var(--kv-warning, #ffc043);
}
:host .node-content-wrapper .state-icon.success {
  --icon-color: var(--kv-success, #05a357);
  --icon-background-color: var(--kv-neutral-0, #fff);
}
:host .node-content-wrapper .state-icon.error {
  --icon-color: var(--kv-error, #e11900);
  --icon-background-color: var(--kv-neutral-0, #fff);
}
:host .node-content-wrapper .labels {
  flex: 1;
  min-width: 0;
  margin-left: var(--kv-spacing-2x, 8px);
  display: inline-flex;
  flex-direction: column;
  color: var(--title-color-default);
}
:host .node-content-wrapper .labels-small {
  font-family: var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");
  font-size: 12px;
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: none;
}
:host .node-content-wrapper .labels-regular {
  font-family: var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");
  font-size: 14px;
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 21px;
  letter-spacing: normal;
  text-transform: none;
}
:host .node-content-wrapper .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:host .node-content-wrapper .sub-title {
  font-family: var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");
  font-size: 10px;
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 15px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--sub-title-color-default);
}
:host .node-content-wrapper.no-filled .main-icon {
  --icon-color: var(--icon-color-no-filled);
}
:host .node-content-wrapper.no-filled .state-icon {
  opacity: 0.5;
}
:host .node-content-wrapper.no-filled .title {
  color: var(--title-color-no-filled);
}
:host .node-content-wrapper.no-filled .sub-title {
  color: var(--sub-title-color-no-filled);
}
:host .node-content-wrapper.selected .main-icon {
  --icon-color: var(--icon-color-selected);
}
:host .node-content-wrapper.selected .title-small {
  font-family: var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 18px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--title-color-selected);
}
:host .node-content-wrapper.selected .title-regular {
  font-family: var(--kv-primary-font, "proxima-nova", sans-serif, "Arial");
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 21px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--title-color-selected);
}
:host .node-content-wrapper.disabled {
  cursor: not-allowed;
}
:host .node-content-wrapper.disabled .main-icon {
  --icon-color: var(--icon-color-disabled);
}
:host .node-content-wrapper.disabled .state-icon {
  opacity: 0.5;
}
:host .node-content-wrapper.disabled .title {
  color: var(--title-color-disabled);
}
:host .node-content-wrapper.disabled .sub-title {
  color: var(--sub-title-color-disabled);
}
:host .node-content-wrapper.disabled .alarm-bubble {
  opacity: 0.5;
}
:host .alarm-bubble {
  width: 16px;
  height: 16px;
  background-color: var(--kv-neutral-5, #707070);
  border-radius: 50%;
  text-align: center;
  line-height: 15px;
}

:host {
  --connector-lines-color: var(--kv-neutral-5, #707070);
  --background-color-default: var(--kv-neutral-6, #3f3f3f);
  --background-color-focused: var(--kv-neutral-5, #707070);
  --background-color-disabled: var(--kv-neutral-7, #2a2a2a);
  --background-color-highlighted: var(--kv-neutral-6, #3f3f3f);
  --border-color-default: var(--kv-neutral-5, #707070);
  --border-color-disabled: var(--kv-neutral-6, #3f3f3f);
  --border-color-selected: var(--kv-neutral-0, #fff);
  --border-color-highlighted: var(--kv-neutral-4, #bebebe);
  --icon-color-default: var(--kv-neutral-2, #e5e5e5);
  --icon-color-disabled: var(--kv-neutral-5, #707070);
  --icon-color-selected: var(--kv-neutral-0, #fff);
  --icon-color-no-filled: var(--kv-neutral-4, #bebebe);
  --title-color-default: var(--kv-neutral-2, #e5e5e5);
  --title-color-disabled: var(--kv-neutral-5, #707070);
  --title-color-selected: var(--kv-neutral-0, #fff);
  --title-color-no-filled: var(--kv-neutral-4, #bebebe);
  --sub-title-color-default: var(--kv-neutral-4, #bebebe);
  --sub-title-color-disabled: var(--kv-neutral-5, #707070);
  --sub-title-color-no-filled: var(--kv-neutral-4, #bebebe);
}

.node-loading {
  background: linear-gradient(90deg, rgba(var(--kv-neutral-7-rgb, 42, 42, 42), 0.3) 0%, var(--kv-neutral-7, #2a2a2a) 50%, rgba(var(--kv-neutral-7-rgb, 42, 42, 42), 0.3) 100%);
  background-size: 200%;
  animation: ghostGradientAnimation 0.8s infinite ease-out;
  transition: all 1s ease-in;
  border-radius: 4px;
}
@keyframes ghostGradientAnimation {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}