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

package/styles/blueprint/src/components/forms/_controls.scss

@@ -0,0 +1,526 @@
+// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@use "sass:math";
+
+@import "../../common/mixins";
+@import "../../common/variables";
+@import "../button/common";
+
+$control-background-color: $button-background-color !default;
+$control-background-color-hover: $button-background-color-hover !default;
+$control-background-color-active: $button-background-color-active !default;
+$dark-control-background-color: $dark-button-background-color !default;
+$dark-control-background-color-hover: $dark-button-background-color-hover !default;
+$dark-control-background-color-active: $dark-button-background-color-active !default;
+
+$control-checked-background-color: nth(map-get($button-intents, "primary"), 1) !default;
+$control-checked-background-color-hover: nth(map-get($button-intents, "primary"), 2) !default;
+$control-checked-background-color-active: nth(map-get($button-intents, "primary"), 3) !default;
+
+$control-indicator-size: $pt-icon-size-standard !default;
+$control-indicator-size-large: $pt-icon-size-large !default;
+$control-indicator-spacing: $pt-grid-size !default;
+
+@mixin control-checked-colors($selector: ":checked") {
+  input#{$selector} ~ .#{$ns}-control-indicator {
+    background-color: $control-checked-background-color;
+    background-image: $button-intent-gradient;
+    box-shadow: $button-intent-box-shadow;
+    color: $white;
+  }
+
+  &:hover input#{$selector} ~ .#{$ns}-control-indicator {
+    background-color: $control-checked-background-color-hover;
+    box-shadow: $button-intent-box-shadow;
+  }
+
+  input:not(:disabled):active#{$selector} ~ .#{$ns}-control-indicator {
+    background: $control-checked-background-color-active;
+    box-shadow: $button-intent-box-shadow-active;
+  }
+
+  input:disabled#{$selector} ~ .#{$ns}-control-indicator {
+    background: rgba($control-checked-background-color, 0.5);
+    box-shadow: none;
+  }
+
+  .#{$ns}-dark & {
+    input#{$selector} ~ .#{$ns}-control-indicator {
+      box-shadow: $dark-button-intent-box-shadow;
+    }
+
+    &:hover input#{$selector} ~ .#{$ns}-control-indicator {
+      background-color: $control-checked-background-color-hover;
+      box-shadow: $dark-button-intent-box-shadow;
+    }
+
+    input:not(:disabled):active#{$selector} ~ .#{$ns}-control-indicator {
+      background-color: $control-checked-background-color-active;
+      box-shadow: $dark-button-intent-box-shadow-active;
+    }
+
+    input:disabled#{$selector} ~ .#{$ns}-control-indicator {
+      background: rgba($control-checked-background-color-active, 0.5);
+      box-shadow: none;
+    }
+  }
+}
+
+@mixin indicator-position($size) {
+  $padding: $size + $control-indicator-spacing;
+
+  &:not(.#{$ns}-align-right) {
+    padding-left: $padding;
+
+    .#{$ns}-control-indicator {
+      margin-left: -$padding;
+    }
+  }
+
+  &.#{$ns}-align-right {
+    padding-right: $padding;
+
+    .#{$ns}-control-indicator {
+      margin-right: -$padding;
+    }
+  }
+}
+
+.#{$ns}-control {
+  @include control-checked-colors();
+  @include indicator-position($control-indicator-size);
+  cursor: pointer;
+
+  display: block;
+  margin-bottom: $pt-grid-size;
+  position: relative;
+  text-transform: none;
+
+  &.#{$ns}-disabled {
+    color: $pt-text-color-disabled;
+    cursor: not-allowed;
+  }
+
+  &.#{$ns}-inline {
+    display: inline-block;
+    margin-right: $pt-grid-size * 2;
+  }
+
+  input {
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    z-index: -1; // don't let it intercept clicks
+  }
+
+  .#{$ns}-control-indicator {
+    background-clip: padding-box;
+    background-color: $control-background-color;
+    background-image: $button-gradient;
+    border: none;
+    box-shadow: $button-box-shadow;
+    cursor: pointer;
+    display: inline-block;
+    // font-size is used to size indicator for all control types,
+    // to reduce property changes needed across types and sizes (large).
+    font-size: $control-indicator-size;
+    height: 1em;
+    margin-right: $control-indicator-spacing;
+    margin-top: -3px;
+    position: relative;
+    user-select: none;
+    vertical-align: middle;
+    width: 1em;
+
+    &::before {
+      content: "";
+      display: block;
+      height: 1em;
+      width: 1em;
+    }
+  }
+
+  &:hover .#{$ns}-control-indicator {
+    background-color: $control-background-color-hover;
+  }
+
+  input:not(:disabled):active ~ .#{$ns}-control-indicator {
+    background: $control-background-color-active;
+    box-shadow: $button-box-shadow-active;
+  }
+
+  input:disabled ~ .#{$ns}-control-indicator {
+    background: $button-background-color-disabled;
+    box-shadow: none;
+    cursor: not-allowed;
+  }
+
+  input:focus ~ .#{$ns}-control-indicator {
+    @include focus-outline();
+  }
+
+  // right-aligned indicator is glued to the right side of the container
+  &.#{$ns}-align-right .#{$ns}-control-indicator {
+    float: right;
+    margin-left: $control-indicator-spacing;
+    margin-top: 1px;
+  }
+
+  &.#{$ns}-large {
+    @include indicator-position($control-indicator-size-large);
+    // larger text
+    font-size: $pt-font-size-large;
+
+    .#{$ns}-control-indicator {
+      // em-based sizing
+      font-size: $control-indicator-size-large;
+    }
+
+    &.#{$ns}-align-right .#{$ns}-control-indicator {
+      margin-top: 0;
+    }
+  }
+
+  /*
+  Checkbox
+
+  Markup:
+  <label class="#{$ns}-control #{$ns}-checkbox {{.modifier}}">
+    <input type="checkbox" {{:modifier}} />
+    <span class="#{$ns}-control-indicator"></span>
+    Checkbox
+  </label>
+
+  :checked  - Checked
+  :disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
+  :indeterminate - Indeterminate. Note that this style can only be achieved via JavaScript
+                   <code>input.indeterminate = true</code>.
+  .#{$ns}-align-right - Right-aligned indicator
+  .#{$ns}-large - Large
+
+  Styleguide checkbox
+  */
+
+  &.#{$ns}-checkbox {
+    @mixin indicator-inline-icon($icon) {
+      &::before {
+        // embed SVG icon image as backgroud-image above gradient.
+        // the SVG image content is inlined into the CSS, so use this sparingly.
+        background-image: svg-icon("16px/#{$icon}.svg", (path: (fill: $white)));
+      }
+    }
+
+    // make :indeterminate look like :checked _for Checkbox only_
+    @include control-checked-colors(":indeterminate");
+
+    .#{$ns}-control-indicator {
+      border-radius: $pt-border-radius;
+    }
+
+    input:checked ~ .#{$ns}-control-indicator {
+      @include indicator-inline-icon("small-tick");
+    }
+
+    input:indeterminate ~ .#{$ns}-control-indicator {
+      @include indicator-inline-icon("small-minus");
+    }
+  }
+
+  /*
+  Radio
+
+  Markup:
+  <label class="#{$ns}-control #{$ns}-radio {{.modifier}}">
+    <input type="radio" name="docs-radio-regular" {{:modifier}} />
+    <span class="#{$ns}-control-indicator"></span>
+    Radio
+  </label>
+
+  :checked  - Selected
+  :disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
+  .#{$ns}-align-right - Right-aligned indicator
+  .#{$ns}-large - Large
+
+  Styleguide radio
+  */
+
+  &.#{$ns}-radio {
+    .#{$ns}-control-indicator {
+      border-radius: 50%;
+    }
+
+    input:checked ~ .#{$ns}-control-indicator::before {
+      background-image: radial-gradient($white, $white 28%, transparent 32%);
+    }
+
+    input:checked:disabled ~ .#{$ns}-control-indicator::before {
+      opacity: 0.5;
+    }
+
+    input:focus ~ .#{$ns}-control-indicator {
+      -moz-outline-radius: $control-indicator-size;
+    }
+  }
+
+  /*
+  Switch
+
+  Markup:
+  <label class="#{$ns}-control #{$ns}-switch {{.modifier}}">
+    <input type="checkbox" {{:modifier}} />
+    <span class="#{$ns}-control-indicator"></span>
+    Switch
+  </label>
+
+  :checked  - Selected
+  :disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
+  .#{$ns}-align-right - Right-aligned indicator
+  .#{$ns}-large - Large
+
+  Styleguide switch
+  */
+
+  // stylelint-disable-next-line order/order
+  $switch-width: 1.75em !default;
+  $switch-indicator-margin: 2px !default;
+  $switch-indicator-size: calc(1em - #{$switch-indicator-margin * 2});
+
+  $switch-indicator-child-height: 1em;
+  $switch-indicator-child-outside-margin: 0.5em;
+  $switch-indicator-child-inside-margin: 1.2em;
+
+  $switch-indicator-text-font-size: 0.7em;
+
+  $switch-background-color: rgba($gray4, 0.5) !default;
+  $switch-background-color-hover: rgba($gray2, 0.5) !default;
+  $switch-background-color-active: rgba($gray1, 0.5) !default;
+  $switch-background-color-disabled: $button-background-color-disabled !default;
+  $switch-checked-background-color: $control-checked-background-color !default;
+  $switch-checked-background-color-hover: $control-checked-background-color-hover !default;
+  $switch-checked-background-color-active: $control-checked-background-color-active !default;
+  $switch-checked-background-color-disabled: rgba($blue3, 0.5) !default;
+
+  $dark-switch-background-color: rgba($black, 0.5) !default;
+  $dark-switch-background-color-hover: rgba($black, 0.7) !default;
+  $dark-switch-background-color-active: rgba($black, 0.9) !default;
+  $dark-switch-background-color-disabled: $dark-button-background-color-disabled !default;
+  $dark-switch-checked-background-color: $control-checked-background-color !default;
+  $dark-switch-checked-background-color-hover: $control-checked-background-color-hover !default;
+  $dark-switch-checked-background-color-active: $control-checked-background-color-active !default;
+  $dark-switch-checked-background-color-disabled: rgba($blue1, 0.5) !default;
+
+  $switch-indicator-background-color: $white !default;
+  $switch-indicator-background-color-disabled: rgba($white, 0.8) !default;
+  $dark-switch-indicator-background-color: $dark-gray5 !default;
+  $dark-switch-indicator-background-color-disabled: rgba($black, 0.4) !default;
+
+  &.#{$ns}-switch {
+    @mixin indicator-colors(
+      $selector,
+      $color,
+      $hover-color,
+      $active-color,
+      $disabled-color,
+      $disabled-indicator-color
+    ) {
+      input#{$selector} ~ .#{$ns}-control-indicator {
+        background: $color;
+      }
+
+      &:hover input#{$selector} ~ .#{$ns}-control-indicator {
+        background: $hover-color;
+      }
+
+      input#{$selector}:not(:disabled):active ~ .#{$ns}-control-indicator {
+        background: $active-color;
+      }
+
+      input#{$selector}:disabled ~ .#{$ns}-control-indicator {
+        background: $disabled-color;
+
+        &::before {
+          background: $disabled-indicator-color;
+        }
+      }
+    }
+
+    @include indicator-colors(
+      "",
+      $switch-background-color,
+      $switch-background-color-hover,
+      $switch-background-color-active,
+      $switch-background-color-disabled,
+      $switch-indicator-background-color-disabled
+    );
+    @include indicator-colors(
+      ":checked",
+      $switch-checked-background-color,
+      $switch-checked-background-color-hover,
+      $switch-checked-background-color-active,
+      $switch-checked-background-color-disabled,
+      $switch-indicator-background-color-disabled
+    );
+    // convert em variable to px value
+    @include indicator-position(math.div($switch-width, 1em) * $control-indicator-size);
+
+    .#{$ns}-control-indicator {
+      border: none;
+      border-radius: $switch-width;
+      // override default button styles, never have a box-shadow here.
+      // stylelint-disable-next-line declaration-no-important
+      box-shadow: none !important;
+      min-width: $switch-width;
+      transition: background-color $pt-transition-duration $pt-transition-ease;
+      width: auto;
+
+      &::before {
+        background: $switch-indicator-background-color;
+        border-radius: 50%;
+        box-shadow: $button-box-shadow-overlay;
+        height: $switch-indicator-size;
+        left: 0;
+        margin: $switch-indicator-margin;
+        position: absolute;
+        transition: left $pt-transition-duration $pt-transition-ease;
+        width: $switch-indicator-size;
+      }
+    }
+
+    input:checked ~ .#{$ns}-control-indicator::before {
+      // 1em is size of indicator
+      left: calc(100% - 1em);
+    }
+
+    &.#{$ns}-large {
+      @include indicator-position(math.div($switch-width, 1em) * $control-indicator-size-large);
+    }
+
+    .#{$ns}-dark & {
+      @include indicator-colors(
+        "",
+        $dark-switch-background-color,
+        $dark-switch-background-color-hover,
+        $dark-switch-background-color-active,
+        $dark-switch-background-color-disabled,
+        $dark-switch-indicator-background-color-disabled
+      );
+      @include indicator-colors(
+        ":checked",
+        $dark-switch-checked-background-color,
+        $dark-switch-checked-background-color-hover,
+        $dark-switch-checked-background-color-active,
+        $dark-switch-checked-background-color-disabled,
+        $dark-switch-indicator-background-color-disabled
+      );
+
+      .#{$ns}-control-indicator::before {
+        background: $dark-switch-indicator-background-color;
+        box-shadow: $dark-button-box-shadow;
+      }
+
+      input:checked ~ .#{$ns}-control-indicator::before {
+        // inset shadow so it forms a dark line instead of blurring into the blue
+        box-shadow: inset $dark-button-box-shadow;
+      }
+    }
+
+    .#{$ns}-switch-inner-text {
+      font-size: $switch-indicator-text-font-size;
+      text-align: center;
+    }
+
+    .#{$ns}-control-indicator-child {
+      &:first-child {
+        line-height: 0;
+        margin-left: $switch-indicator-child-outside-margin;
+        margin-right: $switch-indicator-child-inside-margin;
+        visibility: hidden;
+      }
+
+      &:last-child {
+        line-height: $switch-indicator-child-height;
+        margin-left: $switch-indicator-child-inside-margin;
+        margin-right: $switch-indicator-child-outside-margin;
+        visibility: visible;
+      }
+    }
+
+    input:checked ~ .#{$ns}-control-indicator .#{$ns}-control-indicator-child {
+      &:first-child {
+        line-height: $switch-indicator-child-height;
+        visibility: visible;
+      }
+
+      &:last-child {
+        line-height: 0;
+        visibility: hidden;
+      }
+    }
+  }
+
+  .#{$ns}-dark & {
+    color: $pt-dark-text-color;
+
+    &.#{$ns}-disabled {
+      color: $pt-dark-text-color-disabled;
+    }
+
+    .#{$ns}-control-indicator {
+      background-color: $dark-control-background-color;
+      background-image: $dark-button-gradient;
+      box-shadow: $dark-button-box-shadow;
+    }
+
+    &:hover .#{$ns}-control-indicator {
+      background-color: $dark-control-background-color-hover;
+    }
+
+    input:not(:disabled):active ~ .#{$ns}-control-indicator {
+      background: $dark-control-background-color-active;
+      box-shadow: $dark-button-box-shadow-active;
+    }
+
+    input:disabled ~ .#{$ns}-control-indicator {
+      background: $dark-button-background-color-disabled;
+      box-shadow: none;
+      cursor: not-allowed;
+    }
+
+    &.#{$ns}-checkbox input:disabled {
+      &:checked,
+      &:indeterminate {
+        ~ .#{$ns}-control-indicator {
+          color: $dark-button-color-disabled;
+        }
+      }
+    }
+  }
+
+  /*
+  Inline labels
+
+  Markup:
+  <div>
+    <label class="#{$ns}-label">A group of related options</label>
+    <label class="#{$ns}-control #{$ns}-checkbox #{$ns}-inline">
+      <input type="checkbox" />
+      <span class="#{$ns}-control-indicator"></span>
+      First
+    </label>
+    <label class="#{$ns}-control #{$ns}-checkbox #{$ns}-inline">
+      <input type="checkbox" />
+      <span class="#{$ns}-control-indicator"></span>
+      Second
+    </label>
+    <label class="#{$ns}-control #{$ns}-checkbox #{$ns}-inline">
+      <input type="checkbox" />
+      <span class="#{$ns}-control-indicator"></span>
+      Third
+    </label>
+  </div>
+
+  Styleguide checkbox-inline
+  */
+}

