/** * Variables to customize the look and feel from Bootstrap. * * @author yiminghe@gmail.com */ /** * Snippets of reusable CSS to develop faster and keep code readable from KISSY and Bootstrap. * * @author yiminghe@gmail.com */ /** * Variables to customize the look and feel from Bootstrap. * * @author yiminghe@gmail.com */ .ks-tabs { *zoom: 1; } .ks-tabs:before, .ks-tabs:after { display: table; content: ""; } .ks-tabs:after { clear: both; } .ks-tabs-bar { background-image: none; background-color: transparent; border-width: 0px; outline: none; filter: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); margin-bottom: 18px; } .ks-tabs-body { overflow: auto; } .ks-tabs-body > .ks-tabs-panel { display: none; } .ks-tabs-body > .ks-tabs-panel-selected { display: block; } .ks-tabs-bar .ks-tabs-tab.ks-button { padding: 8px 12px 8px 12px; margin: 0; border: 1px solid transparent; color: #aeaeae; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); background: none; cursor: pointer; } .ks-tabs-bar .ks-tabs-tab.ks-button.ks-tabs-tab-hover, .ks-tabs-bar .ks-tabs-tab.ks-button:hover { background-color: #eeeeee; border-color: #eeeeee; } .ks-tabs-bar .ks-tabs-tab.ks-button.ks-tabs-tab-selected, .ks-tabs-bar .ks-tabs-tab.ks-button.ks-tabs-tab-selected.ks-tabs-tab-active { color: #888888; background-color: #ffffff; cursor: default; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .ks-tabs-top > .ks-tabs-bar { *zoom: 1; border-bottom: 1px solid #bbbbbb; } .ks-tabs-top > .ks-tabs-bar:before, .ks-tabs-top > .ks-tabs-bar:after { display: table; content: ""; } .ks-tabs-top > .ks-tabs-bar:after { clear: both; } .ks-tabs-top > .ks-tabs-bar > .ks-tabs-tab { /* inline-block cause whitespace in ie67 float is perfect */ float: left; margin-right: 2px; display: inline; margin-bottom: -1px; border-radius: 4px 4px 0 0; } .ks-tabs-top > .ks-tabs-bar > .ks-tabs-tab.ks-tabs-tab-selected, .ks-tabs-top > .ks-tabs-bar > .ks-tabs-tab.ks-tabs-tab-selected.ks-tabs-tab-active { border-color: #bbbbbb #bbbbbb transparent #bbbbbb; /* ie7 transparent border makes bar border leaks*/ *border-bottom-color: white; } .ks-tabs-bottom > .ks-tabs-bar { *zoom: 1; border-top: 1px solid #bbbbbb; } .ks-tabs-bottom > .ks-tabs-bar:before, .ks-tabs-bottom > .ks-tabs-bar:after { display: table; content: ""; } .ks-tabs-bottom > .ks-tabs-bar:after { clear: both; } .ks-tabs-bottom > .ks-tabs-bar > .ks-tabs-tab { float: left; margin-right: 2px; display: inline; margin-top: -1px; border-radius: 0 0 4px 4px; } .ks-tabs-bottom > .ks-tabs-bar > .ks-tabs-tab.ks-tabs-tab-selected, .ks-tabs-bottom > .ks-tabs-bar > .ks-tabs-tab.ks-tabs-tab-selected.ks-tabs-tab-active { border-color: transparent #bbbbbb #bbbbbb #bbbbbb; *border-top-color: white; } .ks-tabs-left > .ks-tabs-bar { margin-right: 18px; border-right: 1px solid #bbbbbb; float: left; } .ks-tabs-left > .ks-tabs-bar > .ks-tabs-tab { margin-right: -1px; border-radius: 4px 0 0 4px; display: block; margin-bottom: 2px; } .ks-tabs-left > .ks-tabs-bar > .ks-tabs-tab.ks-tabs-tab-selected, .ks-tabs-left > .ks-tabs-bar > .ks-tabs-tab.ks-tabs-tab-selected.ks-tabs-tab-active { border-color: #bbbbbb transparent #bbbbbb #bbbbbb; *border-right-color: white; } .ks-tabs-right > .ks-tabs-bar { margin-left: 18px; border-left: 1px solid #bbbbbb; float: right; } .ks-tabs-right > .ks-tabs-bar > .ks-tabs-tab { margin-left: -1px; border-radius: 0 4px 4px 0; display: block; margin-bottom: 2px; } .ks-tabs-right > .ks-tabs-bar > .ks-tabs-tab.ks-tabs-tab-selected, .ks-tabs-right > .ks-tabs-bar > .ks-tabs-tab.ks-tabs-tab-selected.ks-tabs-tab-active { border-color: #bbbbbb #bbbbbb #bbbbbb transparent; *border-left-color: white; }