@transferwise/components 46.130.2 → 46.131.0

package/src/styles/less/buttons.less

@@ -0,0 +1,738 @@
+@import (reference) "../variables/neptune-tokens.less";
+@import (reference) "../variables/legacy-variables.less";
+@import "./mixins/_buttons.less";
+@import "./mixins/_tab-focus.less";
+@import "./mixins/_links.less";
+@import (reference) "./mixins/_logical-properties.less";
+@import (reference) "./core/_typography.less";
+@import (reference) "./ring.less";
+
+.btn {
+  .np-text-body-large-bold;
+
+  display: inline-block;
+  margin-bottom: 0;
+  text-align: center;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  // @TODO Remove?
+  // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+  background-image: none;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  padding-bottom: 10px;
+  font-weight: var(--font-weight-semi-bold);
+
+  .button-size(
+    var(--btn-padding);
+    var(--font-size-16);
+    var(--line-height-24);
+    var(--btn-radius-base);
+    var(--btn-height);
+  );
+
+  .np-theme-personal & {
+    font-size: @btn-font-size;
+    line-height: @btn-line-height;
+  }
+
+  user-select: none;
+
+  &:not(.disabled, :disabled, .np-dropdown-toggle):focus-visible,
+  &:not(.disabled, :disabled, .np-dropdown-toggle).focus {
+    &.btn-negative {
+      .np-theme-personal & {
+        outline-color: var(--color-sentiment-negative);
+      }
+
+      .np-theme-personal .critical-comms--cta & {
+        outline-color: var(--color-contrast);
+      }
+    }
+  }
+
+  &:not(.disabled, :disabled, .np-dropdown-toggle) {
+    &.btn-negative {
+      .np-theme-personal .critical-comms--cta & {
+        border: none;
+      }
+    }
+  }
+
+  &.btn-negative:not(.disabled, :disabled, .np-dropdown-toggle) {
+    &:focus,
+    &.focus {
+      .np-theme-personal & {
+        outline-color: var(--color-sentiment-negative);
+      }
+    }
+  }
+
+  &:not(.disabled, :disabled, .btn-loading):hover {
+    color: var(--color-interactive-accent-hover);
+    text-decoration: none;
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    outline: none;
+    box-shadow: none;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  a& {
+    &.disabled,
+    fieldset[disabled] & {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+}
+
+// Button variants
+
+// @TODO Deprecate / Remove
+.btn-default {
+  .button-variant(
+    var(--color-content-accent);
+    #FFF;
+    transparent;
+    var(--color-interactive-accent-hover);
+    var(--color-interactive-accent-active);
+    var(--color-interactive-accent);
+    var(--color-interactive-accent-hover);
+    var(--color-interactive-accent-active);
+    #FFF
+  );
+  .np-theme-personal & {
+    .button-variant(
+      var(--color-interactive-control);
+      var(--color-interactive-control);
+      var(--color-interactive-accent);
+      var(--color-interactive-accent-hover);
+      var(--color-interactive-accent-active);
+      var(--color-interactive-accent);
+      var(--color-interactive-accent-hover);
+      var(--color-interactive-accent-active);
+      var(--color-interactive-accent-hover);
+      var(--color-interactive-control);
+    );
+
+    &.btn-priority-2 {
+      .button-variant(
+        var(--color-interactive-primary);
+        var(--color-interactive-control);
+        transparent;
+        var(--color-interactive-accent-hover);
+        var(--color-interactive-accent-active);
+        var(--color-interactive-primary);
+        var(--color-interactive-accent-hover);
+        var(--color-interactive-accent-active);
+        transparent;
+        var(--color-interactive-control);
+      );
+    }
+  }
+}
+
+// @DEPRECATED: .btn-primary (use Button component with type Accent)
+.btn-accent,
+.btn-primary {
+  .button-variant(
+    #fff;
+    #fff;
+    var(--color-interactive-accent);
+    var(--color-interactive-accent-hover);
+    var(--color-interactive-accent-active);
+    var(--color-interactive-accent);
+    var(--color-interactive-accent-hover);
+    var(--color-interactive-accent-active);
+  );
+
+  &.btn-priority-2 {
+    .button-variant(
+      var(--color-interactive-accent);
+      #fff;
+      transparent;
+      var(--color-interactive-accent-hover);
+      var(--color-interactive-accent-active);
+      var(--color-interactive-accent);
+      var(--color-interactive-accent-hover);
+      var(--color-interactive-accent-active);
+      var(--color-background-screen);
+      #fff;
+    );
+  }
+
+  .np-theme-personal & {
+    .button-variant(
+      var(--color-interactive-control);
+      var(--color-interactive-control);
+      var(--color-interactive-accent);
+      var(--color-interactive-accent-hover);
+      var(--color-interactive-accent-active);
+      var(--color-interactive-accent);
+      var(--color-interactive-accent-hover);
+      var(--color-interactive-accent-active);
+      var(--color-interactive-accent-hover);
+      var(--color-interactive-control);
+    );
+
+    &.btn-priority-2 {
+      .button-variant(
+        var(--color-interactive-primary);
+        var(--color-interactive-control);
+        transparent;
+        var(--color-interactive-accent-hover);
+        var(--color-interactive-accent-active);
+        var(--color-interactive-primary);
+        var(--color-interactive-accent-hover);
+        var(--color-interactive-accent-active);
+        transparent;
+        var(--color-interactive-control);
+      );
+    }
+  }
+}
+
+// @DEPRECATED:.btn-link (use Button component with type Accent / priority Tertiary)
+.btn-link,
+.btn-accent:not(.disabled, :disabled).btn-priority-3 {
+  color: var(--color-content-accent);
+  text-decoration: underline;
+  border-color: transparent;
+
+  &,
+  &:not(.disabled, :disabled):active,
+  &:not(.disabled, :disabled).active,
+  &[disabled],
+  fieldset[disabled] & {
+    background-color: transparent;
+  }
+
+  &:not(.disabled, :disabled, .btn-loading):hover,
+  &:not(.disabled, :disabled):focus-visible {
+    color: var(--color-content-accent-hover);
+    text-decoration: underline;
+    border-color: transparent;
+    background-color: transparent;
+  }
+
+  &:not(.disabled, :disabled, .btn-loading):active {
+    color: var(--color-content-accent-active);
+  }
+
+  .np-theme-personal & {
+    color: var(--color-interactive-primary);
+    border-color: transparent;
+    .link-underline();
+
+    &:not(.disabled, :disabled, .btn-loading):hover,
+    &:not(.disabled, :disabled):focus-visible {
+      color: var(--color-interactive-primary-hover);
+      border-color: transparent;
+    }
+
+    &:not(.disabled, :disabled, .btn-loading):active {
+      color: var(--color-interactive-primary-active);
+      background-color: var(--color-background-screen-active) !important;
+    }
+  }
+}
+
+.btn-accent.disabled.btn-priority-3,
+.btn-accent.btn-priority-3:disabled {
+  background: transparent;
+  border-color: transparent;
+  color: var(--color-content-accent);
+  text-decoration: underline;
+
+  .np-theme-personal & {
+    .link-underline();
+  }
+}
+
+// @DEPRECATED:.btn-success (use Button component with type Positive)
+.btn-positive,
+.btn-success {
+  .button-variant(
+    #fff;
+    #fff;
+    var(--color-interactive-positive);
+    var(--color-interactive-positive-hover);
+    var(--color-interactive-positive-active);
+    var(--color-interactive-positive);
+    var(--color-interactive-positive-hover);
+    var(--color-interactive-positive-active);
+  );
+
+  &.btn-priority-2 {
+    .button-variant(
+      var(--color-interactive-positive);
+      #fff;
+      transparent;
+      var(--color-interactive-positive-hover);
+      var(--color-interactive-positive-active);
+      var(--color-interactive-positive);
+      var(--color-interactive-positive-hover);
+      var(--color-interactive-positive-active);
+      var(--color-background-screen);
+      #fff;
+    );
+  }
+
+  .np-theme-personal & {
+    .button-variant(
+      var(--color-interactive-control);
+      var(--color-interactive-control);
+      var(--color-interactive-accent);
+      var(--color-interactive-accent-hover);
+      var(--color-interactive-accent-active);
+      var(--color-interactive-accent);
+      var(--color-interactive-accent);
+      var(--color-interactive-accent);
+      var(--color-interactive-accent-hover);
+      var(--color-interactive-control);
+    );
+
+    &.btn-priority-2 {
+      .button-variant(
+        var(--color-interactive-primary);
+        var(--color-interactive-control);
+        transparent;
+        var(--color-interactive-accent-hover);
+        var(--color-interactive-accent-active);
+        var(--color-interactive-primary);
+        var(--color-interactive-accent-hover);
+        var(--color-interactive-accent-active);
+        transparent;
+        var(--color-interactive-control);
+      );
+    }
+  }
+}
+
+// @TODO Deprecate / Remove
+.btn-info {
+  .button-variant(
+    @btn-info-color;
+    #FFF;
+    @btn-info-bg;
+    @btn-info-bg-hover;
+    @btn-info-bg-active;
+    @btn-info-border;
+    @btn-info-border-hover;
+    @btn-info-border-active;
+    #FFF
+  );
+}
+
+// @TODO Deprecate / Remove
+.btn-warning {
+  .button-variant(
+    @btn-warning-color;
+    #FFF;
+    @btn-warning-bg;
+    @btn-warning-bg-hover;
+    @btn-warning-bg-active;
+    @btn-warning-border;
+    @btn-warning-border-hover;
+    @btn-warning-border-active;
+    #FFF
+  );
+}
+
+// @DEPRECATED: .btn-danger (use Button component with type Negative)
+.btn-danger,
+.btn-negative {
+  .button-variant(
+    #fff;
+    #fff;
+    var(--color-interactive-negative);
+    var(--color-interactive-negative-hover);
+    var(--color-interactive-negative-active);
+    var(--color-interactive-negative);
+    var(--color-interactive-negative-hover);
+    var(--color-interactive-negative-active);
+  );
+
+  &.btn-priority-2 {
+    .button-variant(
+      var(--color-interactive-negative);
+      #fff;
+      transparent;
+      var(--color-interactive-negative-hover);
+      var(--color-interactive-negative-active);
+      var(--color-interactive-negative);
+      var(--color-interactive-negative-hover);
+      var(--color-interactive-negative-active);
+      var(--color-background-screen);
+      #fff;
+    );
+  }
+
+  .np-theme-personal & {
+    .button-variant(
+      var(--color-contrast);
+      var(--color-contrast);
+      var(--color-sentiment-negative);
+      var(--color-sentiment-negative-hover);
+      var(--color-sentiment-negative-active);
+      var(--color-sentiment-negative);
+      var(--color-sentiment-negative-hover);
+      var(--color-sentiment-negative-active);
+      var(--color-sentiment-negative);
+      var(--color-contrast);
+    );
+
+    &.btn-priority-2 {
+      .button-variant(
+        var(--color-sentiment-negative);
+        var(--color-contrast);
+        transparent;
+        var(--color-sentiment-negative-hover);
+        var(--color-sentiment-negative-active);
+        var(--color-sentiment-negative);
+        var(--color-sentiment-negative-hover);
+        var(--color-sentiment-negative-active);
+        transparent;
+        var(--color-contrast);
+      );
+    }
+  }
+}
+
+// @TODO Deprecate / Remove
+.bootstrap-select .btn-default,
+.btn-input {
+  .button-variant(
+    var(--color-content-primary);
+    var(--color-content-primary);
+    var(--color-background-screen);
+    var(--color-background-screen);
+    var(--color-background-screen);
+    var(--color-interactive-secondary);
+    var(--color-interactive-secondary-hover);
+    var(--color-interactive-secondary-active);
+  );
+}
+
+// @TODO Deprecate / Remove
+.btn-image {
+  background-color: @brand-grey-plus-10;
+  background-color: rgba(255, 255, 255, 0.4);
+  color: @brand-white;
+
+  &:not(.disabled, :disabled):hover,
+  &:not(.disabled, :disabled):focus-visible {
+    background-color: @brand-grey-plus-10;
+    background-color: rgba(24, 33, 56, 0.56);
+  }
+
+  &:not(.disabled, :disabled):active,
+  &:not(.disabled, :disabled):hover:active {
+    background: @brand-grey-minus-20;
+  }
+}
+
+.btn-input .caret {
+  .margin(left, var(--size-8));
+}
+
+// @TODO Deprecate / Remove
+.btn-inverse {
+  .button-outline(
+    #fff;
+    #e2e6e8;
+    #5d7079;
+  );
+}
+
+// Sizes
+.btn-lg {
+  .button-size(
+    var(--btn-lg-padding);
+    var(--font-size-18);
+    var(--line-height-28);
+    var(--btn-lg-radius-base);
+    var(--btn-lg-height)
+  );
+
+  .np-theme-personal & {
+    font-size: @btn-lg-font-size;
+    line-height: @btn-lg-line-height;
+  }
+
+  .btn-loader {
+    margin-top: 2px;
+  }
+}
+
+.btn-sm,
+.navbar .btn {
+  .button-size(
+    var(--btn-sm-padding);
+    var(--font-size-14);
+    var(--line-height-22);
+    var(--btn-sm-radius-base);
+    var(--btn-sm-height);
+  );
+
+  .np-theme-personal & {
+    font-size: @btn-sm-font-size;
+    line-height: @btn-sm-line-height;
+  }
+}
+
+.btn-xs {
+  .button-size(
+    var(--btn-xs-padding);
+    var(--font-size-12);
+    var(--line-height-20);
+    var(--btn-sm-radius-base);
+    @btn-xs-height
+  );
+
+  .np-theme-personal & {
+    font-size: @btn-xs-font-size;
+    line-height: @btn-xs-line-height;
+
+    .btn-loader {
+      margin-left: calc(var(--padding-x-small) / 2) !important;
+      height: @btn-xs-line-height;
+      background-size: @btn-xs-font-size @btn-xs-font-size !important;
+    }
+  }
+}
+
+@media (max-width: (@grid-float-breakpoint - 1px)) {
+  .navbar-collapse .btn {
+    .button-size(
+      var(--btn-padding);
+      var(--font-size-16);
+      var(--line-height-24);
+      var(--border-radius-base);
+      var(--btn-height);
+    );
+
+    .np-theme-personal & {
+      font-size: @btn-font-size;
+      line-height: @btn-line-height;
+
+      max-height: var(--btn-height);
+    }
+  }
+}
+
+.btn-block {
+  display: block;
+  width: 100%;
+}
+
+// Vertically space out multiple block buttons
+.btn-block + .btn-block {
+  margin-top: var(--size-8);
+}
+
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  &.btn-block {
+    width: 100%;
+  }
+}
+
+// @TODO Deprecate / Remove
+.btn-input {
+  font-weight: var(--font-weight-regular);
+  .padding(left, @padding-base-horizontal);
+
+  .padding(right, @padding-base-horizontal);
+
+  &:not(.disabled, :disabled):hover {
+    border-color: var(--color-interactive-secondary-hover);
+  }
+
+  &:not(.disabled, :disabled).active,
+  &:not(.disabled, :disabled):active,
+  &:not(.disabled, :disabled).focus,
+  &:not(.disabled, :disabled):focus-visible {
+    border-color: var(--color-interactive-accent-active);
+    outline: 0 none !important;
+
+    .np-theme-personal & {
+      border-color: var(--color-interactive-secondary-active);
+    }
+  }
+
+  // stylelint-disable-next-line no-duplicate-selectors
+  .caret {
+    color: var(--color-content-accent);
+  }
+
+  &.btn-sm {
+    .padding(left, 12px);
+
+    .padding(right, 12px);
+  }
+
+  &.btn-lg {
+    font-size: var(--font-size-20);
+
+    &.btn-addon,
+    &.btn-input-inverse {
+      font-weight: var(--font-weight-semi-bold);
+    }
+  }
+}
+
+// @TODO Deprecate / Remove
+// input-inverse is deprecated, remove after styleguide-components updated
+.btn-input-inverse {
+  --color-content-primary: @color-navy-content-primary;
+  --color-content-accent: @color-navy-content-accent;
+}
+
+.btn-input-inverse,
+.btn-addon {
+  .button-variant(
+    @color-navy-content-primary;
+    @color-navy-content-primary;
+    @color-navy-background-screen;
+    @color-navy-background-screen;
+    @color-navy-background-screen;
+    @color-navy-background-elevated;
+    @color-navy-background-screen;
+    @color-navy-background-screen;
+    var(--color-background-screen);
+  );
+}
+
+// @TODO Deprecate / Remove
+// Remove bootstrap-select rules after checking tw-currency-select
+.form-group-sm {
+  .bootstrap-select .btn-default {
+    padding: @padding-small-vertical @padding-small-horizontal;
+  }
+}
+
+.form-group-lg {
+  .bootstrap-select .btn-default {
+    padding: @padding-large-vertical @padding-large-horizontal;
+  }
+}
+// @TODO Deprecate / Remove
+.bootstrap-select.open > .dropdown-toggle.btn-default {
+  border-color: var(--color-interactive-accent);
+  background-color: var(--color-background-screen);
+  color: var(--color-content-primary);
+}
+
+.btn-loader {
+  display: inline-block;
+  height: 24px;
+  width: 24px;
+  margin-bottom: -8px;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.btn-loading {
+  cursor: wait;
+
+  &:not(.btn-block) {
+    display: inline-flex;
+    align-items: center;
+
+    .btn-loader {
+      margin-bottom: 0;
+
+      :not([dir="rtl"]) & {
+        margin-left: 16px;
+        margin-right: 0;
+      }
+
+      [dir="rtl"] & {
+        margin-left: 0 !important;
+        margin-right: 16px !important;
+      }
+    }
+  }
+
+  &.btn-block .btn-loader {
+    top: 0;
+    bottom: 0;
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+
+  &:hover,
+  &:focus,
+  &:active,
+  & {
+    .process-circle[class] {
+      stroke: currentColor;
+    }
+  }
+}
+
+.btn-sm {
+  .btn-loader {
+    background-size: 16px 16px;
+
+    .np-theme-personal & {
+      margin-left: calc(var(--padding-small) / 2) !important;
+    }
+  }
+}
+
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.btn-input.btn {
+  .text-align(left);
+
+  .tw-icon {
+    position: absolute;
+    .right(var(--size-16));
+
+    &:not(.tw-chevron, .tw-icon-chevron-down) {
+      position: initial;
+    }
+
+    top: var(--size-16);
+  }
+
+  &.btn-sm .tw-icon {
+    .right(var(--size-8));
+
+    top: var(--size-8);
+  }
+
+  &.btn-lg .tw-icon {
+    top: 27px;
+  }
+}
+
+// stylelint-disable-next-line no-duplicate-selectors
+a.btn {
+  text-decoration: none;
+}
+
+.btn-unstyled {
+  background: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+}