censa_front_end_library/css/src/components/grid.css

React components library project for censa Design System

/** Grid **/

.Grid-wrapper {
  display: flex;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.Grid {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  overflow: hidden;
  background: var(--white);
}

.Grid--resource .Grid-row--body:hover,
.Grid--resource .Grid-row--body:hover .Grid-cellGroup {
  cursor: pointer;
  background: var(--secondary-lightest);
}

.Grid--resource .Grid-row--body:active,
.Grid--resource .Grid-row--body:active .Grid-cellGroup {
  background: var(--warning-lightest) !important;
}

.Grid--resource .Grid-row--body:focus {
  outline-color: var(--warning);
}

.Grid--pinned {
  position: absolute;
  height: 100%;
  z-index: 5;
  overflow-x: hidden;
  -ms-overflow-style: none;
  border-right: 3px solid var(--secondary);
}

.Grid-pinned::-webkit-scrollbar {
  display: none;
}

.Grid--main {
  flex-grow: 1;
}

.Grid--comfortable .Grid-cell--head {
  min-height: 40px;
}

.Grid--comfortable .Grid-cell--body {
  padding-top: var(--spacing-l);
  padding-bottom: var(--spacing-l);
}

.Grid--standard .Grid-cell--head {
  min-height: 40px;
}

.Grid--standard .Grid-cell--body {
  padding-top: var(--spacing-l);
  padding-bottom: var(--spacing-l);
}

.Grid--compressed .Grid-cell--head {
  min-height: 40px;
}

.Grid--compressed .Grid-cell--body {
  padding-top: var(--spacing);
  padding-bottom: var(--spacing);
}

.Grid--tight .Grid-cell--head {
  min-height: var(--spacing-3);
}

.Grid--tight .Grid-cell--body {
  padding-top: var(--spacing-m);
  padding-bottom: var(--spacing-m);
}

.Grid-head {
  display: flex;
  flex: 0 0 auto;
  overflow-x: auto;
  border-bottom: var(--border);
}

.Grid-head::-webkit-scrollbar {
  display: none;
}

.Grid-headCell {
  display: flex;
  height: 100%;
  flex-direction: row;
  align-items: center;
}

.Grid-headCell--draggable {
  cursor: grab;
}

.Grid-headCell--draggable:active {
  cursor: grabbing;
  z-index: 3;
  opacity: 1;
  background-color: inherit;
  color: inherit;
}

.Grid-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-x: auto;
  overflow-y: overlay;
}
#story--layout-table-async-table--async-table--primary .Grid-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: overlay;
  width: 100%;
}

.Grid-rowWrapper {
  display: inline-flex;
  flex-direction: column;
  min-width: fit-content;
  flex-shrink: 0;
  border-bottom: var(--border);
}

.Grid-row {
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  background: var(--white);
}

.Grid-row--body {
  border-color: var(--secondary-light);
}

.Grid-row--selected,
.Grid-row--selected .Grid-cellGroup {
  background: var(--warning-lightest) !important;
}

.Grid-rowWrapper:last-child .Grid-row--body {
  border-bottom: 0;
}

.GridBody-padding {
  flex-shrink: 0;
}

.Grid-nestedRow {
  width: 100%;
  overflow: hidden;
}

.Grid-nestedRowTrigger {
  margin-right: var(--spacing-l);
  cursor: pointer;
}

.Grid-nestedRow .Grid-rowWrapper {
  border-bottom: 0;
}

.Grid-nestedRow .Grid-cell:first-child {
  padding-left: calc(var(--spacing-3) + var(--spacing));
}

.Grid-nestedRowPlaceholder {
  width: var(--spacing-xl);
  margin-right: var(--spacing-l);
}

.Grid-cell {
  position: relative;
  box-sizing: border-box;
  padding-left: var(--spacing-l);
  padding-right: var(--spacing-l);
}

.Grid-cell--body {
  padding-right: var(--spacing-l);
}

.Grid-cell--head {
  overflow: hidden;
  padding-right: var(--spacing-m);
}

.Grid-cell--dragged {
  z-index: 3;
  opacity: 1;
  background-color: inherit;
  color: inherit;
}

.Grid-cell--separator {
  border-left: var(--border);
  border-color: var(--secondary-light);
}

.Grid-cell--selected {
  background: var(--primary-lightest);
}

.Grid-cell--nestedRow {
  padding-left: var(--spacing);
}

.Grid-cell--head.Grid-cell:first-of-type {
  border-left: none;
}
.Grid-row.Grid-row--head .Grid-cellGroup.Grid-cellGroup--main {
  background: #f4f3f5;
}

.Grid-cellGroup--pinned .Grid-cell--head {
  background: #f4f3f5;
}
/* .Grid .Grid-cellGroup--main .Grid-cell--head.Grid-cell:last-child {
    border-right: var(--border);
} */

