@theme(sc-large-size) {
$theme.sc-segment-view {
height: 30px; .left { width: 8px; height: 30px; @include slice("segmented_normal.png", $left: 100, $width: 8); } .right { width: 8px; height: 30px; @include slice("segmented_normal.png", $left: 92, $width: 8); } .middle { left: 8px; right: 8px; height: 30px; @include slice("segmented_normal.png", $repeat: repeat-x, $left: 8, $width: 1); } &.vertical { .left { @include slice("segmented_vertical_normal.png", $left: 0, $width: 8, $height: 30, $top: 30); } .middle { @include slice("segmented_vertical_normal.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 30, $top: 30); } .right { @include slice("segmented_vertical_normal.png", $right: 0, $width: 8, $height: 30, $top: 30); } } .sc-button-label { font-size: 13px; line-height: 30px; margin-left: 9px; margin-right: 10px; } img.icon { height: 16px; top: 7px; width: 16px; } &.sc-first-segment .left { @include slice("segmented_normal.png", $width: 8); } &.sc-last-segment .right { @include slice("segmented_normal.png", $right: 0, $width: 8); } &.sc-first-segment.vertical { .left { @include slice("segmented_vertical_normal.png", $left: 0, $width: 8, $height: 30); } .middle { @include slice("segmented_vertical_normal.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 30); } .right { @include slice("segmented_vertical_normal.png", $right: 0, $width: 8, $height: 30); } } &.sc-last-segment.vertical { .left { @include slice("segmented_vertical_normal.png", $left: 0, $width: 8, $height: 30, $top: 60); } .middle { @include slice("segmented_vertical_normal.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 30, $top: 60); } .right { @include slice("segmented_vertical_normal.png", $right: 0, $width: 8, $height: 30, $top: 60); } } /* ACTIVE STATE */ &.active { .left { @include slice("segmented_active.png", $left: 100, $width: 8); } .right { @include slice("segmented_active.png", $left: 92, $width: 8); } .middle { @include slice("segmented_active.png", $left: 8, $width: 1, $repeat: repeat-x); } } &.active.sc-first-segment { .left { @include slice("segmented_active.png", $left: 0, $width: 8); } } &.active.sc-last-segment { .right { @include slice("segmented_active.png", $right: 0, $width: 8); } } &.active.vertical { .left { @include slice("segmented_vertical_active.png", $left: 0, $width: 8, $height: 30, $top: 30); } .right { @include slice("segmented_vertical_active.png", $right: 0, $width: 8, $height: 30, $top: 30); } .middle { @include slice("segmented_vertical_active.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 30, $top: 30); } } &.active.sc-first-segment.vertical { .left { @include slice("segmented_vertical_active.png", $left: 0, $width: 8, $height: 30); } .middle { @include slice("segmented_vertical_active.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 30); } .right { @include slice("segmented_vertical_active.png", $right: 0, $width: 8, $height: 30); } } &.active.sc-last-segment.vertical { .left { @include slice("segmented_vertical_active.png", $left: 0, $width: 8, $height: 30, $top: 60); } .middle { @include slice("segmented_vertical_active.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 30, $top: 60); } .right { @include slice("segmented_vertical_active.png", $right: 0, $width: 8, $height: 30, $top: 60); } } /* SELECTED STATE */ &.sel { .left { @include slice("segmented_selected.png", $left: 100, $width: 8); } .right { @include slice("segmented_selected.png", $left: 92, $width: 8); } .middle { @include slice("segmented_selected.png", $left: 8, $width: 1, $repeat: repeat-x); } } &.sel.sc-first-segment { .left { @include slice("segmented_selected.png", $left: 0, $width: 8); } } &.sel.sc-last-segment { .right { @include slice("segmented_selected.png", $right: 0, $width: 8); } } &.sel.vertical { .left { @include slice("segmented_vertical_selected.png", $left: 0, $width: 8, $height: 30, $top: 30); } .right { @include slice("segmented_vertical_selected.png", $right: 0, $width: 8, $height: 30, $top: 30); } .middle { @include slice("segmented_vertical_selected.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 30, $top: 30); } } &.sel.sc-first-segment.vertical { .left { @include slice("segmented_vertical_selected.png", $left: 0, $width: 8, $height: 30); } .middle { @include slice("segmented_vertical_selected.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 30); } .right { @include slice("segmented_vertical_selected.png", $right: 0, $width: 8, $height: 30); } } &.sel.sc-last-segment.vertical { .left { @include slice("segmented_vertical_selected.png", $left: 0, $width: 8, $height: 30, $top: 60); } .middle { @include slice("segmented_vertical_selected.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 30, $top: 60); } .right { @include slice("segmented_vertical_selected.png", $right: 0, $width: 8, $height: 30, $top: 60); } } /* SELECTED ACTIVE STATE */ &.sel.active { .left { @include slice("segmented_selected_active.png", $left: 100, $width: 8); } .right { @include slice("segmented_selected_active.png", $left: 92, $width: 8); } .middle { @include slice("segmented_selected_active.png", $left: 8, $width: 1, $repeat: repeat-x); } } &.sel.active.sc-first-segment { .left { @include slice("segmented_selected_active.png", $left: 0, $width: 8); } } &.sel.active.sc-last-segment { .right { @include slice("segmented_selected_active.png", $right: 0, $width: 8); } } &.sel.active.vertical { .left { @include slice("segmented_vertical_selected_active.png", $left: 0, $width: 8, $height: 30, $top: 30); } .right { @include slice("segmented_vertical_selected_active.png", $right: 0, $width: 8, $height: 30, $top: 30); } .middle { @include slice("segmented_vertical_selected_active.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 30, $top: 30); } } &.sel.active.sc-first-segment.vertical { .left { @include slice("segmented_vertical_selected_active.png", $left: 0, $width: 8, $height: 30); } .middle { @include slice("segmented_vertical_selected_active.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 30); } .right { @include slice("segmented_vertical_selected_active.png", $right: 0, $width: 8, $height: 30); } } &.sel.active.sc-last-segment.vertical { .left { @include slice("segmented_vertical_selected_active.png", $left: 0, $width: 8, $height: 30, $top: 60); } .middle { @include slice("segmented_vertical_selected_active.png", $repeat: repeat-x, $left: 8, $width: 1, $height: 30, $top: 60); } .right { @include slice("segmented_vertical_selected_active.png", $right: 0, $width: 8, $height: 30, $top: 60); } }
}
}