@transferwise/neptune-css 10.0.5 → 10.0.6-beta.38

package/src/less/circles.less

@@ -1,24 +1,216 @@
-// TODO: remove bootstrap dependencies
-
-// variables
 @import (reference) '../variables/legacy-variables.less';
+@import (reference) './mixins/_circle.less';
+@import (reference) './mixins/_logical-properties.less';
+
+@circle-xs-diameter: 24px;
+@circle-sm-diameter: 48px;
+@circle-md-diameter: 72px;
+@circle-lg-diameter: 96px;
+
+@circle-xs-font-size: 10px;
+@circle-sm-font-size: 16px;
+@circle-md-font-size: 24px;
+@circle-lg-font-size: 32px;
+
+@circle-xs-icon-size: 14px;
+@circle-sm-icon-size: 24px;
+@circle-md-icon-size: 32px;
+@circle-lg-icon-size: 40px;
+
+@circle-inverse-bg: var(--color-background-neutral);
+
+.circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-content-primary);
+  text-align: center;
+  text-decoration: none;
+  text-transform: uppercase;
+  border: 1px solid transparent;
+  background-color: @brand-white;
+  border-radius: 50%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  overflow: hidden;
+  margin-left: auto;
+  margin-right: auto;
+  transition:
+    background-color ease @transition-duration,
+    border-color ease @transition-duration,
+    color ease @transition-duration;
+
+  &.active {
+    border-color: @brand-info;
+    background-color: @brand-info;
+  }
+
+  img {
+    width: 100%;
+    border-radius: 50%;
+    vertical-align: initial;
+  }
+
+  img& {
+    background-color: transparent;
+    border-radius: 50%;
+  }
+
+  &[style] {
+    border: 0;
+    border-radius: 50% !important;
+  }
+
+  a& {
+    &[style]:hover {
+      border: 1px solid @brand-info;
+    }
+  }
+
+  .navbar-nav > li > a & {
+    width: @navbar-line-height;
+    height: @navbar-line-height;
+    line-height: @navbar-line-height;
+
+    .icon {
+      line-height: @navbar-line-height;
+    }
+  }
+}
+
+.circle,
+.circle-sm {
+  .circle-variant(@circle-sm-diameter, @circle-sm-font-size, @circle-sm-icon-size);
+}
+
+.circle-xs {
+  .circle-variant(@circle-xs-diameter, @circle-xs-font-size, @circle-xs-icon-size);
+}
+
+.circle-md {
+  .circle-variant(@circle-md-diameter, @circle-md-font-size, @circle-md-icon-size);
+}
+
+.circle-lg {
+  .circle-variant(@circle-lg-diameter, @circle-lg-font-size, @circle-lg-icon-size);
+}
+
+a.circle,
+a.circle .icon {
+  text-decoration: none;
+}
 
-// mixins
-@import (reference) 'bootstrap/less/mixins/circle.less';
-@import 'bootstrap/less/circle.less';
+a:hover .circle,
+a.circle:hover {
+  border-color: @brand-info;
+  color: @brand-info;
+  text-decoration: none;
+}
+
+a:hover .circle.active,
+a.circle.active:hover {
+  text-decoration: none;
+  color: @brand-white;
+}
+
+/* TODO this could be tidier, ideally change the general link behaviour */
+
+.dropdown-menu li a:hover .circle {
+  background-color: var(--color-background-screen);
+  border-color: @brand-white;
+  color: @dropdown-link-color;
+}
+
+.dropdown-menu .disabled a:hover .circle {
+  background-color: @circle-inverse-bg;
+  border-color: transparent;
+  color: @link-disabled-color;
+}
+
+.circle-inverse {
+  background-color: @circle-inverse-bg;
+}
+
+.circle-responsive {
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  width: @line-height-computed;
+  height: @line-height-computed;
+  line-height: @line-height-computed;
+  font-size: @circle-sm-font-size;
+  overflow: visible;
+
+  .icon {
+    font-size: @circle-sm-icon-size;
+    line-height: @circle-sm-icon-size;
+  }
+
+  &.circle-lg {
+    border-radius: 50%;
+    background-color: @brand-white;
+
+    &.circle-inverse {
+      background-color: var(--color-background-neutral);
+    }
+    .circle-variant(@circle-sm-diameter, @circle-sm-font-size, @circle-sm-icon-size);
+  }
+}
 
