@colijnit/corecomponents_v12 260.1.9 → 260.1.10

package/lib/components/simple-grid/style/_layout.scss

@@ -10,9 +10,11 @@
 
     co-input-checkbox {
       justify-content: center;
+
       .checkbox {
         .checkmark {
           left: $cc-simple-grid-input-checkbox-check-mark-width * .15;
+
           &.show {
           }
         }
@@ -24,6 +26,38 @@
     table-layout: fixed;
     width: 100%;
     border-collapse: collapse;
+
+    colgroup {
+      col {
+        &:last-child.icons-col {
+          min-width: 30px;
+          max-width: 100%;
+
+          &.col-width-row-buttons {
+            width: 140px;
+            max-width: 140px;
+          }
+
+          &.col-width-delete {
+            width: 30px;
+            max-width: 30px;
+          }
+
+        }
+      }
+    }
+
+    td {
+      &:last-child.icons-container {
+        width: auto;
+        padding: 0;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 4px;
+      }
+    }
   }
   // styling outside of grid because of drag and drop functionality
   .simple-grid-column-auto-fit {
@@ -70,12 +104,15 @@
   }
   .co-simple-grid-cell {
     width: 100%;
+
     .co-icon {
       width: $cc-simple-grid-cell-icon-size;
       height: $cc-simple-grid-cell-icon-size;
     }
+
     .co-button {
       background-color: $cc-simple-grid-button-background-color;
+
       .co-icon {
         width: $cc-simple-grid-cell-icon-size;
         height: $cc-simple-grid-cell-icon-size;
@@ -85,6 +122,7 @@
   .simple-grid-column-cell-value {
     height: 100%;
     width: 100%;
+
     > * {
       height: 100%;
       width: 100%;
@@ -97,11 +135,13 @@
     border-width: $cc-simple-grid-cell-field-border-width;
     padding: $cc-simple-grid-cell-field-padding;
     border-radius: $cc-simple-grid-cell-field-radius;
+
     span {
       white-space: normal;
       text-overflow: ellipsis;
       overflow: hidden;
     }
+
     .form-input {
       width: 100%;
     }
@@ -116,9 +156,11 @@
     text-overflow: ellipsis;
     white-space: nowrap;
     border-bottom: 2px solid $cc-color-grid-row-hover-background;
+
     &.with-menu {
       cursor: pointer;
     }
+
     &.with-sort {
       cursor: pointer;
     }
@@ -134,6 +176,7 @@
     visibility: hidden;
     overflow: hidden;
     transition: opacity .3s ease-in-out;
+
     .co-button {
       width: 20px;
       height: 20px;
@@ -142,6 +185,7 @@
   }
   .simple-grid-column-header {
     position: relative;
+
     &:hover {
       .sort-column {
         opacity: 1;
@@ -168,10 +212,12 @@
     border-width: $cc-simple-grid-row-border-width;
     border-style: solid;
     border-color: $cc-simple-grid-row-border-color;
+
     &.disabled {
       opacity: $cc-simple-grid-row-disabled-opacity;
       background: $cc-simple-grid-row-disabled-background-color;
     }
+
     &.editing {
       .form-input {
         &:before, &:hover, &:hover:before, &.cc-input-focused, &.cc-input-focused:before {
@@ -214,6 +260,7 @@
     0 8px 10px 1px rgba(0, 0, 0, 0.14),
     0 3px 14px 2px rgba(0, 0, 0, 0.12);
     display: table;
+
     td {
       flex-grow: 2;
       font-size: 10px;
@@ -285,14 +332,6 @@
   }
 }
 
-.icons-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  gap: 4px;
-}
-
 .icon-item {
   &:hover {
     cursor: pointer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/corecomponents_v12",
-  "version": "260.1.9",
+  "version": "260.1.10",
   "description": "Colijn IT core components for Angular 12",
   "private": false,
   "peerDependencies": {