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

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

@@ -0,0 +1,216 @@
+// 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/styles/blueprint/src/components/spinner/_spinner.scss

@@ -0,0 +1,65 @@
+// 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/styles/blueprint/src/components/tabs/_tabs.scss

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

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