@mixin runo-tabsheet($primaryStyleName : v-tabsheet) { .#{$primaryStyleName}-tabs { height: 48px; } .#{$primaryStyleName}-spacertd div { height: 37px; border: 1px solid #b6bbbc; background: transparent url(img/tab-bg.png); padding: 0; } .#{$primaryStyleName}-scroller { margin-top: -37px; float: right; } .#{$primaryStyleName}-scrollerPrev, .#{$primaryStyleName}-scrollerNext, .#{$primaryStyleName}-scrollerPrev-disabled, .#{$primaryStyleName}-scrollerNext-disabled { border: none; width: 12px; padding: 0; height: 38px; opacity: 0.9999; margin-top: -1px; } .#{$primaryStyleName}-scrollerNext, .#{$primaryStyleName}-scrollerNext-disabled { background: transparent url(img/next.png) no-repeat; } .#{$primaryStyleName}-scrollerPrev, .#{$primaryStyleName}-scrollerPrev-disabled { background: transparent url(img/prev.png) no-repeat; } .#{$primaryStyleName}-scrollerPrev:hover, .#{$primaryStyleName}-scrollerNext:hover { background-position: -24px 0px; } .#{$primaryStyleName}-scrollerPrev-disabled, .#{$primaryStyleName}-scrollerNext-disabled { background-position: -12px 0px; } .#{$primaryStyleName}-scrollerPrev-disabled:hover, .#{$primaryStyleName}-scrollerNext-disabled:hover { background-position: -12px 0px; } .#{$primaryStyleName}-tabitem { border: 1px solid #b6bbbc; border-right: none; height: 37px; padding: 0; margin-top: 9px; color: #777f85; font-size: 15px; line-height: 18px; background: #f8f9f9 url(img/tab-bg.png); } .#{$primaryStyleName}-tabitem .v-caption { height: 20px; padding: 9px 15px 8px 15px; } .#{$primaryStyleName}-tabitem-selected { border: none; background: transparent url(../panel/img/top-left.png) no-repeat; margin: 0; padding: 0; height: 48px; color: #ee5311; } .#{$primaryStyleName}-tabitem:hover { color: #4b5257; } .#{$primaryStyleName}-tabitem-selected:hover { color: #ee5311; } .#{$primaryStyleName}-tabitem-selected .v-caption { background: transparent url(../panel/img/top-right.png) repeat-x right top; margin: 0 -1px 0 9px; height: 18px; padding: 16px 16px 14px 7px; overflow: visible; } .#{$primaryStyleName}-caption-close { margin-left: 3px; margin-right: -3px; margin-top: 2px; font-size: 15px; width: 15px; height: 15px; -webkit-border-radius: 7px; -moz-border-radius: 7px; color: #777f85; line-height: 13px; } .#{$primaryStyleName}-caption-close:hover { background: #dce0e0; } .#{$primaryStyleName}-caption-close:active { background: #b6bbbc; color: #fff; } .#{$primaryStyleName}-content { border: 1px solid #babfc0; background-color: #fff; border-bottom: 1px solid #dee2e3; border-top: none; } .#{$primaryStyleName}-hidetabs .#{$primaryStyleName}-content { border-top: 1px solid #b5babb; } .#{$primaryStyleName}-deco { height: 10px; background: transparent url(../panel/img/bottom-right.png) repeat-x right top; margin-left: 9px; overflow: visible; } .#{$primaryStyleName}-deco:before { display: block; content: ""; width: 9px; height: 9px; margin-left: -9px; background: transparent url(../panel/img/bottom-left.png) no-repeat; } /* Progress indication * .#{$primaryStyleName}-loading .#{$primaryStyleName}-tabitem-selected .v-captiontext { background: transparent url(../../base/common/img/ajax-loader.gif) no-repeat top right; margin-left: -10px; padding-left: 10px; margin-right: -10px; padding-right: 10px; margin-top: -12px; padding-top: 12px; }*/ /* IE specific styles */ .v-ie & .#{$primaryStyleName}-content { border-bottom: none; } .v-ie & .#{$primaryStyleName}-deco { height: 1px; background: #babfc0; overflow: hidden; margin: 0; width: 100%; } /* Light-style */ .#{$primaryStyleName}-tabcontainer-light { height: 32px; } .#{$primaryStyleName}-tabs-light { height: 32px; width: 100%; overflow:hidden; background: transparent; } .#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-spacertd div { height: 31px; border: none; border-bottom: 1px solid #b6bbbc; background: transparent url(img/inline-tab-bg.png) repeat-x; } .#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem { border: none; border-bottom: 1px solid #b6bbbc; height: 30px; padding: 0; margin-top: 0; color: #656d73; font-size: 12px; line-height: normal; background: transparent url(img/inline-tab-bg.png) repeat-x; cursor: pointer; text-shadow: #fff 0 1px 0; } .#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem .v-caption { height: 24px; padding: 8px 10px 0 11px; background: transparent url(img/inline-tab-border.png) no-repeat; } .#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitemcell-first .v-caption { margin-left: 5px; background: transparent; } .#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitemcell-selected + .#{$primaryStyleName}-tabitemcell .v-caption, .#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitemcell-selected-first + .#{$primaryStyleName}-tabitemcell .v-caption { background: transparent; } .#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem-selected { border: none; background: transparent url(img/inline-tab-right.png) no-repeat right top; margin: 0; padding: 0; height: 32px; cursor: default; color: #ee5311; text-shadow: none; } .#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem:hover { color: #4b5257; } .#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem-selected:hover { color: #ee5311; } .#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem-selected .v-caption { background: transparent url(img/inline-tab-left.png) no-repeat -7px 0; margin: 0; height: 23px; padding: 9px 10px 0 11px; overflow: visible; } .#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitemcell-first .#{$primaryStyleName}-tabitem-selected .v-caption { background: transparent url(img/inline-tab-left.png) no-repeat -3px 0; padding-left: 16px; } .#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-caption-close { margin-top: 0; text-shadow: none; } .#{$primaryStyleName}-content-light { border: none; background: transparent; } .#{$primaryStyleName}-light .#{$primaryStyleName}-hidetabs .#{$primaryStyleName}-content { border: none; } .#{$primaryStyleName}-deco-light { height: 0; overflow: hidden; } .#{$primaryStyleName}-deco-light:before { display: none; } /* Scroller */ .#{$primaryStyleName}-tabcontainer-light .#{$primaryStyleName}-scrollerPrev, .#{$primaryStyleName}-tabcontainer-light .#{$primaryStyleName}-scrollerNext { margin-top: 2px; height: 34px; } .#{$primaryStyleName}-tabcontainer-light .#{$primaryStyleName}-scrollerPrev-disabled, .#{$primaryStyleName}-tabcontainer-light .#{$primaryStyleName}-scrollerNext-disabled { margin-top: 2px; height: 34px; } /* Progress indication * .#{$primaryStyleName}-loading .#{$primaryStyleName}-tabs-light .#{$primaryStyleName}-tabitem-selected .v-captiontext { margin-left: -3px; padding-left: 3px; }*/ .v-ie & .#{$primaryStyleName}-deco-light { height: 0; } }