atom-nuclide/pkg/nuclide-ui/styles/Toolbar.less

A unified developer experience for web and mobile development, built as a suite of features on top of Atom to provide hackability and the support of an active community.

@import "ui-variables";

.nuclide-ui-toolbar {
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  height: 2.625em;
  line-height: 2.625em;
  padding: 0 12.5px;
}

.nuclide-ui-toolbar--bottom {
  border-top: 1px solid @pane-item-border-color;
}

.nuclide-ui-toolbar--top {
  border-bottom: 1px solid @pane-item-border-color;
}

.nuclide-ui-toolbar__center,
.nuclide-ui-toolbar__left,
.nuclide-ui-toolbar__right {
  align-items: center;
  display: flex;
  overflow: hidden;
  white-space: nowrap;

  // Set up flex for the following cases:
  // * Any single children should take up the whole width (flex: 1)
  // * If there are left, right, and center elements, the left and right should
  //   both have equal width (so that middle column is actually centered)
  &:only-child,
  &:nth-child(3),
  &:nth-last-child(3) {
    flex: 1;
  }
}

.nuclide-ui-toolbar__center {
  justify-content: center;
}

.nuclide-ui-toolbar__right {
  justify-content: flex-end;
}