react-toolbox/components/list/theme.scss

@import "../base";
@import "./config";

.list {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: $list-vertical-padding 0;
  text-align: left;
  white-space: nowrap;
  list-style: none;
}

.subheader {
  padding-left: $list-horizontal-padding;
  margin: - $list-vertical-padding 0 0;
  font-size: $list-subheader-font-size;
  font-weight: $list-subheader-font-weight;
  line-height: $list-subheader-height;
  color: $color-text-secondary;
}

.divider {
  height: $list-divider-height;
  margin: - $list-divider-height 0 0;
  background-color: $color-divider;
  border: 0;
  &.inset {
    margin-right: $list-horizontal-padding;
    margin-left: $list-content-left-spacing;
  }
  .list + & {
    margin-top: - $list-vertical-padding;
  }
  .listItem ~ & {
    margin-top: $list-vertical-padding;
    margin-bottom: $list-vertical-padding;
  }
}

.listItem {
  position: relative;
  > [data-react-toolbox="ripple"] {
    overflow: hidden;
  }

  .ripple {
    color: $color-text-secondary;
  }
}

.item {
  position: relative;
  display: flex;
  min-height: $list-item-min-height;
  align-items: center;
  padding: 0 $list-horizontal-padding;
  color: $color-text;
  &.selectable:not(.disabled):hover {
    cursor: pointer;
    background-color: $list-item-hover-color;
  }
  &.disabled {
    pointer-events: none;
    &:not(.checkboxItem) {
      opacity: .5;
    }
    > .checkbox > [data-react-toolbox="label"] {
      opacity: .5;
    }
  }
}

.left {
  [data-react-toolbox="font-icon"] {
    width: $list-item-icon-size;
  }
  & :last-child {
    > [data-react-toolbox="font-icon"] {
      margin-right: $list-item-right-icon-margin;
    }
  }
}

.right {
  > :last-child  {
    margin-right: 0;
  }

  > :first-child {
    margin-left: $list-horizontal-padding;
  }
}

.left, .right {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  vertical-align: middle;
}

.itemAction {
  display: flex;
  margin: $list-item-child-margin $list-horizontal-padding $list-item-child-margin 0;

  > * {
    padding: 0;
  }

  > [data-react-toolbox="font-icon"] {
    font-size: $list-item-icon-font-size;
    color: $color-text-secondary;
  }
}

.itemContentRoot {
  display: block;
  flex-grow: 1;
  &.large {
    display: flex;
    height: $list-item-min-height-legend;
    flex-direction: column;
    justify-content: center;
  }
}

.checkbox {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: $list-item-min-height;
  align-items: center;
  margin: 0;
  cursor: pointer;
  > [data-react-toolbox="check"] {
    margin-right: $list-item-right-checkbox-margin;
  }
  > [data-react-toolbox="label"] {
    padding-left: 0;
  }
}

.itemText {
  display: block;

  &:not(.primary) {
    padding-top: $list-item-legend-margin-top;
    font-size: $font-size-small;
    color: $color-text-secondary;
    white-space: normal;
  }

  &.primary {
    font-size: $font-size-normal;
    color: $color-text;
  }
}