lsp-grid 1.0.0

package/dist/collection/components/revoGrid/revo-grid-style.css

@@ -0,0 +1,567 @@
+revo-grid[theme=default],
+revo-grid:not([theme]) {
+  border: 1px solid var(--revo-grid-header-border);
+  font-size: 12px;
+}
+revo-grid[theme=default] .rowHeaders revogr-header,
+revo-grid:not([theme]) .rowHeaders revogr-header {
+  box-shadow: -1px 0 0 0 var(--revo-grid-header-border) inset;
+}
+revo-grid[theme=default] revogr-header,
+revo-grid:not([theme]) revogr-header {
+  text-align: center;
+  line-height: 30px;
+  background-color: var(--revo-grid-header-bg);
+}
+revo-grid[theme=default] revogr-header .group-rgRow,
+revo-grid:not([theme]) revogr-header .group-rgRow {
+  box-shadow: none;
+}
+revo-grid[theme=default] revogr-header .group-rgRow .rgHeaderCell,
+revo-grid:not([theme]) revogr-header .group-rgRow .rgHeaderCell {
+  box-shadow: -1px 0 0 0 var(--revo-grid-header-border), -1px 0 0 0 var(--revo-grid-header-border) inset, 0 -1px 0 0 var(--revo-grid-header-border), 0 -1px 0 0 var(--revo-grid-header-border) inset;
+}
+revo-grid[theme=default] revogr-header .header-rgRow,
+revo-grid[theme=default] revogr-header .group-rgRow,
+revo-grid:not([theme]) revogr-header .header-rgRow,
+revo-grid:not([theme]) revogr-header .group-rgRow {
+  text-transform: uppercase;
+  font-size: 12px;
+  color: var(--revo-grid-header-color);
+}
+revo-grid[theme=default] revogr-header .header-rgRow,
+revo-grid:not([theme]) revogr-header .header-rgRow {
+  height: 30px;
+  box-shadow: 0 -1px 0 0 var(--revo-grid-header-border) inset;
+}
+revo-grid[theme=default] revogr-header .rgHeaderCell,
+revo-grid:not([theme]) revogr-header .rgHeaderCell {
+  box-shadow: -1px 0 0 0 var(--revo-grid-header-border) inset, 0 -1px 0 0 var(--revo-grid-header-border), 0 -1px 0 0 var(--revo-grid-header-border) inset;
+}
+revo-grid[theme=default] .rowHeaders,
+revo-grid:not([theme]) .rowHeaders {
+  background-color: var(--revo-grid-header-bg);
+}
+revo-grid[theme=default] .rowHeaders revogr-data .rgCell,
+revo-grid:not([theme]) .rowHeaders revogr-data .rgCell {
+  color: var(--revo-grid-header-color);
+}
+revo-grid[theme=default] .rowHeaders revogr-data .rgCell:first-child,
+revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:first-child {
+  box-shadow: 0 -1px 0 0 var(--revo-grid-header-border) inset;
+}
+revo-grid[theme=default] .rowHeaders revogr-data .rgCell:not(:first-child),
+revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child) {
+  box-shadow: 0 -1px 0 0 var(--revo-grid-header-border) inset, 1px 0 0 0 var(--revo-grid-header-border) inset;
+}
+revo-grid[theme=default] .rowHeaders revogr-data .rgCell:last-child,
+revo-grid:not([theme]) .rowHeaders revogr-data .rgCell:last-child {
+  border-right: 1px solid var(--revo-grid-header-border);
+}
+revo-grid[theme=default] .rowHeaders revogr-data revogr-header,
+revo-grid:not([theme]) .rowHeaders revogr-data revogr-header {
+  box-shadow: 0 -1px 0 0 var(--revo-grid-header-border) inset;
+}
+revo-grid[theme=default] revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child,
+revo-grid:not([theme]) revogr-viewport-scroll.colPinStart revogr-data .rgRow .rgCell:last-child {
+  box-shadow: 0 -1px 0 0 var(--revo-grid-cell-border) inset, -1px 0 0 0 var(--revo-grid-header-border) inset;
+}
+revo-grid[theme=default] revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell,
+revo-grid:not([theme]) revogr-viewport-scroll.colPinStart .footer-wrapper revogr-data .rgRow:first-child .rgCell {
+  box-shadow: 0 1px 0 0 var(--revo-grid-header-border) inset, -1px 0 0 0 var(--revo-grid-header-border) inset;
+}
+revo-grid[theme=default] revogr-viewport-scroll.colPinEnd,
+revo-grid[theme=default] revogr-viewport-scroll.colPinEnd revogr-header,
+revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd,
+revo-grid:not([theme]) revogr-viewport-scroll.colPinEnd revogr-header {
+  box-shadow: 1px 0 0 var(--revo-grid-header-border) inset;
+}
+revo-grid[theme=default] .footer-wrapper revogr-data .rgRow:first-child .rgCell,
+revo-grid:not([theme]) .footer-wrapper revogr-data .rgRow:first-child .rgCell {
+  box-shadow: 0 1px 0 0 var(--revo-grid-cell-border) inset, -1px 0 0 0 var(--revo-grid-cell-border) inset, 0 -1px 0 0 var(--revo-grid-cell-border) inset;
+}
+revo-grid[theme=default] revogr-data,
+revo-grid:not([theme]) revogr-data {
+  text-align: center;
+}
+revo-grid[theme=default] revogr-data .revo-draggable,
+revo-grid:not([theme]) revogr-data .revo-draggable {
+  float: left;
+}
+revo-grid[theme=default] revogr-data .rgRow,
+revo-grid:not([theme]) revogr-data .rgRow {
+  line-height: 27px;
+}
+revo-grid[theme=default] revogr-data .rgCell,
+revo-grid:not([theme]) revogr-data .rgCell {
+  box-shadow: 0 -1px 0 0 var(--revo-grid-cell-border) inset, -1px 0 0 0 var(--revo-grid-cell-border) inset;
+}
+
+revo-grid[theme=material] {
+  font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+revo-grid[theme=material] revogr-header {
+  line-height: 50px;
+  font-weight: 600;
+  text-align: left;
+}
+revo-grid[theme=material] revogr-header .rgHeaderCell {
+  padding: 0 15px;
+  text-overflow: ellipsis;
+}
+revo-grid[theme=material] revogr-header .header-rgRow {
+  height: 50px;
+}
+revo-grid[theme=material] revogr-data {
+  text-align: left;
+}
+revo-grid[theme=material] revogr-data .rgRow {
+  line-height: 42px;
+}
+revo-grid[theme=material] revogr-data .rgCell {
+  padding: 0 15px;
+}
+
+revo-grid[theme=darkMaterial] {
+  font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+revo-grid[theme=darkMaterial] revogr-header {
+  line-height: 50px;
+  font-weight: 600;
+  text-align: left;
+}
+revo-grid[theme=darkMaterial] revogr-header .rgHeaderCell {
+  padding: 0 15px;
+  text-overflow: ellipsis;
+}
+revo-grid[theme=darkMaterial] revogr-header .header-rgRow {
+  height: 50px;
+}
+revo-grid[theme=darkMaterial] revogr-data {
+  text-align: left;
+}
+revo-grid[theme=darkMaterial] revogr-data .rgRow {
+  line-height: 42px;
+}
+revo-grid[theme=darkMaterial] revogr-data .rgCell {
+  padding: 0 15px;
+}
+
+revo-grid[theme=darkCompact] {
+  font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+revo-grid[theme=darkCompact] revogr-header {
+  line-height: 45px;
+  font-weight: 600;
+  text-align: left;
+}
+revo-grid[theme=darkCompact] revogr-header .rgHeaderCell {
+  padding: 0 15px;
+  text-overflow: ellipsis;
+}
+revo-grid[theme=darkCompact] revogr-header .header-rgRow {
+  height: 45px;
+}
+revo-grid[theme=darkCompact] revogr-data {
+  text-align: left;
+}
+revo-grid[theme=darkCompact] revogr-data .rgRow {
+  line-height: 32px;
+}
+revo-grid[theme=darkCompact] revogr-data .rgCell {
+  padding: 0 15px;
+}
+
+revo-grid[theme=compact] {
+  font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+revo-grid[theme=compact] revogr-header {
+  line-height: 45px;
+  font-weight: 600;
+  text-align: left;
+}
+revo-grid[theme=compact] revogr-header .rgHeaderCell {
+  padding: 0 15px;
+  text-overflow: ellipsis;
+}
+revo-grid[theme=compact] revogr-header .header-rgRow {
+  height: 45px;
+}
+revo-grid[theme=compact] revogr-data {
+  text-align: left;
+}
+revo-grid[theme=compact] revogr-data .rgRow {
+  line-height: 32px;
+}
+revo-grid[theme=compact] revogr-data .rgCell {
+  padding: 0 15px;
+}
+revo-grid[theme=compact] revo-dropdown .rv-dr-root {
+  padding: 0px 9px;
+}
+
+/**
+* RTL (Right-to-Left) styles for RevoGrid
+* Applied when the rtl attribute is present on the revo-grid element
+*/
+revo-grid[dir=rtl] .viewports {
+  flex-direction: row-reverse;
+}
+revo-grid[dir=rtl] revogr-header .rgHeaderCell {
+  text-align: right;
+}
+revo-grid[dir=rtl] revogr-data .rgCell {
+  text-align: right;
+}
+revo-grid[dir=rtl] .rowHeaders revogr-data .rgCell {
+  text-align: right;
+}
+revo-grid[dir=rtl] revogr-filter-panel {
+  direction: rtl;
+}
+revo-grid[dir=rtl] revo-dropdown .rv-dr-root {
+  text-align: right;
+}
+revo-grid[dir=rtl] .drag-position {
+  right: 0;
+  left: auto;
+}
+revo-grid[dir=rtl] .drag-auto-scroll-y {
+  right: 0;
+  left: auto;
+}
+revo-grid[dir=rtl] .clipboard {
+  right: 0;
+  left: auto;
+}
+revo-grid[dir=rtl] .draggable {
+  margin-left: -20px;
+  margin-right: 0;
+  padding-right: 20px;
+  padding-left: 5px;
+}
+revo-grid[dir=rtl] .draggable .revo-alt-icon {
+  right: 5px;
+  left: auto;
+}
+revo-grid[dir=rtl] .focused-cell {
+  border-right: 2px solid var(--revo-grid-primary);
+  border-left: none;
+}
+revo-grid[dir=rtl] .selection-range {
+  border-right: 2px solid var(--revo-grid-primary);
+  border-left: none;
+}
+revo-grid[dir=rtl] .resize-handle {
+  right: 0;
+  left: auto;
+}
+revo-grid[dir=rtl] .sort-indicator {
+  margin-left: 0;
+  margin-right: 5px;
+}
+revo-grid[dir=rtl] .filter-button {
+  margin-left: 0;
+  margin-right: 5px;
+}
+revo-grid[dir=rtl] .group-expand {
+  margin-right: 0;
+  margin-left: 2px;
+  padding-right: 5px;
+  padding-left: 0;
+}
+revo-grid[dir=rtl] .rgCell,
+revo-grid[dir=rtl] .rgHeaderCell {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+revo-grid[dir=rtl] revogr-edit {
+  direction: rtl;
+}
+revo-grid[dir=rtl] .rgHeaderCell {
+  direction: rtl;
+}
+revo-grid[dir=rtl][theme=material] revogr-header, revo-grid[dir=rtl][theme=darkMaterial] revogr-header {
+  text-align: right;
+}
+revo-grid[dir=rtl][theme=material] revogr-data, revo-grid[dir=rtl][theme=darkMaterial] revogr-data {
+  text-align: right;
+}
+revo-grid[dir=rtl][theme=default] .rowHeaders, revo-grid[dir=rtl]:not([theme]) .rowHeaders {
+  background-color: var(--revo-grid-header-bg);
+}
+revo-grid[dir=rtl][theme=default] .rowHeaders revogr-data .rgCell, revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell {
+  color: var(--revo-grid-header-color);
+}
+revo-grid[dir=rtl][theme=default] .rowHeaders revogr-data .rgCell:first-child, revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:first-child {
+  box-shadow: 0 -1px 0 0 var(--revo-grid-header-border) inset;
+}
+revo-grid[dir=rtl][theme=default] .rowHeaders revogr-data .rgCell:not(:first-child), revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:not(:first-child) {
+  box-shadow: 0 -1px 0 0 var(--revo-grid-header-border) inset, 1px 0 0 0 var(--revo-grid-header-border) inset;
+}
+revo-grid[dir=rtl][theme=default] .rowHeaders revogr-data .rgCell:last-child, revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data .rgCell:last-child {
+  border-left: 1px solid var(--revo-grid-header-border);
+  border-right: none;
+}
+revo-grid[dir=rtl][theme=default] .rowHeaders revogr-data revogr-header, revo-grid[dir=rtl]:not([theme]) .rowHeaders revogr-data revogr-header {
+  box-shadow: 0 -1px 0 0 var(--revo-grid-header-border) inset;
+}
+revo-grid[dir=rtl][theme=default] revogr-header, revo-grid[dir=rtl]:not([theme]) revogr-header {
+  text-align: right;
+}
+revo-grid[dir=rtl][theme=default] revogr-data, revo-grid[dir=rtl]:not([theme]) revogr-data {
+  text-align: right;
+}
+revo-grid[dir=rtl][theme=compact] revogr-header, revo-grid[dir=rtl][theme=darkCompact] revogr-header {
+  text-align: right;
+}
+revo-grid[dir=rtl][theme=compact] revogr-data, revo-grid[dir=rtl][theme=darkCompact] revogr-data {
+  text-align: right;
+}
+
+revo-grid {
+  /* Base theme variables */
+  --revo-grid-primary: #266ae8;
+  --revo-grid-primary-transparent: rgba(38, 106, 232, 0.9);
+  --revo-grid-background: #fff;
+  --revo-grid-foreground: black;
+  --revo-grid-divider: gray;
+  --revo-grid-shadow: rgba(0, 0, 0, 0.15);
+  --revo-grid-text: black;
+  --revo-grid-border: rgba(0, 0, 0, 0.2);
+  /* Filter panel variables */
+  --revo-grid-filter-panel-bg: #fff;
+  --revo-grid-filter-panel-border: #d9d9d9;
+  --revo-grid-filter-panel-shadow: rgba(0, 0, 0, 0.15);
+  --revo-grid-filter-panel-input-bg: #eaeaeb;
+  --revo-grid-filter-panel-divider: #d9d9d9;
+  --revo-grid-filter-panel-select-border: transparent;
+  --revo-grid-filter-panel-select-border-hover: transparent;
+  /* Grid specific variables */
+  --revo-grid-header-bg: #f8f9fa;
+  --revo-grid-header-color: #000;
+  --revo-grid-header-border: #cecece;
+  --revo-grid-cell-border: #e2e3e3;
+  --revo-grid-focused-bg: rgba(233, 234, 237, 0.5);
+  --revo-grid-row-hover: #f1f1f1;
+  --revo-grid-row-headers-bg: #f7faff;
+  --revo-grid-row-headers-color: #757a82;
+  --revo-grid-cell-disabled-bg: rgba(0, 0, 0, 0.07);
+  /* Dark theme overrides - applied when theme contains 'dark' */
+  direction: ltr !important;
+  /*
+  * Grid required to have a flex property to be able to stretch
+  */
+  display: flex !important;
+  height: 100%;
+  /**
+  * In some cases the min-height is not enough for safari
+  * so setting up the grid  height works
+  */
+  min-height: 300px;
+  font-family: Helvetica, Arial, Sans-Serif, serif;
+  font-size: 14px;
+  position: relative;
+  color: var(--revo-grid-text);
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Old versions of Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently
+             supported by Chrome, Edge, Opera and Firefox */
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+revo-grid[theme*=dark] {
+  --revo-grid-background: #212529;
+  --revo-grid-foreground: #fff;
+  --revo-grid-text: rgba(255, 255, 255, 0.9);
+  --revo-grid-divider: #505050;
+  --revo-grid-border: rgba(255, 255, 255, 0.2);
+  /* Filter panel variables */
+  --revo-grid-filter-panel-bg: #212529;
+  --revo-grid-filter-panel-border: #505050;
+  --revo-grid-filter-panel-input-bg: #343a40;
+  --revo-grid-filter-panel-divider: #505050;
+  --revo-grid-header-bg: #343a40;
+  --revo-grid-header-color: #fff;
+  --revo-grid-header-border: #505050;
+  --revo-grid-cell-border: #424242;
+  --revo-grid-focused-bg: rgba(52, 58, 64, 0.5);
+  --revo-grid-row-hover: rgba(80, 80, 80, 0.5);
+  --revo-grid-row-headers-bg: rgba(52, 58, 64, 0.8);
+  --revo-grid-row-headers-color: rgba(255, 255, 255, 0.8);
+  --revo-grid-cell-disabled-bg: rgba(255, 255, 255, 0.07);
+}
+revo-grid revogr-header .header-rgRow.group {
+  box-shadow: 0 -1px 0 0 var(--revo-grid-header-border) inset;
+}
+revo-grid revogr-header .header-rgRow:not(.group) {
+  box-shadow: 0 -1px 0 0 var(--revo-grid-header-border), 0 -1px 0 0 var(--revo-grid-header-border) inset;
+}
+revo-grid revogr-header .rgHeaderCell.sortable:hover {
+  background-color: var(--revo-grid-row-hover);
+}
+revo-grid revogr-header .rgHeaderCell.focused-cell {
+  background: var(--revo-grid-focused-bg);
+}
+revo-grid .footer-wrapper revogr-data {
+  box-shadow: 0 -1px 0 var(--revo-grid-cell-border);
+}
+revo-grid revogr-viewport-scroll.colPinStart {
+  box-shadow: -1px 0 0 var(--revo-grid-cell-border) inset;
+}
+revo-grid revogr-viewport-scroll.colPinEnd {
+  box-shadow: -1px 0 0 var(--revo-grid-cell-border);
+}
+revo-grid revogr-data .rgRow {
+  box-shadow: 0 -1px 0 0 var(--revo-grid-cell-border) inset;
+}
+revo-grid revogr-data .rgRow.focused-rgRow {
+  background-color: var(--revo-grid-focused-bg);
+}
+revo-grid revogr-data .rgCell {
+  color: var(--revo-grid-text);
+}
+revo-grid revogr-data .rgCell.disabled {
+  background-color: var(--revo-grid-cell-disabled-bg);
+}
+revo-grid .attribution {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  width: 0;
+  height: 0;
+  border-left: 4px solid var(--revo-grid-primary-transparent);
+  border-bottom: 4px solid var(--revo-grid-primary-transparent);
+  border-top: 4px solid transparent;
+  border-right: 4px solid transparent;
+  cursor: pointer;
+}
+revo-grid .attribution .value {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background-color: var(--revo-grid-background);
+  padding: 4px;
+  border-radius: 4px;
+  box-shadow: 0 1px 10px var(--revo-grid-border);
+  white-space: nowrap;
+  text-decoration: none;
+  color: var(--revo-grid-text);
+  letter-spacing: 0.3px;
+  font-size: 11px;
+  opacity: 0;
+  width: 4px;
+  overflow: hidden;
+  transition: opacity 0.5s ease-in-out, width 0.3s ease-in-out;
+}
+revo-grid .attribution:hover .value {
+  width: 63px;
+  opacity: 1;
+}
+revo-grid.column-draggable.column-drag-start:hover,
+revo-grid.column-draggable.column-drag-start *:hover {
+  cursor: grabbing;
+}
+revo-grid .footer-wrapper,
+revo-grid .header-wrapper {
+  width: 100%;
+}
+revo-grid .footer-wrapper revogr-data,
+revo-grid .header-wrapper revogr-data {
+  z-index: 3;
+}
+revo-grid revo-dropdown {
+  width: 100%;
+}
+revo-grid revo-dropdown .rv-dr-root {
+  max-height: 100%;
+}
+revo-grid revo-dropdown.shrink label {
+  opacity: 0;
+}
+revo-grid .viewports {
+  max-width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  flex-grow: 1;
+}
+revo-grid .main-viewport {
+  flex-grow: 1;
+  height: 0;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+}
+revo-grid .draggable {
+  position: fixed;
+  height: 30px;
+  line-height: 30px;
+  background: var(--revo-grid-background);
+  border-radius: 3px;
+  display: block;
+  z-index: 100;
+  margin-top: 5px;
+  margin-right: -20px;
+  box-shadow: 0 4px 20px 0 var(--revo-grid-shadow);
+  padding-left: 20px;
+  padding-right: 5px;
+}
+revo-grid .draggable.hidden {
+  display: none;
+}
+revo-grid .draggable .revo-alt-icon {
+  background-color: var(--revo-grid-foreground);
+  position: absolute;
+  left: 5px;
+  top: 10px;
+}
+revo-grid .draggable-wrapper.hidden {
+  display: none;
+}
+revo-grid .drag-position {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 1px;
+  z-index: 2;
+  background: var(--revo-grid-divider);
+  pointer-events: none;
+}
+revo-grid .drag-position-y {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 1px;
+  z-index: 2;
+  background: var(--revo-grid-divider);
+  pointer-events: none;
+  transition: all 0.1s ease-out;
+}
+revo-grid .drag-auto-scroll-y {
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 50px;
+  width: 1px;
+}
+revo-grid .clipboard {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+revo-grid revogr-scroll-virtual {
+  position: relative;
+}
+revo-grid revogr-scroll-virtual.vertical, revo-grid revogr-scroll-virtual.horizontal {
+  z-index: 3;
+}