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

package/styles/blueprint/src/components/html-select/_common.scss

@@ -0,0 +1,52 @@
+// Copyright 2018 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../forms/common";
+
+%pt-select {
+  @include pt-button-base();
+  @include pt-button();
+
+  // stylelint-disable property-no-vendor-prefix
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  border-radius: $pt-border-radius;
+  height: $pt-button-height;
+  padding: 0 ($input-padding-horizontal * 2.5) 0 $input-padding-horizontal;
+  // fill parent container
+  width: 100%;
+  // stylelint-enable property-no-vendor-prefix
+}
+
+%pt-select-minimal {
+  @include pt-button-minimal();
+}
+
+%pt-select-large {
+  font-size: $pt-font-size-large;
+  height: $pt-button-height-large;
+  padding-right: $input-padding-horizontal * 3.5;
+}
+
+%pt-dark-select {
+  @include pt-dark-button();
+}
+
+%pt-select-disabled {
+  background-color: $button-background-color-disabled;
+  box-shadow: none;
+  color: $button-color-disabled;
+  cursor: not-allowed;
+}
+
+%pt-select-arrow {
+  color: $pt-icon-color;
+  pointer-events: none;
+  position: absolute;
+  right: $input-padding-horizontal * 0.7;
+  top: ($pt-button-height - $pt-icon-size-standard) * 0.5;
+
+  &.#{$ns}-disabled {
+    color: $pt-icon-color-disabled;
+  }
+}

package/styles/blueprint/src/components/html-select/_html-select.scss

@@ -0,0 +1,104 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+@import "../popover/common";
+@import "./common";
+
+/*
+HTML select
+
+Markup:
+<div class="#{$ns}-select {{.modifier}}">
+  <select {{:modifier}}>
+    <option selected>Choose an item...</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+    <option value="4">Four</option>
+  </select>
+</div>
+
+:disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-select</code> for icon coloring (not shown below).
+.#{$ns}-fill - Expand to fill parent container
+.#{$ns}-large - Large size
+.#{$ns}-minimal - Minimal appearance
+
+Styleguide select
+*/
+
+.#{$ns}-html-select,
+.#{$ns}-select {
+  display: inline-block;
+  letter-spacing: normal;
+  position: relative;
+  vertical-align: middle;
+
+  select {
+    @extend %pt-select;
+
+    &:disabled {
+      @extend %pt-select-disabled;
+    }
+
+    &::-ms-expand {
+      // IE11 styling to hide the arrow
+      display: none;
+    }
+  }
+
+  .#{$ns}-icon {
+    @extend %pt-select-arrow;
+    @include pt-icon-colors();
+  }
+
+  &.#{$ns}-minimal select {
+    @extend %pt-select-minimal;
+  }
+
+  &.#{$ns}-large {
+    select {
+      @extend %pt-select-large;
+    }
+
+    &::after, // CSS support
+    .#{$ns}-icon {
+      right: $pt-grid-size * 1.2;
+      top: ($pt-button-height-large - $pt-icon-size-standard) * 0.5;
+    }
+  }
+
+  &.#{$ns}-fill {
+    &,
+    select {
+      width: 100%;
+    }
+  }
+
+  .#{$ns}-dark & {
+    select {
+      @extend %pt-dark-select;
+    }
+
+    option {
+      background-color: $dark-popover-background-color;
+      color: $pt-dark-text-color;
+    }
+
+    option:disabled {
+      color: $pt-dark-text-color-disabled;
+    }
+
+    &::after {
+      color: $pt-dark-icon-color;
+    }
+  }
+}
+
+.#{$ns}-select {
+  &::after {
+    @extend %pt-select-arrow;
+    @include pt-icon();
+    content: $pt-icon-double-caret-vertical;
+  }
+}

package/styles/blueprint/src/components/html-table/_html-table.scss

