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

package/styles/blueprint/src/components/popover/_common.scss

@@ -0,0 +1,171 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@use "sass:math";
+
+@import "../../common/variables";
+@import "../../common/react-transition";
+
+$popover-background-color: $white !default;
+$dark-popover-background-color: $dark-gray4 !default;
+
+// $arrow-offset: amount to shift arrow along edge of popover
+// $arrow-target-offset: amount to shift arrow relative to target (perpendicular to popover edge)
+@mixin popover-sizing($arrow-square-size, $arrow-offset, $arrow-target-offset) {
+  // since this is a 45-45-90 triangle, half hypotenuse === side * sqrt(2) / 2 === side / sqrt(2)
+  // fun fact: there's no built-in square root function in SASS
+  $arrow-diagonal-half-size: math.div($arrow-square-size, 1.41421356);
+  // we want the margin to be the size of the part of the arrow that is showing plus
+  // a little extra space.
+  $content-margin: floor($arrow-diagonal-half-size + $arrow-target-offset);
+  // we want to move the arrow out from where it's positioned by the gap amount
+  // plus the extra amount of width that is added by its 45 deg rotation.
+  $arrow-position: -$arrow-square-size * 0.5 + $arrow-offset;
+  // because the 45 deg rotation will make out div stick out a little bit further,
+  // we have to slide it over by that amount first and then by the set offset value
+  $computed-arrow-offset: ($arrow-diagonal-half-size - $arrow-square-size) * 0.5 + $arrow-offset;
+
+  .#{$ns}-popover-arrow {
+    height: $arrow-square-size;
+    position: absolute;
+    width: $arrow-square-size;
+
+    &::before {
+      height: floor($arrow-diagonal-half-size - 1);
+      margin: ceil(($arrow-square-size - $arrow-diagonal-half-size) * 0.5);
+      // - 1 to compenstate for transparent pixel border shadow
+      width: floor($arrow-diagonal-half-size - 1);
+    }
+  }
+
+  // shift content away from target edge to make space for the arrow
+  .#{$ns}-tether-element-attached-bottom.#{$ns}-tether-target-attached-top > & {
+    margin-bottom: $content-margin;
+    margin-top: -$content-margin;
+
+    > .#{$ns}-popover-arrow {
+      bottom: $arrow-position;
+
+      svg {
+        transform: rotate(-90deg);
+      }
+    }
+  }
+
+  .#{$ns}-tether-element-attached-left.#{$ns}-tether-target-attached-right > & {
+    margin-left: $content-margin;
+
+    > .#{$ns}-popover-arrow {
+      left: $arrow-position;
+
+      svg {
+        transform: rotate(0);
+      }
+    }
+  }
+
+  .#{$ns}-tether-element-attached-top.#{$ns}-tether-target-attached-bottom > & {
+    margin-top: $content-margin;
+
+    > .#{$ns}-popover-arrow {
+      top: $arrow-position;
+
+      svg {
+        transform: rotate(90deg);
+      }
+    }
+  }
+
+  .#{$ns}-tether-element-attached-right.#{$ns}-tether-target-attached-left > & {
+    // div will expand to the right and parent div won't be repositioned,
+    // so we need to use negative left margin to move content.
+    margin-left: -$content-margin;
+    // we keep the positive right margin for ease of arrow positioning.
+    margin-right: $content-margin;
+
+    > .#{$ns}-popover-arrow {
+      right: $arrow-position;
+
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  // "center" and "middle" attachments
+  .#{$ns}-tether-element-attached-middle > & > .#{$ns}-popover-arrow {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .#{$ns}-tether-element-attached-center > & > .#{$ns}-popover-arrow {
+    right: 50%;
+    transform: translateX(50%);
+  }
+
+  // offset arrow away from corner spots so it appears centered in target
+  @each $side in (top, right, left, bottom) {
+    // giant selector is 1 character too long :(
+    // stylelint-disable-next-line max-line-length
+    .#{$ns}-tether-element-attached-#{$side}.#{$ns}-tether-target-attached-#{$side} > & > .#{$ns}-popover-arrow {
+      #{$side}: $computed-arrow-offset;
+    }
+  }
+
+  @each $top in (top, middle, bottom) {
+    @each $left in (left, center, right) {
+      .#{$ns}-tether-element-attached-#{$top}.#{$ns}-tether-element-attached-#{$left} > & {
+        @if ($top == middle) {
+          // "middle" is tether's way of saying "top == center"
+          transform-origin: center $left;
+        } @else {
+          transform-origin: $top $left;
+        }
+      }
+    }
+  }
+}
+
+// set background and text colors. also set box-shadow if provided (so modifier styles don't have to
+// reassign default shadows).
+@mixin popover-appearance(
+  $background-color,
+  $text-color,
+  $shadows,
+  $arrow-drop-shadow-opacity,
+  $arrow-border-shadow-opacity
+) {
+  box-shadow: $shadows;
+
+  .#{$ns}-popover-content {
+    background: $background-color;
+    color: $text-color;
+  }
+
+  .#{$ns}-popover-arrow::before {
+    box-shadow: 1px 1px 6px rgba($black, $arrow-drop-shadow-opacity);
+  }
+
+  .#{$ns}-popover-arrow-border {
+    fill: $black;
+    fill-opacity: $arrow-border-shadow-opacity;
+  }
+
+  .#{$ns}-popover-arrow-fill {
+    fill: $background-color;
+  }
+}
+
+@mixin fade-transition() {
+  @include react-transition("#{$ns}-popover", (opacity: 0 1), $before: "&");
+}
+
+@mixin scale-transition() {
+  @include react-transition(
+    "#{$ns}-popover",
+    (transform: scale(0.3) scale(1)),
+    $duration: $pt-transition-duration * 3,
+    $easing: $pt-transition-ease-bounce,
+    $after: "> &"
+  );
+}