package/styles/blueprint/src/components/forms/_file-input.scss

@@ -0,0 +1,155 @@
+// Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+// Licensed under the Apache License, Version 2.0.
+
+@import "../../common/variables";
+@import "../button/common";
+@import "../../common/mixins";
+
+/*
+File input
+
+Markup:
+<label class="#{$ns}-file-input {{.modifier}}">
+  <input type="file" {{:modifier}}/>
+  <span class="#{$ns}-file-upload-input">Choose file...</span>
+</label>
+
+:disabled - Disabled
+.#{$ns}-large - Larger size
+.#{$ns}-fill - Take up full width of parent element
+.#{$ns}-file-input-has-selection - User has made a selection
+
+Styleguide file-input
+*/
+
+$file-input-button-width: $pt-grid-size * 7 !default;
+$file-input-button-width-large: $pt-grid-size * 8.5 !default;
+$file-input-button-padding: ($pt-input-height - $pt-button-height-small) * 0.5 !default;
+$file-input-button-padding-large: ($pt-input-height-large - $pt-button-height) * 0.5 !default;
+
+.#{$ns}-file-input {
+  cursor: pointer;
+  display: inline-block;
+  height: $pt-input-height;
+  position: relative;
+
+  input {
+    margin: 0;
+    min-width: $pt-grid-size * 20;
+    opacity: 0;
+
+    // unlike other form controls that directly style native elements,
+    // pt-file-input wraps and hides the native element for better control over
+    // visual styles. to disable, we need to disable the hidden child input, not
+    // the surrounding wrapper. @see https://github.com/palantir/blueprint/issues/689
+    // for gory details.
+    &:disabled + .#{$ns}-file-upload-input,
+    &.#{$ns}-disabled + .#{$ns}-file-upload-input {
+      @include pt-input-disabled();
+
+      &::after {
+        @include pt-button-disabled();
+      }
+
+      .#{$ns}-dark & {
+        @include pt-dark-input-disabled();
+
+        &::after {
+          @include pt-dark-button-disabled();
+        }
+      }
+    }
+  }
+
+  &.#{$ns}-file-input-has-selection {
+    .#{$ns}-file-upload-input {
+      color: $pt-text-color;
+    }
+
+    .#{$ns}-dark & .#{$ns}-file-upload-input {
+      color: $pt-dark-text-color;
+    }
+  }
+
+  &.#{$ns}-fill {
+    width: 100%;
+  }
+
+  &.#{$ns}-large,
+  .#{$ns}-large & {
+    height: $pt-input-height-large;
+  }
+
+  .#{$ns}-file-upload-input-custom-text::after {
+    content: attr(#{$ns}-button-text);
+  }
+}
+
+.#{$ns}-file-upload-input {
+  @include pt-input();
+  @include overflow-ellipsis();
+  color: $pt-text-color-disabled;
+  left: 0;
+  padding-right: $file-input-button-width + $input-padding-horizontal;
+  position: absolute;
+  right: 0;
+  top: 0;
+  user-select: none;
+
+  &::after {
+    @include pt-button();
+    @include pt-button-height($pt-button-height-small);
+    @include overflow-ellipsis();
+    border-radius: $pt-border-radius;
+    content: "Browse";
+    line-height: $pt-button-height-small;
+    margin: $file-input-button-padding;
+    position: absolute;
+    right: 0;
+    text-align: center;
+    top: 0;
+    width: $file-input-button-width;
+  }
+
+  &:hover::after {
+    @include pt-button-hover();
+  }
+
+  &:active::after {
+    @include pt-button-active();
+  }
+
+  .#{$ns}-large & {
+    @include pt-input-large();
+    padding-right: $file-input-button-width-large + $input-padding-horizontal;
+
+    &::after {
+      @include pt-button-height($pt-button-height);
+      line-height: $pt-button-height;
+      margin: $file-input-button-padding-large;
+      width: $file-input-button-width-large;
+    }
+  }
+
+  .#{$ns}-dark & {
+    @include pt-dark-input();
+    color: $pt-dark-text-color-disabled;
+
+    &::after {
+      @include pt-dark-button();
+    }
+
+    &:hover::after {
+      @include pt-dark-button-hover();
+    }
+
+    &:active::after {
+      @include pt-dark-button-active();
+    }
+  }
+}
+
+// hack to force the button shadow to display since
+// it doesn't render correct via the `pt-button` mixin
+/* stylelint-disable-next-line no-duplicate-selectors */
+.#{$ns}-file-upload-input::after { box-shadow: $button-box-shadow; }