@stoplight/ui-kit 3.0.1 → 3.0.3

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

@@ -1,216 +0,0 @@
-// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
-// Licensed under the Apache License, Version 2.0.
-
-@import "../tooltip/common";
-@import "./common";
-
-$handle-size: $pt-icon-size-standard !default;
-$track-size: $handle-size - $pt-grid-size !default;
-$label-offset: $handle-size + 4px !default;
-
-// retain legacy variable aliases so as to not break consumers
-$handle-height: $handle-size !default;
-$track-height: $track-size !default;
-
-.#{$ns}-slider {
-  @include slider-orientation($pt-input-height-large, $vertical: false);
-  cursor: default;
-  outline: none;
-  position: relative;
-  user-select: none;
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &:active {
-    cursor: grabbing;
-  }
-
-  &.#{$ns}-disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  &.#{$ns}-slider-unlabeled {
-    height: $handle-size;
-  }
-}
-
-.#{$ns}-slider-track,
-.#{$ns}-slider-progress {
-  @include slider-track-orientation($handle-size, $track-size, $vertical: false);
-  position: absolute;
-}
-
-.#{$ns}-slider-track {
-  border-radius: $pt-border-radius;
-  overflow: hidden;
-}
-
-.#{$ns}-slider-progress {
-  background: rgba($gray1, 0.2);
-
-  .#{$ns}-dark & {
-    background: rgba($black, 0.5);
-  }
-
-  @each $intent, $color in $pt-intent-colors {
-    &.#{$ns}-intent-#{$intent} {
-      background-color: $color;
-    }
-  }
-}
-
-.#{$ns}-slider-handle {
-  @include pt-button();
-  border-radius: $pt-border-radius;
-  box-shadow: $button-box-shadow-overlay;
-  cursor: pointer;
-  height: $handle-size;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: $handle-size;
-
-  // ensure target handle's label always covers neighbors
-  &:focus {
-    z-index: 1;
-  }
-
-  &:hover {
-    @include pt-button-hover();
-    box-shadow: $button-box-shadow-overlay;
-    cursor: grab;
-    z-index: 2;
-  }
-
-  &.#{$ns}-active {
-    @include pt-button-active();
-    box-shadow: $button-box-shadow-overlay-active;
-    cursor: grabbing;
-  }
-
-  .#{$ns}-disabled & {
-    background: $gray5;
-    box-shadow: none;
-    // easy way to avoid lots of special cases to ignore mouse states when disabled:
-    pointer-events: none;
-  }
-
-  .#{$ns}-dark & {
-    @include pt-dark-button();
-
-    &,
-    &:hover {
-      background-color: $dark-gray5;
-    }
-
-    &.#{$ns}-active {
-      background-color: $dark-gray3;
-    }
-  }
-
-  .#{$ns}-dark .#{$ns}-disabled & {
-    background: $gray1;
-    border-color: $gray1;
-    box-shadow: none;
-  }
-
-  .#{$ns}-slider-label {
-    background: $tooltip-background-color;
-    border-radius: $pt-border-radius;
-    box-shadow: $pt-tooltip-box-shadow;
-    color: $tooltip-text-color;
-    margin-left: $handle-size * 0.5;
-
-    .#{$ns}-dark & {
-      background: $dark-tooltip-background-color;
-      box-shadow: $pt-dark-tooltip-box-shadow;
-      color: $dark-tooltip-text-color;
-    }
-
-    .#{$ns}-disabled & {
-      box-shadow: none;
-    }
-  }
-
-  &.#{$ns}-start,
-  &.#{$ns}-end {
-    width: $handle-size * 0.5;
-  }
-
-  &.#{$ns}-start {
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  &.#{$ns}-end {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-    margin-left: $handle-size * 0.5;
-
-    .#{$ns}-slider-label {
-      margin-left: 0;
-    }
-  }
-}
-
-.#{$ns}-slider-label {
-  @include slider-label-orientation($label-offset);
-  display: inline-block;
-  font-size: $pt-font-size-small;
-  line-height: 1;
-  padding: ($pt-grid-size * 0.2) ($pt-grid-size * 0.5);
-  position: absolute;
-  vertical-align: top;
-}
-
-.#{$ns}-slider.#{$ns}-vertical {
-  @include slider-orientation($pt-input-height-large, $vertical: true);
-
-  .#{$ns}-slider-track,
-  .#{$ns}-slider-progress {
-    @include slider-track-orientation($handle-size, $track-size, $vertical: true);
-  }
-
-  .#{$ns}-slider-progress {
-    top: auto;
-  }
-
-  .#{$ns}-slider-label {
-    @include slider-label-orientation($label-offset, $vertical: true);
-  }
-
-  .#{$ns}-slider-handle {
-    top: auto;
-
-    .#{$ns}-slider-label {
-      margin-left: 0;
-      margin-top: -$handle-size * 0.5;
-    }
-
-    &.#{$ns}-end,
-    &.#{$ns}-start {
-      height: $handle-size * 0.5;
-      margin-left: 0;
-      width: $handle-size;
-    }
-
-    &.#{$ns}-start {
-      border-bottom-right-radius: $pt-border-radius;
-      border-top-left-radius: 0;
-
-      .#{$ns}-slider-label {
-        transform: translate($label-offset);
-      }
-    }
-
-    &.#{$ns}-end {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      border-top-left-radius: $pt-border-radius;
-      margin-bottom: $handle-size * 0.5;
-    }
-  }
-}

