react-microspreadsheet/style.less

A pluggable spreadsheet component.

.microspreadsheet {

  .clipboard-container {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 0px;
    height: 0px;
    z-index: 100;
    opacity: 0;

    .clipboard {
      width: 1px;
      height: 1px;       
      padding: 0px;
    }
  }

  table {
    border-collapse: collapse;
  }

  &, * { box-sizing: border-box; }

  tr {
    td {
      border: 1px solid #EEE;
      min-width: 50px;
      max-width: 75px;
      height: 26px;
      overflow: hidden;
    }
    td.label {
      background-color: #EEE;
      text-align: center;
      padding: 1px;
    }
    td.cell {
      padding: 0;
      position: relative;

      &.multi-selected div {
        background-color: rgba(194, 221, 178, 0.2);
      }

      &.selected div {
        border: 2px solid #5F8EDB;
      };

      div {
        border: 2px solid transparent;
        height: 26px;
        width: 100%;
        -moz-user-select: none; 
        -khtml-user-select: none; 
        -webkit-user-select: none; 
        -o-user-select: none;

        span, input {
          width: 100%;
          height: 100%;
          border: none;
          padding: 1px;
          margin: 0;
          text-align: right;
          overflow: hidden;
          font-size: 1em;
        }

        span {
          display: block;
        }
        input {
          outline: none;
        }
      }

      .strap {
        position: absolute;
        width: 4px;
        height: 4px;
        right: 0px;
        bottom: 0px;
        background: white;
        z-index: 200;
        cursor: crosshair;
      }
    }
  }
}