@stoplight/ui-kit 3.0.0-beta.37 → 3.0.0-beta.40

package/styles/blueprint/src/components/menu/_menu.scss

@@ -0,0 +1,197 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+@import "~@blueprintjs/icons/src/icons";
+@import "../../common/mixins";
+
+@import "./common";
+@import "./submenu";
+
+/*
+Menus
+
+Markup:
+<ul class="#{$ns}-menu {{.modifier}} #{$ns}-elevation-1">
+  <li>
+    <a class="#{$ns}-menu-item #{$ns}-icon-people" tabindex="0">Share...</a>
+  </li>
+  <li>
+    <a class="#{$ns}-menu-item #{$ns}-icon-circle-arrow-right" tabindex="0">Move...</a>
+  </li>
+  <li>
+    <a class="#{$ns}-menu-item #{$ns}-icon-edit" tabindex="0">Rename</a>
+  </li>
+  <li class="#{$ns}-menu-divider"></li>
+  <li>
+    <a class="#{$ns}-menu-item #{$ns}-icon-trash #{$ns}-intent-danger" tabindex="0">Delete</a>
+  </li>
+</ul>
+
+.#{$ns}-large - Large size (only supported on <code>.#{$ns}-menu</code>)
+
+Styleguide menu
+*/
+
+.#{$ns}-menu {
+  background: $menu-background-color;
+  border-radius: $pt-border-radius;
+  color: $pt-text-color;
+  list-style: none;
+  margin: 0;
+  min-width: $menu-min-width;
+  padding: $half-grid-size;
+  text-align: left;
+}
+
+.#{$ns}-menu-divider {
+  @include menu-divider();
+}
+
+.#{$ns}-menu-item {
+  @include menu-item();
+  @include menu-item-intent();
+
+  &::before {
+    // support pt-icon-* classes directly on this element
+    @include pt-icon();
+    margin-right: $menu-item-padding;
+  }
+
+  &::before,
+  > .#{$ns}-icon {
+    color: $pt-icon-color;
+    margin-top: ($menu-item-line-height - $pt-icon-size-standard) * 0.5;
+  }
+
+  .#{$ns}-menu-item-label {
+    color: $pt-text-color-muted;
+  }
+
+  &:hover {
+    color: inherit;
+  }
+
+  &.#{$ns}-active,
+  &:active {
+    background-color: $menu-item-color-active;
+  }
+
+  // pt-disable always overrides over styles
+  // stylelint-disable declaration-no-important
+  &.#{$ns}-disabled {
+    background-color: inherit !important;
+    color: $pt-text-color-disabled !important;
+    cursor: not-allowed !important;
+    // override global a:focus styles
+    outline: none !important;
+
+    &::before,
+    > .#{$ns}-icon,
+    .#{$ns}-menu-item-label {
+      color: $pt-icon-color-disabled !important;
+    }
+  }
+  // stylelint-enable declaration-no-important
+
+  .#{$ns}-large & {
+    @include menu-item-large();
+
+    .#{$ns}-icon {
+      // SVG icons remain standard size when menu is large
+      margin-top: ($menu-item-line-height-large - $pt-icon-size-standard) * 0.5;
+    }
+
+    &::before {
+      @include pt-icon($pt-icon-size-large);
+      margin-right: $menu-item-padding-large;
+      margin-top: ($menu-item-line-height-large - $pt-icon-size-large) * 0.5;
+    }
+  }
+}
+
+button.#{$ns}-menu-item {
+  background: none;
+  border: none;
+  text-align: left;
+  width: 100%;
+}
+
+/*
+Menu headers
+
+Markup:
+<ul class="#{$ns}-menu #{$ns}-elevation-1">
+  <li class="#{$ns}-menu-header"><h6 class="#{$ns}-heading">Layouts</h6></li>
+  <li><button type="button" class="#{$ns}-menu-item #{$ns}-icon-layout-auto">Auto</button></li>
+  <li><button type="button" class="#{$ns}-menu-item #{$ns}-icon-layout-circle">Circle</button></li>
+  <li><button type="button" class="#{$ns}-menu-item #{$ns}-icon-layout-grid">Grid</button></li>
+  <li class="#{$ns}-menu-header"><h6 class="#{$ns}-heading">Views</h6></li>
+  <li><button type="button" class="#{$ns}-menu-item #{$ns}-icon-history">History</button></li>
+  <li><button type="button" class="#{$ns}-menu-item #{$ns}-icon-star">Favorites</button></li>
+  <li><button type="button" class="#{$ns}-menu-item #{$ns}-icon-envelope">Messages</button></li>
+</ul>
+
+Styleguide menu-header
+*/
+
+.#{$ns}-menu-header {
+  @include menu-header($heading-selector: "> h6");
+
+  .#{$ns}-large & {
+    @include menu-header-large($heading-selector: "> h6");
+  }
+}
+
+// dark theme
+.#{$ns}-dark {
+  .#{$ns}-menu {
+    background: $dark-menu-background-color;
+    color: $pt-dark-text-color;
+  }
+
+  .#{$ns}-menu-item {
+    @include menu-item-intent($pt-dark-intent-text-colors);
+
+    &::before,
+    > .#{$ns}-icon {
+      color: $pt-dark-icon-color;
+    }
+
+    .#{$ns}-menu-item-label {
+      color: $pt-dark-text-color-muted;
+    }
+
+    &.#{$ns}-active,
+    &:active {
+      background-color: $dark-menu-item-color-active;
+    }
+
+    // pt-disable always overrides over styles
+    // stylelint-disable declaration-no-important
+    &.#{$ns}-disabled {
+      color: $pt-dark-text-color-disabled !important;
+
+      &::before,
+      > .#{$ns}-icon,
+      .#{$ns}-menu-item-label {
+        color: $pt-dark-icon-color-disabled !important;
+      }
+    }
+    // stylelint-enable declaration-no-important
+  }
+
+  .#{$ns}-menu-divider,
+  .#{$ns}-menu-header {
+    border-color: $pt-dark-divider-white;
+  }
+
+  .#{$ns}-menu-header > h6 {
+    color: $pt-dark-heading-color;
+  }
+}
+
+// #402 support menu inside label
+.#{$ns}-label .#{$ns}-menu {
+  margin-top: $pt-grid-size * 0.5;
+}

