@innovaccer/design-system 3.5.0 → 4.0.0-2

package/css/src/components/caption.module.css

@@ -0,0 +1,20 @@
+/* Caption */
+.Caption {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.Caption--withInput {
+  margin-top: var(--spacing-m);
+}
+
+.Caption-icon {
+  display: flex;
+  align-content: center;
+  margin-right: var(--spacing-m);
+}
+
+.Caption--hidden {
+  display: none;
+}

package/css/src/components/column.module.css

@@ -0,0 +1,360 @@
+.Row {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1 100%;
+}
+
+.Col {
+  position: relative;
+  box-sizing: border-box;
+  flex: 1 0 0%;
+}
+
+.Col--auto {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+.Col--1 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 1);
+}
+
+.Col--2 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 2);
+}
+
+.Col--3 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 3);
+}
+
+.Col--4 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 4);
+}
+
+.Col--5 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 5);
+}
+
+.Col--6 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 6);
+}
+
+.Col--7 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 7);
+}
+
+.Col--8 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 8);
+}
+
+.Col--9 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 9);
+}
+
+.Col--10 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 10);
+}
+
+.Col--11 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 11);
+}
+
+.Col--12 {
+  flex: 0 0 auto;
+  width: calc(100% / var(--grid-columns) * 12);
+}
+
+/* if the viewport is between 0 to 575 pixels wide. */
+
+@media (max-width: 575px) {
+  .Col--xs-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .Col--xs-1 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 1);
+  }
+  .Col--xs-2 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 2);
+  }
+  .Col--xs-3 {
+    flex: 0 0 auto;
+  }
+  .Col--xs-4 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 4);
+  }
+  .Col--xs-5 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 5);
+  }
+  .Col--xs-6 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 6);
+  }
+  .Col--xs-7 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 7);
+  }
+  .Col--xs-8 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 8);
+  }
+  .Col--xs-9 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 9);
+  }
+  .Col--xs-10 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 10);
+  }
+  .Col--xs-11 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 11);
+  }
+  .Col--xs-12 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 12);
+  }
+}
+
+/* if the viewport is between 576 and 767 pixels wide. */
+
+@media (min-width: 576px) and (max-width: 767px) {
+  .Col--s-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .Col--s-1 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 1);
+  }
+  .Col--s-2 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 2);
+  }
+  .Col--s-3 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 3);
+  }
+  .Col--s-4 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 4);
+  }
+  .Col--s-5 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 5);
+  }
+  .Col--s-6 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 6);
+  }
+  .Col--s-7 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 7);
+  }
+  .Col--s-8 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 8);
+  }
+  .Col--s-9 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 9);
+  }
+  .Col--s-10 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 10);
+  }
+  .Col--s-11 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 11);
+  }
+  .Col--s-12 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 12);
+  }
+}
+
+/* if the viewport is between 768 and 991 pixels wide. */
+
+@media (min-width: 768px) and (max-width: 991px) {
+  .Col--m-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .Col--m-1 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 1);
+  }
+  .Col--m-2 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 2);
+  }
+  .Col--m-3 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 3);
+  }
+  .Col--m-4 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 4);
+  }
+  .Col--m-5 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 5);
+  }
+  .Col--m-6 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 6);
+  }
+  .Col--m-7 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 7);
+  }
+  .Col--m-8 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 8);
+  }
+  .Col--m-9 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 9);
+  }
+  .Col--m-10 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 10);
+  }
+  .Col--m-11 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 11);
+  }
+  .Col--m-12 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 12);
+  }
+}
+
+/* if the viewport is between 992 and 1199 pixels wide. */
+
+@media (min-width: 992px) and (max-width: 1199px) {
+  .Col--l-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .Col--l-1 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 1);
+  }
+  .Col--l-2 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 2);
+  }
+  .Col--l-3 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 3);
+  }
+  .Col--l-4 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 4);
+  }
+  .Col--l-5 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 5);
+  }
+  .Col--l-6 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 6);
+  }
+  .Col--l-7 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 7);
+  }
+  .Col--l-8 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 8);
+  }
+  .Col--l-9 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 9);
+  }
+  .Col--l-10 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 10);
+  }
+  .Col--l-11 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 11);
+  }
+  .Col--l-12 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 12);
+  }
+}
+
+/* if the viewport is 1200 pixels wide or wider. */
+
+@media (min-width: 1200px) {
+  .Col--xl-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .Col--xl-1 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 1);
+  }
+  .Col--xl-2 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 2);
+  }
+  .Col--xl-3 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 3);
+  }
+  .Col--xl-4 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 4);
+  }
+  .Col--xl-5 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 5);
+  }
+  .Col--xl-6 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 6);
+  }
+  .Col--xl-7 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 7);
+  }
+  .Col--xl-8 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 8);
+  }
+  .Col--xl-9 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 9);
+  }
+  .Col--xl-10 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 10);
+  }
+  .Col--xl-11 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 11);
+  }
+  .Col--xl-12 {
+    flex: 0 0 auto;
+    width: calc(100% / var(--grid-columns) * 12);
+  }
+}