package/src/styles/blueprint/src/components/spinner/_spinner.scss

@@ -1,65 +0,0 @@
-// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
-// Licensed under the Apache License, Version 2.0.
-
-@import "../../common/variables";
-@import "../progress-bar/common";
-
-@keyframes pt-spinner-animation {
-  from { transform: rotate(0deg); }
-  to   { transform: rotate(360deg); }
-}
-
-.#{$ns}-spinner {
-  align-items: center;
-  // center animation container inside parent element to isolate layout
-  display: flex;
-  justify-content: center;
-
-  // allow paths to overflow container -- critical for edges of circles!
-  overflow: visible;
-  vertical-align: middle;
-
-  svg {
-    display: block;
-  }
-
-  path {
-    fill-opacity: 0;
-  }
-
-  .#{$ns}-spinner-head {
-    stroke: $progress-head-color;
-    stroke-linecap: round;
-    transform-origin: center;
-    transition: stroke-dashoffset ($pt-transition-duration * 2) $pt-transition-ease;
-  }
-
-  .#{$ns}-spinner-track {
-    stroke: $progress-track-color;
-  }
-}
-
-// put the animation on a child HTML element to isolate it from display of parent
-.#{$ns}-spinner-animation {
-  animation: pt-spinner-animation ($pt-transition-duration * 5) linear infinite;
-
-  .#{$ns}-no-spin > & {
-    animation: none;
-  }
-}
-
-.#{$ns}-dark .#{$ns}-spinner {
-  .#{$ns}-spinner-head {
-    stroke: $dark-progress-head-color;
-  }
-
-  .#{$ns}-spinner-track {
-    stroke: $dark-progress-track-color;
-  }
-}
-
-@each $intent, $color in $pt-intent-colors {
-  .#{$ns}-spinner.#{$ns}-intent-#{$intent} .#{$ns}-spinner-head {
-    stroke: $color;
-  }
-}

package/src/styles/blueprint/src/components/tabs/_tabs.scss