package/styles/blueprint/src/components/popover/_popover.scss

@@ -0,0 +1,127 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "./common";
+
+$popover-width: $pt-grid-size * 35 !default;
+
+.#{$ns}-popover {
+  @include popover-sizing(
+    $arrow-square-size: 30px,
+    $arrow-offset: 4px,
+    $arrow-target-offset: -4px
+  );
+  @include popover-appearance(
+    $popover-background-color,
+    inherit,
+    $pt-popover-box-shadow,
+    $pt-drop-shadow-opacity,
+    $pt-border-shadow-opacity
+  );
+  @include scale-transition();
+  border-radius: $pt-border-radius;
+  display: inline-block;
+  z-index: $pt-z-index-overlay;
+
+  .#{$ns}-popover-content {
+    border-radius: $pt-border-radius;
+    position: relative;
+  }
+
+  &.#{$ns}-popover-content-sizing {
+    .#{$ns}-popover-content {
+      max-width: $popover-width;
+      padding: $pt-grid-size * 2;
+    }
+
+    // only inline popovers get a width if this class is applied.
+    // note that an inline overlay will be an immediate next sibling
+    // of the popover target as of Blueprint 2.0.
+    .#{$ns}-popover-target + .#{$ns}-overlay & {
+      width: $popover-width;
+    }
+  }
+
+  &.#{$ns}-minimal {
+    // popovers with no obvious trigger will never have margin because the arrow
+    // is hidden so it is safe to remove in all cases always
+    margin: 0 !important; // stylelint-disable-line declaration-no-important
+
+    .#{$ns}-popover-arrow {
+      display: none;
+    }
+
+    &.#{$ns}-popover {
+      @include react-transition(
+        "#{$ns}-popover",
+        (transform: scale(1) scale(1)),
+        $duration: $pt-transition-duration,
+        $after: "> &"
+      );
+    }
+  }
+
+  &.#{$ns}-dark,
+  .#{$ns}-dark & {
+    @include popover-appearance(
+      $dark-popover-background-color,
+      inherit,
+      $pt-dark-popover-box-shadow,
+      $pt-dark-drop-shadow-opacity,
+      $pt-dark-border-shadow-opacity
+    );
+  }
+}
+
+// the box-shadow under the arrow SVG paths
+.#{$ns}-popover-arrow::before {
+  border-radius: $pt-border-radius - 1;
+  content: "";
+  display: block;
+  position: absolute;
+  transform: rotate(45deg);
+}
+
+// remove arrow when popover is pinned inside its container
+.#{$ns}-tether-pinned .#{$ns}-popover-arrow {
+  display: none;
+}
+
+.#{$ns}-popover-backdrop {
+  background: rgba($white, 0);
+}
+
+.#{$ns}-transition-container {
+  @include fade-transition();
+
+  // ensure element size exactly equals its children, no edge-case 4px spacing!
+  // (try removing this property with Slider content in example)
+  display: flex;
+  z-index: $pt-z-index-overlay;
+
+  &:focus {
+    outline: none;
+  }
+
+  // popover content should ignore pointer events during a popover's exit transition
+  &.#{$ns}-popover-leave .#{$ns}-popover-content {
+    pointer-events: none;
+  }
+
+  // Popper.js applies this attribute when the target fully leaves boundaries
+  &[data-x-out-of-boundaries] {
+    display: none;
+  }
+}
+
+span.#{$ns}-popover-target {
+  // avoid `inline` elements as they won't account for padding etc
+  display: inline-block;
+
+  // this is important for span tag as default inline display height only includes text.
+  // div tag can be used for display: block, which works fine.
+}
+
+.#{$ns}-popover-wrapper.#{$ns}-fill {
+  width: 100%;
+}