@@ -0,0 +1,208 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+
+/*
+Tables
+
+Markup:
+<table class="#{$ns}-html-table {{.modifier}}">
+  <thead>
+    <tr>
+      <th>Project</th>
+      <th>Description</th>
+      <th>Technologies</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Blueprint</td>
+      <td>CSS framework and UI toolkit</td>
+      <td>Sass, TypeScript, React</td>
+    </tr>
+    <tr>
+      <td>TSLint</td>
+      <td>Static analysis linter for TypeScript</td>
+      <td>TypeScript</td>
+    </tr>
+    <tr>
+      <td>Plottable</td>
+      <td>Composable charting library built on top of D3</td>
+      <td>SVG, TypeScript, D3</td>
+    </tr>
+  </tbody>
+</table>
+
+.#{$ns}-html-table-bordered - Bordered appearance
+.#{$ns}-html-table-condensed - Condensed smaller appearance
+.#{$ns}-html-table-striped - Striped appearance
+.#{$ns}-interactive - Enables hover styles on rows
+.#{$ns}-small - Small, condensed appearance for this element _and all child elements_
+
+Styleguide html-table
+*/
+
+$table-row-height: $pt-grid-size * 4 !default;
+$table-row-height-small: $pt-grid-size * 3 !default;
+$table-border-width: 1px !default;
+$table-border-color: $pt-divider-black !default;
+$dark-table-border-color: $pt-dark-divider-white !default;
+
+// placeholder for extending inside running-text (see typography)
+%html-table {
+  border-spacing: 0;
+  font-size: $pt-font-size;
+
+  th,
+  td {
+    padding: centered-text($table-row-height);
+    text-align: left;
+    vertical-align: top;
+  }
+
+  th {
+    color: $pt-heading-color;
+    font-weight: 600;
+  }
+
+  td {
+    color: $pt-text-color;
+  }
+
+  tbody tr:first-child {
+    th,
+    td {
+      box-shadow: inset 0 $table-border-width 0 0 $table-border-color;
+    }
+  }
+
+  // a bunch of deep compound selectors ahead, but there's not really a better way to do this right now
+  // stylelint-disable selector-max-compound-selectors
+  .#{$ns}-dark & {
+    th {
+      color: $pt-dark-heading-color;
+    }
+
+    td {
+      color: $pt-dark-text-color;
+    }
+
+    tbody tr:first-child {
+      th,
+      td {
+        box-shadow: inset 0 $table-border-width 0 0 $dark-table-border-color;
+      }
+    }
+  }
+  // stylelint-enable selector-max-compound-selectors
+}
+
+table.#{$ns}-html-table {
+  @extend %html-table;
+
+  &.#{$ns}-html-table-condensed,
+  &.#{$ns}-small {
+    $small-vertical-padding: centered-text($table-row-height-small);
+
+    th,
+    td {
+      padding-bottom: $small-vertical-padding;
+      padding-top: $small-vertical-padding;
+    }
+  }
+
+  &.#{$ns}-html-table-striped {
+    tbody tr:nth-child(odd) td {
+      background: rgba($gray5, 0.15);
+    }
+  }
+
+  // Borders are applied as box-shadows (at the top and left borders of a cell) for better color control.
+  &.#{$ns}-html-table-bordered {
+    th:not(:first-child) {
+      box-shadow: inset $table-border-width 0 0 0 $table-border-color;
+    }
+
+    tbody tr td {
+      box-shadow: inset 0 $table-border-width 0 0 $table-border-color;
+
+      &:not(:first-child) {
+        box-shadow: inset $table-border-width $table-border-width 0 0 $table-border-color;
+      }
+    }
+
+    &.#{$ns}-html-table-striped {
+      tbody tr:not(:first-child) td {
+        box-shadow: none;
+
+        &:not(:first-child) {
+          box-shadow: inset $table-border-width 0 0 0 $table-border-color;
+        }
+      }
+    }
+  }
+
+  &.#{$ns}-interactive {
+    tbody tr {
+      &:hover td {
+        background-color: rgba($gray5, 0.3);
+        cursor: pointer;
+      }
+
+      &:active td {
+        background-color: rgba($gray5, 0.4);
+      }
+    }
+  }
+
+  .#{$ns}-dark & {
+    // stylelint-disable selector-max-compound-selectors
+    &.#{$ns}-html-table-striped {
+      tbody tr:nth-child(odd) td {
+        background: rgba($gray1, 0.15);
+      }
+    }
+
+    // Borders are applied as box-shadows (at the top and left borders of a cell) for better color control.
+    &.#{$ns}-html-table-bordered {
+      th:not(:first-child) {
+        box-shadow: inset $table-border-width 0 0 0 $dark-table-border-color;
+      }
+
+      tbody tr td {
+        box-shadow: inset 0 $table-border-width 0 0 $dark-table-border-color;
+
+        &:not(:first-child) {
+          box-shadow: inset $table-border-width $table-border-width 0 0 $dark-table-border-color;
+        }
+      }
+
+      &.#{$ns}-html-table-striped {
+        tbody tr:not(:first-child) td {
+          box-shadow: inset $table-border-width 0 0 0 $dark-table-border-color;
+
+          // easier than the alternative...
+          // stylelint-disable max-nesting-depth
+          &:first-child {
+            box-shadow: none;
+          }
+        }
+      }
+    }
+
+    &.#{$ns}-interactive {
+      tbody tr {
+        &:hover td {
+          background-color: rgba($gray1, 0.3);
+          cursor: pointer;
+        }
+
+        &:active td {
+          background-color: rgba($gray1, 0.4);
+        }
+      }
+    }
+    // stylelint-enable selector-max-compound-selectors
+  }
+}

