@transferwise/components 0.0.0-experimental-aa49e22 → 0.0.0-experimental-9f6647e

package/src/neptune-css/less/buttons.less

@@ -1,738 +0,0 @@
-@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;
-}