@skyux/ag-grid 8.0.0-alpha.0 → 8.0.0-alpha.10

package/css/sky-ag-grid.css

@@ -7014,292 +7014,6 @@ button.ag-side-button-button:focus {
   text-align: center;
 }
 
-.ag-input-field-input {
-  width: 100%;
-  min-width: 0;
-}
-
-.ag-checkbox-input-wrapper {
-  font-family: var(--ag-icon-font-family);
-  font-size: var(--ag-icon-size);
-  line-height: var(--ag-icon-size);
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  width: var(--ag-icon-size);
-  height: var(--ag-icon-size);
-  background-color: var(--ag-checkbox-background-color);
-  border-radius: var(--ag-checkbox-border-radius);
-  display: inline-block;
-  vertical-align: middle;
-  flex: none;
-}
-
-.ag-checkbox-input-wrapper input, .ag-checkbox-input-wrapper input {
-  -webkit-appearance: none;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.ag-checkbox-input-wrapper:focus-within, .ag-checkbox-input-wrapper:active {
-  outline: none;
-  box-shadow: var(--ag-input-focus-box-shadow);
-}
-
-.ag-checkbox-input-wrapper.ag-disabled {
-  opacity: 0.5;
-}
-
-.ag-checkbox-input-wrapper::after {
-  content: var(--ag-icon-font-code-checkbox-unchecked, "\f108");
-  color: var(--ag-checkbox-unchecked-color);
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-}
-
-.ag-checkbox-input-wrapper.ag-checked::after {
-  content: var(--ag-icon-font-code-checkbox-checked, "\f106");
-  color: var(--ag-checkbox-checked-color);
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-}
-
-.ag-checkbox-input-wrapper.ag-indeterminate::after {
-  content: var(--ag-icon-font-code-checkbox-indeterminate, "\f107");
-  color: var(--ag-checkbox-indeterminate-color);
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-}
-
-.ag-toggle-button-input-wrapper {
-  box-sizing: border-box;
-  width: var(--ag-toggle-button-width);
-  height: var(--ag-toggle-button-height);
-  background-color: var(--ag-toggle-button-off-background-color);
-  border-radius: calc(var(--ag-toggle-button-height) * 0.5);
-  position: relative;
-  flex: none;
-  border: var(--ag-toggle-button-border-width) solid;
-  border-color: var(--ag-toggle-button-off-border-color);
-}
-
-.ag-toggle-button-input-wrapper input {
-  opacity: 0;
-  height: 100%;
-  width: 100%;
-}
-
-.ag-toggle-button-input-wrapper:focus-within {
-  outline: none;
-  box-shadow: var(--ag-input-focus-box-shadow);
-}
-
-.ag-toggle-button-input-wrapper.ag-disabled {
-  opacity: 0.5;
-}
-
-.ag-toggle-button-input-wrapper.ag-checked {
-  background-color: var(--ag-toggle-button-on-background-color);
-  border-color: var(--ag-toggle-button-on-border-color);
-}
-
-.ag-toggle-button-input-wrapper::before {
-  content: " ";
-  position: absolute;
-  top: calc(0px - var(--ag-toggle-button-border-width));
-  left: calc(0px - var(--ag-toggle-button-border-width));
-  display: block;
-  box-sizing: border-box;
-  height: var(--ag-toggle-button-height);
-  width: var(--ag-toggle-button-height);
-  background-color: var(--ag-toggle-button-switch-background-color);
-  border-radius: 100%;
-  transition: left 100ms;
-  border: var(--ag-toggle-button-border-width) solid;
-  border-color: var(--ag-toggle-button-switch-border-color);
-}
-
-.ag-toggle-button-input-wrapper.ag-checked::before {
-  left: calc(100% - var(--ag-toggle-button-height));
-  border-color: var(--ag-toggle-button-on-border-color);
-}
-
-.ag-radio-button-input-wrapper {
-  font-family: var(--ag-icon-font-family);
-  font-size: var(--ag-icon-size);
-  line-height: var(--ag-icon-size);
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  width: var(--ag-icon-size);
-  height: var(--ag-icon-size);
-  background-color: var(--ag-checkbox-background-color);
-  border-radius: var(--ag-checkbox-border-radius);
-  display: inline-block;
-  vertical-align: middle;
-  flex: none;
-  border-radius: var(--ag-icon-size);
-}
-
-.ag-radio-button-input-wrapper input, .ag-radio-button-input-wrapper input {
-  -webkit-appearance: none;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.ag-radio-button-input-wrapper:focus-within, .ag-radio-button-input-wrapper:active {
-  outline: none;
-  box-shadow: var(--ag-input-focus-box-shadow);
-}
-
-.ag-radio-button-input-wrapper.ag-disabled {
-  opacity: 0.5;
-}
-
-.ag-radio-button-input-wrapper::after {
-  content: var(--ag-icon-font-code-radio-button-off, "\f126");
-  color: var(--ag-checkbox-unchecked-color);
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-}
-
-.ag-radio-button-input-wrapper.ag-checked::after {
-  content: var(--ag-icon-font-code-radio-button-on, "\f127");
-  color: var(--ag-checkbox-checked-color);
-  position: absolute;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-}
-
-input[class^=ag-][type=range] {
-  -webkit-appearance: none;
-  width: 100%;
-  height: 100%;
-  background: none;
-  overflow: visible;
-}
-
-input[class^=ag-][type=range]::-webkit-slider-runnable-track {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 3px;
-  background-color: var(--ag-border-color);
-  border-radius: var(--ag-border-radius);
-  border-radius: var(--ag-checkbox-border-radius);
-}
-
-input[class^=ag-][type=range]::-moz-range-track {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 3px;
-  background-color: var(--ag-border-color);
-  border-radius: var(--ag-border-radius);
-  border-radius: var(--ag-checkbox-border-radius);
-}
-
-input[class^=ag-][type=range]::-ms-track {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 3px;
-  background-color: var(--ag-border-color);
-  border-radius: var(--ag-border-radius);
-  border-radius: var(--ag-checkbox-border-radius);
-  color: transparent;
-  width: calc(100% - 2px);
-}
-
-input[class^=ag-][type=range]::-webkit-slider-thumb {
-  margin: 0;
-  padding: 0;
-  -webkit-appearance: none;
-  width: var(--ag-icon-size);
-  height: var(--ag-icon-size);
-  background-color: var(--ag-background-color);
-  border: 1px solid;
-  border-color: var(--ag-checkbox-unchecked-color);
-  border-radius: var(--ag-icon-size);
-  transform: translateY(calc(var(--ag-icon-size) * -0.5 + 1.5px));
-}
-
-input[class^=ag-][type=range]::-ms-thumb {
-  margin: 0;
-  padding: 0;
-  -webkit-appearance: none;
-  width: var(--ag-icon-size);
-  height: var(--ag-icon-size);
-  background-color: var(--ag-background-color);
-  border: 1px solid;
-  border-color: var(--ag-checkbox-unchecked-color);
-  border-radius: var(--ag-icon-size);
-}
-
-input[class^=ag-][type=range]::-moz-ag-range-thumb {
-  margin: 0;
-  padding: 0;
-  -webkit-appearance: none;
-  width: var(--ag-icon-size);
-  height: var(--ag-icon-size);
-  background-color: var(--ag-background-color);
-  border: 1px solid;
-  border-color: var(--ag-checkbox-unchecked-color);
-  border-radius: var(--ag-icon-size);
-}
-
-input[class^=ag-][type=range]:focus {
-  outline: none;
-}
-
-input[class^=ag-][type=range]:focus::-webkit-slider-thumb {
-  box-shadow: var(--ag-input-focus-box-shadow);
-  border-color: var(--ag-checkbox-checked-color);
-}
-
-input[class^=ag-][type=range]:focus::-ms-thumb {
-  box-shadow: var(--ag-input-focus-box-shadow);
-  border-color: var(--ag-checkbox-checked-color);
-}
-
-input[class^=ag-][type=range]:focus::-moz-ag-range-thumb {
-  box-shadow: var(--ag-input-focus-box-shadow);
-  border-color: var(--ag-checkbox-checked-color);
-}
-
-input[class^=ag-][type=range]:active::-webkit-slider-runnable-track {
-  background-color: var(--ag-input-focus-border-color);
-}
-
-input[class^=ag-][type=range]:active::-moz-ag-range-track {
-  background-color: var(--ag-input-focus-border-color);
-}
-
-input[class^=ag-][type=range]:active::-ms-track {
-  background-color: var(--ag-input-focus-border-color);
-}
-
-input[class^=ag-][type=range]:disabled {
-  opacity: 0.5;
-}
-
 .ag-theme-alpine, .ag-theme-alpine-dark, .ag-theme-sky-modern-dark {
   --ag-alpine-active-color: #2196f3;
   --ag-selected-row-background-color: rgba(33, 150, 243, 0.3);
@@ -7724,7 +7438,6 @@ input[class^=ag-][type=range]:disabled {
 }
 .ag-theme-sky-default {
   --ag-background-color: #fbfbfb;
-  --ag-row-hover-color: #d6cde4;
   --ag-border-color: #cdcfd2;
   --ag-cell-horizontal-padding: 12px;
   --ag-font-family: "BLKB Sans", "Helvetica Neue", Arial, sans-serif;
@@ -7911,9 +7624,17 @@ ag-grid-angular .sky-ag-grid-cell-currency {
 ag-grid-angular .sky-ag-grid-cell-row-selector {
   text-overflow: clip;
 }
-ag-grid-angular .ag-header-cell.sky-ag-grid-header-right-aligned > .ag-header-cell-comp-wrapper {
+ag-grid-angular .ag-header-cell.ag-right-aligned-header .ag-header-cell-comp-wrapper,
+ag-grid-angular .ag-header-cell.sky-ag-grid-header-right-aligned .ag-header-cell-comp-wrapper {
   flex-direction: row-reverse;
 }
+ag-grid-angular .ag-header-cell.ag-right-aligned-header .ag-header-cell-label,
+ag-grid-angular .ag-header-cell.ag-right-aligned-header .ag-cell-label-container,
+ag-grid-angular .ag-header-cell.sky-ag-grid-header-right-aligned .ag-header-cell-label,
+ag-grid-angular .ag-header-cell.sky-ag-grid-header-right-aligned .ag-cell-label-container {
+  display: flex;
+  flex-direction: row;
+}
 
 .sky-theme-default sky-toolbar + sky-ag-grid-wrapper ag-grid-angular {
   border-top: none !important;
@@ -7931,10 +7652,31 @@ sky-ag-grid-wrapper + sky-infinite-scroll .sky-infinite-scroll {
   margin-top: 0 !important;
 }
 
+.ag-header .ag-header-cell .ag-header-cell-label-sortable {
+  color: var(--sky-text-color-deemphasized);
+}
+.ag-header .ag-header-cell .ag-header-cell-label-sortable:hover {
+  color: var(--sky-text-color-default);
+}
+
 .ag-theme-sky-default .ag-header .ag-header-cell .ag-header-cell-text {
   font-weight: normal;
 }
 
+sky-ag-grid-wrapper.sky-ag-grid-layout-normal {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+sky-ag-grid-wrapper.sky-ag-grid-layout-normal .sky-ag-grid {
+  flex: 1;
+  overflow: hidden;
+}
+sky-ag-grid-wrapper.sky-ag-grid-layout-normal .sky-ag-grid ag-grid-angular {
+  width: 100%;
+  height: 100%;
+}
+
 .ag-theme-sky-default ag-grid-angular:not(.sky-ag-grid-editable) {
   border-top: 1px solid var(--sky-border-color-neutral-medium);
 }
@@ -8035,6 +7777,9 @@ sky-ag-grid-wrapper + sky-infinite-scroll .sky-infinite-scroll {
   border: none;
 }
 
+.ag-theme-sky-modern-light ag-grid-angular:not(.sky-ag-grid-editable) .ag-row-hover::before {
+  background-color: transparent;
+}
 .ag-theme-sky-modern-light ag-grid-angular:not(.sky-ag-grid-editable) .ag-header-cell {
   text-transform: uppercase;
 }
@@ -8047,9 +7792,6 @@ sky-ag-grid-wrapper + sky-infinite-scroll .sky-infinite-scroll {
   padding-bottom: 16px;
   min-height: var(--ag-row-height)-2px;
 }
-.ag-theme-sky-modern-light ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell:hover {
-  border: 1px solid #1870B8;
-}
 .ag-theme-sky-modern-light ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell.sky-ag-grid-cell-invalid {
   border: 1px solid var(--sky-highlight-color-danger);
 }
@@ -8112,6 +7854,9 @@ sky-ag-grid-wrapper + sky-infinite-scroll .sky-infinite-scroll {
   margin-left: 9px;
 }
 
+.ag-theme-sky-modern-dark ag-grid-angular:not(.sky-ag-grid-editable) .ag-row-hover::before {
+  background-color: transparent;
+}
 .ag-theme-sky-modern-dark ag-grid-angular:not(.sky-ag-grid-editable) .ag-header-cell {
   text-transform: uppercase;
 }
@@ -8124,9 +7869,6 @@ sky-ag-grid-wrapper + sky-infinite-scroll .sky-infinite-scroll {
   padding-bottom: 16px;
   min-height: var(--ag-row-height)-2px;
 }
-.ag-theme-sky-modern-dark ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell:hover {
-  border: 1px solid #009cd1;
-}
 .ag-theme-sky-modern-dark ag-grid-angular:not(.sky-ag-grid-editable) .ag-cell.sky-ag-grid-cell-invalid {
   border: 1px solid var(--sky-highlight-color-danger);
 }