@transferwise/neptune-css 11.0.1-beta-66e6490bc3.13 → 11.0.1

package/src/less/breadcrumbs.less

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

package/src/less/button-groups.less

@@ -1,8 +1,7 @@
 @import (reference) '../variables/legacy-variables.less';
-@import (reference) './mixins/_logical-properties.less';
-@import (reference) './mixins/_border-radius.less';
-@import (reference) './mixins/_clearfix.less';
-@import (reference) './mixins/_tab-focus.less';
+@import './mixins/_border-radius.less';
+@import './mixins/_clearfix.less';
+@import './mixins/_tab-focus.less';
 
 // Make the div behave like a button
 .btn-group,
@@ -13,7 +12,7 @@
 
   > .btn {
     position: relative;
-    .float(left);
+    float: left;
   }
 }
 
@@ -23,23 +22,22 @@
   .btn + .btn-group,
   .btn-group + .btn,
   .btn-group + .btn-group {
-    .margin(left, -1px);
+    margin-left: -1px;
   }
 }
 
 .expand-toolbar() {
-  .margin(left, -4px;) // Offset the first child's margin
-  .margin(right, -4px;) // Offset the first child's margin
+  margin-left: -4px; // Offset the first child's margin
+  margin-right: -4px; // Offset the first child's margin
+
   .btn,
   .btn-group,
   .input-group {
     width: auto;
     margin-bottom: 0;
-    .float(left);
-
-    .margin(left, 4px);
-
-    .margin(right, 4px);
+    float: left;
+    margin-left: 4px;
+    margin-right: 4px;
   }
 }
 
@@ -57,8 +55,7 @@
   .btn-group .btn,
   .input-group .btn {
     width: auto;
-    margin: 0;
-    .margin(left, -1px);
+    margin: 0 0 0 -1px;
   }
 
   @media (min-width: @screen-lg-min) {
@@ -103,21 +100,21 @@
 
 // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
 .btn-group > .btn:first-child {
-  .margin(left, 0);
+  margin-left: 0;
 
   &:not(:last-child):not(.dropdown-toggle) {
-    .border-radius(right, 0);
+    .border-right-radius(0);
   }
 }
 // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
 .btn-group > .btn:last-child:not(:first-child),
 .btn-group > .dropdown-toggle:not(:first-child) {
-  .border-radius(left, 0);
+  .border-left-radius(0);
 }
 
 // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
 .btn-group > .btn-group {
-  .float(left);
+  float: left;
 }
 
 .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
@@ -127,12 +124,12 @@
 .btn-group > .btn-group:first-child:not(:last-child) {
   > .btn:last-child,
   > .dropdown-toggle {
-    .border-radius(right, 0);
+    .border-right-radius(0);
   }
 }
 
 .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
-  .border-radius(left, 0);
+  .border-left-radius(0);
 }
 
 // On active and open, don't show outline
@@ -162,15 +159,13 @@
 
 // Give the line between buttons some depth
 .btn-group > .btn + .dropdown-toggle {
-  .padding(left, 12px);
-
-  .padding(right, 12px);
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 .btn-group > .btn-lg + .dropdown-toggle {
-  .padding(left, 12px);
-
-  .padding(right, 12px);
+  padding-left: 12px;
+  padding-right: 12px;
 }
 
 // The clickable button for toggling the menu
@@ -232,7 +227,7 @@
   > .btn-group + .btn,
   > .btn-group + .btn-group {
     margin-top: -1px;
-    .margin(left, 0);
+    margin-left: 0;
   }
 }
 
@@ -289,7 +284,7 @@
   }
 
   > .btn-group .dropdown-menu {
-    .left(auto);
+    left: auto;
   }
 }
 
@@ -319,11 +314,11 @@
 
 .btn-group .btn {
   + .btn-success {
-    .border(left, 1px, solid, var(--color-content-positive));
+    border-left: 1px solid @brand-green-minus-10;
   }
 
   + .btn-primary {
-    .border(left, 1px, solid, var(--color-content-accent));
+    border-left: 1px solid @brand-light-blue-minus-10;
   }
 }
 
@@ -337,32 +332,30 @@
   }
 
   .btn-input.btn {
-    .text-align(left);
+    text-align: left;
 
     .caret {
       position: absolute;
-      .right(16px);
-
+      right: 16px;
       top: 16px;
     }
 
     &.btn-sm .caret {
-      .right(8px);
+      right: 8px;
     }
 
     &.dropdown-toggle {
-      .padding(right, 40px, 16px);
-
+      padding-right: 40px;
       overflow: hidden;
       text-overflow: ellipsis;
 
       @media (min-width: @screen-sm-min) {
-        .padding(right, 48px, 16px);
+        padding-right: 48px;
       }
     }
 
     &.btn-sm.dropdown-toggle {
-      .padding(right, 33px);
+      padding-right: 33px;
     }
   }
 
@@ -372,7 +365,7 @@
     .caret {
       position: relative;
       top: 0;
-      .right(0);
+      right: 0;
     }
   }
 }
@@ -402,13 +395,12 @@
     }
   }
 
-  .body-2,
   .small {
-    line-height: calc(var(--line-height-control) - 1px);
-    color: var(--color-content-secondary);
+    color: @text-secondary-color;
+    line-height: (@line-height-computed - 1px);
 
     &.text-ellipsis {
-      line-height: var(--line-height-control);
+      line-height: @line-height-computed;
     }
   }
 }
@@ -420,7 +412,7 @@
 }
 
 .btn-group .secondary {
-  font-size: var(--font-size-14);
-  color: var(--color-content-secondary);
+  font-size: @font-size-small;
+  color: @text-secondary-color;
   line-height: 24px;
 }