Author: admitriev Date: 2010-10-29 12:45:44 -0400 (Fri, 29 Oct 2010) New Revision: 19789 Modified: management/design-4x/fileUpload/fileUpload.html Log: Modified: management/design-4x/fileUpload/fileUpload.html =================================================================== --- management/design-4x/fileUpload/fileUpload.html 2010-10-29 16:44:27 UTC (rev 19788) +++ management/design-4x/fileUpload/fileUpload.html 2010-10-29 16:45:44 UTC (rev 19789) @@ -8,271 +8,259 @@ <style> body{margin : 20px} -.rf_upd_font{ font-family : verdana /*generalFamilyFont*/ ; font-size : 11px/*generalSizeFont*/;} -.rf_upd_itm{border-bottom:1px solid #c0c0c0 /*tableBorderColor*/;} +.rf-upd-itm{ display : inline-block; border-bottom:1px solid #c0c0c0 /*tableBorderColor*/;} -.rf_upd_lst_width{ width:400px;} -.rf_upd_lst_decor{ border:1px solid #c0c0c0 /*tableBorderColor*/; background : #FFFFFF /*tableBackgroundColor*/;} -.rf_upd_lst_oflw{height : 210px; overflow : auto; overflow-x : hidden;} -.rf_upd_name{ padding : 2px 0px 2px 0px; font-family : verdana /*generalFamilyFont*/ ; font-size : 11px/*generalSizeFont*/;word-wrap: break-word;} -.rf_upd_stb{ padding : 5px 0px 2px 0px;} -.rf_upd_sts{ padding : 2px 0px 0px 0px; font-family : verdana /*generalFamilyFont*/ ; font-size : 11px/*generalSizeFont*/;} -.rf_upd_lnk{ text-align : center; float : right; line-height : 150%; width : 20%; margin : 9px 20px 0px 0px; font-family : verdana /*generalFamilyFont*/ ; font-size : 11px/*generalSizeFont*/;} -.rf_upd_fl {width : 70%; padding : 10px 0px 10px 10px;} +.rf-upd-lst-width{ display : inline-block; width:400px;} +.rf-upd-lst-decor{ display : inline-block; border:1px solid #c0c0c0 /*tableBorderColor*/; background : #FFFFFF /*tableBackgroundColor*/;} +.rf-upd-lst-oflw{ display : inline-block; height : 210px; overflow : auto; overflow-x : hidden;} +.rf-upd-name{ display : block; padding : 2px 0px 2px 0px; font-family : verdana /*generalFamilyFont*/ ; font-size : 11px/*generalSizeFont*/;word-wrap: break-word;} +.rf-upd-stb{ display : block; padding : 5px 0px 2px 0px;} +.rf-upd-sts{ display : block; padding : 2px 0px 0px 0px; font-family : verdana /*generalFamilyFont*/ ; font-size : 11px/*generalSizeFont*/;} +.rf-upd-lnk{ display : inline-block; text-align : center; float : right; line-height : 150%; width : 20%; margin : 9px 20px 0px 0px; font-family : verdana /*generalFamilyFont*/ ; font-size : 11px/*generalSizeFont*/;} +.rf-upd-fl { display : inline-block; width : 70%; padding : 10px 0px 10px 10px;} -.rf_upd_anc{ color : #0078D0/*generalLinkColor*/;} +.rf-upd-anc{ color : #0078D0/*generalLinkColor*/;} -.rf_upd_tbr_decor{ background : #EAF0F8 /*additionalBackgroundColor*/;border-bottom:1px solid #c0c0c0 /*tableBorderColor*/;border-top:1px solid #FFFFFF /*tableBackgroundColor*/;border-left:1px solid #FFFFFF /*tableBackgroundColor*/;padding : 2px} +.rf-upd-tbr-decor{ display : block; background : #EAF0F8 /*additionalBackgroundColor*/;border-bottom:1px solid #c0c0c0 /*tableBorderColor*/;border-top:1px solid #FFFFFF /*tableBackgroundColor*/;border-left:1px solid #FFFFFF /*tableBackgroundColor*/;padding : 2px} -.rf_upd_bar_extr{height : 7px; border : 1px solid #c0c0c0 /*panelBorderColor*/;} -.rf_upd_bar_uploaded{height : 7px; width : 70%; height : 100%; background : #FF9409 /**/; background-image : url(images/bg_ProgressBar_perm.gif);background-repeat : repeat-x; font-size : 0px;} -.rf_upd_bar_del{height : 7px; width : 40%; height : 100%; background : #FF9409 /**/; background-image : url(images/bg_RegressBar_perm.gif);background-repeat : repeat-x; font-size : 0px;} -.rf_upd_bar_shell{height : 7px; width : 100%; height : 8; background : #F1F1F1/*tableSubfooterBackgroundColor*/;} +.rf-upd-bar-extr{ display : block; height : 7px; border : 1px solid #c0c0c0 /*panelBorderColor*/;} +.rf-upd-bar-uploaded{ display : block; height : 7px; width : 70%; height : 100%; background : #FF9409 /**/; background-image : url(images/bg_ProgressBar_perm.gif);background-repeat : repeat-x; font-size : 0px;} +.rf-upd-bar-del{ display : block; height : 7px; width : 40%; height : 100%; background : #FF9409 /**/; background-image : url(images/bg_RegressBar_perm.gif);background-repeat : repeat-x; font-size : 0px;} +.rf-upd-bar-shell{ display : block; height : 7px; width : 100%; height : 8; background : #F1F1F1/*tableSubfooterBackgroundColor*/;} -.rf_upd_btn_brd{ +.rf-upd-btn{ + background : url(images/bg_header.png) /*from additionalBackgroundColor to trimColor*/ top left #C6D6EA /*trimColor*/ repeat-x; + cursor : pointer; + padding : 1px; border : 1px solid #C0C0C0; /*tableBorderColor*/ margin : 2px; } -.rf_upd_btn{ - background : url(images/bg_header.png) /*from additionalBackgroundColor to trimColor*/ top left #C6D6EA /*trimColor*/ repeat-x; - cursor : pointer; - padding : 2px; -} -.rf_upd_btn_light{ +.rf-upd-btn-light{ background : url(images/bg_header.png) /*from additionalBackgroundColor to headerGradientColor*/ top left #C6D6EA /*trimColor*/ repeat-x; border : 1px solid #E79A00; /*selectControlColor*/ cursor : pointer; padding : 1px; + margin : 2px; } -.rf_upd_btn_dis{ +.rf-upd-btn-dis{ background :#f1f1f1 /*trimColor*/ repeat-x; cursor : pointer; padding : 2px; } -.rf_upd_btn_press{ +.rf-upd-btn-press{ background : url(images/bg_press.png) /*from additionalBackgroundColor to trimColor*/ top left repeat-x #EAF0F8; /* additionalBackgroundColor*/ - border : 1px solid #E79A00; /*selectControlColor*/ - padding : 2px 0px 0px 2px; + cursor : pointer; + padding : 1px; + border : 1px solid #C0C0C0; /*tableBorderColor*/ + margin : 2px; } -a.rf_upd_btn_sel{ - text-decoration : none; - color : #000000; /*generalTextColor*/ - display : block; -} -.rf_upd_btn_cnt{ - padding : 2px 6px 2px 3px; - text-align : left; - white-space : nowrap; -} -.rf_upd_ico{ - vertical-align: middle; - margin-right : 3px; -} -.rf_upd_pdng { padding : 10px 0px 10px 10px;} -.rf_upd_ico{background-position : 0px 50%; background-repeat : no-repeat; padding-left : 19px} -.rf_upd_ico_add{background-image : url(images/ico_add.gif)} -.rf_upd_ico_add_dis{background-image : url(images/ico_add_dis.gif); color:#C0C0C0; /*tableBorderColor*/} +.rf-upd-btn-cnt{ display : inline-block; padding : 2px 6px 2px 3px; text-align : left; white-space : nowrap;} -.rf_upd_ico_start{background-image : url(images/ico_start.gif)} -.rf_upd_ico_start_dis{background-image : url(images/ico_start_dis.gif); color:#C0C0C0; /*tableBorderColor*/} +.rf-upd-ico{ display : inline-block; background-repeat : no-repeat; padding-left : 19px; font-family : verdana /*generalFamilyFont*/ ; font-size : 11px/*generalSizeFont*/;} +.rf-upd-ico-add{ display : inline-block; background-image : url(images/ico_add.gif)} +.rf-upd-ico-add-dis{ display : inline-block; background-image : url(images/ico_add_dis.gif); color:#C0C0C0; /*tableBorderColor*/} -.rf_upd_ico_stop{background-image : url(images/ico_stop.gif)} +.rf-upd-ico-start{ display : inline-block; background-image : url(images/ico_start.gif)} +.rf-upd-ico-start-dis{ display : inline-block; background-image : url(images/ico_start_dis.gif); color:#C0C0C0; /*tableBorderColor*/} -.rf_upd_ico_clear{background-image : url(images/ico_clear.gif)} -.rf_upd_ico_clear_dis{background-image : url(images/ico_clear_dis.gif); color:#C0C0C0; /*tableBorderColor*/} +.rf-upd-ico-stop{ display : inline-block; background-image : url(images/ico_stop.gif)} +.rf-upd-ico-clear{ display : inline-block; background-image : url(images/ico_clear.gif)} +.rf-upd-ico-clear-dis{ display : inline-block; background-image : url(images/ico_clear_dis.gif); color:#C0C0C0; /*tableBorderColor*/} + </style> + + </head> <body> -<div class="rf_upd_lst_width rf_upd_lst_decor"> - <table class="rf_upd_lst_width" border="0" cellpadding="0" cellspacing="0"> - <tr> - <td class="rf_upd_tbr_decor rf_upd_lst_width"> - <div class="rf_upd_btn_brd" style=" float:left"><div class="rf_upd_btn rf_upd_font" onmouseover="this.className='rf_upd_btn_light rf_upd_font'" onmousedown="this.className='rf_upd_btn_press rf_upd_font'" onmouseup="this.className='rf_upd_btn rf_upd_font'" onmouseout="this.className='rf_upd_btn rf_upd_font'"><a href="#" class="rf_upd_btn_sel"><div class="rf_upd_btn_cnt rf_upd_font rf_upd_ico rf_upd_ico_add">Add...</div></a></div></div> - <div class="rf_upd_btn_brd" style=" float:left"><div class="rf_upd_btn_dis rf_upd_font" onmouseover="this.className='rf_upd_btn_light rf_upd_font'" onmousedown="this.className='rf_upd_btn_press rf_upd_font'" onmouseup="this.className='rf_upd_btn rf_upd_font'" onmouseout="this.className='rf_upd_btn rf_upd_font'"><a href="#" class="rf_upd_btn_sel"><div class="rf_upd_btn_cnt rf_upd_font rf_upd_ico rf_upd_ico_start_dis"><b>Upload</b></div></a></div></div> - <!--div class="rf_upd_btn_brd" style=" float:left"><div class="rf_upd_btn rf_upd_font" onmouseover="this.className='rf_upd_btn_light rf_upd_font'" onmousedown="this.className='rf_upd_btn_press rf_upd_font'" onmouseup="this.className='rf_upd_btn rf_upd_font'" onmouseout="this.className='rf_upd_btn rf_upd_font'"><a href="#" class="rf_upd_btn_sel"><div class="rf_upd_btn_cnt rf_upd_font rf_upd_ico rf_upd_ico_stop"><b>Stop</b></div></a></div></div--> - <div class="rf_upd_btn_brd" style=" float:right"><div class="rf_upd_btn rf_upd_font" onmouseover="this.className='rf_upd_btn_light rf_upd_font'" onmousedown="this.className='rf_upd_btn_press rf_upd_font'" onmouseup="this.className='rf_upd_btn rf_upd_font'" onmouseout="this.className='rf_upd_btn rf_upd_font'"><a href="#" class="rf_upd_btn_sel"><div class="rf_upd_btn_cnt rf_upd_font rf_upd_ico rf_upd_ico_clear">Clear All</div></a></div></div> - </td> - </tr> - </table> - <div class="rf_upd_lst_width rf_upd_lst_oflw"> +<span class="rf-upd-lst-width rf-upd-lst-decor"> - <div class="rf_upd_itm rf_upd_lst_width"> - <div class="rf_upd_lnk"><a href="#" class="rf_upd_anc">Clear</a><br /></div> - <div class="rf_upd_fl"> - <div class="rf_upd_name"> + <span class="rf-upd-tbr-decor"> + <button style="float : right" class="rf-upd-btn" onmouseover="this.className='rf-upd-btn-light'" onmousedown="this.className='rf-upd-btn-press'" onmouseup="this.className='rf-upd-btn'" onmouseout="this.className='rf-upd-btn'"><span class="rf-upd-btn-cnt rf-upd-font rf-upd-ico rf-upd-ico-clear">Clear All</span></button> + <button class="rf-upd-btn" onmouseover="this.className='rf-upd-btn-light'" onmousedown="this.className='rf-upd-btn-press'" onmouseup="this.className='rf-upd-btn'" onmouseout="this.className='rf-upd-btn'"><span class="rf-upd-btn-cnt rf-upd-ico rf-upd-ico-add">Add...</span></button> + <button class="rf-upd-btn" onmouseover="this.className='rf-upd-btn-light'" onmousedown="this.className='rf-upd-btn-press'" onmouseup="this.className='rf-upd-btn'" onmouseout="this.className='rf-upd-btn'"><span class="rf-upd-btn-cnt rf-upd-font rf-upd-ico rf-upd-ico-start-dis"><b>Upload</b></span></button> + + </span> + + + <span class="rf-upd-lst-width rf-upd-lst-oflw"> + + <span class="rf-upd-itm rf-upd-lst-width"> + <span class="rf-upd-lnk"><a href="#" class="rf-upd-anc">Clear</a><br /></span> + <span class="rf-upd-fl"> + <span class="rf-upd-name"> N:\Projects\UIComponents\4.0\fileUpload\fileUpload.html - </div> - <!--div class="rf_upd_stb"> + </span> + <!--span class="rf-upd-stb"> - <div class="rf_upd_bar_extr"> - <div class="rf_upd_bar_shell"> - <div class="rf_upd_bar_uploaded"> + <span class="rf-upd-bar-extr"> + <span class="rf-upd-bar-shell"> + <span class="rf-upd-bar-uploaded"> - </div> - </div> - </div> + </span> + </span> + </span> - </div --> - <div class="rf_upd_sts"> + </span --> + <span class="rf-upd-sts"> <b>Done</b> - </div> - </div> - </div> + </span> + </span> + </span> - <div class="rf_upd_itm rf_upd_lst_width"> - <!-- div class="rf_upd_lnk"><a href="#" class="rf_upd_anc">Stop</a><br /></div --> - <div class="rf_upd_fl"> - <div class="rf_upd_name"> - file_upload.html - </div> - <div class="rf_upd_stb"> + <span class="rf-upd-itm rf-upd-lst-width"> + <!-- span class="rf-upd-lnk"><a href="#" class="rf-upd-anc">Stop</a><br /></span --> + <span class="rf-upd-fl"> + <span class="rf-upd-name"> + file-upload.html + </span> + <span class="rf-upd-stb"> - <div class="rf_upd_bar_extr"> - <div class="rf_upd_bar_shell"> - <div class="rf_upd_bar_uploaded"> + <span class="rf-upd-bar-extr"> + <span class="rf-upd-bar-shell"> + <span class="rf-upd-bar-uploaded"> - </div> - </div> - </div> + </span> + </span> + </span> - </div> - <!--div class="rf_upd_sts"> + </span> + <!--span class="rf-upd-sts"> <b>Done</b> - </div --> - </div> - </div> + </span --> + </span> + </span> - <div class="rf_upd_itm rf_upd_lst_width"> - <div class="rf_upd_lnk"><a href="#" class="rf_upd_anc">Delete</a><br /></div> - <div class="rf_upd_fl"> - <div class="rf_upd_name"> - file_upload.html - </div> - <!-- div class="rf_upd_stb"> + <span class="rf-upd-itm rf-upd-lst-width"> + <span class="rf-upd-lnk"><a href="#" class="rf-upd-anc">Delete</a><br /></span> + <span class="rf-upd-fl"> + <span class="rf-upd-name"> + file-upload.html + </span> + <!-- span class="rf-upd-stb"> - <div class="rf_upd_bar_extr"> - <div class="rf_upd_bar_shell"> - <div class="rf_upd_bar_uploaded"> + <span class="rf-upd-bar-extr"> + <span class="rf-upd-bar-shell"> + <span class="rf-upd-bar-uploaded"> - </div> - </div> - </div> + </span> + </span> + </span> - </div --> - <!-- div class="rf_upd_sts"> + </span --> + <!-- span class="rf-upd-sts"> <b>Done</b> - </div --> - </div> - </div> + </span --> + </span> + </span> - <div class="rf_upd_itm rf_upd_lst_width"> - <div class="rf_upd_lnk"><a href="#" class="rf_upd_anc">Delete</a><br /></div> - <div class="rf_upd_fl"> - <div class="rf_upd_name"> - file_upload.html - </div> - <!-- div class="rf_upd_stb"> + <span class="rf-upd-itm rf-upd-lst-width"> + <span class="rf-upd-lnk"><a href="#" class="rf-upd-anc">Delete</a><br /></span> + <span class="rf-upd-fl"> + <span class="rf-upd-name"> + file-upload.html + </span> + <!-- span class="rf-upd-stb"> - <div class="rf_upd_bar_extr"> - <div class="rf_upd_bar_shell"> - <div class="rf_upd_bar_uploaded"> + <span class="rf-upd-bar-extr"> + <span class="rf-upd-bar-shell"> + <span class="rf-upd-bar-uploaded"> - </div> - </div> - </div> + </span> + </span> + </span> - </div --> - <!-- div class="rf_upd_sts"> + </span --> + <!-- span class="rf-upd-sts"> <b>Done</b> - </div --> - </div> - </div> + </span --> + </span> + </span> - <div class="rf_upd_itm rf_upd_lst_width"> - <div class="rf_upd_lnk"><a href="#" class="rf_upd_anc">Delete</a><br /></div> - <div class="rf_upd_fl"> - <div class="rf_upd_name"> + <span class="rf-upd-itm rf-upd-lst-width"> + <span class="rf-upd-lnk"><a href="#" class="rf-upd-anc">Delete</a><br /></span> + <span class="rf-upd-fl"> + <span class="rf-upd-name"> N:\Projects\UIComponents\4.0\fileUpload\fileUpload.html - </div> - <!-- div class="rf_upd_stb"> + </span> + <!-- span class="rf-upd-stb"> - <div class="rf_upd_bar_extr"> - <div class="rf_upd_bar_shell"> - <div class="rf_upd_bar_uploaded"> + <span class="rf-upd-bar-extr"> + <span class="rf-upd-bar-shell"> + <span class="rf-upd-bar-uploaded"> - </div> - </div> - </div> + </span> + </span> + </span> - </div --> - <!-- div class="rf_upd_sts"> + </span --> + <!-- span class="rf-upd-sts"> <b>Done</b> - </div --> - </div> - </div> + </span --> + </span> + </span> - <div class="rf_upd_itm rf_upd_lst_width"> - <div class="rf_upd_lnk"><a href="#" class="rf_upd_anc">Delete</a><br /></div> - <div class="rf_upd_fl"> - <div class="rf_upd_name"> - file_upload.html - </div> - <!-- div class="rf_upd_stb"> + <span class="rf-upd-itm rf-upd-lst-width"> + <span class="rf-upd-lnk"><a href="#" class="rf-upd-anc">Delete</a><br /></span> + <span class="rf-upd-fl"> + <span class="rf-upd-name"> + file-upload.html + </span> + <!-- span class="rf-upd-stb"> - <div class="rf_upd_bar_extr"> - <div class="rf_upd_bar_shell"> - <div class="rf_upd_bar_uploaded"> + <span class="rf-upd-bar-extr"> + <span class="rf-upd-bar-shell"> + <span class="rf-upd-bar-uploaded"> - </div> - </div> - </div> + </span> + </span> + </span> - </div --> - <!-- div class="rf_upd_sts"> + </span --> + <!-- span class="rf-upd-sts"> <b>Done</b> - </div --> - </div> - </div> + </span --> + </span> + </span> - <div class="rf_upd_itm rf_upd_lst_width"> - <div class="rf_upd_lnk"><a href="#" class="rf_upd_anc">Delete</a><br /></div> - <div class="rf_upd_fl"> - <div class="rf_upd_name"> - file_upload.html - </div> - <!-- div class="rf_upd_stb"> + <span class="rf-upd-itm rf-upd-lst-width"> + <span class="rf-upd-lnk"><a href="#" class="rf-upd-anc">Delete</a><br /></span> + <span class="rf-upd-fl"> + <span class="rf-upd-name"> + file-upload.html + </span> + <!-- span class="rf-upd-stb"> - <div class="rf_upd_bar_extr"> - <div class="rf_upd_bar_shell"> - <div class="rf_upd_bar_uploaded"> + <span class="rf-upd-bar-extr"> + <span class="rf-upd-bar-shell"> + <span class="rf-upd-bar-uploaded"> - </div> - </div> - </div> + </span> + </span> + </span> - </div --> - <!-- div class="rf_upd_sts"> + </span --> + <!-- span class="rf-upd-sts"> <b>Done</b> - </div --> - </div> - </div> + </span --> + </span> + </span> @@ -282,11 +270,11 @@ - </div> + </span> -</div> +</span> </body>