npm - @inera/ids-design - Versions diffs - 8.2.1 → 9.0.0 - Mend

@inera/ids-design 8.2.1 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (385) hide show

package/components/grid/column/column.css CHANGED Viewed

@@ -1,4 +1,4 @@
-@media (max-width: 1023px) {
+@media (max-width: 639px) {
   .ids-desktop {
     display: none !important;
   }
@@ -10,422 +10,421 @@
   }
 }
-.ids-col,
-:host(.ids-col) {
+.ids-col {
   display: block;
   flex-basis: 0;
   flex-grow: 1;
   max-width: 100%;
 }
-.ids-col.ids-col--auto,
-:host(.ids-col.ids-col--auto) {
+.ids-col.ids-col--auto {
   flex: 0 0 auto;
   width: auto;
 }
-.ids-col.ids-col--1,
-:host(.ids-col.ids-col--1) {
+.ids-col.ids-col--1 {
   flex: 0 0 8.3%;
   max-width: 8.3%;
 }
-.ids-col.ids-col--2,
-:host(.ids-col.ids-col--2) {
+.ids-col.ids-col--2 {
   flex: 0 0 16%;
   max-width: 16%;
 }
-.ids-col.ids-col--3,
-:host(.ids-col.ids-col--3) {
+.ids-col.ids-col--3 {
   flex: 0 0 25%;
   max-width: 25%;
 }
-.ids-col.ids-col--4,
-:host(.ids-col.ids-col--4) {
+.ids-col.ids-col--4 {
   flex: 0 0 33.3%;
   max-width: 33.3%;
+  grid-column: span 4;
 }
-.ids-col.ids-col--5,
-:host(.ids-col.ids-col--5) {
+.ids-col.ids-col--5 {
   flex: 0 0 41.6%;
   max-width: 41.6%;
+  grid-column: span 5;
 }
-.ids-col.ids-col--6,
-:host(.ids-col.ids-col--6) {
+.ids-col.ids-col--6 {
   flex: 0 0 50%;
   max-width: 50%;
 }
-.ids-col.ids-col--7,
-:host(.ids-col.ids-col--7) {
+.ids-col.ids-col--7 {
   flex: 0 0 58%;
   max-width: 58.3%;
 }
-.ids-col.ids-col--8,
-:host(.ids-col.ids-col--8) {
+.ids-col.ids-col--8 {
   flex: 0 0 66.6%;
   max-width: 66.6%;
 }
-.ids-col.ids-col--9,
-:host(.ids-col.ids-col--9) {
+.ids-col.ids-col--9 {
   flex: 0 0 75%;
   max-width: 75%;
+  grid-column: span 9;
 }
-.ids-col.ids-col--10,
-:host(.ids-col.ids-col--10) {
+.ids-col.ids-col--10 {
   flex: 0 0 83.3%;
   max-width: 83.3%;
+  grid-column: span 10;
 }
-.ids-col.ids-col--11,
-:host(.ids-col.ids-col--11) {
+.ids-col.ids-col--11 {
   flex: 0 0 91.6%;
   max-width: 91.6%;
+  grid-column: span 11;
 }
-.ids-col.ids-col--12,
-:host(.ids-col.ids-col--12) {
+.ids-col.ids-col--12 {
   flex: 0 0 100%;
   max-width: 100%;
+  grid-column: span 12;
 }
-.ids-col.ids-col--offset-none,
-:host(.ids-col.ids-col--offset-none) {
+.ids-col.ids-col--offset-none {
   margin-left: 0%;
 }
-.ids-col.ids-col--offset-1,
-:host(.ids-col.ids-col--offset-1) {
+.ids-col.ids-col--offset-1 {
   margin-left: 8.3%;
 }
-.ids-col.ids-col--offset-2,
-:host(.ids-col.ids-col--offset-2) {
+.ids-col.ids-col--offset-2 {
   margin-left: 16%;
 }
-.ids-col.ids-col--offset-3,
-:host(.ids-col.ids-col--offset-3) {
+.ids-col.ids-col--offset-3 {
   margin-left: 25%;
 }
-.ids-col.ids-col--offset-4,
-:host(.ids-col.ids-col--offset-4) {
+.ids-col.ids-col--offset-4 {
   margin-left: 33.3%;
 }
-.ids-col.ids-col--offset-5,
-:host(.ids-col.ids-col--offset-5) {
+.ids-col.ids-col--offset-5 {
   margin-left: 41.6%;
 }
-.ids-col.ids-col--offset-6,
-:host(.ids-col.ids-col--offset-6) {
+.ids-col.ids-col--offset-6 {
   margin-left: 50%;
 }
-.ids-col.ids-col--offset-7,
-:host(.ids-col.ids-col--offset-7) {
+.ids-col.ids-col--offset-7 {
   margin-left: 58.3%;
 }
-.ids-col.ids-col--offset-8,
-:host(.ids-col.ids-col--offset-8) {
+.ids-col.ids-col--offset-8 {
   margin-left: 66.6%;
 }
-.ids-col.ids-col--offset-9,
-:host(.ids-col.ids-col--offset-9) {
+.ids-col.ids-col--offset-9 {
   margin-left: 75%;
 }
-.ids-col.ids-col--offset-10,
-:host(.ids-col.ids-col--offset-10) {
+.ids-col.ids-col--offset-10 {
   margin-left: 83.3%;
 }
-.ids-col.ids-col--offset-11,
-:host(.ids-col.ids-col--offset-11) {
+.ids-col.ids-col--offset-11 {
   margin-left: 91.6%;
 }
-.ids-col.ids-col--offset-12,
-:host(.ids-col.ids-col--offset-12) {
+.ids-col.ids-col--offset-12 {
   margin-left: 100%;
 }
-.ids-col.ids-col--align-start,
-:host(.ids-col.ids-col--align-start) {
+.ids-col.ids-col--align-start {
   align-self: start;
 }
-.ids-col.ids-col--align-center,
-:host(.ids-col.ids-col--align-center) {
+.ids-col.ids-col--align-center {
   align-self: center;
 }
-.ids-col.ids-col--align-end,
-:host(.ids-col.ids-col--align-end) {
+.ids-col.ids-col--align-end {
   align-self: end;
 }
-.ids-col.ids-col--align-auto,
-:host(.ids-col.ids-col--align-auto) {
+.ids-col.ids-col--align-auto {
   align-self: auto;
 }
-.ids-col.ids-col--align-baseline,
-:host(.ids-col.ids-col--align-baseline) {
+.ids-col.ids-col--align-baseline {
   align-self: baseline;
 }
-.ids-col.ids-col--align-stretch,
-:host(.ids-col.ids-col--align-stretch) {
+.ids-col.ids-col--align-stretch {
   align-self: stretch;
 }
+.ids-col.ids-col--grid {
+  max-width: none !important;
+}
+.ids-col.ids-col--grid.ids-col--1 {
+  grid-column: span 1;
+}
+.ids-col.ids-col--grid.ids-col--2 {
+  grid-column: span 2;
+}
+.ids-col.ids-col--grid.ids-col--3 {
+  grid-column: span 3;
+}
+.ids-col.ids-col--grid.ids-col--4 {
+  grid-column: span 4;
+}
+.ids-col.ids-col--grid.ids-col--5 {
+  grid-column: span 5;
+}
+.ids-col.ids-col--grid.ids-col--6 {
+  grid-column: span 6;
+}
+.ids-col.ids-col--grid.ids-col--7 {
+  grid-column: span 7;
+}
+.ids-col.ids-col--grid.ids-col--8 {
+  grid-column: span 8;
+}
+.ids-col.ids-col--grid.ids-col--9 {
+  grid-column: span 9;
+}
+.ids-col.ids-col--grid.ids-col--10 {
+  grid-column: span 10;
+}
+.ids-col.ids-col--grid.ids-col--11 {
+  grid-column: span 11;
+}
+.ids-col.ids-col--grid.ids-col--12 {
+  grid-column: span 12;
+}
 @media only screen and (max-width: 1024px) {
-  .ids-col.ids-col--m-auto,
-  :host(.ids-col.ids-col--m-auto) {
+  .ids-col.ids-col--m-auto {
     flex: 0 0 auto;
     width: auto;
   }
-  .ids-col.ids-col--m-1,
-  :host(.ids-col.ids-col--m-1) {
+  .ids-col.ids-col--m-1 {
     flex: 0 0 8.3%;
     max-width: 8.3%;
   }
-  .ids-col.ids-col--m-2,
-  :host(.ids-col.ids-col--m-2) {
+  .ids-col.ids-col--m-2 {
     flex: 0 0 16%;
     max-width: 16%;
   }
-  .ids-col.ids-col--m-3,
-  :host(.ids-col.ids-col--m-3) {
+  .ids-col.ids-col--m-3 {
     flex: 0 0 25%;
     max-width: 25%;
   }
-  .ids-col.ids-col--m-4,
-  :host(.ids-col.ids-col--m-4) {
+  .ids-col.ids-col--m-4 {
     flex: 0 0 33.3%;
     max-width: 33.3%;
   }
-  .ids-col.ids-col--m-5,
-  :host(.ids-col.ids-col--m-5) {
+  .ids-col.ids-col--m-5 {
     flex: 0 0 41.6%;
     max-width: 41.6%;
   }
-  .ids-col.ids-col--m-6,
-  :host(.ids-col.ids-col--m-6) {
+  .ids-col.ids-col--m-6 {
     flex: 0 0 50%;
     max-width: 50%;
   }
-  .ids-col.ids-col--m-7,
-  :host(.ids-col.ids-col--m-7) {
+  .ids-col.ids-col--m-7 {
     flex: 0 0 58%;
     max-width: 58.3%;
   }
-  .ids-col.ids-col--m-8,
-  :host(.ids-col.ids-col--m-8) {
+  .ids-col.ids-col--m-8 {
     flex: 0 0 66.6%;
     max-width: 66.6%;
   }
-  .ids-col.ids-col--m-9,
-  :host(.ids-col.ids-col--m-9) {
+  .ids-col.ids-col--m-9 {
     flex: 0 0 75%;
     max-width: 75%;
   }
-  .ids-col.ids-col--m-10,
-  :host(.ids-col.ids-col--m-10) {
+  .ids-col.ids-col--m-10 {
     flex: 0 0 83.3%;
     max-width: 83.3%;
   }
-  .ids-col.ids-col--m-11,
-  :host(.ids-col.ids-col--m-11) {
+  .ids-col.ids-col--m-11 {
     flex: 0 0 91.6%;
     max-width: 91.6%;
   }
-  .ids-col.ids-col--m-12,
-  :host(.ids-col.ids-col--m-12) {
+  .ids-col.ids-col--m-12 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .ids-col.ids-col--m-offset-none,
-  :host(.ids-col.ids-col--m-offset-none) {
+  .ids-col.ids-col--m-offset-none {
     margin-left: 0%;
   }
-  .ids-col.ids-col--m-offset-1,
-  :host(.ids-col.ids-col--m-offset-1) {
+  .ids-col.ids-col--m-offset-1 {
     margin-left: 8.3%;
   }
-  .ids-col.ids-col--m-offset-2,
-  :host(.ids-col.ids-col--m-offset-2) {
+  .ids-col.ids-col--m-offset-2 {
     margin-left: 16%;
   }
-  .ids-col.ids-col--m-offset-3,
-  :host(.ids-col.ids-col--m-offset-3) {
+  .ids-col.ids-col--m-offset-3 {
     margin-left: 25%;
   }
-  .ids-col.ids-col--m-offset-4,
-  :host(.ids-col.ids-col--m-offset-4) {
+  .ids-col.ids-col--m-offset-4 {
     margin-left: 33.3%;
   }
-  .ids-col.ids-col--m-offset-5,
-  :host(.ids-col.ids-col--m-offset-5) {
+  .ids-col.ids-col--m-offset-5 {
     margin-left: 41.6%;
   }
-  .ids-col.ids-col--m-offset-6,
-  :host(.ids-col.ids-col--m-offset-6) {
+  .ids-col.ids-col--m-offset-6 {
     margin-left: 50%;
   }
-  .ids-col.ids-col--m-offset-7,
-  :host(.ids-col.ids-col--m-offset-7) {
+  .ids-col.ids-col--m-offset-7 {
     margin-left: 58.3%;
   }
-  .ids-col.ids-col--m-offset-8,
-  :host(.ids-col.ids-col--m-offset-8) {
+  .ids-col.ids-col--m-offset-8 {
     margin-left: 66.6%;
   }
-  .ids-col.ids-col--m-offset-9,
-  :host(.ids-col.ids-col--m-offset-9) {
+  .ids-col.ids-col--m-offset-9 {
     margin-left: 75%;
   }
-  .ids-col.ids-col--m-offset-10,
-  :host(.ids-col.ids-col--m-offset-10) {
+  .ids-col.ids-col--m-offset-10 {
     margin-left: 83.3%;
   }
-  .ids-col.ids-col--m-offset-11,
-  :host(.ids-col.ids-col--m-offset-11) {
+  .ids-col.ids-col--m-offset-11 {
     margin-left: 91.6%;
   }
-  .ids-col.ids-col--m-offset-12,
-  :host(.ids-col.ids-col--m-offset-12) {
+  .ids-col.ids-col--m-offset-12 {
     margin-left: 100%;
   }
+  .ids-col.ids-col--grid.ids-col--m-1 {
+    grid-column: span 1;
+  }
+  .ids-col.ids-col--grid.ids-col--m-2 {
+    grid-column: span 2;
+  }
+  .ids-col.ids-col--grid.ids-col--m-3 {
+    grid-column: span 3;
+  }
+  .ids-col.ids-col--grid.ids-col--m-4 {
+    grid-column: span 4;
+  }
+  .ids-col.ids-col--grid.ids-col--m-5 {
+    grid-column: span 5;
+  }
+  .ids-col.ids-col--grid.ids-col--m-6 {
+    grid-column: span 6;
+  }
+  .ids-col.ids-col--grid.ids-col--m-7 {
+    grid-column: span 7;
+  }
+  .ids-col.ids-col--grid.ids-col--m-8 {
+    grid-column: span 8;
+  }
+  .ids-col.ids-col--grid.ids-col--m-9 {
+    grid-column: span 9;
+  }
+  .ids-col.ids-col--grid.ids-col--m-10 {
+    grid-column: span 10;
+  }
+  .ids-col.ids-col--grid.ids-col--m-11 {
+    grid-column: span 11;
+  }
+  .ids-col.ids-col--grid.ids-col--m-12 {
+    grid-column: span 12;
+  }
 }
 @media only screen and (max-width: 640px) {
-  .ids-col.ids-col--s-auto,
-  :host(.ids-col.ids-col--s-auto) {
+  .ids-col.ids-col--s-auto {
     flex: 0 0 auto;
     width: auto;
   }
-  .ids-col.ids-col--s-1,
-  :host(.ids-col.ids-col--s-1) {
+  .ids-col.ids-col--s-1 {
     flex: 0 0 8.3%;
     max-width: 8.3%;
   }
-  .ids-col.ids-col--s-2,
-  :host(.ids-col.ids-col--s-2) {
+  .ids-col.ids-col--s-2 {
     flex: 0 0 16%;
     max-width: 16%;
   }
-  .ids-col.ids-col--s-3,
-  :host(.ids-col.ids-col--s-3) {
+  .ids-col.ids-col--s-3 {
     flex: 0 0 25%;
     max-width: 25%;
   }
-  .ids-col.ids-col--s-4,
-  :host(.ids-col.ids-col--s-4) {
+  .ids-col.ids-col--s-4 {
     flex: 0 0 33.3%;
     max-width: 33.3%;
   }
-  .ids-col.ids-col--s-5,
-  :host(.ids-col.ids-col--s-5) {
+  .ids-col.ids-col--s-5 {
     flex: 0 0 41.6%;
     max-width: 41.6%;
   }
-  .ids-col.ids-col--s-6,
-  :host(.ids-col.ids-col--s-6) {
+  .ids-col.ids-col--s-6 {
     flex: 0 0 50%;
     max-width: 50%;
   }
-  .ids-col.ids-col--s-7,
-  :host(.ids-col.ids-col--s-7) {
+  .ids-col.ids-col--s-7 {
     flex: 0 0 58%;
     max-width: 58.3%;
   }
-  .ids-col.ids-col--s-8,
-  :host(.ids-col.ids-col--s-8) {
+  .ids-col.ids-col--s-8 {
     flex: 0 0 66.6%;
     max-width: 66.6%;
   }
-  .ids-col.ids-col--s-9,
-  :host(.ids-col.ids-col--s-9) {
+  .ids-col.ids-col--s-9 {
     flex: 0 0 75%;
     max-width: 75%;
   }
-  .ids-col.ids-col--s-10,
-  :host(.ids-col.ids-col--s-10) {
+  .ids-col.ids-col--s-10 {
     flex: 0 0 83.3%;
     max-width: 83.3%;
   }
-  .ids-col.ids-col--s-11,
-  :host(.ids-col.ids-col--s-11) {
+  .ids-col.ids-col--s-11 {
     flex: 0 0 91.6%;
     max-width: 91.6%;
   }
-  .ids-col.ids-col--s-12,
-  :host(.ids-col.ids-col--s-12) {
+  .ids-col.ids-col--s-12 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .ids-col.ids-col--s-offset-none,
-  :host(.ids-col.ids-col--s-offset-none) {
+  .ids-col.ids-col--s-offset-none {
     margin-left: 0%;
   }
-  .ids-col.ids-col--s-offset-1,
-  :host(.ids-col.ids-col--s-offset-1) {
+  .ids-col.ids-col--s-offset-1 {
     margin-left: 8.3%;
   }
-  .ids-col.ids-col--s-offset-2,
-  :host(.ids-col.ids-col--s-offset-3) {
+  .ids-col.ids-col--s-offset-2 {
     margin-left: 16%;
   }
-  .ids-col.ids-col--s-offset-3,
-  :host(.ids-col.ids-col--s-offset-3) {
+  .ids-col.ids-col--s-offset-3 {
     margin-left: 25%;
   }
-  .ids-col.ids-col--s-offset-4,
-  :host(.ids-col.ids-col--s-offset-4) {
+  .ids-col.ids-col--s-offset-4 {
     margin-left: 33.3%;
   }
-  .ids-col.ids-col--s-offset-5,
-  :host(.ids-col.ids-col--s-offset-5) {
+  .ids-col.ids-col--s-offset-5 {
     margin-left: 41.6%;
   }
-  .ids-col.ids-col--s-offset-6,
-  :host(.ids-col.ids-col--s-offset-6) {
+  .ids-col.ids-col--s-offset-6 {
     margin-left: 50%;
   }
-  .ids-col.ids-col--s-offset-7,
-  :host(.ids-col.ids-col--s-offset-7) {
+  .ids-col.ids-col--s-offset-7 {
     margin-left: 58.3%;
   }
-  .ids-col.ids-col--s-offset-8,
-  :host(.ids-col.ids-col--s-offset-8) {
+  .ids-col.ids-col--s-offset-8 {
     margin-left: 66.6%;
   }
-  .ids-col.ids-col--s-offset-9,
-  :host(.ids-col.ids-col--s-offset-9) {
+  .ids-col.ids-col--s-offset-9 {
     margin-left: 75%;
   }
-  .ids-col.ids-col--s-offset-10,
-  :host(.ids-col.ids-col--s-offset-10) {
+  .ids-col.ids-col--s-offset-10 {
     margin-left: 83.3%;
   }
-  .ids-col.ids-col--s-offset-11,
-  :host(.ids-col.ids-col--s-offset-11) {
+  .ids-col.ids-col--s-offset-11 {
     margin-left: 91.6%;
   }
-  .ids-col.ids-col--s-offset-12,
-  :host(.ids-col.ids-col--s-offset-12) {
+  .ids-col.ids-col--s-offset-12 {
     margin-left: 100%;
   }
+  .ids-col.ids-col--grid.ids-col--s-1 {
+    grid-column: span 1;
+  }
+  .ids-col.ids-col--grid.ids-col--s-2 {
+    grid-column: span 2;
+  }
+  .ids-col.ids-col--grid.ids-col--s-3 {
+    grid-column: span 3;
+  }
+  .ids-col.ids-col--grid.ids-col--s-4 {
+    grid-column: span 4;
+  }
+  .ids-col.ids-col--grid.ids-col--s-5 {
+    grid-column: span 5;
+  }
+  .ids-col.ids-col--grid.ids-col--s-6 {
+    grid-column: span 6;
+  }
+  .ids-col.ids-col--grid.ids-col--s-7 {
+    grid-column: span 7;
+  }
+  .ids-col.ids-col--grid.ids-col--s-8 {
+    grid-column: span 8;
+  }
+  .ids-col.ids-col--grid.ids-col--s-9 {
+    grid-column: span 9;
+  }
+  .ids-col.ids-col--grid.ids-col--s-10 {
+    grid-column: span 10;
+  }
+  .ids-col.ids-col--grid.ids-col--s-11 {
+    grid-column: span 11;
+  }
+  .ids-col.ids-col--grid.ids-col--s-12 {
+    grid-column: span 12;
+  }
 }

package/components/grid/container/container-lit.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
-var css_248z = ".ids-container,:host(.ids-container){display:grid;margin:0 auto;max-width:var(--IDS__CONTAINER-MAX-WIDTH);padding:var(--IDS__CONTAINER-PADDING)}.ids-container.ids-container--gutterless,:host(.ids-container.ids-container--gutterless){padding-left:0!important;padding-right:0!important}";
+var css_248z = ".ids-container{display:grid;margin:0 auto;max-width:var(--IDS__CONTAINER-MAX-WIDTH);padding:var(--IDS__CONTAINER-PADDING)}.ids-container.ids-container--gutterless{padding-left:0!important;padding-right:0!important}";
 var containerLit = css`${unsafeCSS(css_248z)}`;

package/components/grid/container/container.css CHANGED Viewed

@@ -1,13 +1,10 @@
-.ids-container,
-:host(.ids-container) {
+.ids-container {
   max-width: var(--IDS__CONTAINER-MAX-WIDTH);
   padding: var(--IDS__CONTAINER-PADDING);
   display: grid;
   margin: 0 auto;
 }
-.ids-container.ids-container--gutterless,
-:host(.ids-container.ids-container--gutterless) {
+.ids-container.ids-container--gutterless {
   padding-left: 0 !important;
   padding-right: 0 !important;
 }

package/components/grid/row/row-lit.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
-var css_248z = ".ids-row,:host(.ids-row){box-sizing:border-box;display:flex;flex:1 1 auto;flex-wrap:wrap}.ids-row.ids-row--align-start,:host(.ids-row--align-start){align-items:start}.ids-row.ids-row--align-center,:host(.ids-row--align-center){align-items:center}.ids-row.ids-row--align-end,:host(.ids-row--align-end){align-items:end}.ids-row.ids-row--align-baseline,:host(.ids-row--align-baseline){align-items:baseline}.ids-row.ids-row--align-stretch,:host(.ids-row--align-stretch){align-items:stretch}.ids-row.ids-row--justify-start,:host(.ids-row--justify-start){justify-content:flex-start}.ids-row.ids-row--justify-center,:host(.ids-row--justify-center){justify-content:center}.ids-row.ids-row--justify-end,:host(.ids-row--justify-end){justify-content:end}.ids-row.ids-row--justify-space-between,:host(.ids-row--justify-space-between){justify-content:space-between}.ids-row.ids-row--justify-space-around,:host(.ids-row--justify-space-around){justify-content:space-around}";
+var css_248z = ".ids-row{box-sizing:border-box;display:flex;flex:1 1 auto;flex-wrap:wrap}.ids-row.ids-row--align-start{align-items:start}.ids-row.ids-row--align-center{align-items:center}.ids-row.ids-row--align-end{align-items:end}.ids-row.ids-row--align-baseline{align-items:baseline}.ids-row.ids-row--align-stretch{align-items:stretch}.ids-row.ids-row--justify-start{justify-content:flex-start}.ids-row.ids-row--justify-center{justify-content:center}.ids-row.ids-row--justify-end{justify-content:end}.ids-row.ids-row--justify-space-between{justify-content:space-between}.ids-row.ids-row--justify-space-around{justify-content:space-around}";
 var rowLit = css`${unsafeCSS(css_248z)}`;