@transferwise/neptune-css 0.0.0-experimental-b8acfbb → 0.0.0-experimental-9513a35

package/dist/css/tooltip.css

@@ -1,38 +1,14 @@
-.tooltip-inner {
-  word-wrap: break-word;
-}
-@supports (hyphenate-limit-chars: 1) {
-  .tooltip-inner {
-    hyphens: auto;hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .tooltip-inner {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .tooltip-inner {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .tooltip-inner {
-    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .tooltip-inner {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}.tooltip {
+.tooltip {
   position: absolute;
   z-index: 1070;
   display: block;
-  font-family: var(--wds-font-family-regular);
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
+  font-family: var(--font-family-regular);
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
   line-break: auto;
+  line-height: 24px;
   line-height: var(--size-24);
   text-align: start;
   -webkit-text-decoration: none;
@@ -69,13 +45,23 @@
   padding-inline: 5px;
 }
 .tooltip-inner {
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  line-height: 155%;
+  letter-spacing: -0.006em;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   max-inline-size: 200px;
   min-inline-size: 120px;
+  padding-block: 16px;
   padding-block: var(--size-16);
+  padding-inline: 16px;
   padding-inline: var(--size-16);
+  color: #37517e;
   color: var(--color-content-primary);
   text-align: center;
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-radius: 3px;
   box-shadow: 0 1px 28px 0 rgba(34, 48, 73, 0.2);
@@ -126,6 +112,7 @@
   margin-inline-start: -5px;
   border-block-width: 5px 0;
   border-inline-width: 5px;
+  border-block-start-color: #ffffff;
   border-block-start-color: var(--color-background-screen);
 }
 .tooltip.right .tooltip-arrow {
@@ -134,6 +121,7 @@
   margin-block-start: -5px;
   border-block-width: 5px 5px;
   border-inline-width: 0 5px;
+  border-inline-end-color: #ffffff;
   border-inline-end-color: var(--color-background-screen);
 }
 .tooltip.left .tooltip-arrow {
@@ -142,6 +130,7 @@
   margin-block-start: -5px;
   border-block-width: 5px 5px;
   border-inline-width: 5px 0;
+  border-inline-start-color: #ffffff;
   border-inline-start-color: var(--color-background-screen);
 }
 .tooltip.bottom .tooltip-arrow {
@@ -150,6 +139,7 @@
   margin-inline-start: -5px;
   border-block-width: 0 5px;
   border-inline-width: 5px;
+  border-block-end-color: #ffffff;
   border-block-end-color: var(--color-background-screen);
 }
 [data-toggle="tooltip"]:not(.btn) {
@@ -157,6 +147,7 @@
 }
 [data-toggle="tooltip"]:not(.btn):hover,
 [data-toggle="tooltip"]:not(.btn):focus {
+  color: #0084b3 !important;
   color: var(--color-content-accent-hover) !important;
   outline: 0;
 }

package/dist/css/wells.css

@@ -1,28 +1,43 @@
 .well,
 .well-xs {
+  min-block-size: 24px;
   min-block-size: var(--size-24);
+  margin-block-end: 24px;
   margin-block-end: var(--size-24);
+  border-radius: 10px;
   border-radius: var(--radius-small);
+  border: solid 1px rgba(0,0,0,0.10196);
   border: solid 1px var(--color-border-neutral);
+  padding: 24px;
   padding: var(--size-24);
   box-shadow: none;
 }
 @media only screen and (min-width: 600px) {
   .well-sm {
+    min-block-size: 24px;
     min-block-size: var(--size-24);
+    margin-block-end: 24px;
     margin-block-end: var(--size-24);
+    border-radius: 10px;
     border-radius: var(--radius-small);
+    border: solid 1px rgba(0,0,0,0.10196);
     border: solid 1px var(--color-border-neutral);
+    padding: 24px;
     padding: var(--size-24);
     box-shadow: none;
   }
 }
 @media only screen and (min-width: 840px) {
   .well-md {
+    min-block-size: 24px;
     min-block-size: var(--size-24);
+    margin-block-end: 24px;
     margin-block-end: var(--size-24);
+    border-radius: 10px;
     border-radius: var(--radius-small);
+    border: solid 1px rgba(0,0,0,0.10196);
     border: solid 1px var(--color-border-neutral);
+    padding: 24px;
     padding: var(--size-24);
     box-shadow: none;
   }
@@ -30,10 +45,15 @@
 @media only screen and (min-width: 1160px) {
   .well-lg,
   .well-xl {
+    min-block-size: 24px;
     min-block-size: var(--size-24);
+    margin-block-end: 24px;
     margin-block-end: var(--size-24);
+    border-radius: 10px;
     border-radius: var(--radius-small);
+    border: solid 1px rgba(0,0,0,0.10196);
     border: solid 1px var(--color-border-neutral);
+    padding: 24px;
     padding: var(--size-24);
     box-shadow: none;
   }