package/styles/blueprint/src/components/portal/_portal.scss

@@ -0,0 +1,15 @@
+// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+.#{$ns}-portal {
+  left: 0;
+  // take the portal out of the document flow to prevent browsers from autoscrolling to the bottom
+  // of the document (where portals are appended) when programmatically focusing within a portal
+  // child element. also, don't use `fixed`, because then Tether'd elements won't reposition
+  // themselves properly as the document scrolls.
+  position: absolute;
+  // ensure content won't be horizontally scrunched
+  right: 0;
+  // ensure content still offsets from the top of the document
+  top: 0;
+}

package/styles/blueprint/src/components/progress-bar/_common.scss

@@ -0,0 +1,9 @@
+// Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+
+$progress-track-color: rgba($gray1, 0.2) !default;
+$progress-head-color: rgba($gray1, 0.8) !default;
+$dark-progress-track-color: rgba($black, 0.5) !default;
+$dark-progress-head-color: $gray3 !default;

package/styles/blueprint/src/components/progress-bar/_progress-bar.scss

@@ -0,0 +1,98 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+@import "common";
+
+/*
+Progress bars
+
+Markup:
+<div class="#{$ns}-progress-bar {{.modifier}}">
+  <div class="#{$ns}-progress-meter" style="width: 25%"></div>
+</div>
+<div class="#{$ns}-progress-bar #{$ns}-intent-primary {{.modifier}}">
+  <div class="#{$ns}-progress-meter" style="width: 50%"></div>
+</div>
+<div class="#{$ns}-progress-bar #{$ns}-intent-success {{.modifier}}">
+  <div class="#{$ns}-progress-meter" style="width: 75%"></div>
+</div>
+<div class="#{$ns}-progress-bar #{$ns}-intent-danger {{.modifier}}">
+  <div class="#{$ns}-progress-meter" style="width: 100%"></div>
+</div>
+
+.#{$ns}-no-stripes   - No stripes
+.#{$ns}-no-animation - No animation
+
+Styleguide progress-bar
+*/
+
+$progress-bar-stripes-color: rgba($white, 0.2) !default;
+
+$progress-bar-height: round($pt-grid-size * 0.8) !default;
+$progress-bar-stripes-size: $pt-grid-size * 3 !default;
+$progress-bar-border-radius: $pt-grid-size * 4 !default;
+
+$progress-bar-gradient: linear-gradient(
+  -45deg,
+  $progress-bar-stripes-color 25%,
+  transparent 25%,
+  transparent 50%,
+  $progress-bar-stripes-color 50%,
+  $progress-bar-stripes-color 75%,
+  transparent 75%
+) !default;
+
+@keyframes linear-progress-bar-stripes {
+  from {
+    background-position: 0 0;
+  }
+
+  to {
+    background-position: $progress-bar-stripes-size 0;
+  }
+}
+
+.#{$ns}-progress-bar {
+  background: $progress-track-color;
+  border-radius: $progress-bar-border-radius;
+  display: block;
+  height: $progress-bar-height;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+
+  .#{$ns}-progress-meter {
+    background: $progress-bar-gradient;
+    background-color: $progress-head-color;
+    background-size: $progress-bar-stripes-size $progress-bar-stripes-size;
+    border-radius: $progress-bar-border-radius;
+    height: 100%;
+    position: absolute;
+    transition: width ($pt-transition-duration * 2) $pt-transition-ease;
+    // initial state is a full bar, a la "indeterminate"
+    width: 100%;
+  }
+
+  &:not(.#{$ns}-no-animation):not(.#{$ns}-no-stripes) .#{$ns}-progress-meter {
+    animation: linear-progress-bar-stripes ($pt-transition-duration * 3) linear infinite reverse;
+  }
+
+  &.#{$ns}-no-stripes .#{$ns}-progress-meter {
+    background-image: none;
+  }
+}
+
+.#{$ns}-dark .#{$ns}-progress-bar {
+  background: $dark-progress-track-color;
+
+  .#{$ns}-progress-meter {
+    background-color: $dark-progress-head-color;
+  }
+}
+
+@each $intent, $color in $pt-intent-colors {
+  .#{$ns}-progress-bar.#{$ns}-intent-#{$intent} .#{$ns}-progress-meter {
+    background-color: $color;
+  }
+}