package/css/src/components/heading.module.css

@@ -0,0 +1,50 @@
+/* Heading */
+.Heading {
+  margin: 0;
+}
+
+.Heading--s {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-m);
+  line-height: var(--font-height-m);
+}
+
+.Heading--m {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-l);
+  line-height: var(--font-height-l);
+}
+
+.Heading--l {
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size-xl);
+  line-height: var(--font-height-xl);
+}
+
+.Heading--xl {
+  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-xxl);
+  line-height: var(--font-height-xxl);
+}
+
+.Heading--xxl {
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size-xxxl);
+  line-height: var(--font-height-xxl);
+}
+
+.Heading--default {
+  color: var(--text);
+}
+
+.Heading--subtle {
+  color: var(--text-subtle);
+}
+
+.Heading--disabled {
+  color: var(--text-disabled);
+}
+
+.Heading--white {
+  color: var(--text-white);
+}

package/css/src/components/label.module.css

@@ -0,0 +1,37 @@
+/* Label */
+.Label {
+  display: inline-flex;
+}
+
+.Label--withInput {
+  margin-bottom: var(--spacing-m);
+}
+
+.Label--optional {
+  align-items: center;
+}
+
+.Label-text {
+  line-height: var(--font-height-s);
+  font-weight: var(--font-weight-medium);
+  word-break: break-all;
+}
+
+.Label-optionalText {
+  line-height: var(--font-height-s);
+  margin-left: var(--spacing-m);
+}
+
+.Label--disabled {
+  color: var(--text-disabled);
+}
+
+.Label-requiredIndicator {
+  height: var(--spacing-0-75);
+  width: var(--spacing-0-75);
+  border-radius: 50%;
+  background: var(--alert);
+  margin-left: var(--spacing-m);
+  margin-bottom: var(--spacing-0-75);
+  display: inline-flex;
+}

package/css/src/components/subheading.module.css

@@ -0,0 +1,25 @@
+/* Subheading */
+.Subheading {
+  margin: 0;
+  font-weight: var(--font-weight-bolder);
+  font-size: var(--spacing-l);
+  line-height: var(--font-height-m);
+  letter-spacing: var(--letter-spacing);
+  text-transform: uppercase;
+}
+
+.Subheading--default {
+  color: var(--text);
+}
+
+.Subheading--subtle {
+  color: var(--text-subtle);
+}
+
+.Subheading--disabled {
+  color: var(--text-disabled);
+}
+
+.Subheading--white {
+  color: var(--text-white);
+}

package/css/src/components/text.module.css

@@ -0,0 +1,56 @@
+/* Text */
+.Text {
+  margin: 0;
+  line-height: var(--font-height);
+}
+
+.Text--small {
+  font-size: var(--font-size-s);
+  line-height: var(--font-height-normal);
+}
+
+.Text--regular {
+  font-size: var(--font-size);
+  line-height: var(--font-height);
+}
+
+.Text--large {
+  font-size: var(--font-size-m);
+  line-height: var(--font-height-m);
+}
+
+.Text--default {
+  color: var(--text);
+}
+
+.Text--subtle {
+  color: var(--text-subtle);
+}
+
+.Text--disabled {
+  color: var(--text-disabled);
+}
+
+.Text--destructive {
+  color: var(--text-destructive);
+}
+
+.Text--white {
+  color: var(--text-white);
+}
+
+.Text--success {
+  color: var(--text-success);
+}
+
+.Text--link {
+  color: var(--text-link);
+}
+
+.Text--medium {
+  font-weight: var(--font-weight-medium);
+}
+
+.Text--strong {
+  font-weight: var(--font-weight-bold);
+}