package/styles/blueprint/src/components/menu/_submenu.scss

@@ -0,0 +1,41 @@
+// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+@import "~@blueprintjs/icons/src/icons";
+@import "./common";
+
+.#{$ns}-submenu {
+  > .#{$ns}-popover-wrapper {
+    display: block;
+  }
+
+  .#{$ns}-popover-target {
+    display: block;
+
+    &.#{$ns}-popover-open > .#{$ns}-menu-item {
+      // keep a trail of hovered items as submenus are opened
+      // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
+      @extend .#{$ns}-menu-item, :hover;
+    }
+  }
+
+  &.#{$ns}-popover {
+    box-shadow: none;
+    // horizontal padding leaves some space from parent menu item, and extends mouse zone
+    padding: 0 $half-grid-size;
+
+    > .#{$ns}-popover-content {
+      box-shadow: $pt-popover-box-shadow;
+    }
+
+    .#{$ns}-dark &,
+    &.#{$ns}-dark {
+      box-shadow: none;
+
+      > .#{$ns}-popover-content {
+        box-shadow: $pt-dark-popover-box-shadow;
+      }
+    }
+  }
+}

package/styles/blueprint/src/components/navbar/_navbar.scss

@@ -0,0 +1,117 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+
+/*
+Navbars
+
+Markup:
+<nav class="#{$ns}-navbar {{.modifier}}">
+  <div class="#{$ns}-navbar-group #{$ns}-align-left">
+    <div class="#{$ns}-navbar-heading">Blueprint</div>
+    <input class="#{$ns}-input" placeholder="Search files..." type="text" />
+  </div>
+  <div class="#{$ns}-navbar-group #{$ns}-align-right">
+    <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-home">Home</button>
+    <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-document">Files</button>
+    <span class="#{$ns}-navbar-divider"></span>
+    <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-user"></button>
+    <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-notifications"></button>
+    <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-cog"></button>
+  </div>
+</nav>
+
+.#{$ns}-dark - Dark theme
+
+Styleguide navbar
+*/
+
+$navbar-padding: $pt-grid-size * 1.5 !default;
+
+$navbar-background-color: $white !default;
+$dark-navbar-background-color: $dark-gray5 !default;
+
+.#{$ns}-navbar {
+  background-color: $navbar-background-color;
+  box-shadow: $pt-elevation-shadow-1;
+  height: $pt-navbar-height;
+  padding: 0 $navbar-padding;
+  position: relative;
+  width: 100%;
+  z-index: $pt-z-index-content;
+
+  &.#{$ns}-dark,
+  .#{$ns}-dark & {
+    background-color: $dark-navbar-background-color;
+  }
+
+  // shadow for dark navbar in light theme apps
+  &.#{$ns}-dark {
+    box-shadow: inset $pt-dark-elevation-shadow-1;
+  }
+
+  // shadow for dark navbar in dark theme apps
+  .#{$ns}-dark & {
+    box-shadow: $pt-dark-elevation-shadow-1;
+  }
+
+  &.#{$ns}-fixed-top {
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+  }
+}
+
+.#{$ns}-navbar-heading {
+  font-size: $pt-font-size-large;
+  margin-right: $navbar-padding;
+}
+
+.#{$ns}-navbar-group {
+  align-items: center;
+  display: flex;
+  height: $pt-navbar-height;
+
+  &.#{$ns}-align-left {
+    float: left;
+  }
+
+  &.#{$ns}-align-right {
+    float: right;
+  }
+}
+
+.#{$ns}-navbar-divider {
+  border-left: 1px solid $pt-divider-black;
+  height: $pt-navbar-height - $pt-grid-size * 3;
+  margin: 0 $pt-grid-size;
+
+  .#{$ns}-dark & {
+    border-left-color: $pt-dark-divider-white;
+  }
+}
+
+/*
+Fixed width
+
+Markup:
+<nav class="#{$ns}-navbar #{$ns}-dark">
+  <div style="margin: 0 auto; width: 480px;"> <!-- ADD ME -->
+    <div class="#{$ns}-navbar-group #{$ns}-align-left">
+      <div class="#{$ns}-navbar-heading">Blueprint</div>
+    </div>
+    <div class="#{$ns}-navbar-group #{$ns}-align-right">
+      <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-home">Home</button>
+      <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-document">Files</button>
+      <span class="#{$ns}-navbar-divider"></span>
+      <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-user"></button>
+      <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-notifications"></button>
+      <button class="#{$ns}-button #{$ns}-minimal #{$ns}-icon-cog"></button>
+    </div>
+  </div>
+</nav>
+
+Styleguide navbar-container
+*/

