@innovaccer/design-system 2.5.0 → 2.7.0-0

package/css/src/components/tabs.css

@@ -1,114 +1,114 @@
 /* tabs */
 
 .TabsWrapper {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
 }
 
 .TabsWrapper-header {
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    flex-direction: row;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
 }
 
 .TabsWrapper-header--withSeparator {
-    border-bottom: var(--border);
+  border-bottom: var(--border);
 }
 
 .Tab {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    cursor: pointer;
-    min-width: 40px;
-    padding: var(--spacing-l);
-    margin-left: calc(-1 * var(--spacing-l));
-    margin-right: var(--spacing-l);
-    margin-bottom: calc(-1 * var(--spacing-xs));
-    text-align: center;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  cursor: pointer;
+  min-width: 40px;
+  padding: var(--spacing-l);
+  margin-left: calc(-1 * var(--spacing-l));
+  margin-right: var(--spacing-l);
+  margin-bottom: calc(-1 * var(--spacing-xs));
+  text-align: center;
 }
 
 .Tab:last-child {
-    margin-right: 0;
+  margin-right: 0;
 }
 
 .Tab::after {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    content: '';
-    width: calc(100% - 2*var(--spacing-l));
-    height: var(--spacing-s);
-    background-color: transparent; 
-    margin-left: var(--spacing-l);
-    border-top-left-radius: var(--spacing-xs);
-    border-top-right-radius: var(--spacing-xs);
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  content: '';
+  width: calc(100% - 2 * var(--spacing-l));
+  height: var(--spacing-s);
+  background-color: transparent;
+  margin-left: var(--spacing-l);
+  border-top-left-radius: var(--spacing-xs);
+  border-top-right-radius: var(--spacing-xs);
 }
 
 .Tab:hover::after {
-    background-color: var(--primary-dark); 
+  background-color: var(--primary-dark);
 }
 
 .Tab:active::after {
-    background-color: var(--primary-darker);
+  background-color: var(--primary-darker);
 }
 
 .Tab--active::after {
-    background-color: var(--primary);
+  background-color: var(--primary);
 }
 
 .Tab:focus {
-    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: color-mod(var(--primary) a(0.2)) 0px 0px 0px var(--spacing-s) inset;
+  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: color-mod(var(--primary) a(0.2)) 0px 0px 0px var(--spacing-s) inset;
 }
 
 .Tab:active:focus {
-    box-shadow: none;
+  box-shadow: none;
 }
 
 .Tab--disabled {
-    cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .Tab--disabled:hover::after {
-    background-color: transparent; 
+  background-color: transparent;
 }
 
 .Tab-count {
-    display: flex;
-    margin-right: var(--spacing-l);
+  display: flex;
+  margin-right: var(--spacing-l);
 }
 
 .Tab-count .Badge {
-    margin-left: 0;
-    margin-right: 0;
+  margin-left: 0;
+  margin-right: 0;
 }
 
 .Tab-icon {
-    display: flex;
-    min-width: inherit;
-    justify-content: space-between;
+  display: flex;
+  min-width: inherit;
+  justify-content: space-between;
 }
 
 .Tabs {
-    display: flex;
-    box-sizing: border-box;
-    flex-direction: row;
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: row;
 }
 
 .Tabs--withSeparator {
-    border-bottom: var(--border);
+  border-bottom: var(--border);
 }
 
 .Tab-pills {
-    cursor: pointer;
-    margin-right: var(--spacing);
+  cursor: pointer;
+  margin-right: var(--spacing);
 }
 
 .Tab-pills--disabled {
-    opacity: 60%;
+  opacity: 60%;
 }

package/css/src/components/textarea.css

@@ -57,4 +57,4 @@
   background-clip: padding-box;
   border-radius: var(--spacing);
   background-color: var(--secondary);
-}
+}

package/css/src/components/toast.css

