@stoplight/ui-kit 3.0.1 → 3.0.3

package/src/styles/blueprint/src/components/breadcrumbs/_breadcrumbs.scss

@@ -1,142 +0,0 @@
-// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
-// Licensed under the Apache License, Version 2.0.
-
-@import "~@blueprintjs/icons/src/icons";
-@import "../../common/variables";
-
-/*
-Breadcrumbs
-
-Markup:
-<ul class="#{$ns}-breadcrumbs">
-  <li><a class="#{$ns}-breadcrumbs-collapsed" href="#"></a></li>
-  <li><a class="#{$ns}-breadcrumb #{$ns}-disabled">Folder one</a></li>
-  <li><a class="#{$ns}-breadcrumb" href="#">Folder two</a></li>
-  <li><a class="#{$ns}-breadcrumb" href="#">Folder three</a></li>
-  <li><span class="#{$ns}-breadcrumb #{$ns}-breadcrumb-current">File</span></li>
-</ul>
-
-Styleguide breadcrumbs
-*/
-
-.#{$ns}-breadcrumbs {
-  align-items: center;
-  cursor: default;
-  display: flex;
-  flex-wrap: wrap;
-  height: $pt-input-height;
-  list-style: none;
-  // unstyled inline list reset
-  margin: 0;
-  padding: 0;
-
-  // descendant selector because nothing should come between ul and li
-  > li {
-    align-items: center;
-    display: flex;
-
-    &::after {
-      background: svg-icon("16px/chevron-right.svg", (path: (fill: $pt-icon-color)));
-      content: "";
-      display: block;
-      height: $pt-icon-size-standard;
-      margin: 0 ($pt-grid-size * 0.5);
-      width: $pt-icon-size-standard;
-    }
-
-    &:last-of-type::after {
-      display: none;
-    }
-  }
-}
-
-.#{$ns}-breadcrumb,
-.#{$ns}-breadcrumb-current,
-.#{$ns}-breadcrumbs-collapsed {
-  align-items: center;
-  display: inline-flex;
-  font-size: $pt-font-size-large;
-}
-
-.#{$ns}-breadcrumb,
-.#{$ns}-breadcrumbs-collapsed {
-  color: $pt-text-color-muted;
-}
-
-.#{$ns}-breadcrumb {
-  &:hover {
-    text-decoration: none;
-  }
-
-  &.#{$ns}-disabled {
-    color: $pt-text-color-disabled;
-    cursor: not-allowed;
-  }
-
-  .#{$ns}-icon {
-    margin-right: $pt-grid-size * 0.5;
-  }
-}
-
-.#{$ns}-breadcrumb-current {
-  color: inherit;
-  font-weight: 600;
-
-  .#{$ns}-input {
-    font-size: inherit;
-    font-weight: inherit;
-    vertical-align: baseline;
-  }
-}
-
-.#{$ns}-breadcrumbs-collapsed {
-  background: $light-gray1;
-  border: none;
-  border-radius: $pt-border-radius;
-  cursor: pointer;
-  margin-right: 2px;
-  padding: 1px ($pt-grid-size * 0.5);
-  vertical-align: text-bottom;
-
-  &::before {
-    background: svg-icon("16px/more.svg", (circle: (fill: $pt-icon-color))) center no-repeat;
-    content: "";
-    display: block;
-    height: $pt-icon-size-standard;
-    width: $pt-icon-size-standard;
-  }
-
-  &:hover {
-    background: $gray5;
-    color: $pt-text-color;
-    text-decoration: none;
-  }
-}
-
-.#{$ns}-dark {
-  .#{$ns}-breadcrumb,
-  .#{$ns}-breadcrumbs-collapsed {
-    color: $pt-dark-text-color-muted;
-  }
-
-  .#{$ns}-breadcrumbs > li::after {
-    color: $pt-dark-icon-color;
-  }
-
-  .#{$ns}-breadcrumb.#{$ns}-disabled {
-    color: $pt-dark-text-color-disabled;
-  }
-
-  .#{$ns}-breadcrumb-current {
-    color: $pt-dark-text-color;
-  }
-
-  .#{$ns}-breadcrumbs-collapsed {
-    background: rgba($black, 0.4);
-
-    &:hover {
-      background: rgba($black, 0.6);
-      color: $pt-dark-text-color;
-    }
-  }
-}

