atom-nuclide/pkg/nuclide-task-runner/styles/nuclide-build-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-task-runner-indeterminate-bar-1-size: 1000px;
@nuclide-task-runner-indeterminate-bar-2-size: 1800px;
@nuclide-task-runner-indeterminate-bar-2-color: fade(@ui-site-color-1, 30%);

.nuclide-task-runner-toolbar {
  border-bottom: 1px solid @tool-panel-border-color;

  // Make sure this appears over atom-tabs, including the "selected tab"
  // indicator of One Light/Dark
  position: relative;
  z-index: 4;
}

.nuclide-task-runner-progress-bar {
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0;

  &[hidden] {
    display: none;
  }

  &.indeterminate {
    background-image: repeating-linear-gradient(
      90deg,
      @ui-site-color-1 0%,
      @ui-site-color-1 25%,
      transparent 25%,
      transparent 100%,
    );
    background-size: @nuclide-task-runner-indeterminate-bar-1-size 100%;
    animation: animate-indeterminate-bar 8s linear infinite;

    &:before {
      content: ' ';
      position: absolute;
      width: 100%;
      height: 100%;

      background-image: repeating-linear-gradient(
        90deg,
        @nuclide-task-runner-indeterminate-bar-2-color 0%,
        @nuclide-task-runner-indeterminate-bar-2-color 25%,
        transparent 25%,
        transparent 100%,
      );
      background-size: @nuclide-task-runner-indeterminate-bar-2-size 100%;
      animation: animate-indeterminate-bar-2 8s linear infinite;
    }
  }

}

@keyframes animate-indeterminate-bar {
   0% { background-position: 0 0; }
   100% { background-position: @nuclide-task-runner-indeterminate-bar-1-size 0; }
}

@keyframes animate-indeterminate-bar-2 {
   0% { background-position: 0 0; }
   100% { background-position: @nuclide-task-runner-indeterminate-bar-2-size 0; }
}

.nuclide-task-runner-progress-bar-bar {
  position: absolute;
  height: 100%;
  left: 0;
  width: 0;
  transition: width 0.3s ease-out;
  background-color: @ui-site-color-1;
}

.nuclide-task-runner-toolbar-contents {
  display: flex;
  align-items: center;
}

.nuclide-task-runner-system-icon-wrapper {
  display: flex;
  align-items: center;
  height: 15px;

  .icon-path-fill {
    fill: @text-color;
  }
}

.nuclide-task-runner-system-task-button,
.nuclide-task-runner-system-task-icon,
.nuclide-task-runner-system-task-icon::before {
  display: flex;
  align-items: center;
}

.nuclide-task-runner-system-task-button-divider {
  height: 10px;
  width: 1px;
  background-color: @button-border-color;
  display: flex;
  margin-right: 8px;
  margin-left: 8px;
}

.nuclide-task-runner-system-task-icon {
  &::before {
    font-size: 11px;
    width: auto;
  }
}

// The shortcut toolbar (suda/tool-bar) button
.nuclide-task-runner-tool-bar-button[hidden] {
  display: none;
}

// The shortcut toolbar (suda/tool-bar) button
.nuclide-task-runner-tool-bar-button[hidden] {
  display: none;
}