@innovaccer/design-system 2.7.0 → 2.9.0-0

package/css/dist/index.css

@@ -253,6 +253,25 @@
 
   /* Transparancy (Opacity) */
   --transparent-58: 0.58;
+
+  /* Transition curve timing function */
+  /* Use standard-easing when an element is visible from the beginning to the end of a motion. Ex-Expanding cards. */
+  --standard-productive-curve: cubic-bezier(0.2, 0, 0.38, 0.9);
+  --standard-expressive-curve: cubic-bezier(0.4, 0.14, 0.3, 1);
+  /* Use entrance-easing when an element quickly appears and slows down to a stop. Ex-when adding elements to the view, such as a modal appearing. */
+  --entrance-productive-curve: cubic-bezier(0, 0, 0.38, 0.9);
+  --entrance-expressive-curve: cubic-bezier(0, 0, 0.3, 1);
+  /* Use exit-easing when removing elements from view, such as closing a modal or toaster. */
+  --exit-productive-curve: cubic-bezier(0.2, 0, 1, 0.9);
+  --exit-expressive-curve: cubic-bezier(0.4, 0.14, 1, 1);
+
+  /* Transition duration */
+  --duration--fast-01: 80ms;
+  --duration--fast-02: 120ms;
+  --duration--moderate-01: 160ms;
+  --duration--moderate-02: 240ms;
+  --duration--slow-01: 400ms;
+  --duration--slow-02: 720ms;
 }
 
 /* fallback */
@@ -415,6 +434,14 @@
           animation: fadeOut 120ms cubic-bezier(0.4, 0.14, 0.3, 1);
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
 .ss {
   background: red;
 }
@@ -641,6 +668,17 @@ body {
           animation-timing-function: cubic-bezier(0.4, 0.14, 1, 1);
 }
 
