examples/ux/css/GroupTab.css

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