package/styles/blueprint/src/components/icon/_icon.scss

@@ -0,0 +1,79 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "~@blueprintjs/icons/src/icons";
+
+// the icon class which will contain an SVG icon
+.#{$ns}-icon {
+  // ensure icons sit inline with text & isolate svg from surrounding elements
+  // (vertical alignment in flow is usually off due to svg - not an issue with flex.)
+  display: inline-block;
+  // respect dimensions exactly
+  flex: 0 0 auto;
+  // sit nicely with inline text
+  vertical-align: text-bottom;
+
+  &:not(:empty)::before {
+    // clear font icon when there's an <svg> image
+    /* stylelint-disable */
+    content: "" !important; // fallback for IE11
+    content: unset !important;
+    /* stylelint-enable */
+  }
+
+  > svg {
+    // prevent extra vertical whitespace
+    display: block;
+
+    // inherit text color unless explicit fill is set
+    &:not([fill]) {
+      fill: currentColor;
+    }
+  }
+}
+
+// intent support for both SVG and legacy font icons
+#{$icon-classes} {
+  @each $intent, $color in $pt-intent-text-colors {
+    &.#{$ns}-intent-#{$intent} {
+      color: $color;
+
+      .#{$ns}-dark & {
+        color: map-get($pt-dark-intent-text-colors, $intent);
+      }
+    }
+  }
+}
+
+//
+// LEGACY icon font styles
+//
+
+span.#{$ns}-icon-standard {
+  @include pt-icon($pt-icon-size-standard);
+  display: inline-block;
+}
+
+span.#{$ns}-icon-large {
+  @include pt-icon($pt-icon-size-large);
+  display: inline-block;
+}
+
+// only apply icon font styles when <svg> image is not present
+span.#{$ns}-icon:empty {
+  font-family: $icons20-family;
+  font-size: inherit;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1;
+
+  &::before {
+    @include pt-icon-font-smoothing();
+  }
+}
+
+@each $name, $content in $icons {
+  .#{$ns}-icon-#{$name}::before {
+    content: $content;
+  }
+}

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

