tests/manual/icon.html

	icon.html revision 6aaa468f50af23f08685835d1984767b81a4446a
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright<!DOCTYPE html>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright<html>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright    <head>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <!-- reset the default browser styles -->
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <style>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            .yui3-button-icon {
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                background-repeat: no-repeat;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                display: inline-block;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                height: 20px;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                vertical-align: middle;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                width: 20px;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            }
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            .yui3-button-icon {
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                background-image: url("/assets/icon-sprite-dark-and-light-24.png");
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            }
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            .yui3-button-icon-bold {
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright              background-position: 1px -1px;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            }
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            .yui3-button-icon-italic {
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright              background-position: 1px -37px;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            }
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            .yui3-button-icon-underline {
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright              background-position: 1px -73px;
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            }
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        </style>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <script src='/build/yui/yui-min.js'></script>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <script>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            YUI({
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                base: '/build/',
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                debug: true,
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                combo: false,
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright                filter: 'raw'
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            }).use('button', 'cssfonts', function(Y){
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            });
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        </script>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright    </head>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright    <body>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <h1>Button Example: Icons</h1>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <button class="yui3-button">
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            <span class="yui3-button-icon yui3-button-icon-bold"></span>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        </button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <button class="yui3-button">
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            <span class="yui3-button-icon yui3-button-icon-bold"></span>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            Bold
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        </button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <br /><br />
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <button class="yui3-button">
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            <span class="yui3-button-icon yui3-button-icon-italic"></span>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        </button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <button class="yui3-button">
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            <span class="yui3-button-icon yui3-button-icon-italic"></span>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            Italic
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        </button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <br /><br />
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <button class="yui3-button">
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            <span class="yui3-button-icon yui3-button-icon-underline"></span>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        </button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        <button class="yui3-button">
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            <span class="yui3-button-icon yui3-button-icon-underline"></span>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright            Underline
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright        </button>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright    </body>
6aaa468f50af23f08685835d1984767b81a4446aDerek Gathright</html>