@transferwise/neptune-css 0.0.0-experimental-1181467

package/src/less/forms/checkbox-radio.less

@@ -0,0 +1,303 @@
+@import (reference) "../../variables/legacy-variables.less";
+@import (reference) "../../variables/neptune-tokens.less";
+@import (reference) "../mixins/_logical-properties.less";
+
+.radio,
+.checkbox {
+  border-color: var(--color-interactive-secondary);
+
+  > label {
+    position: relative;
+    .padding(left, 48px);
+
+    input[type="radio"],
+    input[type="checkbox"] {
+      display: block;
+      position: absolute;
+      top: 13px;
+      .left(40px);
+    }
+  }
+}
+
+.tw-checkbox-button {
+  border: 1px solid var(--color-interactive-secondary);
+  background: var(--color-background-screen);
+  width: 22px;
+  height: 22px;
+  border-radius: @border-radius-base;
+  display: inline-block;
+  padding: 0;
+  vertical-align: middle;
+  text-align: center;
+  transition: border 0.15s ease-in-out, background-color 0.15s ease-in-out;
+
+  .np-theme-personal & {
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
+  }
+
+  .tw-checkbox-check {
+    width: 20px;
+    height: 20px;
+    margin: 0;
+    display: none;
+    color: var(--color-background-screen);
+  }
+
+  &:not(.disabled, :disabled):hover,
+  input[type="checkbox"]:hover + &,
+  .checkbox:hover & {
+    border-color: var(--color-interactive-secondary-hover);
+
+    .np-theme-personal & {
+      box-shadow: inset 0 0 0 1px var(--color-interactive-secondary-hover);
+    }
+  }
+
+  &:not(.disabled, :disabled):focus,
+  &:not(.disabled, :disabled).focus,
+  &:not(.disabled, :disabled):focus:hover,
+  &:not(.disabled, :disabled).focus:hover,
+  input[type="checkbox"]:focus + &,
+  &:not(.disabled, :disabled):active,
+  &:not(.disabled, :disabled).active,
+  input[type="checkbox"]:active + & {
+    border-color: var(--color-interactive-secondary);
+    outline: none;
+  }
+
+  &:checked,
+  &.checked,
+  input[type="checkbox"]:checked + & {
+    border-color: var(--color-interactive-accent) !important;
+    background-color: var(--color-interactive-accent);
+
+    .tw-checkbox-check {
+      display: inline-block;
+    }
+
+    .np-theme-personal & {
+      background-color: var(--color-interactive-primary);
+      box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
+    }
+  }
+
+  &:checked:hover,
+  &.checked:hover,
+  input[type="checkbox"]:not(.disabled, :disabled):checked:hover + & {
+    border-color: var(--color-interactive-accent-hover) !important;
+    background-color: var(--color-interactive-accent-hover);
+
+    .np-theme-personal & {
+      border-color: var(--color-interactive-primary-hover) !important;
+      background-color: var(--color-interactive-primary-hover);
+      box-shadow: inset 0 0 0 1px var(--color-interactive-primary-hover);
+    }
+  }
+
+  &:checked:active,
+  &.checked:active,
+  input[type="checkbox"]:not(.disabled, :disabled):checked:active + & {
+    border-color: var(--color-interactive-accent-active) !important;
+    background-color: var(--color-interactive-accent-active);
+
+    .np-theme-personal & {
+      border-color: var(--color-interactive-primary-active) !important;
+      background-color: var(--color-interactive-primary-active);
+      box-shadow: inset 0 0 0 1px var(--color-interactive-primary-active);
+    }
+  }
+
+  .checkbox.has-error &,
+  &.has-error {
+    border-color: var(--color-interactive-negative) !important;
+
+    &:checked,
+    &.checked {
+      background-color: var(--color-interactive-negative);
+    }
+  }
+
+  .checkbox.has-error input[type="checkbox"]:not(.disabled, :disabled):checked + & {
+    border-color: var(--color-interactive-negative) !important;
+    background-color: var(--color-interactive-negative);
+  }
+
+  .checkbox.has-error input[type="checkbox"]:not(.disabled, :disabled):checked:hover + & {
+    border-color: var(--color-interactive-negative-hover) !important;
+    background-color: var(--color-interactive-negative-hover);
+  }
+
+  .checkbox.has-error input[type="checkbox"]:not(.disabled, :disabled):checked:active + & {
+    border-color: var(--color-interactive-negative-active) !important;
+    background-color: var(--color-interactive-negative-active);
+  }
+}
+
+.tw-radio-button {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 1px solid var(--color-interactive-secondary);
+  background: var(--color-background-screen);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: border 0.15s ease-in-out;
+
+  .np-theme-personal & {
+    border: none;
+    box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
+    position: relative;
+    top: 0;
+    left: 0;
+  }
+
+  .tw-radio-check {
+    border-radius: 50%;
+    text-align: center;
+    width: 12px;
+    height: 12px;
+    display: block;
+    opacity: 0;
+    transition: all 0.15s ease-in-out;
+  }
+
+  .radio:not(.disabled, :disabled):hover &,
+  &:not(.disabled, :disabled):hover {
+    border-color: var(--color-interactive-secondary-hover);
+
+    .np-theme-personal & {
+      border-color: transparent;
+      box-shadow: inset 0 0 0 1px var(--color-interactive-secondary-hover);
+
+      &:checked,
+      &.checked {
+        box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
+
+        .tw-radio-check {
+          background-color: var(--color-interactive-primary-hover);
+        }
+      }
+    }
+  }
+
+  &:not(.disabled, :disabled):focus,
+  &:not(.disabled, :disabled).focus,
+  &:not(.disabled, :disabled):active,
+  &:not(.disabled, :disabled).active {
+    border-color: var(--color-interactive-secondary-active);
+    outline: none;
+  }
+
+  &:checked,
+  &.checked {
+    border-color: var(--color-interactive-accent) !important;
+
+    .tw-radio-check {
+      opacity: 1;
+      background-color: var(--color-interactive-accent);
+    }
+
+    .np-theme-personal & {
+      border-color: transparent !important;
+      box-shadow: inset 0 0 0 1px var(--color-interactive-primary);
+
+      .tw-radio-check {
+        background-color: var(--color-interactive-primary);
+        max-height: 12px;
+        max-width: 12px;
+      }
+    }
+  }
+
+  .radio.has-error &,
+  &.has-error {
+    border-color: var(--color-interactive-negative) !important;
+
+    &:checked .tw-radio-check,
+    &.checked .tw-radio-check {
+      background-color: var(--color-interactive-negative);
+    }
+  }
+}
+
+.radio .tw-radio-button {
+  position: absolute;
+  .left(13px);
+
+  top: 11px;
+}
+
+.checkbox .tw-checkbox-button {
+  position: absolute;
+  .left(14px);
+
+  top: 12px;
+}
+
+.form-inline .tw-checkbox-button,
+.form-inline .tw-radio-button {
+  vertical-align: bottom;
+}
+
+.form-horizontal {
+  .checkbox,
+  .radio {
+    padding-top: 0;
+
+    > label {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Neptune Checkbox and Radio components use flex for vertical centre alignment
+.np-radio.radio,
+.np-checkbox.checkbox {
+  min-width: fit-content;
+
+  .np-radio-button,
+  .np-checkbox-button {
+    position: relative;
+    flex-shrink: 0;
+  }
+
+  .tw-checkbox-button,
+  .tw-radio-button {
+    position: static;
+  }
+
+  > label {
+    display: flex;
+    align-items: center;
+    // Added rtl mixing even the horizontal values are equal, to increase specificity created in line 11
+    .padding-shorthand(var(--size-8) var(--size-16));
+
+    .np-checkbox__text,
+    .np-radio__text {
+      display: block;
+      padding-top: 1px; // `0` would look off due to checkbox misalignment
+
+      :not(.np-theme-personal) & {
+        font-weight: var(--font-weight-regular);
+        font-size: var(--font-size-16);
+        line-height: var(--line-height-20);
+        // Account for our funky font baseline
+        padding-top: 3px;
+      }
+    }
+
+    .np-theme-personal & {
+      padding: var(--input-padding);
+    }
+  }
+}
+
+.np-radio {
+  .np-radio__avatar {
+    pointer-events: none;
+  }
+}

package/src/less/grid.less

@@ -0,0 +1,187 @@
+@import (reference) "../variables/legacy-variables.less";
+@import (reference) "./mixins/_clearfix.less";
+@import (reference) "./mixins/_grid.less";
+@import (reference) "./mixins/_grid-framework.less";
+@import (reference) "./mixins/_logical-properties.less";
+
+// Set the container width, and override it for fixed navbars in media queries.
+.container {
+  .container-fixed();
+  .clearfix ();
+
+  @media (min-width: @screen-xl-min) {
+    max-width: @container-xl;
+  }
+
+  padding-right: @spacing-1-mobile;
+  padding-left: @spacing-1-mobile;
+
+  @media (min-width: @screen-sm-min) {
+    padding-right: @spacing-1-tablet;
+    padding-left: @spacing-1-tablet;
+  }
+
+  @media (min-width: @screen-lg-min) {
+    padding-right: @spacing-1-desktop;
+    padding-left: @spacing-1-desktop;
+  }
+}
+
+// Utilizes the mixin meant for fixed width containers, but without any defined
+// width for fluid, full width layouts.
+.container-fluid {
+  .container-fixed();
+}
+
+// Rows contain and clear the floats of your columns.
+.row {
+  .make-row();
+  .clearfix ();
+}
+
+// Common styles for small and large grid columns
+.make-grid-columns();
+
+// Columns, offsets, pushes, and pulls for extra small devices like smartphones.
+.make-grid(xs);
+
+// Columns, offsets, pushes, and pulls for the small device range, from phones to tablets.
+@media (min-width: @screen-sm-min) {
+  .make-grid(sm);
+}
+
+// Columns, offsets, pushes, and pulls for the desktop device range.
+@media (min-width: @screen-md-min) {
+  .make-grid(md);
+}
+
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+@media (min-width: @screen-lg-min) {
+  .make-grid(lg);
+}
+
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+@media (min-width: @screen-xl-min) {
+  .make-grid(xl);
+}
+
+@media (max-width: @screen-xs-max) {
+  .container {
+    padding-right: @spacing-1-mobile;
+    padding-left: @spacing-1-mobile;
+  }
+}
+
+@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+  .container {
+    padding-right: @spacing-1-tablet;
+    padding-left: @spacing-1-tablet;
+  }
+}
+
+[class*="col-sm"],
+[class*="col-md"],
+[class*="col-lg"],
+[class*="col-xl"] {
+  margin-bottom: (@spacer-y * 2);
+}
+
+[class*="col-xs"] {
+  margin-bottom: 0;
+}
+
+@media (min-width: @screen-sm-min) {
+  [class*="col-sm"] {
+    margin-bottom: 0;
+  }
+}
+
+@media (min-width: @screen-md-min) {
+  [class*="col-md"] {
+    margin-bottom: 0;
+  }
+}
+
+@media (min-width: @screen-lg-min) {
+  [class*="col-lg"] {
+    margin-bottom: 0;
+  }
+}
+
+@media (min-width: @screen-xl-min) {
+  [class*="col-xl"] {
+    margin-bottom: 0;
+  }
+}
+
+.row-equal-height {
+  display: flex;
+  flex-wrap: wrap;
+
+  > [class*="col-"] {
+    display: flex;
+  }
+
+  @media (max-width: @screen-xs-max) {
+    .col-xs-12 {
+      margin-bottom: 12px;
+    }
+  }
+}
+
+// Make grid gutters smaller on mobile
+@media (max-width: @screen-xs-max) {
+  .row {
+    margin-right: -8px;
+    margin-left: -8px;
+  }
+
+  [class*="col-"] {
+    padding-right: 8px;
+    padding-left: 8px;
+  }
+}
+
+.make-grid-columns-wide(@gutter: @grid-gutter-width) {
+  margin-right: -@gutter / 2;
+  margin-left: -@gutter / 2;
+
+  [class*="col-"] {
+    padding-right: @gutter / 2;
+    padding-left: @gutter / 2;
+  }
+}
+
+.row--wide {
+  .make-grid-columns-wide();
+
+  @media all and (min-width: @screen-sm) {
+    .make-grid-columns-wide(@grid-gutter-width * 2);
+  }
+
+  @media all and (min-width: @screen-lg) {
+    .make-grid-columns-wide(@grid-gutter-width * 4);
+  }
+}
+
+.container--fullscreen {
+  @media (min-width: @screen-xl-min) {
+    max-width: 100%;
+  }
+}
+
+.container--text {
+  max-width: 700px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.container--wide {
+  max-width: 1500px;
+  margin-right: auto;
+  margin-left: auto;
+
+  @media (min-width: @screen-xl-min) {
+    max-width: 1500px;
+  }
+}