@linzjs/step-ag-grid 7.5.2 → 7.6.1

package/dist/GridTheme.scss

@@ -23,13 +23,15 @@
       header-background-color: lui.$white,
       border-color: lui.$lily,
       secondary-border-color: lui.$lily,
+      cell-horizontal-border: solid ag-derived(secondary-border-color),
+      cell-horizontal-padding: 12,
       row-hover-color: lui.$lily,
       font-family: (
         "Open Sans",
         system-ui,
         sans-serif,
       ),
-      font-size: 0.875rem !important,
+      font-size: 1rem !important,
       borders: false,
       borders-critical: true,
       borders-secondary: false,
@@ -47,7 +49,7 @@
   }
 
   .ag-row:last-of-type {
-    border-bottom: none;
+    border-bottom: 1px solid lui.$lily;
   }
 
   // ag-grid-community 27.x.x needs this vs 28 using the selected-row-background-color above
@@ -58,7 +60,7 @@
 
   .ag-header-cell {
     font-weight: 600;
-    padding: 7px 0 7px 8px;
+    padding: 7px 11px;
 
     .LuiIcon {
       fill: lui.$surfie;
@@ -66,16 +68,16 @@
   }
 
   .ag-cell {
-    padding-left: 7px;
-    padding-right: 4px;
+    padding-left: 11px;
+    padding-right: 11px;
     display: flex;
     align-items: center;
   }
 
-  .ag-cell-more {
-    padding: 0;
-    display: flex;
-    justify-content: center;
+  .ag-cell.ag-cell-inline-editing {
+    padding-left: 9px;
+    padding-right: 9px;
+    bottom: 0;
   }
 
   .ag-cell-wrap-text {

package/dist/index.css

@@ -40,138 +40,6 @@
   border: 0.06rem solid #beb9b4;
 }
 
-.szh-menu {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  box-sizing: border-box;
-  width: max-content;
-  z-index: 100;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  background-color: #fff;
-}
-.szh-menu:focus {
-  outline: none;
-}
-.szh-menu__arrow {
-  box-sizing: border-box;
-  width: 0.75rem;
-  height: 0.75rem;
-  background-color: #fff;
-  border: 1px solid transparent;
-  border-left-color: rgba(0, 0, 0, 0.1);
-  border-top-color: rgba(0, 0, 0, 0.1);
-  z-index: -1;
-}
-.szh-menu__arrow--dir-left {
-  right: 0.375rem;
-  transform: translateY(-50%) rotate(135deg);
-}
-.szh-menu__arrow--dir-right {
-  left: 0.375rem;
-  transform: translateY(-50%) rotate(-45deg);
-}
-.szh-menu__arrow--dir-top {
-  bottom: 0.375rem;
-  transform: translateX(-50%) rotate(-135deg);
-}
-.szh-menu__arrow--dir-bottom {
-  top: 0.375rem;
-  transform: translateX(-50%) rotate(45deg);
-}
-.szh-menu__item {
-  cursor: pointer;
-}
-.szh-menu__item:focus {
-  outline: none;
-}
-.szh-menu__item--hover {
-  background-color: #ebebeb;
-}
-.szh-menu__item--focusable {
-  cursor: default;
-  background-color: inherit;
-}
-.szh-menu__item--disabled {
-  cursor: default;
-  color: #aaa;
-}
-.szh-menu__group {
-  box-sizing: border-box;
-}
-.szh-menu__radio-group {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.szh-menu__divider {
-  height: 1px;
-  margin: 0.5rem 0;
-  background-color: rgba(0, 0, 0, 0.12);
-}
-
-.szh-menu-button {
-  box-sizing: border-box;
-}
-
-.szh-menu {
-  user-select: none;
-  color: #212529;
-  border: none;
-  border-radius: 0.25rem;
-  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.133), 0 0.6px 2px rgba(0, 0, 0, 0.1);
-  min-width: 10rem;
-  padding: 0.5rem 0;
-}
-.szh-menu__item {
-  display: flex;
-  align-items: center;
-  position: relative;
-  padding: 0.375rem 1.5rem;
-}
-.szh-menu-container--itemTransition .szh-menu__item {
-  transition-property: background-color, color;
-  transition-duration: 0.15s;
-  transition-timing-function: ease-in-out;
-}
-.szh-menu__item--type-radio {
-  padding-left: 2.2rem;
-}
-.szh-menu__item--type-radio::before {
-  content: "○";
-  position: absolute;
-  left: 0.8rem;
-  top: 0.55rem;
-  font-size: 0.8rem;
-}
-.szh-menu__item--type-radio.szh-menu__item--checked::before {
-  content: "●";
-}
-.szh-menu__item--type-checkbox {
-  padding-left: 2.2rem;
-}
-.szh-menu__item--type-checkbox::before {
-  position: absolute;
-  left: 0.8rem;
-}
-.szh-menu__item--type-checkbox.szh-menu__item--checked::before {
-  content: "✔";
-}
-.szh-menu__submenu > .szh-menu__item {
-  padding-right: 2.5rem;
-}
-.szh-menu__submenu > .szh-menu__item::after {
-  content: "❯";
-  position: absolute;
-  right: 1rem;
-}
-.szh-menu__header {
-  color: #888;
-  font-size: 0.8rem;
-  padding: 0.2rem 1.5rem;
-  text-transform: uppercase;
-}
-
 /**
   @deprecated
  */
@@ -313,6 +181,138 @@
   fill: #6b6966;
 }
 
+.szh-menu {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  box-sizing: border-box;
+  width: max-content;
+  z-index: 100;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+}
+.szh-menu:focus {
+  outline: none;
+}
+.szh-menu__arrow {
+  box-sizing: border-box;
+  width: 0.75rem;
+  height: 0.75rem;
+  background-color: #fff;
+  border: 1px solid transparent;
+  border-left-color: rgba(0, 0, 0, 0.1);
+  border-top-color: rgba(0, 0, 0, 0.1);
+  z-index: -1;
+}
+.szh-menu__arrow--dir-left {
+  right: 0.375rem;
+  transform: translateY(-50%) rotate(135deg);
+}
+.szh-menu__arrow--dir-right {
+  left: 0.375rem;
+  transform: translateY(-50%) rotate(-45deg);
+}
+.szh-menu__arrow--dir-top {
+  bottom: 0.375rem;
+  transform: translateX(-50%) rotate(-135deg);
+}
+.szh-menu__arrow--dir-bottom {
+  top: 0.375rem;
+  transform: translateX(-50%) rotate(45deg);
+}
+.szh-menu__item {
+  cursor: pointer;
+}
+.szh-menu__item:focus {
+  outline: none;
+}
+.szh-menu__item--hover {
+  background-color: #ebebeb;
+}
+.szh-menu__item--focusable {
+  cursor: default;
+  background-color: inherit;
+}
+.szh-menu__item--disabled {
+  cursor: default;
+  color: #aaa;
+}
+.szh-menu__group {
+  box-sizing: border-box;
+}
+.szh-menu__radio-group {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.szh-menu__divider {
+  height: 1px;
+  margin: 0.5rem 0;
+  background-color: rgba(0, 0, 0, 0.12);
+}
+
+.szh-menu-button {
+  box-sizing: border-box;
+}
+
+.szh-menu {
+  user-select: none;
+  color: #212529;
+  border: none;
+  border-radius: 0.25rem;
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.133), 0 0.6px 2px rgba(0, 0, 0, 0.1);
+  min-width: 10rem;
+  padding: 0.5rem 0;
+}
+.szh-menu__item {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 0.375rem 1.5rem;
+}
+.szh-menu-container--itemTransition .szh-menu__item {
+  transition-property: background-color, color;
+  transition-duration: 0.15s;
+  transition-timing-function: ease-in-out;
+}
+.szh-menu__item--type-radio {
+  padding-left: 2.2rem;
+}
+.szh-menu__item--type-radio::before {
+  content: "○";
+  position: absolute;
+  left: 0.8rem;
+  top: 0.55rem;
+  font-size: 0.8rem;
+}
+.szh-menu__item--type-radio.szh-menu__item--checked::before {
+  content: "●";
+}
+.szh-menu__item--type-checkbox {
+  padding-left: 2.2rem;
+}
+.szh-menu__item--type-checkbox::before {
+  position: absolute;
+  left: 0.8rem;
+}
+.szh-menu__item--type-checkbox.szh-menu__item--checked::before {
+  content: "✔";
+}
+.szh-menu__submenu > .szh-menu__item {
+  padding-right: 2.5rem;
+}
+.szh-menu__submenu > .szh-menu__item::after {
+  content: "❯";
+  position: absolute;
+  right: 1rem;
+}
+.szh-menu__header {
+  color: #888;
+  font-size: 0.8rem;
+  padding: 0.2rem 1.5rem;
+  text-transform: uppercase;
+}
+
 .Grid-container {
   flex: 1;
   width: 100%;
@@ -343,19 +343,117 @@
   padding: 4px 8px;
 }
 
+.GridCell-editableIcon {
+  fill: #beb9b4;
+}
+
 .GridFormMessage-container {
   padding: 4px 8px;
   max-width: 400px;
 }
 
-.ag-cell:not(.ag-cell-focus) .Grid-displayWhenCellFocused {
+.GridCell-readonly {
+  color: #989189;
+}
+
+.Grid-container.ag-theme-alpine .ag-cell {
+  font-weight: 400;
+}
+
+.Grid-container.ag-theme-alpine .ag-cell:not(.ag-cell-focus) .Grid-displayWhenCellFocused {
   visibility: hidden;
 }
 
-.ag-cell:hover .Grid-displayWhenCellFocused {
+.Grid-container.ag-theme-alpine .ag-cell:hover .Grid-displayWhenCellFocused {
   visibility: inherit;
 }
 
-.ag-cell-wrapper {
+.Grid-container.ag-theme-alpine .ag-cell-wrapper {
+  width: 100%;
+}
+
+.GridPopoverEditDropDown-containerSmall .GridFormDropDown-options {
+  max-height: 120px;
+  overflow-y: auto;
+}
+
+.GridPopoverEditDropDown-containerMedium .GridFormDropDown-options {
+  max-height: 220px;
+  overflow-y: auto;
+}
+
+.GridPopoverEditDropDown-containerLarge .GridFormDropDown-options {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.GridPopoverEditDropDown-containerUnlimited .GridFormDropDown-options {
+  overflow-y: auto;
+}
+
+.GridPopoverEditDropDown-noOptions {
+  justify-content: center;
+}
+
+.GridFormEditBearing-input {
+  width: 320px;
+}
+
+.GridMultiSelect-containerSmall .GridFormMultiSelect-options {
+  max-height: 130px;
+  overflow-y: auto;
+}
+
+.GridMultiSelect-containerMedium .GridFormMultiSelect-options {
+  max-height: 190px;
+  overflow-y: auto;
+}
+
+.GridMultiSelect-containerLarge .GridFormMultiSelect-options {
+  max-height: 320px;
+  overflow-y: auto;
+}
+
+.GridMultiSelect-containerUnlimited .GridFormMultiSelect-options {
+  overflow-y: auto;
+}
+
+.GridFormSubComponentTextInput-full-width-input {
   width: 100%;
+  padding: 0;
+}
+
+.AgGridGenericCellRenderer-icon {
+  margin-right: 4px;
+}
+
+.AgGridGenericCellRenderer-ic_infoIcon {
+  margin-right: 4px;
+  fill: #3a7cdf;
+}
+
+.AgGridGenericCellRenderer-ic_warningIcon {
+  margin-right: 4px;
+  fill: #ea6a2e;
+}
+
+.GridIcon-disabled {
+  fill: #beb9b4 !important;
+}
+
+.GridLoadableCell-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.GridPopoutMenu-burger {
+  cursor: pointer;
+}
+.GridPopoutMenu-burger svg {
+  fill: #007198;
+}
+
+.GridPopoutMenu-burgerDisabled svg {
+  fill: #989189;
 }