.sc-segmented-view { display: block; white-space: nowrap; img.icon { position: relative; vertical-align: middle; top: -2px; margin-right: 2px; height: 16px; width: 16px; } .sc-segment-view { position: relative; display: inline-block; top: 0; height: 22px; line-height: 22px; border-right: 1px #555 solid; text-shadow: #b0b0b0 0px 1px 0px; text-decoration: none ; color: black ; text-align: center; &:focus { outline: none; } &.sc-first-segment { padding-left: 10px; padding-right: 10px; background: #DDDDDD; .sc-button-inner { padding-right: 10px; } .active, .sel { background: #999999; } } &.sc-last-segment { padding-right: 10px; border:none; background: #DDDDDD; .sc-button-inner { padding-left: 10px; } .active, .sel { background: #999999; } } .sc-middle-segment .sc-button-inner { padding-left: 10px; padding-right: 10px; } .sc-button-inner { background: #DDDDDD; } .sel .sc-button-inner { background: #999999; text-shadow: #909090 0px 1px 0px; } .active .sc-button-inner { background: #999999; text-shadow: #909090 0px 1px 0px; } &.disabled .sc-button-inner { background: #FFFFFF; color: #999; } &.sc-first-segment.disabled { background: #FFFFFF; .sel.disabled { background: #FFFFFF; } } &.sc-last-segment.disabled { background: #FFFFFF; .sel.disabled { background: #FFFFFF; } } &.sel .sc-button-inner.disabled { background: #FFFFFF; } } .sc-button-inner { display: block; min-width: 20px; min-height: 22px; } &.disabled{ .sc-segment-view .sc-button-inner { background: #FFFFFF; color: #999; } .sc-segment-view{ &.sc-first-segment { background: #FFFFFF; .sel { background: #FFFFFF; } } &.sc-last-segment { background: #FFFFFF; &.sel { background: #FFFFFF; } } &.sel .sc-button-inner { background: #FFFFFF; } } } }