pm-controls/source/app/controls/components/grid/grid.css

ProModel Controls

.grid {
    display: flex;
    /*overflow: auto;*/
    flex-direction: column;
    height: 100%;
    /*padding-top: 4px;*/
}

.page-container {
    height: 600px;
    width: 600px;
    padding: 10px;
}

.grid-container {
    overflow: hidden;    
    /*overflow-y: auto;
    overflow-x: auto;  */
    /*height: 100%;*/
    position: relative;
    height: 100%;
    width: 100%;
}

.grid-border-container {
    border: 1px solid #C0C0C0;
}

.grid-left-border-container {
    border-left: 1px solid #C0C0C0;
}

.grid-table-top-left-corner {
    flex: 0 0 30px;
    background: #F3F3F3;
}

.grid-table-bottom-left-corner {
    flex: 0 0 30px;
    background: #F3F3F3;
}

.grid-table-bottom-right-corner {
    flex: 0 0 30px;
    background: #F3F3F3;
}

.grid-table-top-right-corner {
    background: #F3F3F3;
    width: 100%;
}

.grid-table-top-left-inner-corner {    
    border-right: 1px solid #C0C0C0;
    border-bottom: 1px solid #C0C0C0;
    height: 100%;
    width: 100%;
}

.grid-table-bottom-left-inner-corner {
    border-right: 1px solid #C0C0C0;
}

.grid-table-footer-left-inner-corner {
    border-right: 1px solid #C0C0C0;
    border-top: 1px solid #C0C0C0;
    height: 100%;
    width: 100%;
}

.grid-table-top-right-inner-corner {
    height: 100%;
    width: 100%;
}

.grid-table-bottom-right-inner-corner {
    border-right: 1px solid #C0C0C0;
}

.grid-table-container {
    /*background-color: orange;*/
    /*overflow-y: auto;*/
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow-x: auto;
    
    padding-bottom: 18px;
    padding-right: 18px;
}

.grid-table-horizontal-shim {
    position: absolute;
    right: 0px;
    background-color: #f3f3f3;
    height: 18px;
    bottom: 0px;
    left: 0px;

    border-top: 1px solid #C0C0C0;
    display: flex;
}

.grid-table-vertical-shim {
    position: absolute;
    right: 0px;
    width: 18px;
    top: 0px;
    bottom: 0px;

    display: flex;
    flex-direction: row;
    border-left: 1px solid #C0C0C0;
}

.grid-table-scrollbar-vertical-container {
    right: 0px;
    overflow-x: hidden;
    overflow-y: scroll;
    position: absolute;
    top: 23px;
    bottom: 18px;
    border-top: 1px solid #C0C0C0;
}

.grid-table-scrollbar-vertical {
    width: 1px;
}

.grid-table-scrollbar-horizontal-container {
    left: 30px;
    overflow-x: auto;
    overflow-y: hidden;
    position: absolute;
    bottom: 0px;
    right: 17px;
    height: 18px;

    display: flex;
    align-items: center;
    border-right: 1px solid #C0C0C0;
}

.grid-table-scrollbar-horizontal-action-panel {
    flex: 1;
    display: flex;
    align-items: center;
}

.grid-table-action-panel {
    font-size: 11px;
    padding: 0px 6px;
    font-weight: 600;
}

.grid-table-scrollbar-horizontal-scroll-panel {
    flex: 2 1 0px;
    overflow-x: scroll;
}

.grid-table-scrollbar-horizontal {
    height:1px;
}

.grid-table-column-header {
    overflow: hidden;
    background: #f3f3f3;
    display: flex;
    flex: 1;
    border-bottom: 1px solid #c0c0c0;
}

.grid-table-column-header-cell {
    color: #555;
    font-weight: 600;
    padding-left: 4px; 
    padding-right: 4px;
}

.grid-table-column-footer {
    overflow: hidden;
    background: #f3f3f3;
    display: flex;
    flex: 1;
    border-top: 1px solid #c0c0c0;
}

.grid-table-columns-container {
    display: flex;
    height: 24px;
    flex: 0 0 24px;
}

.grid-table-columns {    
    /*padding-left: 30px;*/
    /*height: 24px;*/
    background: #f3f3f3;
    display: flex;
}

