react-ui-datagrid/css/Datagrid.css

React datagrid UI

/**
 * DataGrid
 */
.px-datagrid {
	display:block;
	width:100%;
	height:100%;
	position:relative;
	font-family:"Roboto", "Helvetica", "Arial", sans-serif;
}
.px-row-container >.px-datagrid {
}
.px-datagrid .px-datagrid-scrollbox {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:AppWorkspace;
	xborder:1px solid ThreeDlightShadow;
	overflow:scroll;
}
.px-datagrid .px-datagrid-container {
	position:relative;
	display:block;
}
.px-datagrid .px-datagrid-header {
	position:absolute;
	top:0;
/*	z-index:1024; */
	xbackground-color:WindowFrame;
    background-color:rgba(0, 0, 0, 0.04);
	xcolor:WindowText;
	xfont-weight:bold;
	box-sizing:border-box;
    color:rgba(0, 0, 0, 0.54);
    font-size:0.75rem;
    font-weight:500;
}
.px-datagrid .px-datagrid-header .px-datagrid-cols {
}
.px-datagrid .px-datagrid-header .px-datagrid-cols .px-datagrid-col {
	display:inline-block;
	line-height:42px;
	xborder-right:1px dotted ThreeDDarkShadow;
    padding-left: 8px;
    margin-right: -8px;
}
.px-datagrid .px-datagrid-header .px-datagrid-cols .px-datagrid-col:last-child {
	xborder-right:1px solid ThreeDlightShadow;
}
.px-datagrid .px-datagrid-body {
	padding-top:42px;
	box-sizing:border-box;
	color:rgba(0, 0, 0, 0.87);
    font-size:0.8125rem;
}
.px-datagrid .px-datagrid-body .px-datagrid-rows {
}
.px-datagrid .px-datagrid-body .px-datagrid-rows .px-datagrid-row {
	display:block;
	height:42px;
	cursor:default;
}
.px-datagrid.px-datagrid-row-select .px-datagrid-body .px-datagrid-rows .px-datagrid-row {
	cursor:pointer;
}
.px-datagrid.px-datagrid-row-select .px-datagrid-body .px-datagrid-rows .px-datagrid-row:hover {
	background-color:Highlight;
}
.px-datagrid.px-datagrid-row-select .px-datagrid-body .px-datagrid-rows .px-datagrid-row.selected div {
	background-color:navy;
	color:Window;
}
.px-datagrid.px-datagrid-row-select .px-datagrid-body .px-datagrid-rows .px-datagrid-row.selected:hover {
	color:Window;
}
.px-datagrid .px-datagrid-body .px-datagrid-rows .px-datagrid-row >div {
	float:left;
	line-height:42px;
	height:42px;
	text-overflow:ellipsis;
	overflow:hidden;
	white-space:nowrap;
	xborder-right:1px solid ThreeDlightShadow;
	xborder-bottom:1px solid ThreeDlightShadow;
	border-bottom:1px solid rgba(224, 224, 224, 1);
	margin-bottom:-1px;
}
.px-datagrid .px-datagrid-body .px-datagrid-rows .px-datagrid-row >div {
	text-overflow:ellipsis;
}
.px-datagrid .px-datagrid-body .px-datagrid-rows .px-datagrid-row >div >span {
	padding:0 8px 0 8px;
}


/**
 * Additional cell style
 */
.px-datagrid .px-datagrid-body .px-datagrid-rows .px-datagrid-row >div.important >span,
.px-datagrid .px-datagrid-body .px-datagrid-rows .px-datagrid-row >div.important >div {
	font-weight:bold;
}
.px-datagrid .px-datagrid-body .px-datagrid-rows .px-datagrid-row >div.align-right,
.px-datagrid .px-datagrid-body .px-datagrid-rows .px-datagrid-row >div.px-control-text.align-right >div >input {
	text-align:right;
}
.px-datagrid .px-control-text,
.px-datagrid .px-control-date,
.px-datagrid .px-control-select {
	background-color:InfoBackground;
}


/**
 * Data grid text input control
 */
.px-datagrid .ui.input {
	height:auto;
}
.px-datagrid .ui.input >input {
	width:100%;
	height:30px;
	padding-left:8px;
	padding-right:8px;
	border:0;
	background-color:transparent;
	color:inherit;	
}

.px-datagrid .ui.input >input:focus,
.px-datagrid .ui.input.focus >input {
	background-color:transparent;
	color:inherit;	
}
.px-datagrid .px-datagrid-row.selected .ui.input >input,
.px-datagrid .px-datagrid-row.selected .ui.input >input:focus {
	background-color:transparent;
	color:Window;	
}


/**
 * Data grid date control
 */
.px-datagrid .px-datepicker {
	width:100%;
	padding:0;
}
.px-datagrid .px-datepicker >div {
	width:100%;
}
.px-datagrid .px-datepicker >i {
	top:0px;
	color:inherit;
	opacity:0.7;
}
.px-datagrid .px-datepicker >i.icon {
	margin-right:0;
}
.px-datagrid input.px-datepicker-input {
	width:100%;
	height:30px;
	border:0;
	background-color:transparent;
	color:inherit;
}
.px-datagrid .Select-control {
	border:0;
	background-color:transparent;
}
.px-datagrid .Select--single > .Select-control .Select-value {
	line-height:26px !important;
}
.px-datagrid .ui.button {
	width:100%;
	height:29px;
	border-radius:0;
}