@transferwise/neptune-css 0.0.0-experimental-18f7655 → 0.0.0-experimental-be43e77

package/src/less/addons/_utilities.less

@@ -1,147 +0,0 @@
-@import (reference)
-  "../../variables/legacy-variables.less";
-@import (reference) "../mixins/_clearfix.less";
-@import (reference) "../mixins/_center-block.less";
-@import (reference) "../mixins/_hide-text.less";
-
-//
-// Utility classes
-// --------------------------------------------------
-
-// Floats
-// -------------------------
-
-.clearfix {
-  .clearfix();
-}
-
-.center-block {
-  .center-block();
-}
-
-.pull-right,
-.pull-xs-right {
-  .float(right) !important;
-}
-
-.pull-left,
-.pull-xs-left {
-  .float(left) !important;
-}
-
-.pull-xs-none {
-  float: none !important;
-}
-
-@media (min-width: @screen-sm-min) {
-  .pull-sm-left {
-    .float(left) !important;
-  }
-
-  .pull-sm-right {
-    .float(right) !important;
-  }
-
-  .pull-sm-none {
-    float: none !important;
-  }
-}
-
-@media (min-width: @screen-md-min) {
-  .pull-md-left {
-    .float(left) !important;
-  }
-
-  .pull-md-right {
-    .float(right) !important;
-  }
-
-  .pull-md-none {
-    float: none !important;
-  }
-}
-
-@media (min-width: @screen-lg-min) {
-  .pull-lg-left {
-    .float(left) !important;
-  }
-
-  .pull-lg-right {
-    .float(right) !important;
-  }
-
-  .pull-lg-none {
-    float: none !important;
-  }
-}
-
-@media (min-width: @screen-xl-min) {
-  .pull-xl-left {
-    .float(left) !important;
-  }
-
-  .pull-xl-right {
-    .float(right) !important;
-  }
-
-  .pull-xl-none {
-    float: none !important;
-  }
-}
-
-// Toggling content
-// -------------------------
-
-// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
-.hide {
-  display: none !important;
-}
-
-.show {
-  display: block !important;
-}
-
-.invisible {
-  visibility: hidden;
-}
-
-.text-hide {
-  .text-hide();
-}
-
-// Hide from screenreaders and browsers
-//
-// Credit: HTML5 Boilerplate
-
-.hidden {
-  display: none !important;
-}
-
-// For Affix plugin
-// -------------------------
-
-.affix {
-  position: fixed;
-}
-
-.rotate90 {
-  transform: rotate(90deg);
-}
-
-.rotate180 {
-  transform: rotate(180deg);
-}
-
-.rotate270 {
-  transform: rotate(270deg);
-}
-
-.rotate-90 {
-  transform: rotate(-90deg);
-}
-
-// Cursor
-
-.clickable {
-  cursor: pointer !important;
-}

package/src/less/alerts.less

@@ -1,252 +0,0 @@
-@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/less/background.less

@@ -1,24 +0,0 @@
-@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("../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("../img/bg-light.svg");
-  }
-}

package/src/less/badge.less

@@ -1,85 +0,0 @@
-@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/less/border-radius.less

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

package/src/less/breadcrumbs.less

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