@transferwise/components 46.130.3 → 46.131.1

package/src/styles/less/alerts.less

@@ -0,0 +1,252 @@
+@import (reference) "../variables/legacy-variables.less";
+@import (reference) "./addons/_spacing-utilities.less";
+@import (reference) "../variables/neptune-tokens.less";
+@import (reference) "./mixins/_alerts.less";
+
+/**
+ * DEPRECATED: use <InfoPrompt /> component instead
+ */
+
+.alert {
+  padding: var(--size-16);
+  border-radius: 10px;
+  color: var(--color-content-primary);
+  background-color: var(--color-background-neutral);
+  min-width: 200px;
+  margin-bottom: var(--size-16);
+
+  .np-theme-personal & {
+    padding: var(--padding-medium);
+    border-radius: var(--radius-medium);
+    .alert__message {
+      margin-top: 0;
+      display: flex;
+      align-items: flex-start;
+      flex-direction: column;
+      justify-content: center;
+      
+      .alert__action {
+        margin-top: var(--size-8);
+      }
+    }
+  }
+
+  .alert__icon {
+    width: var(--size-32);
+    height: var(--size-32);
+    border-radius: 50%;
+    flex: none;
+  }
+
+  .close {
+    margin-top: var(--size-4);
+
+    .np-theme-personal & {
+      margin-top: calc(var(--size-8) * -1);
+      margin-inline-end: calc(var(--size-8) * -1);
+    }
+  }
+
+  p,
+  ul {
+    margin-bottom: 0;
+  }
+
+  p + p {
+    margin-top: var(--padding-x-small);
+  }
+}
+
+.arrow {
+  .alert-arrow(@alert-arrow-width);
+}
+
+.alert-detach.arrow {
+  border-radius: var(--radius-small);
+}
+
+// Field validation alerts
+.form-group {
+  .alert {
+    position: relative; // Elevate over input
+    padding: 4px 16px 3px;
+    margin-top: -2px;
+    border-style: solid;
+    border-color: var(--color-border-neutral);
+    border-width: 0 1px 1px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    margin-bottom: 0;
+    transition: border-color 0.15s ease-in-out;
+
+    .alert-arrow(@alert-arrow-width);
+  }
+
+  .radio ~ .alert,
+  .checkbox ~ .alert,
+  .alert-detach {
+    border-width: 0;
+    margin-top: var(--size-12);
+    border-radius: var(--radius-small);
+  }
+
+  .alert-focus,
+  .alert-info,
+  .alert-success,
+  .alert-warning,
+  .alert-danger {
+    display: none;
+  }
+}
+
+.alert-success,
+.alert-positive {
+  .alert-variant(
+    var(--color-background-positive);
+    var(--color-content-positive);
+    var(--color-content-positive-hover);
+  );
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    .alert-variant(
+      @color-navy-background-positive;
+      @color-navy-content-positive;
+      @color-navy-content-positive-hover;
+    );
+  }
+}
+
+.alert-info,
+.alert-neutral {
+  .alert-variant(
+    var(--color-background-neutral);
+    var(--color-content-primary);
+    var(--color-content-primary);
+  );
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    .alert-variant(
+      @color-navy-background-neutral;
+      @color-navy-content-primary;
+      @color-navy-content-primary;
+    );
+  }
+}
+
+.alert-warning {
+  .alert-variant(
+    var(--color-background-warning);
+    var(--color-content-warning);
+    var(--color-content-warning-hover);
+  );
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    .alert-variant(
+      @color-navy-background-warning;
+      @color-navy-content-warning;
+      @color-navy-content-warning-hover;
+    );
+  }
+}
+
+.alert-danger,
+.alert-negative {
+  .alert-variant(
+    var(--color-background-negative);
+    var(--color-content-negative);
+    var(--color-content-negative-hover);
+  );
+
+  // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+  .bg-primary & {
+    .alert-variant(
+      @color-navy-background-negative;
+      @color-navy-content-negative;
+      @color-navy-content-negative-hover;
+    );
+  }
+}
+
+.form-group:focus-within .alert-focus,
+input:focus ~ .alert-focus,
+.btn:focus ~ .alert-focus {
+  display: block;
+  border-color: var(--color-interactive-accent);
+}
+
+.focus .alert-focus,
+.has-focus .alert-focus,
+.has-info .alert-info,
+.has-info .alert-neutral,
+.has-warning .alert-warning,
+.has-success .alert-success,
+.has-success .alert-positive,
+.has-error .alert-danger,
+.has-error .alert-negative {
+  display: block;
+}
+
+// Ensure we only show one type at a time
+.has-info .help-block,
+.has-info .alert-focus,
+.has-warning .help-block,
+.has-warning .alert-focus,
+.has-warning .alert-info,
+.has-warning .alert-neutral,
+.has-success .help-block,
+.has-success .alert-focus,
+.has-success .alert-info,
+.has-success .alert-neutral,
+.has-success .alert-warning,
+.has-error .help-block,
+.has-error .alert-focus,
+.has-error .alert-info,
+.has-error .alert-neutral,
+.has-error .alert-warning,
+.has-error .alert-success,
+.has-error .alert-positive {
+  display: none !important;
+}
+
+.np-theme-personal {
+  .alert {
+    padding: var(--size-16);
+
+    flex-direction: row;
+
+    .alert__message {
+      padding-top: 0;
+      padding-inline-start: var(--padding-small);
+    }
+  }
+
+  .alert-success,
+  .alert-positive,
+  .alert-info,
+  .alert-neutral,
+  .alert-warning,
+  .alert-danger,
+  .alert-negative {
+    &,
+    // @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead
+    .bg-primary & {
+      .alert-variant(
+        var(--color-background-neutral);
+        var(--color-content-secondary);
+        var(--color-content-link-hover);
+      );
+    }
+
+    .np-link {
+      color: var(--color-content-link);
+
+      &:hover,
+      &:focus {
+        color: var(--color-content-link-hover);
+      }
+    }
+  }
+}

