My toggle-button style for Reindeer TabSheet

There was a need for creating other style of TabSheet: like push-buttons.
Hope it was useful for somebody!

mainTabSheet.addStyleName("buttons");
/* Buttons-like Tabsheet style */


.v-tabsheet-tabs-buttons .v-tabsheet-tabitemcell {
    background: no-repeat;
    background-image: url(images/tab/tab-left.png); /** sprite-ref: verticals */
    padding-left: 5px;
}
.v-tabsheet-tabs-buttons .v-tabsheet-tabitemcell-selected {
    background-image: url(images/tab/tab-left-sel.png); /** sprite-ref: verticals */
}
.v-tabsheet-tabs-buttons .v-tabsheet-tabitemcell-first {
    background-image: url(images/tab/tab-left.png); /** sprite-ref: verticals */
}
.v-tabsheet-tabs-buttons .v-tabsheet-tabitemcell-selected-first {
    background-image: url(images/tab/tab-left-sel.png); /** sprite-ref: verticals */
}
.v-tabsheet-tabs-buttons .v-tabsheet-tabitem
 {
    border: none;
    height: 32px;

    background: transparent url(images/tab/tab-bg.png) 100% 0 no-repeat; /** sprite-ref: verticals; sprite-alignment: repeat */
    padding: 0;
    color: #222;
text-shadow: 0 1px 0 rgba(255,255,255,1);
}

.v-tabsheet-tabs-buttons .v-tabsheet-tabitem-selected {
    border: none;
    height: 32px;
    background: transparent url(images/tab/tab-bg-sel.png) 100% 0 no-repeat; /** sprite-ref: verticals; sprite-alignment: repeat */
    color: white;
    text-shadow: none;
}


.v-tabsheet-tabs-buttons .v-tabsheet-tabitem .v-caption {
    border: none;
    height: 23px;
    background: no-repeat right top;
  /*  background-image: url(images/tab/tab-right.png);*/ /** sprite-ref: verticals; sprite-alignment: right */
    padding: 9px 8px 0 6px;
}

12458.png
12459.zip (2.89 KB)