-// From transferwise.less
+@media (--screen-sm) {
+  .circle-responsive {
+    border-radius: 50%;
+    background-color: @brand-white;
 
-li,
-li > a {
-  > .circle:first-child {
-    margin-right: var(--size-8);
+    &.circle,
+    &.circle-sm,
+    &.circle-md {
+      .circle-variant(@circle-sm-diameter, @circle-sm-font-size, @circle-sm-icon-size);
+    }
+
+    &.circle-lg {
+      .circle-variant(@circle-md-diameter, @circle-md-font-size, @circle-md-icon-size);
+    }
+
+    &.circle-inverse {
+      background-color: var(--color-background-neutral);
+    }
+  }
+}
+
+@media (--screen-md-min) {
+  .circle-responsive {
+    &.circle-md {
+      .circle-variant(@circle-md-diameter, @circle-md-font-size, @circle-md-icon-size);
+    }
+
+    &.circle-lg {
+      .circle-variant(@circle-lg-diameter, @circle-lg-font-size, @circle-lg-icon-size);
+    }
+  }
+}
+
+.dropdown-menu {
+  li,
+  li > a {
+    > .circle:first-child {
+      .margin(right, var(--size-8));
+    }
+
+    > .circle-sm:first-child {
+      .margin(right, var(--size-12));
+    }
   }
 }
 
 .btn {
   .circle:first-child {
-    margin-right: var(--size-8);
+    .margin(right, var(--size-8));
+  }
+
+  .circle-sm:first-child {
+    .margin(right, var(--size-12));
   }
 }
 
@@ -26,12 +218,7 @@ li > a {
 .dropdown-menu li .circle .tw-icon {
   float: none;
   margin-top: 0;
-  margin-left: 0;
-  margin-right: 0;
-}
+  .margin(left, 0);
 
-.circle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  .margin(right, 0);
 }

package/src/less/close.less

@@ -1,8 +1,40 @@
-// TODO: remove bootstrap dependencies
-
-// variables
 @import (reference) '../variables/legacy-variables.less';
+@import (reference) './mixins/_tab-focus.less';
+@import (reference) './mixins/_logical-properties.less';
+
+.close {
+  .float(right);
+
+  font-size: (@font-size-base * 2);
+  font-weight: @close-font-weight;
+  line-height: @line-height-computed;
+  color: var(--color-content-accent);
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    color: var(--color-content-accent-hover);
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  &:focus {
+    .tab-focus();
+  }
+
+  &:active {
+    color: var(--color-content-accent-active);
+  }
 
-// mixins
-@import (reference) 'bootstrap/less/mixins/tab-focus.less';
-@import 'bootstrap/less/close.less';
+  // Additional properties for button version
+  // iOS requires the button element instead of an anchor tag.
+  // If you want the anchor version, it requires `href="#"`.
+  // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+  button& {
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    appearance: none;
+  }
+}

package/src/less/column-layout.less

@@ -1,4 +1,161 @@
-// TODO: remove bootstrap dependencies
-
 @import (reference) '../variables/legacy-variables.less';
-@import 'bootstrap/less/column-layout.less';
+@import (reference) './mixins/_logical-properties.less';
+
+.column-layout {
+  width: 100%;
+}
+
+.column-layout-left,
+.column-layout-right {
+  position: fixed;
+  width: @column-width;
+  vertical-align: top;
+  height: 100%;
+  z-index: 3;
+  transition: transform ease 0.5s;
+  top: 0;
+  max-height: 100vh;
+  overflow-y: auto;
+}
+
+.column-layout-left {
+  transform: translateX(-@column-width);
+}
+
+.column-layout-right {
+  .right(0);
+
+  transform: translateX(@column-width);
+}
+
+.column-layout-left.open,
+.column-layout-right.open {
+  transform: translateX(0);
+}
+
+.column-layout-main {
+  width: 100%;
+}
+
+.column-layout-top {
+  position: fixed;
+  top: 0;
+  width: @column-width;
+  max-height: 100vh;
+  overflow-y: auto;
+  backface-visibility: hidden;
+}
+
+.column-layout-bottom {
+  position: fixed;
+  bottom: 0;
+  width: @column-width;
+  padding: var(--size-24);
+}
+
+@media (--screen-lg) {
+  .column-layout {
+    display: table;
+  }
+
+  .column-layout-left,
+  .column-layout-right {
+    position: relative;
+    display: table-cell;
+    transform: none;
+  }
+
+  .column-layout-main {
+    display: table-cell;
+    vertical-align: top;
+    width: auto;
+  }
+}
+
+.column-layout-cover.in {
+  width: 100%;
+  height: 100%;
+  opacity: 0.9;
+}
+
+.column-layout-cover .close {
+  position: absolute;
+  .left(@column-width + 20px);
+
+  top: -1000px;
+  opacity: 0;
+  transition: opacity 0.35s ease;
+  transition-delay: 0.35s;
+  text-decoration: none;
+}
+
+.column-layout-cover.in .close {
+  opacity: 1;
+  top: 20px;
+}
+
+@media (min-width: @screen-lg-min) {
+  .column-layout-cover {
+    display: none;
+  }
+}
+
+@media (--screen-md) {
+  // apply to body to prevent background scrolling
+  .column-layout-open {
+    overflow: hidden;
+  }
+
+  .column-layout-cover {
+    position: fixed;
+    display: block;
+    top: 0;
+    .left(0);
+
+    width: 0;
+    height: 0;
+    opacity: 0;
+    transition: opacity 0.35s ease;
+    background-color: @brand-navy-minus-20;
+    cursor: pointer;
+    z-index: @zindex-mobile-nav-background;
+  }
+
+  .column-layout-left,
+  .column-layout-right {
+    z-index: @zindex-mobile-nav;
+  }
+}
+
+.column-layout-main .container {
+  // ensures we use the full width on default mac screen
+  max-width: 1176px;
+  .margin(left,0);
+}
+
+.column-layout-brand {
+  padding: var(--size-4) @spacing-1-tablet;
+}
+
+@media (--screen-lg) {
+  .column-layout-brand {
+    padding-left: @spacing-1-desktop;
+    padding-right: @spacing-1-desktop;
+  }
+}
+
+body > .column-layout {
+  min-height: 100vh;
+  height: 100vh;
+}
+
+.column-layout-left .column-layout-top {
+  background-position: 0 var(--size-40);
+  background-repeat: no-repeat;
+  background-size: @column-width auto;
+  height: 100vh;
+
+  @media (min-height: 596px) {
+    .background-position(left, bottom);
+  }
+}

package/src/less/core/_scaffolding.less

@@ -1,5 +1,6 @@
 @import (reference) '../../variables/neptune-tokens.less';
 @import (reference) '../variables/_typography.less';
+@import (reference) '../mixins/_logical-properties.less';
 
 *,
 ::before,
@@ -8,10 +9,10 @@
 }
 
 html {
-  color: var(--color-text-secondary);
-  font-size: @font-size-base;
-  line-height: @line-height-base;
-  font-family: @font-family-base;
+  color: var(--color-content-secondary);
+  font-size: var(--font-size-16);
+  line-height: var(--line-height-body);
+  font-family: 'Averta', 'Avenir W02', 'Avenir', Helvetica, Arial, sans-serif;
   letter-spacing: 0.016em;
   background-color: var(--color-background-screen);
   -webkit-font-smoothing: antialiased;
@@ -48,7 +49,7 @@ pre {
 
 a,
 .anchor {
-  color: var(--color-text-link);
+  color: var(--color-content-accent);
   font-weight: 600;
   letter-spacing: 0;
   text-decoration: underline;
@@ -56,12 +57,12 @@ a,
 
   &:hover,
   &:focus {
-    color: var(--color-text-link-hover);
+    color: var(--color-content-accent-hover);
     text-decoration: underline;
   }
 
   &:active {
-    color: var(--color-text-link-active);
+    color: var(--color-content-accent-active);
   }
 
   &:focus {
@@ -71,15 +72,15 @@ a,
 
   &.secondary {
     color: @color-base-navy-light;
-    font-weight: @font-weight-base;
+    font-weight: var(--font-weight-regular);
 
     &:hover,
     &:focus {
-      color: var(--color-text-link-hover);
+      color: var(--color-content-accent-hover);
     }
 
     &:active {
-      color: var(--color-text-link-active);
+      color: var(--color-content-accent-active);
     }
   }
 
@@ -198,7 +199,7 @@ textarea {
   // stylelint-disable-next-line selector-pseudo-class-no-unknown
   &:input-placeholder,
   &::placeholder {
-    color: var(--color-text-inactive);
+    color: var(--color-content-disabled);
   }
 }
 
@@ -209,7 +210,7 @@ progress {
 ol,
 ul {
   margin: 0 0 var(--size-24);
-  padding: 0 0 0 38px;
+  .padding-shorthand(0, 0, 0, 38px);
 
   ol,
   ul {
@@ -218,39 +219,44 @@ ul {
 }
 
 .list-unstyled {
-  padding-left: 0;
+  .padding(left, 0);
+
   list-style: none;
 }
 
 .list-inline {
-  margin-left: calc(var(--size-4) * -1);
-  padding-left: 0;
+  .margin(left, calc(var(--size-4) * -1));
+
+  .padding(left, 0);
+
   list-style: none;
 
   > li {
     display: inline-block;
-    padding-right: var(--size-8);
-    padding-left: var(--size-4);
-    border-right: 1px solid var(--color-border-neutral);
+    .padding(right, var(--size-8));
+
+    .padding(left, var(--size-4));
+
+    .border(right, 1px, solid, var(--color-border-neutral));
 
     &:last-child {
-      border-right: 0;
+      .border(right, 0);
     }
   }
 }
 
 dt,
 dd {
-  line-height: @line-height-base;
+  line-height: var(--line-height-body);
 }
 
 dt {
-  font-size: @font-size-small;
+  font-size: var(--font-size-14);
 }
 
 dd {
   margin-bottom: var(--size-16);
-  color: var(--color-text-primary);
+  color: var(--color-content-primary);
 
   @media (--screen-sm) {
     margin-bottom: var(--size-24);
@@ -273,18 +279,20 @@ dd {
 
   @media (--screen-sm) {
     dt {
-      float: left;
-      clear: left;
+      .float(left);
+      .clear(left);
+
       width: 156px;
       overflow: hidden;
       white-space: nowrap;
-      text-align: left;
+      .text-align(left);
+
       text-overflow: ellipsis;
     }
 
     dd {
       margin-bottom: var(--size-8);
-      margin-left: 180px;
+      .margin(left, 180px);
     }
   }
 }
@@ -300,7 +308,8 @@ dd {
 
   dd {
     flex: 1 1 auto;
-    text-align: right;
+    .text-align(right);
+
     word-break: break-all;
   }
 }