@stoplight/ui-kit 3.0.1 → 3.0.3

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

@@ -1,171 +0,0 @@
-// 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/src/styles/blueprint/src/components/popover/_popover.scss

@@ -1,127 +0,0 @@
-// 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/src/styles/blueprint/src/components/portal/_portal.scss

@@ -1,15 +0,0 @@
-// 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/src/styles/blueprint/src/components/progress-bar/_common.scss

@@ -1,9 +0,0 @@
-// 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/src/styles/blueprint/src/components/progress-bar/_progress-bar.scss

@@ -1,98 +0,0 @@
-// 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/src/styles/blueprint/src/components/skeleton/_common.scss

@@ -1,8 +0,0 @@
-// 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/src/styles/blueprint/src/components/skeleton/_skeleton.scss

@@ -1,64 +0,0 @@
-// 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/src/styles/blueprint/src/components/slider/_common.scss

@@ -1,48 +0,0 @@
-// 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%);
-  }
-}