wix-style-react/src/ListItemAction/ListItemAction.st.css

wix-style-react

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: B10, B40, B50, D10, D55, D80, F00, G30, R10, R30;
}

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: D10-30;
}

:import {
  -st-from: 'wix-ui-core/dist/src/hocs/Focusable/Focusable.st.css';
  -st-default: Focusable;
}

.root {
  -st-states: skin(enum(standard, dark, destructive)), disabled, highlighted,
    ellipsis;
  -st-extends: Focusable;

  overflow: hidden;
  display: inline-flex;
  padding: 6px 24px 6px 18px;
  width: 100%;
  align-items: center;

  background-color: value(D80);
  cursor: pointer;

  /* not supported in IE11 & Edge; 'left' as fallback */
  text-align: left;
  text-align: start;

  outline: none;
  border: none;

  text-decoration: none;
}

.root:disabled {
  cursor: default;
  color: value(D10-30);
}

.root:not(:disabled):focus-visible {
  background-color: value(B40);
  box-shadow: inset 0 0 0 3px value(F00);
}

/* Skin standard */
.root:skin(standard) .text,
.root:skin(standard) .prefixIcon {
  color: value(B10);
}

.root:skin(standard):highlighted,
.root:skin(standard):not(:disabled):hover {
  background-color: value(B50);
}

.root:skin(standard):active {
  background-color: value(B40);
}

.root:skin(standard):not(:disabled):focus-visible {
  background-color: value(B10);
}

.root:skin(standard):not(:disabled):focus-visible .text,
.root:skin(standard):not(:disabled):focus-visible .prefixIcon {
  color: value(D80);
}

.root:skin(standard):disabled .text,
.root:skin(standard):disabled .prefixIcon {
  color: value(D10-30);
}

/* Skin dark */
.root:skin(dark) .text,
.root:skin(dark) .prefixIcon {
  color: value(D10);
}

.root:skin(dark):highlighted .text,
.root:skin(dark):highlighted .prefixIcon,
.root:skin(dark):not(:disabled):hover .text,
.root:skin(dark):not(:disabled):hover .prefixIcon {
  color: value(B10);
}

.root:skin(dark):active .text,
.root:skin(dark):active .prefixIcon {
  color: value(B10);
}

.root:skin(dark):disabled .text,
.root:skin(dark):disabled .prefixIcon {
  color: value(D10-30);
}

/* Skin destructive */
.root:skin(destructive) .text,
.root:skin(destructive) .prefixIcon {
  color: value(R10);
}

.root:skin(destructive):disabled .text,
.root:skin(destructive):disabled .prefixIcon {
  color: value(D10-30);
}

.prefixIcon {
  -st-states: subtitle;
}

.prefixIcon {
  flex-shrink: 0;
}

.prefixIcon:subtitle {
  margin-block-end: auto;
}

.textBox {
  margin-inline-start: 6px;
}

.root:ellipsis .textBox {
  overflow: hidden;
}