package/styles/blueprint/src/components/skeleton/_common.scss

@@ -0,0 +1,8 @@
+// Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+
+@import "../../common/variables";
+
+$skeleton-animation:
+  ($pt-transition-duration * 10) linear infinite alternate skeleton-glow !default;
+$skeleton-color-start: rgba($light-gray1, 0.2) !default;
+$skeleton-color-end: rgba($gray1, 0.2) !default;

package/styles/blueprint/src/components/skeleton/_skeleton.scss

@@ -0,0 +1,64 @@
+// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "./common";
+
+/*
+Skeletons
+
+Markup:
+<div class="#{$ns}-card">
+  <h5 class="#{$ns}-heading"><a class="{{.modifier}}" href="#" tabindex="-1">Card heading</a></h5>
+  <p class="{{.modifier}}">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget tortor felis.
+    Fusce dapibus metus in dapibus mollis. Quisque eget ex diam.
+  </p>
+  <button type="button" class="#{$ns}-button #{$ns}-icon-add {{.modifier}}" tabindex="-1">Submit</button>
+</div>
+
+.#{$ns}-skeleton - Render this element as a skeleton, an outline of its true self.
+
+Styleguide skeleton
+*/
+
+@keyframes skeleton-glow {
+  from {
+    background: $skeleton-color-start;
+    border-color: $skeleton-color-start;
+  }
+
+  to {
+    background: $skeleton-color-end;
+    border-color: $skeleton-color-end;
+  }
+}
+
+// This class hides content with a glowing, rounded rectangle.
+// CSS properties that should always override consumer values use the "!important" rule.
+/* stylelint-disable declaration-no-important */
+.#{$ns}-skeleton {
+  animation: $skeleton-animation;
+
+  // do not !important this for Firefox support
+  background: $skeleton-color-start;
+
+  // Prevent background color from extending to the border and overlappping
+  background-clip: padding-box !important;
+  border-color: $skeleton-color-start !important;
+  border-radius: 2px;
+  box-shadow: none !important;
+
+  // Transparent text will occupy space but be invisible to the user
+  color: transparent !important;
+  cursor: default;
+  pointer-events: none;
+  user-select: none;
+
+  // Make pseudo-elements (CSS icons) and children invisible
+  &::before,
+  &::after,
+  * {
+    visibility: hidden !important;
+  }
+}
+/* stylelint-enable declaration-no-important */

package/styles/blueprint/src/components/slider/_common.scss

@@ -0,0 +1,48 @@
+// 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/mixins";
+@import "../button/common";
+
+@mixin slider-orientation($size, $vertical: false) {
+  $slider-min-size: $pt-grid-size * 15;
+
+  @if $vertical == false {
+    height: $size;
+    min-width: $slider-min-size;
+    width: 100%;
+  } @else {
+    // define the same rules for both vertical as for horizontal to ensure all
+    // horizontal rules are fully overridden.
+    height: $slider-min-size;
+    min-width: $size;
+    width: $size;
+  }
+}
+
+@mixin slider-track-orientation($handle-size, $track-size, $vertical: false) {
+  $slider-track-offset: ($handle-size - $track-size) * 0.5;
+
+  @if $vertical == false {
+    height: $track-size;
+    left: 0;
+    right: 0;
+    top: $slider-track-offset;
+  } @else {
+    bottom: 0;
+    height: auto; // override the non-vertical rule above
+    left: $slider-track-offset;
+    top: 0;
+    width: $track-size;
+  }
+}
+
+@mixin slider-label-orientation($label-offset, $vertical: false) {
+  @if $vertical == false {
+    transform: translate(-50%, $label-offset);
+  } @else {
+    transform: translate($label-offset, 50%);
+  }
+}