@@ -1,199 +0,0 @@
-// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
-// Licensed under the Apache License, Version 2.0.
-
-@import "../../common/variables";
-@import "../../common/mixins";
-
-/*
-Tabs
-
-Markup:
-<div class="#{$ns}-tabs">
-    <ul class="#{$ns}-tab-list {{.modifier}}" role="tablist">
-        <li class="#{$ns}-tab" role="tab" aria-selected="true">Selected tab</li>
-        <li class="#{$ns}-tab" role="tab">Another tab</li>
-        <li class="#{$ns}-tab" role="tab" aria-disabled="true">Disabled tab</li>
-    </ul>
-    <div class="#{$ns}-tab-panel" role="tabpanel">Selected panel</div>
-    <div class="#{$ns}-tab-panel" role="tabpanel" aria-hidden="true">Another panel</div>
-    <div class="#{$ns}-tab-panel" role="tabpanel" aria-hidden="true">Disabled panel</div>
-</div>
-
-.#{$ns}-large - Large tabs
-
-Styleguide tabs
-*/
-
-$tab-color-selected: $pt-link-color !default;
-$dark-tab-color-selected: $pt-dark-link-color !default;
-
-$tab-indicator-width: 3px !default;
-
-.#{$ns}-tabs.#{$ns}-vertical {
-  display: flex;
-
-  // include '>' to ensure we're only modifying
-  // these tabs, not tabs that might be further
-  // down the DOM hierarchy (i.e. tabs in tabs)
-  > .#{$ns}-tab-list {
-    align-items: flex-start;
-    flex-direction: column;
-
-    .#{$ns}-tab {
-      border-radius: $pt-border-radius;
-      padding: 0 $pt-grid-size;
-      width: 100%;
-
-      &[aria-selected="true"] {
-        background-color: rgba($pt-intent-primary, 0.2);
-        box-shadow: none;
-      }
-    }
-
-    .#{$ns}-tab-indicator-wrapper .#{$ns}-tab-indicator {
-      background-color: rgba($pt-intent-primary, 0.2);
-      border-radius: $pt-border-radius;
-      bottom: 0;
-      height: auto;
-      left: 0;
-      right: 0;
-      top: 0;
-    }
-  }
-
-  // same consideration here: avoid styling any
-  // other tabs that might be contained in this
-  // vertical tab component
-  > .#{$ns}-tab-panel {
-    margin-top: 0;
-    padding-left: $pt-grid-size * 2;
-  }
-}
-
-.#{$ns}-tab-list {
-  align-items: flex-end;
-  border: none;
-  display: flex;
-  flex: 0 0 auto;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  position: relative;
-
-  // this is fine.
-  // stylelint-disable-next-line selector-no-universal
-  > *:not(:last-child) {
-    margin-right: $pt-grid-size * 2;
-  }
-}
-
-.#{$ns}-tab {
-  @include overflow-ellipsis();
-  color: $pt-text-color;
-  cursor: pointer;
-  flex: 0 0 auto;
-  font-size: $pt-font-size;
-  line-height: $pt-button-height;
-  max-width: 100%;
-  position: relative;
-  vertical-align: top;
-
-  // support for links in tab titles #363
-  a {
-    color: inherit;
-    display: block;
-    text-decoration: none;
-  }
-
-  .#{$ns}-tab-indicator-wrapper ~ & {
-    // these properties are only for static markup, therefore
-    // we never want them if there's a tab indicator
-    // stylelint-disable declaration-no-important
-    background-color: transparent !important;
-    box-shadow: none !important;
-    // stylelint-enable declaration-no-important
-  }
-
-  &[aria-disabled="true"] {
-    color: $pt-text-color-disabled;
-    cursor: not-allowed;
-  }
-
-  &[aria-selected="true"] {
-    border-radius: 0;
-    box-shadow: inset 0 (-$tab-indicator-width) 0 $tab-color-selected;
-  }
-
-  &[aria-selected="true"],
-  &:not([aria-disabled="true"]):hover {
-    color: $tab-color-selected;
-  }
-
-  &:focus {
-    -moz-outline-radius: 0;
-  }
-
-  .#{$ns}-large > & {
-    font-size: $pt-font-size-large;
-    line-height: $pt-button-height-large;
-  }
-}
-
-.#{$ns}-tab-panel {
-  margin-top: $pt-grid-size * 2;
-
-  &[aria-hidden="true"] {
-    display: none;
-  }
-}
-
-.#{$ns}-tab-indicator-wrapper {
-  left: 0;
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  transform: translateX(0), translateY(0);
-  transition: height, transform, width;
-  transition-duration: $pt-transition-duration * 2;
-  transition-timing-function: $pt-transition-ease;
-
-  .#{$ns}-tab-indicator {
-    background-color: $tab-color-selected;
-    bottom: 0;
-    height: $tab-indicator-width;
-    left: 0;
-    position: absolute;
-    right: 0;
-  }
-
-  &.#{$ns}-no-animation {
-    transition: none;
-  }
-}
-
-.#{$ns}-dark {
-  .#{$ns}-tab {
-    color: $pt-dark-text-color;
-
-    &[aria-disabled="true"] {
-      color: $pt-dark-text-color-disabled;
-    }
-
-    &[aria-selected="true"] {
-      box-shadow: inset 0 (-$tab-indicator-width) 0 $dark-tab-color-selected;
-    }
-
-    &[aria-selected="true"],
-    &:not([aria-disabled="true"]):hover {
-      color: $dark-tab-color-selected;
-    }
-  }
-
-  .#{$ns}-tab-indicator {
-    background-color: $dark-tab-color-selected;
-  }
-}
-
-.#{$ns}-flex-expander {
-  flex: 1 1;
-}

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

