Cells/cells/ui/css/cells.scss

.debug-red
{
  background-color: red;
}

body
{
  width: 100vw;
  height: 100vh;
  margin: 0px;
  padding: 0px;  
}

.spreadsheetCanvas
{
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  background-color: #eeeeee;
}

.dataTable
{
  position: absolute;
  background-color: #cccccc;
  border-top-left-radius: 4px;
  user-select: none;

  .columnGutters
  {
    position: absolute;

    .columnGutter
    {
      position: absolute;
      border: 1px solid darkgrey;
      text-align: center;
      border-top-left-radius: 2px;
      border-top-right-radius: 2px;
    }
  }

  .rowGutters
  {
    position: absolute;

    .rowGutter
    {
      position: absolute;
      border: 1px solid darkgrey;
      text-align: center;
      border-top-left-radius: 2px;
      border-top-right-radius: 2px;

      .valignHack
      {
        position: absolute;
        width: calc(100% - 4px);
        text-align: right;
        margin-top: -0.5em;
        height: 1em;
        top: 50%;
        padding-right: 4px;
      }
    }
  }

  .content
  {
    background-color: #fff;
    position: absolute;

    .row 
    {
      position: absolute;
      width: 100%;

      .cell
      {
        position: absolute;
        height: 100%;
        border-right:  solid 1px lightgrey;
        border-bottom: solid 1px lightgrey;

        .cellBody
        {
          position: absolute;
          height: 1em;
          top: 50%;
          margin-top: -0.5em;
          min-width: 100%;
          text-align: center;
        }
      }
    }
  }

  .columnResizeBar
  {
    // background-color: red;
    position: absolute;
    top: 0px;
    height: 100%;
    width: 10px;
    margin-left: -5px;
    cursor: col-resize;
  }

  .rowResizeBar
  {
    // background-color: red;
    position: absolute;
    left: 0px;
    width: 100%;
    height: 10px;
    margin-top: -5px;
    cursor: row-resize;
  }

  .addRemoveColumnWidget
  {
    $addRemoveColumnWidgetOffset: 16px;
    position: absolute;
    right: -1px-$addRemoveColumnWidgetOffset;
    top: 0px;
    width: $addRemoveColumnWidgetOffset;
    height: 20px;
    background-color: #eee;
    text-align: center;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: ew-resize;
    visibility: hidden;
  }

  .addRemoveRowWidget
  {
    $addRemoveRowWidgetOffset: 16px;
    position: absolute;
    left: 0px;
    bottom: -1px-$addRemoveRowWidgetOffset;
    height: $addRemoveRowWidgetOffset;
    width: 20px;
    background-color: #eee;
    text-align: center;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: ns-resize;
    visibility: hidden;
  }

  &:hover
  {
    .addRemoveColumnWidget { visibility: visible; }
    .addRemoveRowWidget { visibility: visible; }
  }
}

.widgets
{
  .dragFrame
  {
    position: absolute;
    background-color: rgba(127, 127, 127, .3);
    margin-left: 2px;
    margin-top: 2px;
    border: dashed lightgrey 2px;
  }

  .formulaEditor
  {
    position: absolute;

    .pointer
    {
      position: absolute;
      top: -10px;
      left: -4px;
      color: #aaa;
      font-size: 20px;
    }
    .editorBody
    {
      $editorWidth: 200px;
      $buttonSize: 20px;
      $spacing: 8px;
      $editorPadding: 2px;

      position: absolute;
      border: solid 1px #aaa;
      border-radius: 2px;
      top: 5px;
      left: -16px;
      vertical-align: middle;
      padding: 8px;
      background-color: #ddd;
      width: $editorWidth;
      height: $buttonSize + 4px;

      .inputArea
      {
        position: absolute;
        left: $spacing;
        top: $spacing;
        width: $editorWidth - 2 * $buttonSize - 3 * $spacing;
        height: $buttonSize;
        background-color: white;
        padding: 2px;
        border: 1px solid #ccc;
        cursor: text;

        &:focus
        {
          border: 1px solid #aaa;
        }
      }

      .button
      {
        position: absolute;
        top: $editorPadding + $spacing;
        width: $buttonSize;
        height: $buttonSize;
        border-radius: $buttonSize / 2;
        text-align: center;
        color: white;
        cursor: pointer;

        &.cancel
        {
          right: $buttonSize + 2 * $spacing;
          background: red;
        }

        &.accept
        {
          right: $spacing;
          background: green;
        }
      }
    }
  }
}