package/src/styles/blueprint/src/components/button/_button-group.scss

@@ -1,240 +0,0 @@
-// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
-// Licensed under the Apache License, Version 2.0.
-
-@import "../../common/variables";
-@import "../forms/common";
-@import "./common";
-
-/*
-Button groups
-
-Markup:
-<div class="#{$ns}-button-group {{.modifier}}">
-  <button type="button" class="#{$ns}-button #{$ns}-intent-success">Save</button>
-  <button type="button" class="#{$ns}-button #{$ns}-intent-success #{$ns}-icon-caret-down"></button>
-</div>
-<div class="#{$ns}-button-group {{.modifier}}">
-  <a class="#{$ns}-button #{$ns}-icon-database" tabindex="0" role="button">Queries</a>
-  <a class="#{$ns}-button #{$ns}-icon-function" tabindex="0" role="button">Functions</a>
-  <a class="#{$ns}-button" tabindex="0" role="button">
-    Options <span class="#{$ns}-icon-standard #{$ns}-icon-caret-down #{$ns}-align-right"></span>
-  </a>
-</div>
-<div class="#{$ns}-button-group {{.modifier}}">
-  <a class="#{$ns}-button #{$ns}-icon-chart" tabindex="0" role="button"></a>
-  <a class="#{$ns}-button #{$ns}-icon-control" tabindex="0" role="button"></a>
-  <a class="#{$ns}-button #{$ns}-icon-graph" tabindex="0" role="button"></a>
-  <a class="#{$ns}-button #{$ns}-icon-camera" tabindex="0" role="button"></a>
-  <a class="#{$ns}-button #{$ns}-icon-map" tabindex="0" role="button"></a>
-  <a class="#{$ns}-button #{$ns}-icon-code" tabindex="0" role="button"></a>
-  <a class="#{$ns}-button #{$ns}-icon-th" tabindex="0" role="button"></a>
-  <a class="#{$ns}-button #{$ns}-icon-time" tabindex="0" role="button"></a>
-  <a class="#{$ns}-button #{$ns}-icon-compressed" tabindex="0" role="button"></a>
-</div>
-
-.#{$ns}-fill - Buttons expand equally to fill container
-.#{$ns}-large - Use large buttons
-.#{$ns}-minimal - Use minimal buttons
-.#{$ns}-vertical - Vertical layout
-
-Styleguide button-group
-*/
-
-.#{$ns}-button-group {
-  display: inline-flex;
-
-  .#{$ns}-button {
-    // ensure button can never be smaller than its default size
-    flex: 0 0 auto;
-    position: relative;
-    z-index: index($control-group-stack, "button-default");
-
-    // the ordering of these z-index CSS rules is particular because of CSS
-    // selector specificity. specifically, disabled styles should have
-    // precedence over hover and active styles to prevent mouse interactions on
-    // disabled buttons from reordering elements in the stack.
-
-    &:focus {
-      z-index: index($control-group-stack, "button-focus");
-    }
-
-    &:hover {
-      z-index: index($control-group-stack, "button-hover");
-    }
-
-    &:active,
-    &.#{$ns}-active {
-      z-index: index($control-group-stack, "button-active");
-    }
-
-    &:disabled,
-    &.#{$ns}-disabled {
-      z-index: index($control-group-stack, "button-disabled");
-    }
-
-    &[class*="#{$ns}-intent-"] {
-      z-index: index($control-group-stack, "intent-button-default");
-
-      &:focus {
-        z-index: index($control-group-stack, "intent-button-focus");
-      }
-
-      &:hover {
-        z-index: index($control-group-stack, "intent-button-hover");
-      }
-
-      &:active,
-      &.#{$ns}-active {
-        z-index: index($control-group-stack, "intent-button-active");
-      }
-
-      &:disabled,
-      &.#{$ns}-disabled {
-        z-index: index($control-group-stack, "intent-button-disabled");
-      }
-    }
-  }
-
-  // support wrapping buttons in a tooltip, which adds a wrapper element
-  &:not(.#{$ns}-minimal) {
-    > .#{$ns}-popover-wrapper:not(:first-child) .#{$ns}-button,
-    > .#{$ns}-button:not(:first-child) {
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
-    }
-
-    > .#{$ns}-popover-wrapper:not(:last-child) .#{$ns}-button,
-    > .#{$ns}-button:not(:last-child) {
-      border-bottom-right-radius: 0;
-      border-top-right-radius: 0;
-      margin-right: -$button-border-width;
-    }
-  }
-
-  &.#{$ns}-minimal {
-    .#{$ns}-button {
-      @include pt-button-minimal();
-    }
-  }
-
-  .#{$ns}-popover-wrapper,
-  .#{$ns}-popover-target {
-    display: flex;
-    flex: 1 1 auto;
-  }
-
-  /*
-  Responsive
-
-  Markup:
-  <div class="#{$ns}-button-group #{$ns}-large #{$ns}-fill">
-    <a class="#{$ns}-button #{$ns}-intent-primary #{$ns}-fixed" tabindex="0" role="button">Start</a>
-    <a class="#{$ns}-button #{$ns}-intent-primary" tabindex="0" role="button">Left</a>
-    <a class="#{$ns}-button #{$ns}-intent-primary #{$ns}-active" tabindex="0" role="button">Middle</a>
-    <a class="#{$ns}-button #{$ns}-intent-primary" tabindex="0" role="button">Right</a>
-    <a class="#{$ns}-button #{$ns}-intent-primary #{$ns}-fixed" tabindex="0" role="button">End</a>
-  </div>
-  <br />
-  <div class="#{$ns}-button-group #{$ns}-fill">
-    <button class="#{$ns}-button #{$ns}-icon-arrow-left"></button>
-    <button class="#{$ns}-button #{$ns}-fill">Middle</button>
-    <button class="#{$ns}-button #{$ns}-icon-arrow-right"></button>
-  </div>
-
-  Styleguide button-group}-fill
-  */
-
-  &.#{$ns}-fill {
-    display: flex;
-    width: 100%;
-  }
-
-  .#{$ns}-button.#{$ns}-fill,
-  &.#{$ns}-fill .#{$ns}-button:not(.#{$ns}-fixed) {
-    flex: 1 1 auto;
-  }
-
-  /*
-  Vertical button groups
-
-  Markup:
-  <div class="#{$ns}-button-group #{$ns}-vertical">
-    <a class="#{$ns}-button #{$ns}-icon-search-template" role="button" tabindex="0"></a>
-    <a class="#{$ns}-button #{$ns}-icon-zoom-in" role="button" tabindex="0"></a>
-    <a class="#{$ns}-button #{$ns}-icon-zoom-out" role="button" tabindex="0"></a>
-    <a class="#{$ns}-button #{$ns}-icon-zoom-to-fit" role="button" tabindex="0"></a>
-  </div>
-  <div class="#{$ns}-button-group #{$ns}-vertical">
-    <button type="button" class="#{$ns}-button #{$ns}-active">Home</button>
-    <button type="button" class="#{$ns}-button">Pages</button>
-    <button type="button" class="#{$ns}-button">Blog</button>
-    <button type="button" class="#{$ns}-button">Calendar</button>
-  </div>
-  <div class="#{$ns}-button-group #{$ns}-vertical #{$ns}-align-left #{$ns}-large">
-    <button type="button" class="#{$ns}-button #{$ns}-intent-primary #{$ns}-icon-document">Text</button>
-    <button type="button" class="#{$ns}-button #{$ns}-intent-primary #{$ns}-icon-media #{$ns}-active">Media</button>
-    <button type="button" class="#{$ns}-button #{$ns}-intent-primary #{$ns}-icon-link">Sources</button>
-  </div>
-
-  Styleguide button-group-vertical
-  */
-
-  &.#{$ns}-vertical {
-    align-items: stretch;
-    flex-direction: column;
-    vertical-align: top;
-
-    &.#{$ns}-fill {
-      height: 100%;
-      width: unset;
-    }
-
-    .#{$ns}-button {
-      // we never want that margin-right when vertical
-      margin-right: 0 !important; // stylelint-disable-line declaration-no-important
-      // needed to ensure buttons take up the full width when wrapped in a Popover:
-      width: 100%;
-    }
-
-    &:not(.#{$ns}-minimal) {
-      > .#{$ns}-popover-wrapper:first-child .#{$ns}-button,
-      > .#{$ns}-button:first-child {
-        border-radius: $pt-border-radius $pt-border-radius 0 0;
-      }
-
-      > .#{$ns}-popover-wrapper:last-child .#{$ns}-button,
-      > .#{$ns}-button:last-child {
-        border-radius: 0 0 $pt-border-radius $pt-border-radius;
-      }
-
-      > .#{$ns}-popover-wrapper:not(:last-child) .#{$ns}-button,
-      > .#{$ns}-button:not(:last-child) {
-        margin-bottom: -$button-border-width;
-      }
-    }
-  }
-
-  &.#{$ns}-align-left .#{$ns}-button {
-    text-align: left;
-  }
-
-  .#{$ns}-dark & {
-    // support wrapping buttons in a Blueprint.Tooltip, which adds a wrapper element
-    // in dark theme, we adjust the spacing between buttons for best visual results
-    &:not(.#{$ns}-minimal) {
-      // deeply nested selector necessary to target the appropriate popover
-      // wrapper, yet ensure we only style buttons within the target.
-      > .#{$ns}-popover-wrapper:not(:last-child) .#{$ns}-button,
-      > .#{$ns}-button:not(:last-child) {
-        margin-right: $button-border-width;
-      }
-    }
-
-    &.#{$ns}-vertical {
-      > .#{$ns}-popover-wrapper:not(:last-child) .#{$ns}-button,
-      > .#{$ns}-button:not(:last-child) {
-        margin-bottom: $button-border-width;
-      }
-    }
-  }
-}

