@innovaccer/design-system 2.5.0 → 2.7.0-0

package/css/src/components/icon.css

@@ -3,26 +3,20 @@
  * https://google.github.io/material-design-icons/
  */
 
-
 /* Rules for sizing the icon. */
 
-
 /* .material-icons.md-18 { font-size: 18px; }
 .material-icons.md-24 { font-size: 24px; }
 .material-icons.md-36 { font-size: 36px; }
 .material-icons.md-48 { font-size: 48px; } */
 
-
 /* Rules for using icons as black on a light background. */
 
-
 /* .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
 .material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } */
 
-
 /* Rules for using icons as white on a dark background. */
 
-
 /* .material-icons.md-light { color: rgba(255, 255, 255, 1); }
 .material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } */
 .Icon {
@@ -81,7 +75,7 @@
 }
 
 .Icon--alertLighter {
-  color: var(--alert-lighter );
+  color: var(--alert-lighter);
 }
 
 .Icon--alertDark {

package/css/src/components/inlineMessage.css

@@ -12,7 +12,8 @@
   padding-bottom: var(--spacing-s);
 }
 
-.InlineMessage-text--warning, .InlineMessage-icon--warning {
+.InlineMessage-text--warning,
+.InlineMessage-icon--warning {
   color: var(--accent1);
 }
 

package/css/src/components/input.css

@@ -1,130 +1,130 @@
 /* input */
 
 .Input-input::-ms-clear {
-    display: none;
+  display: none;
 }
 
 .Input {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: row;
-    align-items: center;
-    box-sizing: border-box;
-    border-radius: var(--spacing-m);
-    border: var(--border);
-    padding-right: var(--spacing-l);
-    padding-left: var(--spacing-l);
-    background: var(--white);
+  display: flex;
+  flex-grow: 1;
+  flex-direction: row;
+  align-items: center;
+  box-sizing: border-box;
+  border-radius: var(--spacing-m);
+  border: var(--border);
+  padding-right: var(--spacing-l);
+  padding-left: var(--spacing-l);
+  background: var(--white);
 }
 
 .Input--tiny {
-    height: var(--spacing-xl);
-    padding-top: var(--spacing-m);
-    padding-bottom: var(--spacing-m);
+  height: var(--spacing-xl);
+  padding-top: var(--spacing-m);
+  padding-bottom: var(--spacing-m);
 }
 
 .Input--regular {
-    height: var(--spacing-3);
-    padding-top: var(--spacing);
-    padding-bottom: var(--spacing);
+  height: var(--spacing-3);
+  padding-top: var(--spacing);
+  padding-bottom: var(--spacing);
 }
 
 .Input--large {
-    height: 40px;
+  height: 40px;
 }
 
 .Input--large .Input-input {
-    line-height: var(--font-height-m);
-    font-size: var(--font-size-m);
+  line-height: var(--font-height-m);
+  font-size: var(--font-size-m);
 }
 
 .Input:hover {
-    background: var(--secondary-lightest);
-    border-color: var(--secondary-lightest);
-    cursor: text;
+  background: var(--secondary-lightest);
+  border-color: var(--secondary-lightest);
+  cursor: text;
 }
 
 .Input:focus-within {
-    background: var(--white);
-    border-color: var(--primary);
-    box-shadow: var(--shadow-spread) var(--primary-shadow);
+  background: var(--white);
+  border-color: var(--primary);
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
 .Input:focus-within .Input-icon--left .Icon {
-    color: var(--primary);
+  color: var(--primary);
 }
 
 .Input--error:focus-within {
-    border-color: var(--alert);
-    box-shadow: var(--shadow-spread) var(--alert-shadow);
+  border-color: var(--alert);
+  box-shadow: var(--shadow-spread) var(--alert-shadow);
 }
 
 .Input--error:focus-within .Input-icon--left .Icon {
-    color: var(--alert);
+  color: var(--alert);
 }
 
 .Input--disabled {
-    background: var(--secondary-lightest);
-    border-color: var(--secondary-light);
-    pointer-events: none;
+  background: var(--secondary-lightest);
+  border-color: var(--secondary-light);
+  pointer-events: none;
 }
 
-.Input--disabled .Input-icon--left .Icon{
-    color: var(--inverse-lightest);
+.Input--disabled .Input-icon--left .Icon {
+  color: var(--inverse-lightest);
 }
 
 .Input--error,
 .Input--error:hover {
-    background: var(--white);
-    border-color: var(--alert);
+  background: var(--white);
+  border-color: var(--alert);
 }
 
 .Input-input {
-    display: flex;
-    width: 100%;
-    font-family: var(--font-family);
-    font-weight: var(--font-weight-normal);
-    font-size: var(--font-size);
-    line-height: var(--font-height-s);
-    color: var(--night);
-    padding: 0;
-    border: none;
-    background: transparent;
+  display: flex;
+  width: 100%;
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size);
+  line-height: var(--font-height-s);
+  color: var(--night);
+  padding: 0;
+  border: none;
+  background: transparent;
 }
 
 .Input-input::placeholder {
-    color: var(--inverse-lighter);
+  color: var(--inverse-lighter);
 }
 
 .Input-input:focus {
-    outline: 0;
+  outline: 0;
 }
 
 .Input-input:disabled .Input-input::placeholder {
-    color: var(--inverse-lighter);
+  color: var(--inverse-lighter);
 }
 
 .Input-icon {
-    display: flex;
-    align-content: center;
-    font-size: var(--font-size-m);
+  display: flex;
+  align-content: center;
+  font-size: var(--font-size-m);
 }
 
 .Input-icon--left .Icon {
-    margin-right: var(--spacing);
-    color: var(--inverse);
+  margin-right: var(--spacing);
+  color: var(--inverse);
 }
 
-.Input-icon--disabled .Icon{
-    color: var(--inverse-lightest);
+.Input-icon--disabled .Icon {
+  color: var(--inverse-lightest);
 }
 
-.Input-icon--right .Icon{
-    cursor: pointer;
-    margin-left: var(--spacing);
-    color: var(--inverse-lightest);
+.Input-icon--right .Icon {
+  cursor: pointer;
+  margin-left: var(--spacing);
+  color: var(--inverse-lightest);
 }
 
 .Input-inlineLabel {
-    margin-right: var(--spacing);
+  margin-right: var(--spacing);
 }

package/css/src/components/link.css

@@ -48,4 +48,4 @@
 .Link--disabled {
   color: var(--inverse-lightest);
   pointer-events: none;
-}
+}

package/css/src/components/list.css

@@ -1,14 +1,14 @@
 .List {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-    /* flex-grow: 0; */
-    height: 100%;
-    z-index: 1;
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  /* flex-grow: 0; */
+  height: 100%;
+  z-index: 1;
 }
 
 .List-grid {
-    height: 100%;
-    overflow: hidden;
-    height: 100%;
-}
+  height: 100%;
+  overflow: hidden;
+  height: 100%;
+}

package/css/src/components/message.css

@@ -1,79 +1,73 @@
 .Message {
-    display: flex;
-    flex-direction: row;
-    overflow: hidden;
-    padding: var(--spacing-l) var(--spacing-xl) var(--spacing-l) var(--spacing-2);
-    border: var(--spacing-xs) solid;
-    width: 100%;
-    border-radius: var(--spacing-m);
-    box-sizing: border-box;
-  }
-  
-  .Message--alert {
-    border-color: var(--alert);
-    background-color: color-mod(var(--alert-lightest) a(0.4));
-  }
-  
-  .Message--success {
-    border-color: var(--success);
-    background-color: color-mod(var(--success-lightest) a(0.4));
-  }
-  
-  .Message--info {
-    border-color: var(--primary);
-    background-color: color-mod(var(--primary-lightest) a(0.4));
-  }
-  
-  .Message--warning {
-    border-color: var(--accent1);
-    background-color: color-mod(var(--warning-lightest) a(0.4));
-  }
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  padding: var(--spacing-l) var(--spacing-xl) var(--spacing-l) var(--spacing-2);
+  border: var(--spacing-xs) solid;
+  width: 100%;
+  border-radius: var(--spacing-m);
+  box-sizing: border-box;
+}
 
-  .Message--default {
-    border-color: var(--secondary-dark);
-    background-color: var(--white);
-  }
-  
-  .Message-icon {
-    margin-right: var(--spacing-2);
-    padding-top: var(--spacing-s);
-  }
+.Message--alert {
+  border-color: var(--alert);
+  background-color: color-mod(var(--alert-lightest) a(0.4));
+}
 
-  .Message-icon--withTitle {
-    padding-top: var(--spacing-m);
-  }
+.Message--success {
+  border-color: var(--success);
+  background-color: color-mod(var(--success-lightest) a(0.4));
+}
 
-  .Message-icon--warning {
-    color: var(--accent1);
-  }
-  
-  .Message-heading {
-    margin-bottom: var(--spacing-m);
-  }
+.Message--info {
+  border-color: var(--primary);
+  background-color: color-mod(var(--primary-lightest) a(0.4));
+}
 
-  .Message-heading--alert,
-  .Message-text--alert {
-    color: var(--alert-darker) !important;
-  }
+.Message--warning {
+  border-color: var(--accent1);
+  background-color: color-mod(var(--warning-lightest) a(0.4));
+}
 
-  .Message-heading--info,
-  .Message-text--info {
-    color: var(--primary-darker) !important;
-  }
+.Message-icon {
+  margin-right: var(--spacing-2);
+  padding-top: var(--spacing-s);
+}
 
-  .Message-heading--success,
-  .Message-text--success {
-    color: var(--success-darker) !important;
-  }
+.Message-icon--withTitle {
+  padding-top: var(--spacing-m);
+}
 
-  .Message-heading--warning,
-  .Message-text--warning {
-    color: var(--accent1-darker) !important;
-  }
+.Message-icon--warning {
+  color: var(--accent1);
+}
 
-  .Message-actions {
-    display: flex;
-    align-items: center;
-    margin-top: var(--spacing-l);
-  }
- 
+.Message-heading {
+  margin-bottom: var(--spacing-m);
+}
+
+.Message-heading--alert,
+.Message-text--alert {
+  color: var(--alert-darker) !important;
+}
+
+.Message-heading--info,
+.Message-text--info {
+  color: var(--primary-darker) !important;
+}
+
+.Message-heading--success,
+.Message-text--success {
+  color: var(--success-darker) !important;
+}
+
+.Message-heading--warning,
+.Message-text--warning {
+  color: var(--accent1-darker) !important;
+}
+
+.Message-actions {
+  display: flex;
+  align-items: center;
+  margin-top: var(--spacing-l);
+}

package/css/src/components/metaList.css

@@ -1,42 +1,42 @@
 .Meta {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: fit-content;
-    font-size: var(--font-size);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: fit-content;
+  font-size: var(--font-size);
 }
 
 .MetaList-seperator {
-    margin-left: var(--spacing);
+  margin-left: var(--spacing);
 }
-.MetaList-seperator--left{
-    margin-right: var(--spacing-m);
+.MetaList-seperator--left {
+  margin-right: var(--spacing-m);
 }
-.Meta-icon{
-    padding-right: var( --spacing-m);
-    display: flex;
-    align-items: center;
+.Meta-icon {
+  padding-right: var(--spacing-m);
+  display: flex;
+  align-items: center;
 }
 .MetaList {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: fit-content;
-    font-size: var(--font-size);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: fit-content;
+  font-size: var(--font-size);
 }
 .MetaList-item {
-    margin: 0 var(--spacing-m);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    width: fit-content;
-    font-size: var(--font-size);
+  margin: 0 var(--spacing-m);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: fit-content;
+  font-size: var(--font-size);
 }
 
 .MetaList-item:first-child {
-    margin-left: 0;
+  margin-left: 0;
 }
 
 .MetaList-item:last-child {
-    margin-right: 0;
-}
+  margin-right: 0;
+}

package/css/src/components/metricInput.css

@@ -1,4 +1,3 @@
-
 .MetricInput-input::-ms-clear {
   display: none;
 }
@@ -133,10 +132,10 @@
   margin-top: var(--spacing-s);
 }
 
-.MetricInput-input::-webkit-inner-spin-button, 
-.MetricInput-input::-webkit-outer-spin-button { 
+.MetricInput-input::-webkit-inner-spin-button,
+.MetricInput-input::-webkit-outer-spin-button {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  margin: 0; 
+  margin: 0;
 }

package/css/src/components/modal.css

@@ -86,4 +86,4 @@
 
 .Modal-body--withPadding {
   padding-bottom: var(--spacing-2);
-}
+}

package/css/src/components/navigation.css

@@ -91,7 +91,7 @@
   overflow: hidden;
 }
 