.grid-table-columns-header-frozen {
    /*height: 24px;*/
    background: #f3f3f3;
    display: flex;

    border-bottom-style: solid; 
    border-bottom-width: 1px;
    border-bottom-color: #c0c0c0;
}

.grid-table-columns-footer-frozen {
    /*height: 24px;*/
    background: #f3f3f3;
    display: flex;
    border-top: 1px solid #c0c0c0;
}

.grid-table-column-cell-default {
    width: 100px;
    flex: 0 0 100px;
    font-size: 10px;

    /* border-left: 1px solid #c0c0c0; */
    /* border-right: 1px solid #c0c0c0; */
    /*border-top: 1px solid #c0c0c0;*/
    /*border-bottom: 1px solid #c0c0c0;*/
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.grid-table-column-cell {
    border-right-style: solid; 
    border-right-width: 1px;
    border-right-color: #c0c0c0;
}

.grid-table-row-container {
    display: flex;
    overflow-y: hidden;
    /*height: 400px;*/
    /*overflow: auto;*/
}

.grid-table-rows {
    overflow-x: hidden;
    overflow-y: hidden;
    
    position: relative; 
    display:block; 
    width:100%;
}
.grid-table-row {
    display: flex;
    /*padding-left: 30px;*/
}

.grid-table-hierarchy-cell {
    display: flex;
}

.grid-table-cell {
    flex: 1;
    display: flex;
}

.grid-table-row-cell-default {
    position: relative;

    background-color: transparent;
    /*flex: 0 0 100px;*/
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100px;
    font-size: 12px;

    border-bottom-style: solid; 
    border-bottom-width: 1px;
    border-bottom-color: #c0c0c0;

    /* border-right: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0; */
    height: 30px;
    display: flex;
    align-items: center;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

.grid-table-row-cell {
    border-right-style: solid; 
    border-right-width: 1px;
    border-right-color: #c0c0c0;
}

.grid-table-row-cell-selected {
    background-color: gray;
}

.grid-table-row-count {
    background: #f3f3f3;
    display: flex;
    flex-direction: column;
    /*width: 30px;*/
    flex: 0 0 30px;
    position: relative; 
    display: block; 
    width: 100%;
}
.grid-table-row-frozen {
    flex-basis: 0;
    flex-grow:  0;
    flex-shrink: 0;
    position: relative;
    display: block;
    overflow-x: hidden;
    overflow-y: hidden;
}

.grid-table-row-count-cell {
    font-size: 9px;
    /*border-left: 1px solid #c0c0c0;*/
    border-bottom: 1px solid #c0c0c0;
    border-right: 1px solid #c0c0c0;    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    width: 30px;
}

.grid-table-column-cell-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    font-size: 12px;
    overflow-x: hidden;
    overflow-y: hidden;
}

.cell-is-selected {
    border: 2px solid #4285F4;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    pointer-events: none;
}

.column-filter {
    background-color: #EEEEEE;
}

.row-is-selected {
    border: 2px solid #4285F4;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    pointer-events: none;
}

.regular-row-is-selected {
    border-right: 2px solid #4285F4;
    border-top: 2px solid #4285F4;
    border-bottom: 2px solid #4285F4;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    pointer-events: none;
}

.frozen-row-is-selected {
    border-left: 2px solid #4285F4;
    border-top: 2px solid #4285F4;
    border-bottom: 2px solid #4285F4;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    pointer-events: none;
}

.row-is-highlighted {
    border-radius: 4px;
    /* margin: 2px; */
    background-color: #3bc95c;
    /* height: 100%; */
    /* width: 100%; */
    position: absolute;
    top: 1px;
    left: 1px;
    pointer-events: none;
    right: 1px;
    bottom: 2px;
}

.cell-alignment-left {
    justify-content: flex-start;
    padding-left: 4px;
}

.cell-alignment-center {
    justify-content: center;
}

.cell-alignment-right {
    justify-content: flex-end;
    padding-right: 4px;
}

.row-mouse-over-default:hover {
    background-color: #EEEEEE;;
}

.row-mouse-over-default {

}

.cell-mouse-over-default:hover {
    background-color: #EEEEEE;;
}

.cell-mouse-over-default {

}