@fattureincloud/fic-design-system 0.11.1 → 0.11.2

package/dist/index.css

@@ -1,128 +1,154 @@
-.DS-ReactTable {
-  position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  overflow: hidden;
+:root {
+    --columns-breakpoint-width: 100px; /* default value */
+    --table-breakpoint: px100; /* relates to TableBreakpoints enum */
 }
 
-.DS-ReactTable .DS-rt-table {
-  -webkit-box-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  width: 100%;
-  border-collapse: collapse;
-  overflow-x: auto;
-  overflow-y: hidden;
+.Table-container {
+    container-type: inline-size;
+    container-name: var(--table-breakpoint);
 }
 
-.DS-ReactTable .DS-rt-thead {
-  -webkit-box-flex: 1;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  cursor: default;
-}
+/* width breakpoints corresponds to TableBreakpoints enum */
+@container px100 (width < 100px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 
-.DS-ReactTable .DS-rt-thead .DS-rt-th {
-  position: relative;
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
-.DS-ReactTable .DS-rt-thead .DS-rt-td {
-  line-height: normal;
-  position: relative;
+
+@container px200 (width < 200px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
 
-.DS-ReactTable .DS-rt-thead .DS-rt-resizable-header:last-child {
-  overflow: hidden;
+@container px300 (width < 300px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
-.DS-ReactTable .DS-rt-thead .DS-rt-resizable-header-content {
-  overflow: hidden;
-  text-overflow: ellipsis;
+
+@container px400 (width < 400px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
 
-.DS-ReactTable .DS-rt-thead.DS-header .DS-rt-th:after {
-  content: "";
-  display: block;
-  position: absolute;
+@container px500 (width < 500px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
 
-.DS-ReactTable .DS-rt-tbody {
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
+@container px600 (width < 600px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
 
-.DS-ReactTable .DS-rt-tbody .DS-rt-tr-group {
-  flex: none;
+@container px700 (width < 700px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
 
-.DS-ReactTable .DS-rt-tr-group {
-  -webkit-box-flex: 1;
-  -ms-flex: 1 0 auto;
-  flex: 1 0 auto;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  cursor: pointer;
+@container px800 (width < 800px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
 
-.DS-ReactTable .DS-rt-tr {
-  flex: 1 0 auto;
-  display: inline-flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-content: center;
-  justify-content: center;
-  align-items: center;
+@container px900 (width < 900px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
 
-.DS-ReactTable .DS-rt-th {
-  -webkit-box-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  white-space: nowrap;
-  vertical-align: middle;
-  align-self: center;
-  overflow: hidden;
+@container px1000 (width < 1000px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
 
-.DS-ReactTable .DS-rt-td {
-  -webkit-box-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  align-self: center;
-  overflow: hidden;
+@container px1100 (width < 1100px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
 }
+
+@container px1200 (width < 1200px) {
+    .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+
+    .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
+        min-width: var(--columns-breakpoint-width);
+        max-width: var(--columns-breakpoint-width);
+    }
+}