Author: sergeyhalipov Date: 2007-08-01 12:52:51 -0400 (Wed, 01 Aug 2007) New Revision: 1987 Modified: trunk/sandbox/ui/scrollable-grid/src/main/resources/org/richfaces/renderkit/html/css/grid.xcss Log: Skinning for scrollable grid. Modified: trunk/sandbox/ui/scrollable-grid/src/main/resources/org/richfaces/renderkit/html/css/grid.xcss =================================================================== --- trunk/sandbox/ui/scrollable-grid/src/main/resources/org/richfaces/renderkit/html/css/grid.xcss 2007-08-01 16:52:51 UTC (rev 1986) +++ trunk/sandbox/ui/scrollable-grid/src/main/resources/org/richfaces/renderkit/html/css/grid.xcss 2007-08-01 16:52:51 UTC (rev 1987) @@ -1,272 +1,325 @@ +<?xml version="1.0" encoding="UTF-8"?> +<f:template + xmlns:f="http://jsf.exadel.com/template" + xmlns:u="http://jsf.exadel.com/template/util" + xmlns="http://www.w3.org/1999/xhtml"> -.dr-sgrid-sort-asc{ -background-image: url(/scrollable-grid-demo/a4j.res/org/richfaces/renderkit/html/images/sort_asc.gif.jsf);} -.dr-sgrid-sort-desc{ -background-image: url(/scrollable-grid-demo/a4j.res/org/richfaces/renderkit/html/images/sort_desc.gif.jsf);} -.dr-sgrid-hsep{ -background-image: url(/scrollable-grid-demo/a4j.res/org/richfaces/renderkit/html/images/grid-split.gif.jsf);}.dr-sgrid-sort-asc, .dr-sgrid-sort-desc { - width: 16px; - height: 6px; - background-position: 50% 50%; - background-repeat: no-repeat; -} - -.dr-sgrid-sort-icon { - position:absolute; - visibility: hidden; -} - -.dr-sgrid { - background-color: #ffffff;/*tableBackgroundColor*/ - padding: 0px 0px; - margin: 0px; - z-index:0; - border : 1px solid #C0C0C0; /*tableBorderWidth, tableBorderColor*/ -} - -/** - * --------------------------------------------- - * Grid Header declaration - * --------------------------------------------- - */ - -/** - * Header row - */ -.dr-sgrid-hr { - background-color: #4A75B5;/*headerBackgroundColor*/ - z-index:2; -} + <f:verbatim> -/** - * Header cell - */ -.dr-sgrid-hc { - -o-text-overflow: ellipsis; - text-overflow: ellipsis; - overflow: hidden; - color : #FFFFFF;/*headerTextColor*/ - font-weight: normal; - font-family: arial; /*generalFamilyFont*/ - font-size: 11px; /*generalSizeFont*/ - cursor: default; - box-sizing: border-box; - -moz-box-sizing: border-box; - -moz-outline: none; - -moz-user-focus: normal; - padding: 0px 0px; - white-space: nowrap; - border-bottom: 1px solid #C0C0C0; /*tableBorderWidth, tableBorderColor*/ - border-right: 1px solid #C0C0C0; /*tableBorderWidth, tableBorderColor*/ -} - -.dr-sgrid-hc .sort-asc, .dr-sgrid-hc .sort-desc { - background-position: right; - background-repeat: no-repeat; - width: 16px !important;; - position: absolute; -} - - -/** - * Header cells separator - */ -.dr-sgrid-hsep { -/* background-image: url(grid-split.gif);*/ - background-position: center; - background-repeat: repeat-y; - cursor: e-resize; - font-size: 1px; - top: 15%; - width: 6px; - height: 70%; - overflow: hidden; - position: absolute; - display: block; - white-space: nowrap; - z-index: 60; -} -.dr-sgrid-hsplit { - width:1px; - border-right:1px dashed #E5973E; /*tipBorderColor*/ - cursor: col-resize; - z-index: 100; -} - -/** - * Header cell body - */ -.dr-sgrid-hcbody { - cursor: default; - padding: 3px 5px; - white-space: nowrap; - position: relative; - display: block; - overflow: hidden; - width: 100%; - font-weight: normal; - font-family: arial; /*generalFamilyFont*/ - font-size: 11px; /*generalSizeFont*/ -} - -.dr-sgrid-fb{ - z-index: 50; -} -.dr-sgrid-nb { - z-index: 20; -} - -/** - * --------------------------------------------- - * Grid Footer declaration - * --------------------------------------------- - */ - -/** - * Footer row - */ -.dr-sgrid-fr { - background-color: #F1F1F1; /*tableSubfooterBackgroundColor*/ - font-weight: normal; - font-family: arial; /*generalFamilyFont*/ - font-size: 11px; /*generalSizeFont*/ - height: 22px; - border-top: 1px solid #cbc7b8; -} - -/** - * Footer cell - */ -.dr-sgrid-fc { - -o-text-overflow: ellipsis; - text-overflow: ellipsis; - overflow: hidden; - font-weight: normal; - font-family: arial; /*generalFamilyFont*/ - font-size: 11px; /*generalSizeFont*/ - cursor: default; - box-sizing: border-box; - -moz-box-sizing: border-box; - -moz-outline: none; - -moz-user-focus: normal; - border-right: 1px solid #c0c0c0; /*tableBorderColor*/ - height:21px !important; - padding: 0px 0px; - white-space: nowrap; -} - -/** - * Footer cell body - */ -.dr-sgrid-fcbody { - cursor: default; - font-weight: normal; - font-family: arial; /*generalFamilyFont*/ - font-size: 11px; /*generalSizeFont*/ - padding: 3px 5px; - white-space: nowrap; - position: relative; - display: block; - overflow: hidden; -} - -.dr-sgrid-fcbody1{ - cursor: default; - font-weight: normal; - font-family: arial; /*generalFamilyFont*/ - font-size: 11px; /*generalSizeFont*/ - padding: 0px 0px; - white-space: nowrap; - position: relative; - display: block; - overflow: hidden; - width: 100%; -} - -/** - * --------------------------------------------- - * Body styles - * --------------------------------------------- - */ - -/** - * Body cell declaration - * dr-sgrid-bc - reqired - * dr-sgrid-bcDef - default, used if no custom styles defined in body template - */ -.dr-sgrid-bc { - box-sizing: border-box; - -moz-box-sizing: border-box; - -moz-outline: none; - -moz-user-focus: normal; - cursor: default; - border-right: 1px solid #C0C0C0; /*tableBorderColor*/ - border-bottom: 1px solid #C0C0C0; /*tableBorderColor*/ -} - -/** - * Body row style - */ -.dr-sgrid-ho { - position: absolute; - height: 10px; - width: 10px; -} - -.dr-sgrid-rb { - font-weight: normal; - font-family: arial; /*generalFamilyFont*/ - font-size: 11px; /*generalSizeFont*/ - white-space: nowrap; - box-sizing: border-box; - -moz-box-sizing: border-box; -} - -.dr-sgrid-row-selected { - background-color: #EAF0F8; /*additionalBackgroundColor*/ -} - -.dr-sgrid-row-active { - background-color: #C6D6EA; /*C6D6EA*/ -} - -.dr-sgrid-bcbody { - cursor: default; - font-weight: normal; - font-family: arial; /*generalFamilyFont*/ - font-size: 11px; /*generalSizeFont*/ - white-space: nowrap; - padding: 0px 0px; - position: relative; - display: block; - overflow: hidden; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; - -moz-box-sizing: border-box; - -moz-outline: none; - width: 100%; - height: 20px; -} - -/** - * Helper classes for grid template -*/ -.dr-sgrid-substrate { - z-index: 48; - filter:Alpha(opacity=0); - position:absolute; - top:0px; - left:0px; - display:block; -} - -.dr-sgrid-tmplbox { - display: block; - float:left; -} - -.dr-sgrid-inlinebox { - position: relative; - display: block; - overflow: hidden; -} \ No newline at end of file + .dr-sgrid-sort-asc, .dr-sgrid-sort-desc { + width: 16px; + height: 6px; + background-position: 50% 50%; + background-repeat: no-repeat; + } + + .dr-sgrid-sort-icon { + position:absolute; + visibility: hidden; + } + + .dr-sgrid { + padding: 0px 0px; + margin: 0px; + z-index:0; + border-style: solid; + } + + /** + * --------------------------------------------- + * Grid Header declaration + * --------------------------------------------- + */ + + /** + * Header row + */ + .dr-sgrid-hr { + z-index:2; + } + + /** + * Header cell + */ + .dr-sgrid-hc { + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + overflow: hidden; + font-weight: normal; + cursor: default; + box-sizing: border-box; + -moz-box-sizing: border-box; + -moz-outline: none; + -moz-user-focus: normal; + padding: 0px 0px; + white-space: nowrap; + border-bottom-style: solid; + border-right-style: solid; + } + + .dr-sgrid-hc .sort-asc, .dr-sgrid-hc .sort-desc { + background-position: right; + background-repeat: no-repeat; + width: 16px !important;; + position: absolute; + } + + + /** + * Header cells separator + */ + .dr-sgrid-hsep { + /* background-image: url(grid-split.gif);*/ + background-position: center; + background-repeat: repeat-y; + cursor: e-resize; + font-size: 1px; + top: 15%; + width: 6px; + height: 70%; + overflow: hidden; + position: absolute; + display: block; + white-space: nowrap; + z-index: 60; + } + .dr-sgrid-hsplit { + width:1px; + border-right: 1px dashed; + cursor: col-resize; + z-index: 100; + } + + /** + * Header cell body + */ + .dr-sgrid-hcbody { + cursor: default; + padding: 3px 5px; + white-space: nowrap; + position: relative; + display: block; + overflow: hidden; + width: 100%; + font-weight: normal; + } + + .dr-sgrid-fb{ + z-index: 50; + } + .dr-sgrid-nb { + z-index: 20; + } + + /** + * --------------------------------------------- + * Grid Footer declaration + * --------------------------------------------- + */ + + /** + * Footer row + */ + .dr-sgrid-fr { + font-weight: normal; + height: 22px; + border-top: 1px solid #cbc7b8; /* //TODO Which skin parameter must be here? */ + } + + /** + * Footer cell + */ + .dr-sgrid-fc { + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + overflow: hidden; + font-weight: normal; + cursor: default; + box-sizing: border-box; + -moz-box-sizing: border-box; + -moz-outline: none; + -moz-user-focus: normal; + border-right: 1px solid; + height:21px !important; + padding: 0px 0px; + white-space: nowrap; + } + + /** + * Footer cell body + */ + .dr-sgrid-fcbody { + cursor: default; + font-weight: normal; + padding: 3px 5px; + white-space: nowrap; + position: relative; + display: block; + overflow: hidden; + } + + .dr-sgrid-fcbody1{ + cursor: default; + font-weight: normal; + padding: 0px 0px; + white-space: nowrap; + position: relative; + display: block; + overflow: hidden; + width: 100%; + } + + /** + * --------------------------------------------- + * Body styles + * --------------------------------------------- + */ + + /** + * Body cell declaration + * dr-sgrid-bc - reqired + * dr-sgrid-bcDef - default, used if no custom styles defined in body template + */ + .dr-sgrid-bc { + box-sizing: border-box; + -moz-box-sizing: border-box; + -moz-outline: none; + -moz-user-focus: normal; + cursor: default; + border-right: 1px solid; + border-bottom: 1px solid; + } + + /** + * Body row style + */ + .dr-sgrid-ho { + position: absolute; + height: 10px; + width: 10px; + } + + .dr-sgrid-rb { + font-weight: normal; + white-space: nowrap; + box-sizing: border-box; + -moz-box-sizing: border-box; + } + + .dr-sgrid-row-active { + background-color: #C6D6EA; /* //TODO Which skin parameter must be here? */ + } + + .dr-sgrid-bcbody { + cursor: default; + font-weight: normal; + white-space: nowrap; + padding: 0px 0px; + position: relative; + display: block; + overflow: hidden; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + -moz-box-sizing: border-box; + -moz-outline: none; + width: 100%; + height: 20px; + } + + /** + * Helper classes for grid template + */ + .dr-sgrid-substrate { + z-index: 48; + filter:Alpha(opacity=0); + position:absolute; + top:0px; + left:0px; + display:block; + } + + .dr-sgrid-tmplbox { + display: block; + float:left; + } + + .dr-sgrid-inlinebox { + position: relative; + display: block; + overflow: hidden; + } + </f:verbatim> + + <u:selector name=".dr-sgrid"> + <u:style name="background-color" skin="tableBackgroundColor" /> + <u:style name="border-color" skin="tableBorderColor" /> + <u:style name="border-width" skin="tableBorderWidth" /> + </u:selector> + <u:selector name=".dr-sgrid-hr"> + <u:style name="background-color" skin="headerBackgroundColor" /> + </u:selector> + <u:selector name=".dr-sgrid-hc"> + <u:style name="color" skin="headerTextColor" /> + <u:style name="font-family" skin="generalFamilyFont" /> + <u:style name="font-size" skin="generalSizeFont" /> + <u:style name="border-bottom-width" skin="tableBorderWidth" /> + <u:style name="border-bottom-color" skin="tableBorderColor" /> + <u:style name="border-right-width" skin="tableBorderWidth" /> + <u:style name="border-right-color" skin="tableBorderColor" /> + </u:selector> + <u:selector name=".dr-sgrid-hsplit"> + <u:style name="border-right-color" skin="tipBorderColor" /> + </u:selector> + <u:selector name=".dr-sgrid-hcbody"> + <u:style name="font-family" skin="generalFamilyFont" /> + <u:style name="font-size" skin="generalSizeFont" /> + </u:selector> + <u:selector name=".dr-sgrid-fr"> + <u:style name="background-color" skin="tableSubfooterBackgroundColor" /> + <u:style name="font-family" skin="generalFamilyFont" /> + <u:style name="font-size" skin="generalSizeFont" /> + </u:selector> + <u:selector name=".dr-sgrid-fc"> + <u:style name="border-right-color" skin="tableBorderColor" /> + <u:style name="font-family" skin="generalFamilyFont" /> + <u:style name="font-size" skin="generalSizeFont" /> + </u:selector> + <u:selector name=".dr-sgrid-fcbody"> + <u:style name="font-family" skin="generalFamilyFont" /> + <u:style name="font-size" skin="generalSizeFont" /> + </u:selector> + <u:selector name=".dr-sgrid-fcbody1"> + <u:style name="font-family" skin="generalFamilyFont" /> + <u:style name="font-size" skin="generalSizeFont" /> + </u:selector> + <u:selector name=".dr-sgrid-bc"> + <u:style name="border-right-color" skin="tableBorderColor" /> + <u:style name="border-bottom-color" skin="tableBorderColor" /> + </u:selector> + <u:selector name=".dr-sgrid-rb"> + <u:style name="font-family" skin="generalFamilyFont" /> + <u:style name="font-size" skin="generalSizeFont" /> + </u:selector> + <u:selector name=".dr-sgrid-row-selected"> + <u:style name="background-color" skin="additionalBackgroundColor" /> + </u:selector> + <u:selector name=".dr-sgrid-bcbody"> + <u:style name="font-family" skin="generalFamilyFont" /> + <u:style name="font-size" skin="generalSizeFont" /> + </u:selector> + <u:selector name=".dr-sgrid-sort-asc"> + <u:style name="background-image"> + <f:resource f:key="/org/richfaces/renderkit/html/images/sort_asc.gif"/> + </u:style> + </u:selector> + <u:selector name=".dr-sgrid-sort-desc"> + <u:style name="background-image"> + <f:resource f:key="/org/richfaces/renderkit/html/images/sort_desc.gif"/> + </u:style> + </u:selector> + <u:selector name=".dr-sgrid-hsep"> + <u:style name="background-image"> + <f:resource f:key="/org/richfaces/renderkit/html/images/grid-split.gif"/> + </u:style> + </u:selector> +</f:template>