@metacell/geppetto-meta-ui/camera-controls/CameraControls.less

React components from geppetto-meta to create neuroscience applications and visualize data.

.rotate (@deg) {
  -webkit-transform: rotate(@deg);
  -moz-transform: rotate(@deg);
  -ms-transform: rotate(@deg);
  -o-transform: rotate(@deg);
}

#mainContainer {
  .position-toolbar {
    top: 20px;
  }
}

.position-toolbar {
  position: relative;

  .rotate90 {
    .rotate(90deg);
  }

  .rotate180 {
    .rotate(180deg);
  }

  .dg {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 200;
  }

  .squareB {
    width: 24px;
    height: 24px;
    position: absolute;
    padding: 1px;
  }

  .pan-left {
    left: 10px;
    top: 37px;
  }
  .pan-top {
    left: 37px;
    top: 10px;
  }
  .pan-home {
    left: 37px;
    top: 37px;
  }
  .pan-right {
    left: 64px;
    top: 37px;
  }
  .pan-bottom {
    left: 37px;
    top: 64px;
  }

  .rotate-left {
    left: 10px;
    top: 132px;
  }
  .rotate-top {
    left: 37px;
    top: 105px;
  }
  .auto-rotate {
    left: 37px;
    top: 132px;
  }
  .rotate-right {
    left: 64px;
    top: 132px;
  }
  .rotate-bottom {
    left: 37px;
    top: 159px;
  }

  .rotate-z {
    left: 10px;
    top: 159px;
  }
  .rotate-mz {
    left: 64px;
    top: 159px;
  }

  .zoom-in {
    left: 37px;
    top: 200px;
  }
  .zoom-out {
    left: 37px;
    top: 228px;
  }
  .wireframe {
    left: 37px;
    top: 256px;
  }
}