package/src/styles/less/background.css

@@ -0,0 +1,20 @@
+.bg {
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: 100%;
+  background-position: bottom;
+}
+.bg--dark {
+  background-color: rgba(134,167,189,0.10196);
+  background-image: url("styles/img/bg-dark.svg");
+}
+.np-theme-personal .bg--dark {
+  background-color: var(--color-forest-green);
+  background-image: none;
+  color: #daffc0;
+}
+.bg--light {
+  background-color: rgba(134,167,189,0.10196);
+  background-color: var(--color-background-neutral);
+  background-image: url("styles/img/bg-light.svg");
+}

package/src/styles/less/background.less

@@ -0,0 +1,24 @@
+@import (reference) "../variables/neptune-tokens.less";
+
+.bg {
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: 100%;
+  background-position: bottom;
+
+  &--dark {
+    background-color: @color-navy-background-neutral;
+    background-image: url("./styles/img/bg-dark.svg");
+
+    .np-theme-personal & {
+      background-color: var(--color-forest-green);
+      background-image: none;
+      color: #daffc0;
+    }
+  }
+
+  &--light {
+    background-color: var(--color-background-neutral);
+    background-image: url("./styles/img/bg-light.svg");
+  }
+}

package/src/styles/less/badge.css

@@ -0,0 +1,90 @@
+.badge {
+  display: inline-block;
+  min-width: 16px;
+  min-width: var(--size-16);
+  padding: 5px 8px;
+  padding: 5px var(--size-8);
+  font-size: 10px;
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+  color: #fff;
+  line-height: 1.2;
+  line-height: var(--line-height-control);
+  vertical-align: middle;
+  white-space: nowrap;
+  text-align: center;
+  background-color: #e74848;
+  background-color: var(--color-interactive-negative);
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  top: -1px;
+  position: relative;
+}
+.np-theme-personal .badge {
+  display: inline-block;
+  min-width: 16px;
+  min-width: var(--size-16);
+  padding: 4px 8px;
+  padding: var(--size-4) var(--size-8);
+  color: #fff;
+  vertical-align: middle;
+  white-space: nowrap;
+  text-align: center;
+  line-height: normal;
+  line-height: initial;
+  background-color: #e74848;
+  background-color: var(--color-interactive-negative);
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  position: relative;
+  top: 0;
+}
+.badge:empty {
+  display: none;
+}
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+.btn-xs .badge,
+.btn-group-xs > .btn .badge {
+  top: 0;
+  padding: 1px 5px;
+}
+a.badge:hover,
+a.badge:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+.list-group-item > .badge {
+  float: right;
+}
+[dir="rtl"] .list-group-item > .badge {
+  float: left;
+}
+.list-group-item > .badge + .badge {
+  margin-right: 5px;
+}
+[dir="rtl"] .list-group-item > .badge + .badge {
+  margin-left: 5px;
+  margin-right: 0;
+  margin-right: initial;
+}
+.nav-pills > li > a > .badge,
+.nav-stacked > li > a > .badge {
+  margin-left: 19px;
+}
+[dir="rtl"] .nav-pills > li > a > .badge,
+[dir="rtl"] .nav-stacked > li > a > .badge {
+  margin-right: 19px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.badge-success {
+  background: #2ead4b;
+  background: var(--color-interactive-positive);
+}
+.np-theme-personal .badge-success {
+  background: var(--color-sentiment-positive);
+}

package/src/styles/less/badge.less

@@ -0,0 +1,85 @@
+@import (reference) "../variables/legacy-variables.less";
+@import (reference) "./mixins/_logical-properties.less";
+
+// Base class
+.badge {
+  display: inline-block;
+  min-width: var(--size-16);
+  padding: 5px var(--size-8);
+  font-size: 10px;
+  font-weight: var(--font-weight-semi-bold);
+  color: #fff;
+  line-height: var(--line-height-control);
+  vertical-align: middle;
+  white-space: nowrap;
+  text-align: center;
+  background-color: var(--color-interactive-negative);
+  border-radius: var(--radius-medium);
+  top: -1px;
+  position: relative;
+
+  .np-theme-personal & {
+    display: inline-block;
+    min-width: var(--size-16);
+    padding: var(--size-4) var(--size-8);
+    color: #fff;
+    vertical-align: middle;
+    white-space: nowrap;
+    text-align: center;
+    line-height: initial;
+    background-color: var(--color-interactive-negative);
+    border-radius: var(--radius-medium);
+    position: relative;
+    top: 0;
+  }
+
+  // Empty badges collapse automatically
+
+  &:empty {
+    display: none;
+  }
+
+  // Quick fix for badges in buttons
+  .btn & {
+    position: relative;
+    top: -1px;
+  }
+
+  .btn-xs &,
+  .btn-group-xs > .btn & {
+    top: 0;
+    padding: 1px 5px;
+  }
+
+  // Hover state, but only for links
+  a& {
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+
+  // Account for badges in navs
+
+  .list-group-item > & {
+    .float(right);
+  }
+
+  .list-group-item > & + & {
+    .margin(right, 5px);
+  }
+
+  .nav-pills > li > a > &,
+  .nav-stacked > li > a > & {
+    .margin(left, 19px);
+  }
+
+  &-success {
+    background: var(--color-interactive-positive);
+
+    .np-theme-personal & {
+      background: var(--color-sentiment-positive);
+    }
+  }
+}

package/src/styles/less/border-radius.css

@@ -0,0 +1,3 @@
+.rounded-sm {
+  border-radius: 2px;
+}

package/src/styles/less/border-radius.less

@@ -0,0 +1,3 @@
+.rounded-sm {
+  border-radius: 2px;
+}

package/src/styles/less/breadcrumbs.css

@@ -0,0 +1,20 @@
+.breadcrumb {
+  padding: 8px 0;
+  margin-bottom: 24px;
+  margin-bottom: var(--size-24);
+  list-style: none;
+  background-color: none;
+  border-radius: 3px;
+}
+.breadcrumb > li {
+  display: inline-block;
+}
+.breadcrumb > li + li::before {
+  content: "❯\00a0";
+  padding: 0 5px;
+  color: #fff;
+}
+.breadcrumb > .active {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}

package/src/styles/less/breadcrumbs.less

@@ -0,0 +1,27 @@
+@import (reference) "../variables/legacy-variables.less";
+
+//
+// Breadcrumbs
+// --------------------------------------------------
+.breadcrumb {
+  padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;
+  margin-bottom: var(--size-24);
+  list-style: none;
+  background-color: none;
+  border-radius: @border-radius-base;
+
+  > li {
+    display: inline-block;
+
+    + li::before {
+      // Unicode space added since inline-block means non-collapsing white-space
+      content: "@{breadcrumb-separator}\00a0";
+      padding: 0 5px;
+      color: #fff;
+    }
+  }
+
+  > .active {
+    color: var(--color-content-secondary);
+  }
+}