@innovaccer/design-system 4.17.0 → 4.18.0

package/css/src/components/avatarGroup.module.css

@@ -31,6 +31,8 @@
 .AvatarCount-wrapper {
   border-radius: var(--border-radius-full);
   position: relative;
+  display: flex;
+  align-items: center;
 }
 
 .AvatarCount-wrapper:focus,

package/css/src/components/flex.module.css

@@ -0,0 +1,117 @@
+/* Flex component */
+.Flex {
+  display: flex;
+}
+
+/* Direction variants */
+.Flex--row {
+  flex-direction: row;
+}
+
+.Flex--column {
+  flex-direction: column;
+}
+
+.Flex--rowReverse {
+  flex-direction: row-reverse;
+}
+
+.Flex--columnReverse {
+  flex-direction: column-reverse;
+}
+
+/* Justify content variants */
+.Flex--justifyStart {
+  justify-content: flex-start;
+}
+
+.Flex--justifyEnd {
+  justify-content: flex-end;
+}
+
+.Flex--justifyCenter {
+  justify-content: center;
+}
+
+.Flex--justifyBetween {
+  justify-content: space-between;
+}
+
+.Flex--justifyAround {
+  justify-content: space-around;
+}
+
+.Flex--justifyEvenly {
+  justify-content: space-evenly;
+}
+
+/* Align items variants */
+.Flex--alignStart {
+  align-items: flex-start;
+}
+
+.Flex--alignEnd {
+  align-items: flex-end;
+}
+
+.Flex--alignCenter {
+  align-items: center;
+}
+
+.Flex--alignBaseline {
+  align-items: baseline;
+}
+
+.Flex--alignStretch {
+  align-items: stretch;
+}
+
+/* Wrap variants */
+.Flex--wrap {
+  flex-wrap: wrap;
+}
+
+.Flex--nowrap {
+  flex-wrap: nowrap;
+}
+
+.Flex--wrapReverse {
+  flex-wrap: wrap-reverse;
+}
+
+/* Gap variants */
+.Flex--gap0 {
+  gap: 0;
+}
+
+.Flex--gap2 {
+  gap: var(--spacing-05);
+}
+
+.Flex--gap4 {
+  gap: var(--spacing-10);
+}
+
+.Flex--gap8 {
+  gap: var(--spacing-20);
+}
+
+.Flex--gap12 {
+  gap: var(--spacing-30);
+}
+
+.Flex--gap16 {
+  gap: var(--spacing-40);
+}
+
+.Flex--gap24 {
+  gap: var(--spacing-60);
+}
+
+.Flex--gap32 {
+  gap: var(--spacing-80);
+}
+
+.Flex--gap48 {
+  gap: var(--spacing-120);
+}

package/css/src/components/mdsGrid.module.css