@@ -0,0 +1,172 @@
+// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+$half-grid-size: $pt-grid-size * 0.5 !default;
+
+$menu-item-border-radius: $pt-border-radius - 1 !default;
+
+// Set line-height of menu items to be a multiple of the font size. This is
+// needed because if the line-height does not extend far enough past the font's
+// baseline, clipping will occur when the .#{$ns}-text-overflow-ellipsis class is
+// applied to it (#2177). Also, line-height should be an even value, or content
+// will be misaligned by one pixel (Chrome quirk).
+$menu-item-line-height-factor: 1.4;
+$menu-item-line-height: round($pt-font-size * $menu-item-line-height-factor);
+$menu-item-line-height-large: round($pt-font-size-large * $menu-item-line-height-factor);
+
+$menu-min-width: $pt-grid-size * 18 !default;
+$menu-item-padding: ($pt-button-height - $pt-icon-size-standard) * 0.5 !default;
+$menu-item-padding-large: ($pt-button-height-large - $pt-icon-size-large) * 0.5 !default;
+$menu-item-padding-vertical: ($pt-button-height - $menu-item-line-height) * 0.5 !default;
+$menu-item-padding-vertical-large:
+  ($pt-button-height-large - $menu-item-line-height-large) * 0.5 !default;
+
+$menu-background-color: $white !default;
+$dark-menu-background-color: $dark-gray4 !default;
+
+$menu-item-color-hover: $minimal-button-background-color-hover !default;
+$menu-item-color-active: $minimal-button-background-color-active !default;
+$dark-menu-item-color-hover: $dark-minimal-button-background-color-hover !default;
+$dark-menu-item-color-active: $dark-minimal-button-background-color-active !default;
+
+// customize modifier classes with params.
+// setting modifier to "" will generally apply it as default styles due to & selectors
+@mixin menu-item($disabled-selector: ".#{$ns}-disabled", $hover-selector: ":hover") {
+  @include pt-flex-container(row, $menu-item-padding);
+  align-items: flex-start;
+  border-radius: $menu-item-border-radius;
+  color: inherit;
+  line-height: $menu-item-line-height;
+  padding: $menu-item-padding-vertical $menu-item-padding;
+  text-decoration: none;
+  user-select: none;
+
+  > .#{$ns}-fill {
+    word-break: break-word;
+  }
+
+  &#{$hover-selector} {
+    background-color: $menu-item-color-hover;
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  &#{$disabled-selector} {
+    background-color: inherit;
+    color: $pt-text-color-disabled;
+    cursor: not-allowed;
+  }
+
+  .#{$ns}-dark & {
+    @include dark-menu-item($disabled-selector, $hover-selector);
+  }
+}
+
+@mixin dark-menu-item($disabled-selector: ".#{$ns}-disabled", $hover-selector: ":hover") {
+  color: inherit;
+
+  &#{$hover-selector} {
+    background-color: $dark-menu-item-color-hover;
+    color: inherit;
+  }
+
+  &#{$disabled-selector} {
+    background-color: inherit;
+    color: $pt-dark-text-color-disabled;
+  }
+}
+
+@mixin menu-item-intent($text-colors: $pt-intent-text-colors) {
+  @each $intent, $color in $text-colors {
+    &.#{$ns}-intent-#{$intent} {
+      color: $color;
+
+      .#{$ns}-icon {
+        color: inherit;
+      }
+
+      &::before,
+      &::after,
+      .#{$ns}-menu-item-label {
+        color: $color;
+      }
+
+      &:hover,
+      &.#{$ns}-active {
+        background-color: nth(map-get($button-intents, $intent), 1);
+      }
+
+      &:active {
+        background-color: nth(map-get($button-intents, $intent), 2);
+      }
+
+      &:hover,
+      &:active,
+      &.#{$ns}-active {
+        &,
+        &::before,
+        &::after,
+        .#{$ns}-menu-item-label {
+          color: $white;
+        }
+      }
+    }
+  }
+}
+
+@mixin menu-item-large() {
+  font-size: $pt-font-size-large;
+  line-height: $menu-item-line-height-large;
+  padding: $menu-item-padding-vertical-large $menu-item-padding;
+}
+
+@mixin menu-divider() {
+  border-top: 1px solid $pt-divider-black;
+  display: block;
+  margin: $half-grid-size;
+
+  .#{$ns}-dark & {
+    border-top-color: $pt-dark-divider-white;
+  }
+}
+
+@mixin menu-header($heading-selector: null) {
+  @include menu-divider();
+  cursor: default;
+  padding-left: $menu-item-padding - $half-grid-size;
+
+  @if $heading-selector != null {
+    &:first-of-type {
+      border-top: none;
+    }
+
+    #{$heading-selector} {
+      @include menu-heading();
+    }
+
+    &:first-of-type #{$heading-selector} {
+      padding-top: 0;
+    }
+  }
+}
+
+@mixin menu-heading() {
+  @include heading-typography();
+  @include overflow-ellipsis();
+  // a little extra space to avoid clipping descenders (because overflow hidden)
+  line-height: $pt-icon-size-standard + 1px;
+  margin: 0;
+  padding: $pt-grid-size $menu-item-padding 0 1px;
+}
+
+@mixin menu-header-large($heading-selector) {
+  #{$heading-selector} {
+    font-size: $pt-grid-size * 1.8;
+    padding-bottom: $pt-grid-size * 0.5;
+    padding-top: $pt-grid-size * 1.5;
+  }
+
+  &:first-of-type #{$heading-selector} {
+    padding-top: 0;
+  }
+}