@@ -1,202 +0,0 @@
-// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
-// Licensed under the Apache License, Version 2.0.
-
-$tag-default-color: $gray1 !default;
-$dark-tag-default-color: $gray5 !default;
-
-$tag-height: $pt-grid-size * 2 !default;
-$tag-line-height: $pt-icon-size-standard !default;
-$tag-padding-top: ($tag-height - $tag-line-height) * 0.5 !default;
-$tag-padding: $tag-padding-top * 3 !default;
-$tag-margin: ($pt-input-height - $tag-height) * 0.5 !default;
-
-$tag-height-large: $pt-grid-size * 3 !default;
-$tag-line-height-large: $pt-icon-size-large !default;
-$tag-padding-large: ($tag-height-large - $tag-line-height-large) !default;
-
-$tag-icon-spacing: ($tag-height - 12px) * 0.5 !default;
-$tag-icon-spacing-large: ($tag-height-large - $pt-icon-size-standard) * 0.5 !default;
-
-$tag-round-adjustment: 2px !default;
-
-@mixin pt-tag() {
-  @include pt-tag-interactive($tag-default-color, 1);
-  @include pt-flex-container(row, $tag-icon-spacing, inline);
-  align-items: center;
-  background-color: $tag-default-color;
-  border: none;
-  border-radius: $pt-border-radius;
-  box-shadow: none;
-  color: $pt-dark-text-color;
-  font-size: $pt-font-size-small;
-  line-height: $tag-line-height;
-  max-width: 100%;
-  min-height: $tag-height;
-  min-width: $tag-height;
-  padding: $tag-padding-top $tag-padding;
-
-  position: relative;
-
-  &:focus {
-    @include focus-outline(0);
-  }
-
-  &.#{$ns}-round {
-    border-radius: $tag-height-large;
-    padding-left: $tag-padding + $tag-round-adjustment;
-    // optical adjustment for rounded tags
-    padding-right: $tag-padding + $tag-round-adjustment;
-  }
-
-  .#{$ns}-dark & {
-    @include pt-tag-interactive($dark-tag-default-color, 1);
-
-    background-color: $dark-tag-default-color;
-    color: $pt-text-color;
-
-    > #{$icon-classes} {
-      fill: currentColor;
-    }
-  }
-
-  > #{$icon-classes} {
-    fill: $white;
-  }
-}
-
-@mixin pt-tag-large() {
-  @include pt-flex-margin(row, $tag-icon-spacing-large);
-  font-size: $pt-font-size;
-  line-height: $tag-line-height-large;
-  min-height: $tag-height-large;
-  min-width: $tag-height-large;
-  padding: ($tag-padding-large * 0.5) $tag-padding-large;
-
-  &.#{$ns}-round {
-    padding-left: $tag-padding-large + $tag-round-adjustment;
-    // optical adjustment for rounded tags
-    padding-right: $tag-padding-large + $tag-round-adjustment;
-  }
-}
-
-@mixin pt-tag-intent($background-color, $text-color: $white) {
-  @include pt-tag-interactive($background-color, 1);
-
-  background: $background-color;
-  color: $text-color;
-}
-
-@mixin pt-tag-minimal() {
-  > #{$icon-classes} {
-    fill: $pt-icon-color;
-  }
-
-  &:not([class*="#{$ns}-intent-"]) {
-    @include pt-tag-minimal-interactive($tag-default-color, 0.2);
-
-    background-color: rgba($gray3, 0.2);
-    color: $pt-text-color;
-
-    .#{$ns}-dark & {
-      @include pt-tag-minimal-interactive($dark-tag-default-color, 0.2);
-
-      color: $pt-dark-text-color;
-
-      > #{$icon-classes} {
-        fill: $pt-dark-icon-color;
-      }
-    }
-  }
-}
-
-@mixin pt-tag-minimal-intent($background-color, $text-color, $dark-text-color) {
-  @include pt-tag-minimal-interactive($background-color, 0.15);
-
-  background-color: rgba($background-color, 0.15);
-  color: $text-color;
-
-  > #{$icon-classes} {
-    fill: $background-color;
-  }
-
-  .#{$ns}-dark & {
-    @include pt-tag-minimal-interactive($background-color, 0.25);
-
-    background-color: rgba($background-color, 0.25);
-    color: $dark-text-color;
-  }
-}
-
-@mixin pt-tag-interactive($background-color, $opacity) {
-  &.#{$ns}-interactive {
-    cursor: pointer;
-
-    &:hover {
-      background-color: rgba($background-color, $opacity - 0.15);
-    }
-
-    &.#{$ns}-active,
-    &:active {
-      background-color: rgba($background-color, $opacity - 0.3);
-    }
-  }
-}
-
-@mixin pt-tag-minimal-interactive($background-color, $opacity) {
-  &.#{$ns}-interactive {
-    cursor: pointer;
-
-    &:hover {
-      background-color: rgba($background-color, $opacity + 0.1);
-    }
-
-    &.#{$ns}-active,
-    &:active {
-      background-color: rgba($background-color, $opacity + 0.2);
-    }
-  }
-}
-
-@mixin pt-tag-remove() {
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  display: flex;
-  margin-bottom: -$tag-padding-top;
-  // stylelint-disable-next-line declaration-no-important
-  margin-right: -$tag-padding !important;
-  // top/bottom to allow for padding to enlarge click area,
-  // right to tuck remove button into padding space.
-  margin-top: -$tag-padding-top;
-  opacity: 0.5;
-  padding: $tag-padding-top;
-  padding-left: 0;
-
-  &:hover {
-    background: none;
-    opacity: 0.8;
-    text-decoration: none;
-  }
-
-  &:active {
-    opacity: 1;
-  }
-
-  // CSS API support
-  &:empty::before {
-    @include pt-icon();
-    content: $pt-icon-small-cross;
-  }
-
-  .#{$ns}-large & {
-    // stylelint-disable-next-line declaration-no-important
-    margin-right: -$tag-padding-large !important;
-    padding: ($tag-height-large - $pt-icon-size-large) * 0.5;
-    padding-left: 0;
-
-    &:empty::before {
-      @include pt-icon-sized($pt-icon-size-large);
-    }
-  }
-}