package/src/styles/blueprint/src/components/button/_button.scss

@@ -1,206 +0,0 @@
-// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
-// Licensed under the Apache License, Version 2.0.
-
-@import "../../common/variables";
-@import "./common";
-
-/*
-Button
-
-Markup:
-<a role="button" class="#{$ns}-button {{.modifier}}" {{:modifier}} tabindex="0">Anchor</a>
-<button type="button" class="#{$ns}-button #{$ns}-icon-add {{.modifier}}" {{:modifier}}>Button</button>
-
-:disabled - Disabled state
-.#{$ns}-active - Active appearance
-.#{$ns}-disabled - Disabled appearance
-.#{$ns}-intent-primary - Primary intent
-.#{$ns}-intent-success - Success intent
-.#{$ns}-intent-warning - Warning intent
-.#{$ns}-intent-danger - Danger intent
-.#{$ns}-minimal - More subtle appearance
-.#{$ns}-outlined - Subtle yet structured appearance
-.#{$ns}-large - Larger size
-.#{$ns}-small - Smaller size
-.#{$ns}-fill - Fill parent container
-
-Styleguide button
-*/
-.#{$ns}-button {
-  @include pt-button-base();
-  @include pt-button-height($pt-button-height);
-
-  &:empty {
-    // override padding from other modifiers (for CSS icon support)
-    // stylelint-disable-next-line declaration-no-important
-    padding: 0 !important;
-  }
-
-  &:disabled,
-  &.#{$ns}-disabled {
-    cursor: not-allowed;
-  }
-
-  &.#{$ns}-fill {
-    display: flex;
-    width: 100%;
-  }
-
-  &.#{$ns}-align-right,
-  .#{$ns}-align-right & {
-    text-align: right;
-  }
-
-  &.#{$ns}-align-left,
-  .#{$ns}-align-left & {
-    text-align: left;
-  }
-
-  // default styles
-  &:not([class*="#{$ns}-intent-"]) {
-    @include pt-button();
-  }
-
-  // intents
-  @each $intent, $colors in $button-intents {
-    &.#{$ns}-intent-#{$intent} {
-      @include pt-button-intent($colors...);
-    }
-  }
-
-  &[class*="#{$ns}-intent-"] .#{$ns}-button-spinner .#{$ns}-spinner-head {
-    stroke: $white;
-  }
-
-  // size modifiers
-  &.#{$ns}-large,
-  .#{$ns}-large & {
-    @include pt-button-height-large();
-  }
-
-  &.#{$ns}-small,
-  .#{$ns}-small & {
-    @include pt-button-height-small();
-  }
-
-  // loading state
-  &.#{$ns}-loading {
-    position: relative;
-
-    &[class*="#{$ns}-icon-"]::before {
-      visibility: hidden;
-    }
-
-    .#{$ns}-button-spinner {
-      margin: 0;
-      // spinner appears centered within button
-      position: absolute;
-    }
-
-    > :not(.#{$ns}-button-spinner) {
-      visibility: hidden;
-    }
-  }
-
-  // icons
-  &[class*="#{$ns}-icon-"] {
-    &::before {
-      @include pt-icon();
-      color: $pt-icon-color;
-    }
-  }
-
-  #{$icon-classes} {
-    color: $pt-icon-color;
-
-    &.#{$ns}-align-right {
-      margin-left: $button-icon-spacing;
-    }
-  }
-
-  // button with SVG icon only (no text or children)
-  .#{$ns}-icon:first-child:last-child,
-  // if loading, then it contains exactly [spinner, icon]
-  .#{$ns}-spinner + .#{$ns}-icon:last-child {
-    // center icon horizontally. this works for large buttons too.
-    margin: 0 (-($pt-button-height - $pt-icon-size-standard) * 0.5);
-  }
-
-  // dark theme
-  .#{$ns}-dark & {
-    &:not([class*="#{$ns}-intent-"]) {
-      @include pt-dark-button();
-
-      &[class*="#{$ns}-icon-"]::before {
-        color: $pt-dark-icon-color;
-      }
-
-      #{$icon-classes} {
-        color: $pt-dark-icon-color;
-      }
-    }
-
-    &[class*="#{$ns}-intent-"] {
-      @include pt-dark-button-intent();
-
-      .#{$ns}-button-spinner .#{$ns}-spinner-head {
-        stroke: $dark-progress-head-color;
-      }
-    }
-  }
-
-  // disabled and intent button icon should use same color as text
-  &:disabled,
-  &.#{$ns}-disabled,
-  &[class*="#{$ns}-intent-"] {
-    &::before,
-    #{$icon-classes} {
-      // stylelint-disable-next-line declaration-no-important
-      color: inherit !important;
-    }
-  }
-
-  // minimal must come last to override all default styles
-  &.#{$ns}-minimal {
-    @include pt-button-minimal();
-  }
-
-  // outline is based on the styles of minimal
-  &.#{$ns}-outlined {
-    @include pt-button-minimal();
-    @include pt-button-outlined();
-  }
-}
-
-a.#{$ns}-button {
-  text-align: center;
-  text-decoration: none;
-  transition: none;
-
-  &,
-  &:hover,
-  &:active {
-    // override global 'a' styles
-    color: $pt-text-color;
-  }
-
-  &.#{$ns}-disabled {
-    color: $button-color-disabled;
-  }
-}
-
-.#{$ns}-button-text {
-  // default: don't grow to fill but allow shrinking as necessary
-  flex: 0 1 auto;
-}
-
-// when alignment is set, grow to fill and inherit `text-align` set on `.#{$ns}-button`
-.#{$ns}-button,
-.#{$ns}-button-group {
-  &.#{$ns}-align-left,
-  &.#{$ns}-align-right {
-    .#{$ns}-button-text {
-      flex: 1 1 auto;
-    }
-  }
-}