@@ -0,0 +1,401 @@
+/* MdsGrid */
+.MdsGrid {
+  display: grid;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+/* Gap variations */
+.MdsGrid-gap--spacing-10 {
+  gap: var(--spacing-10);
+}
+
+.MdsGrid-gap--spacing-20 {
+  gap: var(--spacing-20);
+}
+
+.MdsGrid-gap--spacing-30 {
+  gap: var(--spacing-30);
+}
+
+.MdsGrid-gap--spacing-40 {
+  gap: var(--spacing-40);
+}
+
+.MdsGrid-gap--spacing-60 {
+  gap: var(--spacing-60);
+}
+
+.MdsGrid-gap--spacing-80 {
+  gap: var(--spacing-80);
+}
+
+.MdsGrid-gap--spacing-120 {
+  gap: var(--spacing-120);
+}
+
+.MdsGrid-gap--spacing-160 {
+  gap: var(--spacing-160);
+}
+
+/* Column gap variations */
+.MdsGrid-columnGap--spacing-10 {
+  column-gap: var(--spacing-10);
+}
+
+.MdsGrid-columnGap--spacing-20 {
+  column-gap: var(--spacing-20);
+}
+
+.MdsGrid-columnGap--spacing-30 {
+  column-gap: var(--spacing-30);
+}
+
+.MdsGrid-columnGap--spacing-40 {
+  column-gap: var(--spacing-40);
+}
+
+.MdsGrid-columnGap--spacing-60 {
+  column-gap: var(--spacing-60);
+}
+
+.MdsGrid-columnGap--spacing-80 {
+  column-gap: var(--spacing-80);
+}
+
+.MdsGrid-columnGap--spacing-120 {
+  column-gap: var(--spacing-120);
+}
+
+.MdsGrid-columnGap--spacing-160 {
+  column-gap: var(--spacing-160);
+}
+
+/* Row gap variations */
+.MdsGrid-rowGap--spacing-10 {
+  row-gap: var(--spacing-10);
+}
+
+.MdsGrid-rowGap--spacing-20 {
+  row-gap: var(--spacing-20);
+}
+
+.MdsGrid-rowGap--spacing-30 {
+  row-gap: var(--spacing-30);
+}
+
+.MdsGrid-rowGap--spacing-40 {
+  row-gap: var(--spacing-40);
+}
+
+.MdsGrid-rowGap--spacing-60 {
+  row-gap: var(--spacing-60);
+}
+
+.MdsGrid-rowGap--spacing-80 {
+  row-gap: var(--spacing-80);
+}
+
+.MdsGrid-rowGap--spacing-120 {
+  row-gap: var(--spacing-120);
+}
+
+.MdsGrid-rowGap--spacing-160 {
+  row-gap: var(--spacing-160);
+}
+
+/* Justify items variations */
+.MdsGrid-justifyItems--start {
+  justify-items: start;
+}
+
+.MdsGrid-justifyItems--end {
+  justify-items: end;
+}
+
+.MdsGrid-justifyItems--center {
+  justify-items: center;
+}
+
+.MdsGrid-justifyItems--stretch {
+  justify-items: stretch;
+}
+
+/* Align items variations */
+.MdsGrid-alignItems--start {
+  align-items: start;
+}
+
+.MdsGrid-alignItems--end {
+  align-items: end;
+}
+
+.MdsGrid-alignItems--center {
+  align-items: center;
+}
+
+.MdsGrid-alignItems--stretch {
+  align-items: stretch;
+}
+
+/* Auto flow variations */
+.MdsGrid-autoFlow--row {
+  grid-auto-flow: row;
+}
+
+.MdsGrid-autoFlow--column {
+  grid-auto-flow: column;
+}
+
+.MdsGrid-autoFlow--row\ dense {
+  grid-auto-flow: row dense;
+}
+
+.MdsGrid-autoFlow--column\ dense {
+  grid-auto-flow: column dense;
+}
+
+/* Template columns variations */
+.MdsGrid-templateColumns--repeat\(1\,\ 1fr\) {
+  grid-template-columns: repeat(1, 1fr);
+}
+
+.MdsGrid-templateColumns--repeat\(2\,\ 1fr\) {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.MdsGrid-templateColumns--repeat\(3\,\ 1fr\) {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.MdsGrid-templateColumns--repeat\(4\,\ 1fr\) {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.MdsGrid-templateColumns--repeat\(12\,\ 1fr\) {
+  grid-template-columns: repeat(12, 1fr);
+}
+
+.MdsGrid-templateColumns--1fr\ 1fr\ 1fr {
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.MdsGrid-templateColumns--1fr\ 2fr {
+  grid-template-columns: 1fr 2fr;
+}
+
+.MdsGrid-templateColumns--2fr\ 1fr {
+  grid-template-columns: 2fr 1fr;
+}
+
+.MdsGrid-templateColumns--2fr\ 1fr\ 1fr {
+  grid-template-columns: 2fr 1fr 1fr;
+}
+
+.MdsGrid-templateColumns--200px\ 1fr\ 2fr {
+  grid-template-columns: 200px 1fr 2fr;
+}
+
+/* Template rows variations */
+.MdsGrid-templateRows--auto\ auto\ auto {
+  grid-template-rows: auto auto auto;
+}
+
+.MdsGrid-templateRows--100px\ 200px {
+  grid-template-rows: 100px 200px;
+}
+
+.MdsGrid-templateRows--1fr\ 2fr {
+  grid-template-rows: 1fr 2fr;
+}
+
+.MdsGrid-templateRows--auto\ 1fr {
+  grid-template-rows: auto 1fr;
+}
+
+/* MdsGridItem */
+.MdsGridItem {
+  box-sizing: border-box;
+}
+
+/* Justify self variations */
+.MdsGridItem-justifySelf--start {
+  justify-self: start;
+}
+
+.MdsGridItem-justifySelf--end {
+  justify-self: end;
+}
+
+.MdsGridItem-justifySelf--center {
+  justify-self: center;
+}
+
+.MdsGridItem-justifySelf--stretch {
+  justify-self: stretch;
+}
+
+/* Align self variations */
+.MdsGridItem-alignSelf--start {
+  align-self: start;
+}
+
+.MdsGridItem-alignSelf--end {
+  align-self: end;
+}
+
+.MdsGridItem-alignSelf--center {
+  align-self: center;
+}
+
+.MdsGridItem-alignSelf--stretch {
+  align-self: stretch;
+}
+
+/* Column span variations */
+.MdsGridItem-columnSpan--1 {
+  grid-column: span 1;
+}
+
+.MdsGridItem-columnSpan--2 {
+  grid-column: span 2;
+}
+
+.MdsGridItem-columnSpan--3 {
+  grid-column: span 3;
+}
+
+.MdsGridItem-columnSpan--4 {
+  grid-column: span 4;
+}
+
+.MdsGridItem-columnSpan--5 {
+  grid-column: span 5;
+}
+
+.MdsGridItem-columnSpan--6 {
+  grid-column: span 6;
+}
+
+.MdsGridItem-columnSpan--7 {
+  grid-column: span 7;
+}
+
+.MdsGridItem-columnSpan--8 {
+  grid-column: span 8;
+}
+
+.MdsGridItem-columnSpan--9 {
+  grid-column: span 9;
+}
+
+.MdsGridItem-columnSpan--10 {
+  grid-column: span 10;
+}
+
+.MdsGridItem-columnSpan--11 {
+  grid-column: span 11;
+}
+
+.MdsGridItem-columnSpan--12 {
+  grid-column: span 12;
+}
+
+/* Row span variations */
+.MdsGridItem-rowSpan--1 {
+  grid-row: span 1;
+}
+
+.MdsGridItem-rowSpan--2 {
+  grid-row: span 2;
+}
+
+.MdsGridItem-rowSpan--3 {
+  grid-row: span 3;
+}
+
+.MdsGridItem-rowSpan--4 {
+  grid-row: span 4;
+}
+
+.MdsGridItem-rowSpan--5 {
+  grid-row: span 5;
+}
+
+.MdsGridItem-rowSpan--6 {
+  grid-row: span 6;
+}
+
+/* Column start variations */
+.MdsGridItem-columnStart--1 {
+  grid-column-start: 1;
+}
+
+.MdsGridItem-columnStart--2 {
+  grid-column-start: 2;
+}
+
+.MdsGridItem-columnStart--3 {
+  grid-column-start: 3;
+}
+
+.MdsGridItem-columnStart--4 {
+  grid-column-start: 4;
+}
+
+.MdsGridItem-columnStart--5 {
+  grid-column-start: 5;
+}
+
+.MdsGridItem-columnStart--6 {
+  grid-column-start: 6;
+}
+
+.MdsGridItem-columnStart--7 {
+  grid-column-start: 7;
+}
+
+.MdsGridItem-columnStart--8 {
+  grid-column-start: 8;
+}
+
+.MdsGridItem-columnStart--9 {
+  grid-column-start: 9;
+}
+
+.MdsGridItem-columnStart--10 {
+  grid-column-start: 10;
+}
+
+.MdsGridItem-columnStart--11 {
+  grid-column-start: 11;
+}
+
+.MdsGridItem-columnStart--12 {
+  grid-column-start: 12;
+}
+
+/* Row start variations */
+.MdsGridItem-rowStart--1 {
+  grid-row-start: 1;
+}
+
+.MdsGridItem-rowStart--2 {
+  grid-row-start: 2;
+}
+
+.MdsGridItem-rowStart--3 {
+  grid-row-start: 3;
+}
+
+.MdsGridItem-rowStart--4 {
+  grid-row-start: 4;
+}
+
+.MdsGridItem-rowStart--5 {
+  grid-row-start: 5;
+}
+
+.MdsGridItem-rowStart--6 {
+  grid-row-start: 6;
+}

package/css/src/components/table.module.css

@@ -9,8 +9,10 @@
 
 .Table-grid {
   height: 100%;
+  min-height: 0;
   overflow: hidden;
   z-index: 1;
+  flex: 1 1 auto;
 }
 
 .Table-pagination {