@@ -1,171 +1,166 @@
 /* toast */
 
 .Toast {
-    display: flex;
-    flex-direction: row;
-    box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
 
-    width: 360px;
-    border-radius: var(--spacing-m);
-    padding-left: var(--spacing-2);
-    padding-right: var(--spacing-2);
-    padding-top: var(--spacing-l);
-    padding-bottom: var(--spacing-l);
+  width: 360px;
+  border-radius: var(--spacing-m);
+  padding-left: var(--spacing-2);
+  padding-right: var(--spacing-2);
+  padding-top: var(--spacing-l);
+  padding-bottom: var(--spacing-l);
 }
 
 .Toast--withMessage {
-    padding-bottom: var(--spacing-2);
-}
-
-.Toast--default {
-    padding-left: var(--spacing-xl);
-    background-color: var(--inverse);
+  padding-bottom: var(--spacing-2);
 }
 
 .Toast--info {
-    background-color: var(--primary);
+  background-color: var(--primary);
 }
 
 .Toast--alert {
-    background-color: var(--alert);
+  background-color: var(--alert);
 }
 
 .Toast--success {
-    background-color: var(--success);
+  background-color: var(--success);
 }
 
 .Toast--warning {
-    background-color: var(--warning);
+  background-color: var(--warning);
 }
 
 .Toast--warning {
-    color: var(--text);
+  color: var(--text);
 }
 
 .Toast-icon {
-    display: flex;
-    line-height: var(--font-height-m);
+  display: flex;
+  line-height: var(--font-height-m);
 }
 
 .Toast-icon--left {
-    margin-right: var(--spacing-2);
+  margin-right: var(--spacing-2);
 }
 
 .Toast-icon--right {
-    cursor: pointer;
-    margin-left: var(--spacing-2);
+  cursor: pointer;
+  margin-left: var(--spacing-2);
 }
 
 .Toast-icon--info,
 .Toast-icon--success,
 .Toast-icon--alert,
 .Toast-icon--default {
-    color: var(--text-white);
+  color: var(--text-white);
 }
 
 .Toast-icon--warning {
-    color: var(--warning-darker);
+  color: var(--warning-darker);
 }
 
 .Toast-body {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
 }
 
 .Toast-title {
-    display: flex;
+  display: flex;
 }
 
 .Toast-heading {
-    flex-grow: 1;
+  flex-grow: 1;
 }
 
 .Toast-text {
-    padding-top: var(--spacing);
+  padding-top: var(--spacing);
 }
 
 .Toast-text--warning,
 .Toast-heading--warning {
-    color: var(--warning-darker) !important;
+  color: var(--warning-darker) !important;
 }
 
 .Toast-actions {
-    display: flex;
-    padding-top: var(--spacing-l);
+  display: flex;
+  padding-top: var(--spacing-l);
 }
 
 .Toast-actionButton {
-    color: var(--text-white);
-    border-radius: var(--spacing-m);
-    margin-right: var(--spacing);
+  color: var(--text-white);
+  border-radius: var(--spacing-m);
+  margin-right: var(--spacing);
 }
 
 .Toast-actionButton:last-child {
-    margin-right: 0;
+  margin-right: 0;
 }
 
 .Toast-actionButton--default {
-    background: var(--inverse-light);
+  background: var(--inverse-light);
 }
 
 .Toast-actionButton--default:hover,
 .Toast-actionButton--default:active {
-    background: var(--inverse);
+  background: var(--inverse);
 }
 
 .Toast-actionButton--default:focus {
-    box-shadow: var(--shadow-spread) color-mod(var(--inverse-lighter) a(0.16));
+  box-shadow: var(--shadow-spread) color-mod(var(--inverse-lighter) a(0.16));
 }
 
 .Toast-actionButton--info {
-    background: var(--primary-dark);
+  background: var(--primary-dark);
 }
 
 .Toast-actionButton--info:hover,
 .Toast-actionButton--info:active {
-    background: var(--primary-darker);
+  background: var(--primary-darker);
 }
 
 .Toast-actionButton--info:focus {
-    box-shadow: var(--shadow-spread) color-mod(var(--primary-dark) a(0.16));
+  box-shadow: var(--shadow-spread) color-mod(var(--primary-dark) a(0.16));
 }
 
 .Toast-actionButton--success {
-    background: var(--success-dark);
+  background: var(--success-dark);
 }
 
 .Toast-actionButton--success:hover,
 .Toast-actionButton--success:active {
-    background: var(--success-darker);
+  background: var(--success-darker);
 }
 
 .Toast-actionButton--success:focus {
-    box-shadow: var(--shadow-spread) color-mod(var(--success-dark) a(0.16));
+  box-shadow: var(--shadow-spread) color-mod(var(--success-dark) a(0.16));
 }
 
 .Toast-actionButton--alert {
-    background: var(--alert-dark);
+  background: var(--alert-dark);
 }
 
 .Toast-actionButton--alert:hover,
 .Toast-actionButton--alert:active {
-    background: var(--alert-darker);
+  background: var(--alert-darker);
 }
 
 .Toast-actionButton--alert:focus {
-    box-shadow: var(--shadow-spread) var(--alert-shadow);
+  box-shadow: var(--shadow-spread) var(--alert-shadow);
 }
 
 .Toast-actionButton--warning {
-    background: var(--warning-dark);
+  background: var(--warning-dark);
 }
 
 .Toast-actionButton--warning:hover,
 .Toast-actionButton--warning:active {
-    background: var(--warning-darker);
+  background: var(--warning-darker);
 }
 
 .Toast-actionButton--warning:focus {
-    box-shadow: var(--shadow-spread) var(--warning-shadow);
-}
+  box-shadow: var(--shadow-spread) var(--warning-shadow);
+}

