eyzy-tree/dist/style.css

React tree component

.eyzy-tree {
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 0; }

.eyzy-tree .tree-node {
  margin: 0;
  list-style: none; }

.eyzy-tree .node-content {
  white-space: nowrap;
  outline: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center; }
  .eyzy-tree .node-content > span {
    margin-right: 4px; }
  .eyzy-tree .node-content.checked > .node-checkbox {
    background-color: #2490f5;
    border-color: #2490f5; }
    .eyzy-tree .node-content.checked > .node-checkbox:after {
      transform: rotate(45deg) scale(1);
      border: 2px solid #fff;
      border-top: 0;
      border-left: 0;
      transition: opacity .2s;
      opacity: 1;
      left: 6.1px;
      top: 2.2px;
      width: 4px;
      height: 10px; }
  .eyzy-tree .node-content.indeterminate > .node-checkbox {
    background-color: #2490f5;
    border-color: #2490f5; }
    .eyzy-tree .node-content.indeterminate > .node-checkbox:after {
      background-color: #fff;
      top: 50%;
      left: 20%;
      right: 20%;
      height: 2px;
      opacity: 1; }
  .eyzy-tree .node-content.selected > .node-text {
    background: rgba(136, 136, 136, 0.31); }
  .eyzy-tree .node-content.expanded > .node-arrow {
    transform: rotate(90deg); }
  .eyzy-tree .node-content.disabled {
    opacity: .3;
    cursor: default; }
  .eyzy-tree .node-content.disabled-checkbox > .node-checkbox {
    opacity: .3; }

.eyzy-tree .node-noop {
  width: 24px;
  height: 24px; }

.eyzy-tree .node-checkbox {
  width: 18px;
  height: 18px;
  border: 1px solid #d0d0d0;
  border-radius: 2px;
  background-color: #fff;
  transition: border-color 0.3s;
  position: relative; }
  .eyzy-tree .node-checkbox:after {
    opacity: 0;
    content: "";
    position: absolute;
    display: block; }
  .eyzy-tree .node-checkbox:hover {
    border-color: #38a0ff; }
  .eyzy-tree .node-checkbox-overrided {
    z-index: 2; }

.eyzy-tree .node-text {
  padding: 4px 7px;
  line-height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .eyzy-tree .node-text:hover {
    background: rgba(136, 136, 136, 0.1); }

.eyzy-tree .node-child {
  list-style: none;
  padding: 0 0 0 20px;
  flex-basis: 100%;
  flex-wrap: wrap; }

.eyzy-tree .node-arrow {
  width: 24px;
  height: 24px; }
  .eyzy-tree .node-arrow-extended {
    z-index: 2; }
  .eyzy-tree .node-arrow:before {
    content: '';
    display: block;
    cursor: pointer;
    height: 100%;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADQnpUWHRSYXcgcHJvZmlsZSB0eXBlIGV4aWYAAHja5ZdRcusqDIbftYq7BEtCCJaDjZm5O7jLvz+YuE2adtrGL2dOmFhYBknoU+SW9v/+bfQPPpzjQsE8xRzjgk/IIUvBJC3H55C8hHGdN8ttcqen84FApZB63MZ9ri/Q29sGD1O/3uvJt2knTUM3y9Ogds+CyVyXpiGVQ8/znvLcV8K748yv+jBxLn68D45kVINShWRX1gXX2L0oItCkpetwFVU5tGU86Xp+njs6pw/JO2cPuVvK1Ot9KmiJc0F8yNHUsz3P3cjQA7Wb57sHmU8XH3LXWk2t7cfpSojIVKR5qNtRxgwLV6RSx7aI4fga5j5Gxkg44oakV9BcMTbizILMNg5cuXDjfciNN4QYZBeHFNlEhy6pS5ZtpD70wU1cs1YCI9EN1BRqOWPh4TcPfxsneK6MlcIwxtjxYdAz5W/Gaai1XrrMSzpzhbikFyDC6OT6FasAhNvMqY38jkHv6mZ5B1ZB0EaaEw5YlvUwsRq/1ZYOzop1tgRajnJnr9MAUgTfhmBQxQFFwGoceXERZ0YeE/gURC4aZAUBNpPK1MBGNQJOku4be5zHWjE51GgtAGEa1YEmawGsEAz14yGhhoqpBTKzaG7JspWoMUSLMXrsPaq4enDz6O7Js5ekKSRLMXlKKaeSJStamOWYnXLKOZcCpwWmC3YXrChllVXXsNoaV1/TmteyoXy2sNkWN9/SlrdSpWrFz7/G6lRTzbXsvKOU9rDbHnff05730lBrTVto1mLzllpu5aQ2qd5T4wdyX1PjSa0TC2Odv1GD2v1mgns7sc4MxCQwiHsngIKWzmxJHIJ0cp3ZktG01ATU2Dqcyp0YCIadxRqf7N7IfcmNLPyIm3xGjjq6K8hRRzfJfeT2hFot442iA1D/FfacLtrQ2LBgT0VS6e+kX0t61cCfYqgZlzHH6+te6raWL63RJeEchj4P49vhQNKL4ZxR0Kdh/CQcSLokHHilS8KBpEvCOerognAg6ZJwIOmScDr+l8J4J+mlMN5J+pX7J94vbiM/dX9tG7n3TuWiiqSXK3F5bCMvoP92G/lOK6eLWvbfaajhLw/8n0r/A/4BpfLGcvOXAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4goXEQELgwtGIAAAAKpJREFUOMvNkbEOAVEQRQ+r4FPuPyg0RPt+Qr+FSqERhcKvbKJXEBGl8voQGx3NSl6Ex2qYbib3nMx7A7+u7NkwhDCStJPUsr2pLZC0BTpAT1Lb9rquoASGVdtNSZ4KbB8knYHBO0n2ajXb+08kWeqDKkkJ9CPJ0fbpnml+cblr3CQFIYQxsIhG86IoVnGmUROePOYaL+AcWL6DU0+YfQKnBDlwAaYp+D/qBgoiRb7coYykAAAAAElFTkSuQmCC") no-repeat 50% 50%; }

.eyzy-theme {
  position: relative;
  user-select: none; }
  .eyzy-theme.eyzy-tree {
    padding: 0 4px; }
  .eyzy-theme .node-content:hover.node-text {
    background-color: transparent; }
  .eyzy-theme .node-content:hover:before {
    transition: background-color .1s;
    background: rgba(210, 231, 255, 0.3); }
  .eyzy-theme .node-content.disabled:hover:before {
    transition: transparent;
    background: transparent; }
  .eyzy-theme .node-content.selected:before {
    background: #d2e7ff; }
  .eyzy-theme .node-content.selected > .node-text {
    background: transparent; }
  .eyzy-theme .node-content .node-text,
  .eyzy-theme .node-content .node-arrow,
  .eyzy-theme .node-content .node-checkbox {
    z-index: 2; }
  .eyzy-theme .node-content .node-arrow {
    transition: transform .1s; }
  .eyzy-theme .node-content .node-text {
    flex-grow: 1;
    cursor: pointer; }
  .eyzy-theme .node-content .node-text:hover {
    background: transparent; }
  .eyzy-theme .node-content:before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 32px;
    z-index: 1; }

.eyzy-theme-red {
  position: relative;
  user-select: none; }
  .eyzy-theme-red.eyzy-tree {
    padding: 0 4px; }
  .eyzy-theme-red .tree-node.selected > .node-content:before {
    background: transparent; }
  .eyzy-theme-red .node-content:hover.node-text {
    background-color: transparent; }
  .eyzy-theme-red .node-content:hover:before {
    transition: background-color .1s;
    background: rgba(136, 136, 136, 0.1); }
  .eyzy-theme-red .node-content.selected:before {
    background: rgba(136, 136, 136, 0.31); }
  .eyzy-theme-red .node-content.selected > .node-text {
    background: transparent; }
  .eyzy-theme-red .node-content.checked > .node-checkbox {
    background-color: #f92e54;
    border-color: #f92e54; }
  .eyzy-theme-red .node-content.indeterminate > .node-checkbox {
    background-color: #f92e54;
    border-color: #f92e54; }
  .eyzy-theme-red .node-content .node-text,
  .eyzy-theme-red .node-content .node-arrow,
  .eyzy-theme-red .node-content .node-checkbox {
    z-index: 2; }
  .eyzy-theme-red .node-content .node-arrow {
    transition: transform .1s; }
  .eyzy-theme-red .node-content .node-text {
    flex-grow: 1;
    cursor: pointer; }
  .eyzy-theme-red .node-content .node-text:hover {
    background: transparent; }
  .eyzy-theme-red .node-content .node-checkbox:hover {
    border-color: #f92e54; }
  .eyzy-theme-red .node-content:before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 32px;
    z-index: 1; }