+::-webkit-scrollbar {
+  width: var(--spacing-2);
+}
+
+::-webkit-scrollbar-thumb {
+  border: var(--spacing-s) solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+  border-radius: var(--spacing);
+  background-color: var(--secondary);
+}
+
 .Legend {
   display: flex;
   flex-direction: row;
@@ -658,7 +696,7 @@ body {
 .ProgressBar {
   width: 100%;
   border-radius: var(--spacing-m);
-  background: var(--secondary-lightest);
+  background: var(--secondary-lighter);
 }
 
 .ProgressBar-indicator {
@@ -779,15 +817,6 @@ body {
   overflow-y: auto;
 }
 
-.AvatarGroup-TextWrapper::-webkit-scrollbar {
-  width: var(--spacing);
-}
-
-.AvatarGroup-TextWrapper::-webkit-scrollbar-thumb {
-  background: var(--secondary);
-  border-radius: var(--spacing-m);
-}
-
 @-webkit-keyframes backdrop-open {
   from {
     opacity: 0;
@@ -1022,12 +1051,12 @@ body {
   line-height: var(--font-height-s);
   color: var(--text-white);
 
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
-    box-shadow 0.15s ease-in-out;
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Button:disabled {
   cursor: not-allowed;
+  pointer-events: none;
 }
 
 .Button:focus {
@@ -1112,7 +1141,7 @@ body {
 }
 
 .Button--basic:hover {
-  background: var(--secondary);
+  box-shadow: var(--shadow-s);
 }
 
 .Button--basic:active {
@@ -1199,7 +1228,7 @@ body {
 
 .Button--transparent:focus {
   background: rgba(229, 229, 229, 0.2);
-  /* box-shadow: var(--shadow-spread) var(--secondary-shadow); */
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
 }
 
 .Button--transparent:active {
@@ -1752,6 +1781,10 @@ body {
   cursor: default;
   height: var(--spacing-xl);
 }
+.Chip-wrapper {
+  display: inline-flex;
+  align-items: center;
+}
 
 .Chip-icon--left {
   padding-right: var(--spacing-m);
@@ -2097,6 +2130,13 @@ body {
   box-sizing: border-box;
 }
 
+.Dropdown-items {
+  -webkit-animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
+          animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+
 .Option {
   display: flex;
 }
@@ -2176,15 +2216,6 @@ body {
   line-height: var(--font-height);
 }
 
-.Dropdown-wrapper::-webkit-scrollbar {
-  width: var(--spacing);
-}
-
-.Dropdown-wrapper::-webkit-scrollbar-thumb {
-  background: var(--secondary);
-  border-radius: var(--spacing-m);
-}
-
 .DropdownButton {
   width: 100%;
   justify-content: space-between;
@@ -2248,6 +2279,10 @@ body {
 .DropdownButton--open {
   background-color: var(--secondary-dark) !important;
   color: var(--text) !important;
+  -webkit-animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
+          animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
+  -webkit-animation-duration: 120ms;
+          animation-duration: 120ms;
 }
 
 .DropdownButton:disabled {
@@ -2685,11 +2720,6 @@ body {
   overflow: auto;
   display: flex;
   flex-direction: column;
-  visibility: hidden;
-}
-
-.FullscreenModal--open {
-  visibility: visible;
 }
 
 .FullscreenModal-animation--open {
@@ -2842,17 +2872,6 @@ body {
   overflow-y: overlay;
 }
 
-.Grid-body::-webkit-scrollbar {
-  background: var(--white);
-  height: var(--spacing-l);
-  width: var(--spacing-l);
-}
-
-.Grid-body::-webkit-scrollbar-thumb {
-  background: var(--secondary);
-  border-radius: var(--spacing);
-}
-
 .Grid-rowWrapper {
   display: inline-flex;
   flex-direction: column;
@@ -4227,17 +4246,6 @@ body {
   padding-right: var(--spacing-xl);
 }
 
-.OverlayBody::-webkit-scrollbar {
-  width: var(--spacing-2);
-}
-
-.OverlayBody::-webkit-scrollbar-thumb {
-  border: var(--spacing-m) solid rgba(0, 0, 0, 0);
-  background-clip: padding-box;
-  border-radius: var(--spacing);
-  background-color: var(--secondary);
-}
-
 .PageHeader-wrapper {
   padding: var(--spacing) var(--spacing-2);
 }
@@ -4566,6 +4574,30 @@ body {
   pointer-events: none;
 }
 
+@-webkit-keyframes popper-fade-in {
+  0% {
+    opacity: 0;
+  }
+  80% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes popper-fade-in {
+  0% {
+    opacity: 0;
+  }
+  80% {
+    opacity: 0.2;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 .Ring {
   transform: rotate(-90deg);
 }
@@ -4975,6 +5007,7 @@ body {
 .Slider-handle--disabled {
   pointer-events: none;
   background-color: var(--secondary-light);
+  box-shadow: none;
 }
 
 @-webkit-keyframes rotate {
@@ -5330,7 +5363,7 @@ body {
   outline: none;
   border-radius: 4px;
   /* Using box shadow instead of border as border shifts the div down which cuts the Icon & Text of label. */
-  box-shadow: rgba(0, 112, 221, 0.2) 0px 0px 0px var(--spacing-s) inset;
+  box-shadow: rgba(0, 112, 221, 0.16) 0px 0px 0px calc(var(--spacing-xs) + var(--spacing-s)) inset;
 }
 
 .Tab:active:focus {
@@ -5438,17 +5471,6 @@ body {
   resize: auto;
 }
 
-.Textarea::-webkit-scrollbar {
-  width: var(--spacing-2);
-}
-
-.Textarea::-webkit-scrollbar-thumb {
-  border: var(--spacing-m) solid rgba(0, 0, 0, 0);
-  background-clip: padding-box;
-  border-radius: var(--spacing);
-  background-color: var(--secondary);
-}
-
 /* toast */
 
 .Toast {
@@ -5636,6 +5658,216 @@ body {
           hyphens: auto;
 }
 
+@-webkit-keyframes tooltip-open-top {
+  from {
+    top: 0px;
+    opacity: 0.5;
+  }
+  to {
+    top: -8px;
+    opacity: 1;
+  }
+}
+
+@keyframes tooltip-open-top {
+  from {
+    top: 0px;
+    opacity: 0.5;
+  }
+  to {
+    top: -8px;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes tooltip-close-top {
+  from {
+    top: -8px;
+    opacity: 0.5;
+  }
+  to {
+    top: 0px;
+    opacity: 0;
+  }
+}
+@keyframes tooltip-close-top {
+  from {
+    top: -8px;
+    opacity: 0.5;
+  }
+  to {
+    top: 0px;
+    opacity: 0;
+  }
+}
+
+.Tooltip-animation-open-top {
+  -webkit-animation: tooltip-open-top 120ms cubic-bezier(0, 0, 0.3, 1);
+          animation: tooltip-open-top 120ms cubic-bezier(0, 0, 0.3, 1);
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+.Tooltip-animation-close-top {
+  -webkit-animation: tooltip-close-top 120ms cubic-bezier(0.4, 0.14, 1, 1);
+          animation: tooltip-close-top 120ms cubic-bezier(0.4, 0.14, 1, 1);
+}
+@-webkit-keyframes tooltip-open-bottom {
+  from {
+    top: 0px;
+    opacity: 0.5;
+  }
+  to {
+    top: 8px;
+    opacity: 1;
+  }
+}
+@keyframes tooltip-open-bottom {
+  from {
+    top: 0px;
+    opacity: 0.5;
+  }
+  to {
+    top: 8px;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes tooltip-close-bottom {
+  from {
+    top: 8px;
+    opacity: 0.5;
+  }
+  to {
+    top: 0px;
+    opacity: 0;
+  }
+}
+@keyframes tooltip-close-bottom {
+  from {
+    top: 8px;
+    opacity: 0.5;
+  }
+  to {
+    top: 0px;
+    opacity: 0;
+  }
+}
+
+.Tooltip-animation-open-bottom {
+  -webkit-animation: tooltip-open-bottom 120ms cubic-bezier(0, 0, 0.3, 1);
+          animation: tooltip-open-bottom 120ms cubic-bezier(0, 0, 0.3, 1);
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+.Tooltip-animation-close-bottom {
+  -webkit-animation: tooltip-close-bottom 120ms cubic-bezier(0.4, 0.14, 1, 1);
+          animation: tooltip-close-bottom 120ms cubic-bezier(0.4, 0.14, 1, 1);
+}
+
+@-webkit-keyframes tooltip-open-left {
+  from {
+    left: 0px;
+    opacity: 0.5;
+  }
+  to {
+    left: -8px;
+    opacity: 1;
+  }
+}
+
+@keyframes tooltip-open-left {
+  from {
+    left: 0px;
+    opacity: 0.5;
+  }
+  to {
+    left: -8px;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes tooltip-close-left {
+  from {
+    left: -8px;
+    opacity: 0.5;
+  }
+  to {
+    left: 0px;
+    opacity: 0;
+  }
+}
+@keyframes tooltip-close-left {
+  from {
+    left: -8px;
+    opacity: 0.5;
+  }
+  to {
+    left: 0px;
+    opacity: 0;
+  }
+}
+
+.Tooltip-animation-open-left {
+  -webkit-animation: tooltip-open-left 120ms cubic-bezier(0, 0, 0.3, 1);
+          animation: tooltip-open-left 120ms cubic-bezier(0, 0, 0.3, 1);
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+.Tooltip-animation-close-left {
+  -webkit-animation: tooltip-close-left 120ms cubic-bezier(0.4, 0.14, 1, 1);
+          animation: tooltip-close-left 120ms cubic-bezier(0.4, 0.14, 1, 1);
+}
+
+@-webkit-keyframes tooltip-open-right {
+  from {
+    left: 0px;
+    opacity: 0.5;
+  }
+  to {
+    left: 8px;
+    opacity: 1;
+  }
+}
+
+@keyframes tooltip-open-right {
+  from {
+    left: 0px;
+    opacity: 0.5;
+  }
+  to {
+    left: 8px;
+    opacity: 1;
+  }
+}
+@-webkit-keyframes tooltip-close-right {
+  from {
+    left: 8px;
+    opacity: 0.5;
+  }
+  to {
+    left: 0px;
+    opacity: 0;
+  }
+}
+@keyframes tooltip-close-right {
+  from {
+    left: 8px;
+    opacity: 0.5;
+  }
+  to {
+    left: 0px;
+    opacity: 0;
+  }
+}
+
+.Tooltip-animation-open-right {
+  -webkit-animation: tooltip-open-right 120ms cubic-bezier(0, 0, 0.3, 1);
+          animation: tooltip-open-right 120ms cubic-bezier(0, 0, 0.3, 1);
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+.Tooltip-animation-close-right {
+  -webkit-animation: tooltip-close-right 120ms cubic-bezier(0.4, 0.14, 1, 1);
+          animation: tooltip-close-right 120ms cubic-bezier(0.4, 0.14, 1, 1);
+}
+
 .VerificationCodeInput-Input {
   display: inline-flex;
   width: 40px;
@@ -5717,11 +5949,13 @@ body {
 
 .MenuItem:hover {
   background-color: var(--secondary-light);
+  box-shadow: var(--shadow-s);
 }
 
 .MenuItem--active,
 .MenuItem--active:hover {
   background: var(--primary-lightest);
+  box-shadow: none;
 }
 
 .MenuItem--rounded {
@@ -7505,4 +7739,8 @@ body {
   cursor: pointer;
 }
 
+.white-space-nowrap {
+  white-space: nowrap;
+}
+
 /*# sourceMappingURL=index.css.map */