d339fea2d9
New setup supports: * Column hiding * Column reordering * Column sorting * Column resizing * Fit columns to the div width All these options are stored on the view state and applied when initializing the view if necessary. Now also utilize slickgrid view as default grid view.
162 lines
3.3 KiB
CSS
162 lines
3.3 KiB
CSS
/*
|
|
IMPORTANT:
|
|
In order to preserve the uniform grid appearance, all cell styles need to have padding, margin and border sizes.
|
|
No built-in (selected, editable, highlight, flashing, invalid, loading, :focus) or user-specified CSS
|
|
classes should alter those!
|
|
*/
|
|
|
|
.recline-slickgrid-container {
|
|
border-left: 1px solid #ccc;
|
|
}
|
|
|
|
.slick-header-columns .slick-header-column {
|
|
background-color: #e6e6e6;
|
|
background-repeat: no-repeat;
|
|
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
|
|
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
|
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
|
|
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
|
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
|
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
|
|
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
|
|
color: #333;
|
|
font-weight: bold;
|
|
border-right: 1px solid #ccc;
|
|
border-top: 1px solid #ccc;
|
|
border-bottom: 1px solid #bbb;
|
|
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
|
|
.slick-header-column:hover, .slick-header-column-active {
|
|
}
|
|
|
|
.slick-headerrow {
|
|
background: #fafafa;
|
|
}
|
|
|
|
.slick-headerrow-column {
|
|
background: #fafafa;
|
|
border-bottom: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.slick-row.ui-state-active {
|
|
background: #F5F7D7;
|
|
}
|
|
|
|
.slick-row {
|
|
position: absolute;
|
|
background: white;
|
|
border: 0px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.slick-row.selected {
|
|
z-index: 10;
|
|
background: #DFE8F6;
|
|
}
|
|
|
|
.slick-cell {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
}
|
|
|
|
.slick-group {
|
|
border-bottom: 2px solid silver;
|
|
}
|
|
|
|
.slick-group-toggle {
|
|
width: 9px;
|
|
height: 9px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.slick-group-toggle.expanded {
|
|
background: url(../images/collapse.gif) no-repeat center center;
|
|
}
|
|
|
|
.slick-group-toggle.collapsed {
|
|
background: url(../images/expand.gif) no-repeat center center;
|
|
}
|
|
|
|
.slick-group-totals {
|
|
color: gray;
|
|
background: white;
|
|
}
|
|
|
|
.slick-cell.selected {
|
|
background-color: beige;
|
|
}
|
|
|
|
.slick-cell.active {
|
|
border-color: gray;
|
|
border-style: solid;
|
|
}
|
|
|
|
.slick-sortable-placeholder {
|
|
background: silver !important;
|
|
}
|
|
|
|
.slick-row[row$="1"], .slick-row[row$="3"], .slick-row[row$="5"], .slick-row[row$="7"], .slick-row[row$="9"] {
|
|
background: #fafafa;
|
|
}
|
|
|
|
.slick-row.ui-state-active {
|
|
background: #F5F7D7;
|
|
}
|
|
|
|
.slick-row.loading {
|
|
opacity: 0.5;
|
|
filter: alpha(opacity = 50);
|
|
}
|
|
|
|
.slick-cell.invalid {
|
|
border-color: red;
|
|
}
|
|
|
|
.slick-contextmenu {
|
|
border-radius: 5px
|
|
}
|
|
|
|
.slick-contextmenu li {
|
|
clear: both;
|
|
height: 24px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.slick-contextmenu .divider {
|
|
cursor: default;
|
|
}
|
|
|
|
.slick-contextmenu > li:hover {
|
|
background-color: #0088cc;
|
|
}
|
|
|
|
.slick-contextmenu .divider:hover {
|
|
background-color: #E5E5E5;
|
|
}
|
|
|
|
.slick-contextmenu li:hover > label {
|
|
color: white;
|
|
}
|
|
|
|
.slick-contextmenu input {
|
|
float: left;
|
|
margin-left: 15px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.slick-contextmenu label {
|
|
float: left;
|
|
margin-right: 15px;
|
|
margin-left: 5px;
|
|
margin-top: 3px;
|
|
color: #555;
|
|
cursor: pointer;
|
|
}
|
|
|