.Grid-row--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.Grid-cell--head.Grid-cell--selected {
  background: var(--primary-light);
}

.Grid-cell--checkbox {
  width: unset;
  min-width: unset;
  display: flex;
  align-items: center;
  z-index: 1;
  padding-right: 0 !important;
  overflow: visible !important;
}

.Grid-sortingIcons {
  display: flex;
  align-items: center;
  padding-left: var(--spacing-m);
}

.Grid-cellReorder {
  display: flex;
  align-items: center;
  cursor: grab;
}

.Grid-cellReorder:active {
  cursor: grabbing;
}

.Grid-cellContent {
  display: flex;
  align-items: center;
  flex-grow: 1;
  height: 100%;
  box-sizing: border-box;
  z-index: inherit;
}

.Grid-cell--head .Grid-cellContent {
  overflow: hidden;
}

.Grid-cellResize {
  position: absolute;
  right: 0;
  width: var(--spacing-m);
  cursor: ew-resize;
  height: 100%;
}

.Grid-cellSortIcon {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.Grid-cellSortIcon:hover {
  background: var(--secondary);
}

.Grid-cellResize:hover {
  background: var(--primary);
}

.Grid-reorderHighlighter {
  position: absolute;
  height: 100%;
  border: 3px solid var(--primary-light);
  z-index: 10;
}

.Grid-cellGroup {
  display: flex;
  box-sizing: border-box;
  background: var(--white);
}

.Grid-cellGroup--pinned {
  position: sticky;
  z-index: 4;
}

.Grid-cellGroup--pinned-left {
  left: 0;
  border-right: var(--border);
  border-right-width: 4px;
  border-image: linear-gradient(
      to right,
      var(--secondary),
      var(--secondary) 25%,
      color-mod(var(--secondary) a(0.1)) 25%,
      color-mod(var(--secondary) a(0.1))
    )
    1 100%;
}

.Grid-cellGroup--pinned-right {
  right: 0;
  border-left: var(--border);
  border-left-width: 4px;
  border-image: linear-gradient(
      to left,
      var(--secondary),
      var(--secondary) 25%,
      color-mod(var(--secondary) a(0.1)) 25%,
      color-mod(var(--secondary) a(0.1))
    )
    1 100%;
}

.Grid .Checkbox-wrapper {
  margin-right: 0;
}

/** Grid Cell **/

.GridCell {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.GridCell--align-left {
  /* flex-direction: row; */
  justify-content: flex-start;
  text-align: left;
}

.GridCell--align-right {
  /* flex-direction: row-reverse; */
  justify-content: flex-end;
  text-align: right;
}

.GridCell--align-center {
  justify-content: center;
  text-align: center;
}

.GridCell--default {
}

.GridCell--metaList {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  overflow: hidden;
}

.GridCell--statusHint .StatusHint {
  overflow: hidden;
}

.GridCell--statusHint .StatusHint .Text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.GridCell--avatar .Avatar {
  margin: 0;
}

.GridCell-metaListWrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}

.GridCell-metaList {
  display: flex;
}

.GridCell-metaList .Text {
  display: flex;
  align-items: center;
}

.GridCell-metaList .Text::before {
  content: '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-m);
  height: var(--spacing-m);
  border-radius: 50%;
  background: var(--secondary);
  margin: 0 var(--spacing);
}

.GridCell-metaList .Text:first-child::before {
  display: none;
}

.GridCell--metaList ul li:first-child {
  margin-left: 0;
}

/* .GridCell-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--spacing);
}

.Image {
    z-index: 0;
    height: 100%;
    width: 100%;
} */

/** Header **/

/** Table-header **/

.Header {
  background: var(--white);
  padding: var(--spacing-l);
  border-bottom: var(--border);
}

.Header-content {
  display: flex;
}

.Header-content--bottom {
  align-items: center;
  justify-content: space-between;
}

.Header-search {
  width: var(--spacing-9);
  margin-bottom: var(--spacing-2);
}

.Header-label {
  display: flex;
  flex-grow: 1;
  align-items: center;
}

.Header-label .Checkbox {
  margin-right: var(--spacing);
}

.Header-dropdown {
  display: flex;
  margin-left: var(--spacing-m);
  margin-bottom: var(--spacing-2);
}

.Header-dropdown .Dropdown {
  margin: 0 var(--spacing-m);
}

.Header-draggableDropdown .Dropdown-wrapper {
  max-height: 200px;
  overflow-x: hidden;
}

.Header-filters {
  display: flex;
}
.Header-sorting {
  display: flex;
}

.Header-actions {
  margin-bottom: var(--spacing-2);
}
.Popover.Header-draggableDropdown {
  width: 273px;
}

.greenicon {
  color: var(--neem);
}
.redicon {
  color: var(--mirch);
}