package/styles/blueprint/src/components/non-ideal-state/_non-ideal-state.scss

@@ -0,0 +1,43 @@
+// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+@import "../../common/mixins";
+
+/*
+Non-ideal state
+
+Markup:
+<div class="#{$ns}-non-ideal-state">
+  <div class="#{$ns}-non-ideal-state-visual">
+    <span class="#{$ns}-icon #{$ns}-icon-folder-open"></span>
+  </div>
+  <h4 class="#{$ns}-heading">This folder is empty</h4>
+  <div>Create a new file to populate the folder.</div>
+  <button class="#{$ns}-button #{$ns}-intent-primary">Create</button>
+</div>
+
+Styleguide non-ideal-state
+*/
+
+.#{$ns}-non-ideal-state {
+  @include pt-flex-container(column, $pt-grid-size * 2);
+  align-items: center;
+  height: 100%;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+
+  > * {
+    max-width: $pt-grid-size * 40;
+  }
+}
+
+.#{$ns}-non-ideal-state-visual {
+  color: $pt-icon-color-disabled;
+  font-size: $pt-icon-size-large * 3;
+
+  .#{$ns}-dark & {
+    color: $pt-dark-icon-color-disabled;
+  }
+}

package/styles/blueprint/src/components/overflow-list/_overflow-list.scss

@@ -0,0 +1,13 @@
+// Copyright 2018 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+.#{$ns}-overflow-list {
+  display: flex;
+  flex-wrap: nowrap;
+  min-width: 0;
+}
+
+.#{$ns}-overflow-list-spacer {
+  flex-shrink: 1;
+  width: 1px;
+}

package/styles/blueprint/src/components/overlay/_overlay.scss