package/css/src/components/verificationCodeInput.css

@@ -1,4 +1,3 @@
-
 .VerificationCodeInput-Input {
   display: inline-flex;
   width: 40px;
@@ -8,8 +7,8 @@
   text-align: center;
 }
 
-.VerificationCodeInput-Input .Input-input::-webkit-inner-spin-button, 
-.VerificationCodeInput-Input .Input-input::-webkit-outer-spin-button { 
-  -webkit-appearance: none; 
-  margin: 0; 
-}
+.VerificationCodeInput-Input .Input-input::-webkit-inner-spin-button,
+.VerificationCodeInput-Input .Input-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}

package/css/src/components/verticalNav.css

@@ -1,4 +1,3 @@
-
 .VerticalNav {
   display: inline-flex;
   flex-direction: column;
@@ -80,7 +79,7 @@
   padding-left: 40px;
 }
 
-.MenuItem  .Text {
+.MenuItem .Text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/css/src/core/base.css

@@ -0,0 +1,3 @@
+.ss {
+  background: red;
+}

package/css/src/core/typography.css

@@ -195,4 +195,4 @@ body {
 
 .Subheading--white {
   color: var(--text-white);
-}
+}

package/css/src/core/utilities.css

@@ -9,4 +9,4 @@
   flex-direction: row;
   justify-content: center;
   z-index: 1500;
-}
+}

package/css/src/tokens/index.css

