lib/dijit/themes/claro/layout/TabContainer.less

   1 /* TabContainer
   2  *
   3  * Styling TabContainer means styling the TabList and Its content container  (dijitTitlePane)
   4  *
   5  * Tab List: (including 4 kinds of tab location)
   6  *              .dijitTabContainerTop-tabs     - tablist container at top
   7  *              .dijitTabContainerBottom-tabs  - tablist container at bottom
   8  *              .dijitTabContainerLeft-tabs    - tablist container at left
   9  *              .dijitTabContainerRight-tabs   - tablist container at right
  10  *
  11  * Tab Strip Button:
  12  *              .dijitTabStripIcon - tab strip button icon
  13  *              .dijitTabStripMenuIcon - down arrow icon position
  14  *              .dijitTabStripSlideLeftIcon - left arrow icon position
  15  *              .dijitTabStripSlideRightIcon - right arrow icon position
  16  *
  17  *              .tabStripButtonDisabled - styles for disabled tab strip buttons
  18  *
  19  * Tab Button:
  20  *              .dijitTabContainerTop-tabs .dijitTab     - styles for top tab button container
  21  *              .dijitTabContainerBottom-tabs .dijitTab  - styles for bottom tab button container
  22  *              .dijitTabContainerLeft-tabs .dijitTab    - styles for left tab button container
  23  *              .dijitTabContainerRight-tabs .dijitTab   - styles for right tab button container
  24  *
  25  *              .dijitTabContainerTop-tabs .dijitTabChecked .dijitTab
  26  *                              - styles for selected status of top tab button
  27  *              same to Bottom, Left, Right Tabs
  28  *
  29  *              .dijitTabHover .dijitTab   - styles when mouse hover on tab buttons
  30  *              .dijitTabActive .dijitTab  - styles when mouse down on tab buttons
  31  *              .dijitTabChecked .dijitTab  - styles when on buttons of selected tab
  32  *
  33  *              .dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs
  34  *              .dijitTabCloseButtonHover - styles when mouse hover on close action button
  35  *              .dijitTabCloseButtonActive - styles when mouse down on close action button
  36  *
  37  * Tab Button: (checked status)
  38  *
  39  * Tab Content Container:
  40  *              .dijitTabContainerTop-dijitContentPane
  41  *              .dijitTabContainerBottom-dijitContentPane
  42  *              .dijitTabContainerLeft-dijitContentPane
  43  *              .dijitTabContainerRight-dijitContentPane - for background and padding
  44  *
  45  * Nested Tabs:
  46  *              .dijitTabContainerNested - Container for nested tabs
  47  *              .dijitTabContainerTabListNested - tab list container for nested tabs
  48  */
  49
  50 @import "../variables";
  51
  52 .unselected-tab-gradient (@direction) {
  53     // white line, dark line, then fade from light to dark
  54         .alpha-white-gradient (@direction, 1,0px, 1,1px, 0.1,2px, 0.6,7px, 0,100%);
  55 }
  56 .topBottom-selected-tab-gradient (@direction) {
  57         .alpha-white-gradient (@direction, 1,0px,  1,1px, 0,2px, 1,7px);        // white line, blue line, remainder white
  58 }
  59 /*** some common features ***/
  60 .claro .dijitTabPaneWrapper {
  61         background:@pane-background-color;
  62 }
  63 .claro .dijitTabPaneWrapper,
  64 .claro .dijitTabContainerTop-tabs,
  65 .claro .dijitTabContainerBottom-tabs,
  66 .claro .dijitTabContainerLeft-tabs,
  67 .claro .dijitTabContainerRight-tabs {
  68         /* todo: add common class name for this div */
  69         border-color: @border-color;
  70 }
  71 .claro .dijitTabCloseButton {
  72         background: url("../@{image-layout-tab-close}") no-repeat;
  73         width: 14px;
  74         height: 14px;
  75         margin-left: 5px;
  76         margin-right:-5px;
  77 }
  78 .claro .dijitTabCloseButtonHover {
  79         background-position:-14px;
  80 }
  81 .claro .dijitTabCloseButtonActive {
  82         background-position:-28px;
  83 }
  84 .claro .dijitTabSpacer {
  85         /* set the spacer invisible.  note that height:0 doesn't work on IE/quirks, it's still 10px. */
  86         display: none;
  87 }
  88 .claro .dijitTab {
  89         border: 1px solid @border-color;
  90         background-color:@unselected-background-color;
  91         .transition-property(background-color, border);
  92         .transition-duration(.35s);
  93         color:@unselected-text-color;
  94 }
  95 .claro .dijitTabHover {
  96         border-color: @hovered-border-color;
  97         background-color:@hovered-background-color;
  98         .transition-duration(.25s);
  99         color:@hovered-text-color;
 100 }
 101 .claro .dijitTabActive {
 102         border-color: @pressed-border-color;
 103         background-color:@pressed-background-color;
 104         color:@selected-text-color;
 105         .transition-duration(.1s);
 106 }
 107 .claro .dijitTabChecked {
 108     // selected tab
 109         border-color: @border-color;                    // don't use @selected-border-color because need to match border of TabContainer
 110         background-color: @selected-background-color;
 111         color: @selected-text-color;
 112 }
 113 .claro .dijitTabDisabled {
 114         background-color: @tab-disabled-background-color;
 115 }
 116
 117 .claro .tabStripButton {
 118         background-color: transparent;
 119         border: none;
 120 }
 121 /*** end common ***/
 122
 123
 124 /*************** top tab ***************/
 125 .claro .dijitTabContainerTop-tabs .dijitTab {
 126     /* unselected (and not hovered/pressed) tab */
 127         top: 1px;       /* used for overlap */
 128         margin-right: 1px;
 129         padding:3px 6px;
 130         border-bottom-width: 0;
 131         min-width: 60px;
 132         text-align: center;
 133
 134         // gradient (CSS gradient, with backup image for IE6-9)
 135         background-image: url("images/tabTopUnselected.png");
 136         background-repeat: repeat-x;
 137         .unselected-tab-gradient(top);
 138
 139         .box-shadow(0 -1px 1px rgba(0, 0, 0, 0.04));
 140 }
 141
 142 .claro .dijitTabContainerTop-tabs .dijitTabChecked {
 143         /* selected tab */
 144         padding-bottom: 4px;
 145         padding-top: 9px;
 146
 147         // gradient (CSS gradient, with backup image for IE6-9)
 148         background-image: url("images/tabTopSelected.png");
 149         .topBottom-selected-tab-gradient (top);
 150
 151         .box-shadow(0 -1px 2px rgba(0, 0, 0, 0.05));
 152 }
 153
 154 /** end top tab **/
 155
 156
 157 /*************** bottom tab ***************/
 158 .claro .dijitTabContainerBottom-tabs .dijitTab {
 159         /* unselected (and not hovered/pressed) tab */
 160         top: -1px;      /* used for overlap */
 161         margin-right: 1px;
 162         padding:3px 6px;
 163         border-top-width: 0;
 164         min-width: 60px;
 165         text-align: center;
 166
 167         // gradient (CSS gradient, with backup image for IE6-9)
 168         background-image: url("images/tabBottomUnselected.png");
 169         background-repeat: repeat-x;
 170         background-position: bottom;
 171         .unselected-tab-gradient(bottom);
 172
 173         .box-shadow(0 1px 1px rgba(0, 0, 0, 0.04));
 174 }
 175
 176 /* selected tab */
 177 .claro .dijitTabContainerBottom-tabs .dijitTabChecked {
 178         padding-bottom: 9px;
 179         padding-top: 4px;
 180
 181         // gradient (CSS gradient, with backup image for IE6-9)
 182         background-image: url("images/tabBottomSelected.png");
 183         .topBottom-selected-tab-gradient (bottom);
 184
 185         .box-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
 186 }
 187 /** end bottom tab **/
 188
 189 /*************** left tab ***************/
 190 .claro .dijitTabContainerLeft-tabs .dijitTab {
 191         /* unselected (and not hovered/pressed) tab */
 192         left: 1px;      /* used for overlap */
 193         margin-bottom: 1px;
 194         padding:3px 8px 4px 4px;
 195
 196         // gradient (CSS gradient, with backup image for IE6-9)
 197         background-image: url("images/tabLeftUnselected.png");
 198         background-repeat: repeat-y;
 199         .unselected-tab-gradient(left);
 200 }
 201
 202 /* selected tab */
 203 .claro .dijitTabContainerLeft-tabs .dijitTabChecked {
 204         border-right-width: 0;
 205         padding-right: 9px;
 206
 207         // gradient (CSS gradient, with backup image for IE6-9)
 208         background-image: url("images/tabLeftSelected.png");
 209         .alpha-white-gradient (left, 0.5,0px, 1,30px);  // 1/2 inch blue gradient, remainder white
 210
 211         .box-shadow(-1px 0 2px rgba(0, 0, 0, .05));
 212 }
 213 /** end left tab **/
 214
 215 /*************** right tab ***************/
 216 .claro .dijitTabContainerRight-tabs .dijitTab {
 217         /* unselected (and not hovered/pressed) tab */
 218         left: -1px;     /* used for overlap */
 219         margin-bottom: 1px;
 220         padding:3px 8px 4px 4px;
 221
 222         // gradient (CSS gradient, with backup image for IE6-9)
 223         background-image: url("images/tabRightUnselected.png");
 224         background-repeat: repeat-y;
 225         background-position: right;
 226         .unselected-tab-gradient(right);
 227 }
 228 .claro .dijitTabContainerRight-tabs .dijitTabChecked {
 229         /* selected tab */
 230         padding-left: 5px;
 231         border-left-width: 0;
 232
 233         // gradient (CSS gradient, with backup image for IE6-9)
 234         background-image: url("images/tabRightSelected.png");
 235         .alpha-white-gradient (right, 0.5,0px, 1,30px); // 1/2 inch blue gradient, remainder white
 236
 237         .box-shadow(1px 0 2px rgba(0, 0, 0, 0.07));
 238 }
 239 /** end right tab **/
 240
 241 /** round corner **/
 242 .claro .dijitTabContainerTop-tabs .dijitTab {
 243         .border-radius(2px 2px 0 0);
 244 }
 245 .claro .dijitTabContainerBottom-tabs .dijitTab {
 246         .border-radius(0 0 2px 2px);
 247 }
 248 .claro .dijitTabContainerLeft-tabs .dijitTab {
 249         .border-radius(2px 0 0 2px);
 250 }
 251
 252 .claro .dijitTabContainerRight-tabs .dijitTab {
 253         .border-radius(0 2px 2px 0);
 254 }
 255
 256 /************ left/right scroll buttons + menu button ************/
 257 .claro .tabStripButton {
 258         background-color:@button-background-color;
 259         border: 1px solid @border-color;
 260 }
 261 .claro .dijitTabListContainer-top .tabStripButton {
 262         padding: 4px 3px;
 263         margin-top:7px;
 264         .alpha-white-gradient (top, 1,0px, 0.1,1px, 0.6,6px, 0,100%);   // to match unselected tab, but had to tweak numbers
 265 }
 266 .claro .dijitTabListContainer-bottom .tabStripButton {
 267         padding:4px 3px;
 268         margin-bottom:7px;
 269         .alpha-white-gradient (bottom, 1,0px, 0.1,1px, 0.6,6px, 0,100%);        // to match unselected tab, but had to tweak numbers
 270 }
 271 .claro .tabStripButtonHover {
 272         background-color:@hovered-background-color;
 273 }
 274 .claro .tabStripButtonActive {
 275         background-color:@pressed-background-color;
 276 }
 277 .claro .dijitTabStripIcon {
 278         height:15px;
 279         width:15px;
 280         margin: 0 auto;
 281         background:url("../@{image-form-button-arrows}") no-repeat -75px 50%;
 282         background-color: transparent;
 283 }
 284 .claro .dijitTabStripSlideRightIcon{
 285         background-position: -24px 50%;
 286 }
 287 .claro .dijitTabStripMenuIcon {
 288         background-position: -51px 50%;
 289 }
 290
 291 /*disabled styles for tab strip buttons*/
 292 .claro .dijitTabListContainer-top .tabStripButtonDisabled,
 293 .claro .dijitTabListContainer-bottom .tabStripButtonDisabled {
 294         background-color:@tab-disabled-background-color;
 295         border:1px solid @border-color; /* to match border of TabContainer itself */
 296 }
 297 .claro .tabStripButtonDisabled .dijitTabStripSlideLeftIcon {
 298         background-position:-175px 50%;
 299 }
 300 .claro .tabStripButtonDisabled .dijitTabStripSlideRightIcon {
 301         background-position: -124px 50%;
 302 }
 303 .claro .tabStripButtonDisabled .dijitTabStripMenuIcon {
 304         background-position: -151px 50%;
 305 }
 306 /* Nested Tabs */
 307 .claro .dijitTabContainerNested .dijitTabListWrapper {
 308         height: auto;
 309 }
 310 .claro .dijitTabContainerNested .dijitTabContainerTop-tabs {
 311         border-bottom:solid 1px @border-color;
 312         padding:2px 2px 4px;
 313 }
 314 .claro .dijitTabContainerTabListNested .dijitTab {
 315         background:rgba(255, 255, 255, 0) none repeat scroll 0 0;
 316         border: none;
 317         padding: 4px;
 318         border-color: rgba(118,157,192,0);
 319         .transition-property(background-color, border-color);
 320         .transition-duration(.3s);
 321         .border-radius(2px);
 322 }
 323 .claro .dijitTabContainerTabListNested .dijitTab {
 324         background: none;
 325         border: none;
 326         top: 0;/* to override top: 1px/-1px for normal tabs */
 327         .box-shadow(none);
 328 }
 329 .claro .dijitTabContainerTabListNested .dijitTabHover {
 330         background-color: @nestedtab-hovered-background-color;
 331         border:solid 1px @nestedtab-hovered-border-color;
 332         padding: 3px;   // 4px above padding - 1px compensation for border
 333         .transition-duration(.2s);
 334 }
 335 .claro .dijitTabContainerTabListNested .dijitTabHover .tabLabel {
 336         text-decoration: none;
 337 }
 338 .claro .dijitTabContainerTabListNested .dijitTabActive {
 339         border:solid 1px @nestedtab-selected-border-color;
 340         padding: 3px;
 341
 342         // CSS gradient with fallback to image for IE
 343         // this is in a weird place, only for active state; mailed Jason about it
 344         background: @nestedtab-selected-background-color url("images/tabNested.png") repeat-x;
 345         .alpha-white-gradient (0.61,0%, 0,17%, 0,83%, 0.61,100%);
 346
 347         .transition-duration(.1s);
 348 }
 349 .claro .dijitTabContainerTabListNested .dijitTabChecked {
 350         padding: 3px;
 351         border:solid 1px @selected-border-color;
 352         background-color:@selected-background-color;
 353 }
 354 .claro .dijitTabContainerTabListNested .dijitTabChecked .tabLabel {
 355         text-decoration: none;
 356         background-image:none;
 357 }
 358 .claro .dijitTabPaneWrapperNested {
 359         border: none;/* prevent double border */
 360 }
 361
 362 .claro .dijitTab,
 363 .claro .tabStripButton {
 364     // IE6 can't handle background-image and background-color on same node
 365         _background-image: none !important;
 366 }