@@ -0,0 +1,94 @@
+// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+
+$overlay-background-color: rgba($black, 0.7) !default;
+
+// restricts scrolling of underlying content while the overlay is open
+body.#{$ns}-overlay-open {
+  overflow: hidden;
+}
+
+.#{$ns}-overlay {
+  // 0-out all positions so page won't jump when position changes (0s already there)
+  @include position-all(static, 0);
+  z-index: $pt-z-index-overlay;
+
+  &:not(.#{$ns}-overlay-open) {
+    // because of the 0-position covering the viewport,
+    // we must ignore the mouse when not open
+    pointer-events: none;
+  }
+
+  &.#{$ns}-overlay-container {
+    overflow: hidden;
+    // container covers the entire viewport
+    position: fixed;
+
+    &.#{$ns}-overlay-inline {
+      // when rendered inline, we want the overlay to position itself relative to
+      // its parent container, not relative to the whole window. thus, we change
+      // to position:absolute.
+      position: absolute;
+    }
+  }
+
+  &.#{$ns}-overlay-scroll-container {
+    overflow: auto;
+    // scroll container covers the entire viewport
+    position: fixed;
+
+    &.#{$ns}-overlay-inline {
+      // when rendered inline, we want the overlay to position itself relative to
+      // its parent container, not relative to the whole window. thus, we change
+      // to position:absolute.
+      position: absolute;
+    }
+  }
+
+  &.#{$ns}-overlay-inline {
+    display: inline;
+    // inline overlays can overflow container by default (see Dialog & Popover)
+    overflow: visible;
+  }
+}
+
+// this class is added to each Overlay child so that users won't need to
+// explicitly manage the position mode for inline and non-inline rendering.
+.#{$ns}-overlay-content {
+  // default fixed pulls it out of the flow and makes it viewport-relative
+  position: fixed;
+  z-index: $pt-z-index-overlay;
+
+  .#{$ns}-overlay-inline &,
+  .#{$ns}-overlay-scroll-container & {
+    // but inline (or scrollable) overlays want their children to respect
+    // the parent positioning context. also allows the content to scroll.
+    position: absolute;
+  }
+}
+
+// fixed position so the backdrop forecefully covers the whole screen
+.#{$ns}-overlay-backdrop {
+  @include position-all(fixed, 0);
+  @include react-transition(
+    "#{$ns}-overlay",
+    (opacity: 0 1),
+    $pt-transition-duration * 2,
+    $before: "&"
+  );
+  background-color: $overlay-background-color;
+  overflow: auto;
+  user-select: none;
+  z-index: $pt-z-index-overlay;
+
+  &:focus {
+    outline: none;
+  }
+
+  // as mentioned above: when inline, Overlay backdrop must respect parent
+  .#{$ns}-overlay-inline & {
+    position: absolute;
+  }
+}

package/styles/blueprint/src/components/panel-stack/_panel-stack.scss

@@ -0,0 +1,103 @@
+// Copyright 2018 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+@import "~@blueprintjs/core/src/common/react-transition";
+
+.#{$ns}-panel-stack {
+  overflow: hidden;
+  position: relative;
+}
+
+.#{$ns}-panel-stack-header {
+  align-items: center;
+  box-shadow: 0 1px $pt-divider-black;
+  display: flex;
+  flex-shrink: 0;
+  height: $pt-grid-size * 3;
+  z-index: 1;
+
+  .#{$ns}-dark & {
+    box-shadow: 0 1px $pt-dark-divider-white;
+  }
+
+  // two span children act as spacers to keep the title centered.
+  > span {
+    align-items: stretch;
+    display: flex;
+    flex: 1;
+  }
+
+  .#{$ns}-heading {
+    margin: 0 ($pt-grid-size * 0.5);
+  }
+}
+
+.#{$ns}-button.#{$ns}-panel-stack-header-back {
+  margin-left: $pt-grid-size * 0.5;
+  padding-left: 0;
+  white-space: nowrap;
+
+  .#{$ns}-icon {
+    // reduce margins around icon so it fits better in tight header
+    margin: 0 2px;
+  }
+}
+
+.#{$ns}-panel-stack-view {
+  @include position-all(absolute, 0);
+
+  background-color: $white;
+  border-right: 1px solid $pt-divider-black;
+  display: flex;
+  flex-direction: column;
+
+  // border between panels, visible during transition
+  margin-right: -1px;
+  overflow-y: auto;
+  z-index: 1;
+
+  .#{$ns}-dark & {
+    background-color: $dark-gray4;
+  }
+
+  &:nth-last-child(n + 4) {
+    display: none;
+  }
+}
+
+// PUSH transition: enter from right (100%), existing panel moves off left.
+.#{$ns}-panel-stack-push {
+  @include react-transition-phase(
+    "#{$ns}-panel-stack",
+    "enter",
+    (transform: translateX(100%) translate(0%), opacity: 0 1),
+    $easing: ease,
+    $duration: $pt-transition-duration * 4
+  );
+  @include react-transition-phase(
+    "#{$ns}-panel-stack",
+    "exit",
+    (transform: translateX(-50%) translate(0%), opacity: 0 1),
+    $easing: ease,
+    $duration: $pt-transition-duration * 4
+  );
+}
+
+// POP transition: enter from left (-50%), existing panel moves off right.
+.#{$ns}-panel-stack-pop {
+  @include react-transition-phase(
+    "#{$ns}-panel-stack",
+    "enter",
+    (transform: translateX(-50%) translate(0%), opacity: 0 1),
+    $easing: ease,
+    $duration: $pt-transition-duration * 4
+  );
+  @include react-transition-phase(
+    "#{$ns}-panel-stack",
+    "exit",
+    (transform: translateX(100%) translate(0%), opacity: 0 1),
+    $easing: ease,
+    $duration: $pt-transition-duration * 4
+  );
+}