examples/ux/css/GroupTab.css

   1 /*!
   2  * Ext JS Library 3.0.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 .x-grouptabs-panel {\r
   8     background-color: #4E78B1;\r
   9     border: solid 15px #4E78B1;\r
  10 }\r
  11 .x-tab-panel-left .x-grouptabs-panel-header,\r
  12 .x-tab-panel-right .x-grouptabs-panel-header {\r
  13     float: left;\r
  14     border: 0;\r
  15     background: transparent;\r
  16 }\r
  17 .x-tab-panel-right .x-grouptabs-panel-header {\r
  18     float:right;\r
  19 }\r
  20 .x-tab-panel-left .x-grouptabs-bwrap {\r
  21     float: right;\r
  22     position: relative;\r
  23 }\r
  24 .x-tab-panel-right .x-grouptabs-bwrap {\r
  25     float: left;\r
  26     position: relative;\r
  27 }\r
  28 .x-tab-panel-left ul.x-grouptabs-strip,\r
  29 .x-tab-panel-right ul.x-grouptabs-strip {\r
  30     width: auto;\r
  31         display: block;\r
  32 }\r
  33 .x-tab-panel-left ul.x-grouptabs-strip li,\r
  34 .x-tab-panel-right ul.x-grouptabs-strip li {\r
  35     padding: 6px 0 2px 6px;\r
  36     float: none;\r
  37     margin: 0;\r
  38     position: relative;\r
  39     clear: both;\r
  40 }\r
  41 .x-tab-panel-left .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text,\r
  42 .x-tab-panel-right .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text{\r
  43         font-size: 13px;\r
  44         line-height: 18px;\r
  45         cursor: pointer;\r
  46 }\r
  47 \r
  48 .x-tab-panel-left .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text{\r
  49     padding-left: 18px;\r
  50 }\r
  51 .x-tab-panel-right .x-tab-panel-header ul.x-grouptabs-strip a.x-grouptabs-text{\r
  52     padding-right: 18px;\r
  53 }\r
  54 \r
  55 .x-tab-panel-left .x-tab-panel-header ul.x-grouptabs-sub a.x-grouptabs-text,\r
  56 .x-tab-panel-right .x-tab-panel-header ul.x-grouptabs-sub a.x-grouptabs-text{\r
  57         font-size: 12px;\r
  58     padding: 0;  \r
  59 }\r
  60 \r
  61 .x-tab-panel-left .x-tab-panel-header ul.x-grouptabs-sub a.x-grouptabs-text{\r
  62         margin-left: 4px;\r
  63 }\r
  64 .x-tab-panel-right .x-tab-panel-header ul.x-grouptabs-sub a.x-grouptabs-text{\r
  65         margin-right: 4px;\r
  66 }\r
  67 \r
  68 .x-grouptabs-panel .x-grouptabs-strip a.x-grouptabs-text{\r
  69     overflow: hidden;\r
  70     white-space: nowrap;\r
  71         display: block;\r
  72     color: #DFE8F6;\r
  73     font-family: tahoma, arial, sans-serif;\r
  74     font-weight: bold;\r
  75     text-decoration: none;\r
  76 }\r
  77 .x-tab-panel-right .x-grouptabs-strip a.x-grouptabs-text {\r
  78     text-align: right;\r
  79 }\r
  80 \r
  81 .x-grouptabs-panel .x-grouptabs-strip-active a.x-grouptabs-text {\r
  82     color: #395B8E;\r
  83 }\r
  84 \r
  85 .x-grouptabs-panel ul.x-grouptabs-sub a.x-grouptabs-text {\r
  86         font-weight: normal;\r
  87 }\r
  88 .x-tab-joint {\r
  89     position: absolute;\r
  90     width: 3px;\r
  91     top: 1px;\r
  92     background: #fff;\r
  93     z-index: 9999;\r
  94 }\r
  95 \r
  96 .x-grouptabs-panel .x-grouptabs-panel-body {\r
  97     border: 1px solid #999;\r
  98 }\r
  99 \r
 100 .x-grouptabs-panel ul.x-grouptabs-strip li {\r
 101     border-top: 1px solid transparent;\r
 102     border-bottom: 1px solid transparent;\r
 103         border-left: 1px solid transparent;\r
 104 }\r
 105 \r
 106 .x-grouptabs-panel ul.x-grouptabs-strip li.x-grouptabs-strip-active {\r
 107     border: 0;\r
 108     background: #fff;\r
 109     border-top: 1px solid #999;\r
 110     border-bottom: 1px solid #999;\r
 111 }\r
 112 \r
 113 .x-tab-panel-left ul.x-grouptabs-strip li.x-grouptabs-strip-active {\r
 114     border-left: 1px solid #999;\r
 115 }\r
 116 .x-tab-panel-right ul.x-grouptabs-strip li.x-grouptabs-strip-active {\r
 117     border-right: 1px solid #999;\r
 118 }\r
 119 \r
 120 .x-grouptabs-panel li.x-grouptabs-strip-active ul.x-grouptabs-sub li.x-grouptabs-strip-active{\r
 121     background-color: #EDEEF0;\r
 122 }\r
 123 \r
 124 .x-grouptabs-panel li.x-grouptabs-strip-active ul.x-grouptabs-sub {\r
 125     background-color: transparent;\r
 126 }\r
 127 \r
 128 .x-grouptabs-panel li.x-grouptabs-strip-active ul.x-grouptabs-sub li {\r
 129     border-color: transparent;\r
 130 }\r
 131 \r
 132 /* Tab corners */\r
 133 .x-grouptabs-panel .x-grouptabs-corner {\r
 134     background-image: url('../images/x-grouptabs-corners.gif');\r
 135     display: none;\r
 136     width: 11px;\r
 137     height: 11px;\r
 138     position: absolute;\r
 139     font-size: 1px;\r
 140     line-height: 6px;\r
 141     overflow: hidden;\r
 142     zoom:1;\r
 143 }\r
 144 .x-grouptabs-panel .x-grouptabs-strip-active .x-grouptabs-corner {\r
 145     display: block;\r
 146 }\r
 147 .x-grouptabs-panel .x-grouptabs-main.x-grouptabs-strip-active ul.x-grouptabs-sub .x-grouptabs-corner {\r
 148         display: none;\r
 149 }\r
 150 \r
 151 .x-grouptabs-panel .x-grouptabs-corner-top-left {\r
 152     background-position: top left;\r
 153     left: 0; top: 0;\r
 154 }\r
 155 .x-grouptabs-panel .x-grouptabs-corner-bottom-left {\r
 156     background-position: bottom left;\r
 157     left: 0; bottom: 0;\r
 158 }\r
 159 .x-grouptabs-panel .x-grouptabs-corner-top-right {\r
 160     background-position: top right;\r
 161     right: 0; top: 0;\r
 162 }\r
 163 .x-grouptabs-panel .x-grouptabs-corner-bottom-right {\r
 164     background-position: bottom right;\r
 165     right: 0; bottom: 0;\r
 166 }\r
 167 .x-grouptabs-panel li.x-grouptabs-strip-active .x-grouptabs-corner-bottom-left{\r
 168     bottom: -4px; left: -4px;\r
 169 }\r
 170 .x-grouptabs-panel li.x-grouptabs-strip-active .x-grouptabs-corner-bottom-right{\r
 171     bottom: -4px; right: -4px;\r
 172 }\r
 173 .x-grouptabs-panel li.x-grouptabs-strip-active .x-grouptabs-corner-top-left{\r
 174     top: -4px; left: -4px;\r
 175 }\r
 176 .x-grouptabs-panel li.x-grouptabs-strip-active .x-grouptabs-corner-top-right{\r
 177     top: -4px; right: -4px;\r
 178 }\r
 179 \r
 180 .x-grouptabs-panel ul.x-grouptabs-sub li.x-tab-with-icon a.x-grouptabs-text {\r
 181     background-repeat: no-repeat;\r
 182     padding-left: 20px;\r
 183 }\r
 184 \r
 185 /* General tab styling */\r
 186 .x-grouptabs-panel .x-grouptabs-expand {\r
 187         background: transparent url('../images/elbow-plus-nl.gif') no-repeat;\r
 188         width: 16px;\r
 189         height: 16px;\r
 190         position: absolute;\r
 191         left: 7px;\r
 192         top: 6px;\r
 193 }\r
 194 \r
 195 .ext-ie6 .x-grouptabs-panel .x-grouptabs-expand,\r
 196 .ext-border-box .x-grouptabs-panel .x-grouptabs-expand {\r
 197         left: 0;\r
 198 }\r
 199 \r
 200 .x-grouptabs-expanded .x-grouptabs-expand {\r
 201         background-image: url('../images/elbow-minus-nl.gif');\r
 202 }\r
 203 \r
 204 /* GroupTabs sub group styling */\r
 205 .x-grouptabs-sub {\r
 206         display: none;\r
 207         margin-top: 4px;\r
 208 }\r
 209 \r
 210 .x-grouptabs-expanded .x-grouptabs-sub {\r
 211         display: block;\r
 212 }\r
 213 \r
 214 .x-grouptabs-panel ul.x-grouptabs-sub li {\r
 215         height: 18px;\r
 216         margin: 0 0 2px;\r
 217     padding: 0;\r
 218 }\r
 219 \r
 220 .x-grouptabs-panel ul.x-grouptabs-sub .x-grouptabs-main-item {\r
 221         display: none;\r
 222 }\r
 223 \r
 224 .x-tab-with-icon{\r
 225    border-style:none !important;\r
 226 }\r