@@ -1,67 +1,67 @@
 /**** Colors ****/
 :root {
-	--haldi: #ffc208;
-	--haldi-dark: #b78707;
-	--haldi-darker: #6b4a06;
-	--haldi-light: #ffd462;
-	--haldi-lighter: #ffe597;
-	--haldi-lightest: #fff5c7;
-	--jal: #0070dd;
-	--jal-dark: #00509f;
-	--jal-darker: #003365;
-	--jal-light: #4f9de7;
-	--jal-lighter: #97c5f0;
-	--jal-lightest: #dcecf9;
-	--jamun: #7a53b2;
-	--jamun-dark: #644491;
-	--jamun-darker: #4e3572;
-	--jamun-light: #9d7ec6;
-	--jamun-lighter: #bfaada;
-	--jamun-lightest: #e0d8ee;
-	--mirch: #d93737;
-	--mirch-dark: #9c2828;
-	--mirch-darker: #631919;
-	--mirch-light: #eb776c;
-	--mirch-lighter: #f7ada5;
-	--mirch-lightest: #f9e2e2;
-	--neel: #3d51d4;
-	--neel-dark: #2c3a98;
-	--neel-darker: #1c2561;
-	--neel-light: #7583e1;
-	--neel-lighter: #abb4ed;
-	--neel-lightest: #e2e5f9;
-	--neem: #2ea843;
-	--neem-dark: #227934;
-	--neem-darker: #154d26;
-	--neem-light: #71c077;
-	--neem-lighter: #a5d8aa;
-	--neem-lightest: #d7efdf;
-	--night: #2f2f2f;
-	--night-light: #595959;
-	--night-lighter: #868686;
-	--night-lightest: #a6a6a6;
-	--nimbu: #82c91e;
-	--nimbu-dark: #578715;
-	--nimbu-darker: #304a0b;
-	--nimbu-light: #a6d763;
-	--nimbu-lighter: #c6e599;
-	--nimbu-lightest: #e3f3ce;
-	--shadow-0: #ffffff;
-	--shadow-10: #ffffff;
-	--shadow-20: #ffffff;
-	--shadow-30: #ffffff;
-	--stone: #d5d5d5;
-	--stone-dark: #c5c5c5;
-	--stone-light: #e5e5e5;
-	--stone-lighter: #ececec;
-	--stone-lightest: #f4f4f4;
-	--tawak: #f07d00;
-	--tawak-dark: #b35f13;
-	--tawak-darker: #743208;
-	--tawak-light: #feac5f;
-	--tawak-lighter: #ffc998;
-	--tawak-lightest: #fde6ce;
-	--white: #ffffff;
+  --haldi: #ffc208;
+  --haldi-dark: #b78707;
+  --haldi-darker: #6b4a06;
+  --haldi-light: #ffd462;
+  --haldi-lighter: #ffe597;
+  --haldi-lightest: #fff5c7;
+  --jal: #0070dd;
+  --jal-dark: #00509f;
+  --jal-darker: #003365;
+  --jal-light: #4f9de7;
+  --jal-lighter: #97c5f0;
+  --jal-lightest: #dcecf9;
+  --jamun: #7a53b2;
+  --jamun-dark: #644491;
+  --jamun-darker: #4e3572;
+  --jamun-light: #9d7ec6;
+  --jamun-lighter: #bfaada;
+  --jamun-lightest: #e0d8ee;
+  --mirch: #d93737;
+  --mirch-dark: #9c2828;
+  --mirch-darker: #631919;
+  --mirch-light: #eb776c;
+  --mirch-lighter: #f7ada5;
+  --mirch-lightest: #f9e2e2;
+  --neel: #3d51d4;
+  --neel-dark: #2c3a98;
+  --neel-darker: #1c2561;
+  --neel-light: #7583e1;
+  --neel-lighter: #abb4ed;
+  --neel-lightest: #e2e5f9;
+  --neem: #2ea843;
+  --neem-dark: #227934;
+  --neem-darker: #154d26;
+  --neem-light: #71c077;
+  --neem-lighter: #a5d8aa;
+  --neem-lightest: #d7efdf;
+  --night: #2f2f2f;
+  --night-light: #595959;
+  --night-lighter: #868686;
+  --night-lightest: #a6a6a6;
+  --nimbu: #82c91e;
+  --nimbu-dark: #578715;
+  --nimbu-darker: #304a0b;
+  --nimbu-light: #a6d763;
+  --nimbu-lighter: #c6e599;
+  --nimbu-lightest: #e3f3ce;
+  --shadow-0: #ffffff;
+  --shadow-10: #ffffff;
+  --shadow-20: #ffffff;
+  --shadow-30: #ffffff;
+  --stone: #d5d5d5;
+  --stone-dark: #c5c5c5;
+  --stone-light: #e5e5e5;
+  --stone-lighter: #ececec;
+  --stone-lightest: #f4f4f4;
+  --tawak: #f07d00;
+  --tawak-dark: #b35f13;
+  --tawak-darker: #743208;
+  --tawak-light: #feac5f;
+  --tawak-lighter: #ffc998;
+  --tawak-lightest: #fde6ce;
+  --white: #ffffff;
 
-	/**** Fonts ****/
+  /**** Fonts ****/
 } /* close :root */

package/css/src/utils/align.css

@@ -20,4 +20,4 @@
 
 .align-text-top {
   vertical-align: text-top !important;
-}
+}

package/css/src/utils/background.css

@@ -36,4 +36,4 @@
 
 .bg-transparent {
   background-color: transparent !important;
-}
+}

package/css/src/utils/cursor.css

@@ -1,3 +1,3 @@
 .cursor-pointer {
   cursor: pointer;
-}
+}

package/css/src/utils/display.css

@@ -32,4 +32,4 @@
 
 .d-inline-flex {
   display: inline-flex !important;
-}
+}

package/css/src/utils/flex.css

@@ -168,4 +168,4 @@
 
 .order-last {
   order: 6 !important;
-}
+}

package/css/src/utils/grid.css

@@ -357,4 +357,4 @@
     flex: 0 0 auto;
     width: calc(100% / var(--grid-columns) * 12);
   }
-}
+}

package/css/src/utils/overflow.css

@@ -4,4 +4,4 @@
 
 .overflow-hidden {
   overflow: hidden !important;
-}
+}

package/css/src/utils/position.css

@@ -17,4 +17,4 @@
 .position-sticky {
   position: -webkit-sticky !important;
   position: sticky !important;
-}
+}

package/css/src/utils/spacing.css

@@ -956,4 +956,4 @@
 
 .pl-auto {
   padding-left: auto !important;
-}
+}