-.Navigation-menu  .Text {
+.Navigation-menu .Text {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -112,9 +112,9 @@
 }
 
 .Navigation-footer--border {
-  border-top: var(--border)
+  border-top: var(--border);
 }
 
 .Navigation--collapsed .Navigation-menuIcon--footer {
   transform: rotate(180deg);
-}
+}

package/css/src/components/pageHeader.css

@@ -1,7 +1,7 @@
 .PageHeader-wrapper {
   padding: var(--spacing) var(--spacing-2);
 }
-.PageHeader-wrapper--separator{
+.PageHeader-wrapper--separator {
   border-bottom: var(--border);
 }
 
@@ -38,7 +38,6 @@
 }
 
 .PageHeader-navigationWrapper {
-  display: inline-flex;
   margin-top: var(--spacing-l);
 }
 

package/css/src/components/pagination.css

@@ -1,57 +1,57 @@
 /* pagination */
 
 .Pagination {
-    display: flex;
-    vertical-align: middle;
-    flex-direction: row;
-    flex-wrap: wrap;
+  display: flex;
+  vertical-align: middle;
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 
 .Pagination .Button {
-    padding-left: var(--spacing);
-    padding-right: var(--spacing);
+  padding-left: var(--spacing);
+  padding-right: var(--spacing);
 }
 
 .Pagination-buttonWrapper {
-    display: flex;
-    flex-direction: row;
+  display: flex;
+  flex-direction: row;
 }
 
 .Pagination-pageIndex {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-left: var(--spacing-l);
-    padding-right: var(--spacing-l);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: var(--spacing-l);
+  padding-right: var(--spacing-l);
 }
 
-.Pagination-MetricInput{
-    width: var(--spacing-4);
-    margin-right: var(--spacing);
-    padding-left: var(--spacing-m);
-    padding-right: var(--spacing-m);
+.Pagination-MetricInput {
+  width: var(--spacing-4);
+  margin-right: var(--spacing);
+  padding-left: var(--spacing-m);
+  padding-right: var(--spacing-m);
 }
 
 .Pagination-MetricInput .MetricInput-input {
-    text-align: center;
+  text-align: center;
 }
-.Pagination-MetricInput .MetricInput-arrowIcons{
-    display: none;
+.Pagination-MetricInput .MetricInput-arrowIcons {
+  display: none;
 }
 
 @media (max-width: 575px) {
-    .Pagination-pageIndex {
-        order: -1;
-        flex-basis: 100%;
-    }
-    .Pagination-buttonWrapper {
-        margin-top: var(--spacing);
-        width: 50%;
-    }
-    .Pagination-buttonWrapper--next {
-        justify-content: flex-start;
-    }
-    .Pagination-buttonWrapper--previous {
-        justify-content: flex-end;
-    }
-}
+  .Pagination-pageIndex {
+    order: -1;
+    flex-basis: 100%;
+  }
+  .Pagination-buttonWrapper {
+    margin-top: var(--spacing);
+    width: 50%;
+  }
+  .Pagination-buttonWrapper--next {
+    justify-content: flex-start;
+  }
+  .Pagination-buttonWrapper--previous {
+    justify-content: flex-end;
+  }
+}

package/css/src/components/pills.css

@@ -1,20 +1,20 @@
 .Pills {
-	/* 160px */
-	max-width: calc(var(--spacing-2) * 10);
-	/* truncate */
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	font-size: var(--font-size-s);
-	line-height: var(--font-height-s);
-    text-transform: uppercase;
-    padding-right: 6px;
-    padding-left: 6px;
-	padding-top: var(--spacing-s);
-	padding-bottom: var(--spacing-s);
-	border-radius: 20px;
-	display: inline-block;
-	box-sizing: border-box;
-	font-weight: var(--font-weight-bold);
-	cursor: default;
-}
+  /* 160px */
+  max-width: calc(var(--spacing-2) * 10);
+  /* truncate */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--font-size-s);
+  line-height: var(--font-height-s);
+  text-transform: uppercase;
+  padding-right: 6px;
+  padding-left: 6px;
+  padding-top: var(--spacing-s);
+  padding-bottom: var(--spacing-s);
+  border-radius: 20px;
+  display: inline-block;
+  box-sizing: border-box;
+  font-weight: var(--font-weight-bold);
+  cursor: default;
+}