wix-style-react/dist/src/TableListItem/TableListItem.st.css

wix-style-react

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: B10, B30, B40, B50, B60, D10-10, D20, D50, D60, D80, F00;
}

:import {
  -st-from: "../Foundation/stylable/spacing.st.css";
  -st-named: spacing06, spacing12, spacing18, spacing24;
}

:import {
  -st-from: "../Foundation/stylable/border.st.css";
  -st-named: radius06;
}

:import {
  -st-from: "../TableActionCell/TableActionCell.st.css";
  -st-default: TableActionCell;
  -st-named: onHover, notOnHover;
}

:vars {
  checkedBorderWidth: 2px;
  largePadding: 24px;
  mediumPadding: 18px;
  smallPadding: 15px;
  tinyPadding: 12px;
  xTinyPadding: 6px;
  xxTinyPadding: 3px;
}

@property --padding-vertical;
@property --padding-horizontal;

.root {
  -st-states: checked, showDivider, verticalPadding(enum(xxTiny, xTiny, tiny, small, medium, large)), horizontalPadding(enum(xxTiny, xTiny, tiny, small, medium, large)), newColorsBranding, border, dragHandleSize(enum(small, large)), draggable, clickable, dragDisabled;
  background-color: value(D80);
  display: flex;
  gap: value(spacing18);
  padding-block: 0;
  padding-block: var(--padding-vertical);
  padding-inline: var(--padding-horizontal);
}

.root:verticalPadding(xxTiny) {
  --padding-vertical: value(xxTinyPadding);
}

.root:verticalPadding(xTiny) {
  --padding-vertical: value(xTinyPadding);
}

.root:verticalPadding(tiny) {
  --padding-vertical: value(tinyPadding);
}

.root:verticalPadding(small) {
  --padding-vertical: value(smallPadding);
}

.root:verticalPadding(medium) {
  --padding-vertical: value(mediumPadding);
}

.root:verticalPadding(large) {
  --padding-vertical: value(largePadding);
}

.root:horizontalPadding(xxTiny) {
  --padding-horizontal: value(xxTinyPadding);
}

.root:horizontalPadding(xTiny) {
  --padding-horizontal: value(xTinyPadding);
}

.root:horizontalPadding(tiny) {
  --padding-horizontal: value(tinyPadding);
}

.root:horizontalPadding(small) {
  --padding-horizontal: value(smallPadding);
}

.root:horizontalPadding(medium) {
  --padding-horizontal: value(mediumPadding);
}

.root:horizontalPadding(large) {
  --padding-horizontal: value(largePadding);
}

.root:dragHandleSize(small) {
  gap: value(spacing12);
}

.root:border {
  border: 1px solid value(B40);
  border-radius: value(radius06);
}

.root:not(:draggable):border {
  border: 1px solid value(D10-10);
}

.root:dragDisabled {
  cursor: not-allowed;
}

.root:not(:draggable):clickable {
  cursor: pointer;
}

.root:clickable:hover {
  background-color: value(B60);
  cursor: pointer;
}
.root:newColorsBranding:clickable:hover {
  background-color: value(B50);
  cursor: pointer;
}

.root:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px value(F00);
}

.controlsContainer {
  -st-states: dragHandleSize(enum(small, medium));
  display: flex;
  gap: value(spacing12);
}

.controlsContainer:dragHandleSize(small) {
  display: flex;
  gap: value(spacing06);
}

.handleContainer {
  display: flex;
  align-items: center;
}

.checkbox {
  -st-states: checkBoxDisabled;
  display: flex;
  cursor: pointer;
  padding-right: 2px;
}

.checkbox:checkBoxDisabled {
  cursor: not-allowed;
}

.root:checked:not(:border) {
  border-left-width: value(checkedBorderWidth);
  border-left-style: solid;
  border-left-color: value(B10);
  padding-inline-start: calc(var(--padding-horizontal) - value(checkedBorderWidth));
  padding-inline-end: var(--padding-horizontal);
}

.expandHandle {
  -st-states: expandDisabled;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.expandHandle:expandDisabled {
  cursor: not-allowed;
}

.caretIcon {
  -st-states: expanded;
  transition: all 0.2s ease;
}

.caretIcon:expanded {
  transform: rotate(90deg);
}

.optionsContainer {
  display: grid;
  gap: value(spacing24);
  width: 100%;
  align-items: center;
}

.root:showDivider {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: value(D60);
}

.align {
  -st-states: position(enum(left, center, right));
  display: grid;
}

.align:position(left) {
  justify-self: start;
}

.align:position(center) {
  justify-self: center;
}

.align:position(right) {
  justify-self: end;
}

/* TODO: this needs to be covered by visual tests */
/* `onHover` HoverSlot */
.root TableActionCell::hoverSlot.onHover {
  opacity: 0;
}

.root:hover TableActionCell::hoverSlot.onHover, .root:focus-within TableActionCell::hoverSlot.onHover {
  opacity: 1;
}

/* `notOnHover` HoverSlot */
.root TableActionCell::hoverSlot.notOnHover {
  opacity: 1;
}

.root:hover TableActionCell::hoverSlot.notOnHover, .root:focus-within TableActionCell::hoverSlot.notOnHover {
  opacity: 0;
}

/* Placeholder icon */
.root:hover TableActionCell::placeholderIcon, .root:focus-within TableActionCell::placeholderIcon {
  display: none;
}

/* st-namespace-reference="../../../src/TableListItem/TableListItem.st.css" */