Source of file buttons.php
Size: 14,792 Bytes - Last Modified: 2021-12-24T07:20:59+00:00
/var/www/docs.ssmods.com/process/src/public/buttons.php
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339 | <?php include("header.php")?> <div class="page secondary"> <div class="page-header"> <div class="page-header-content"> <h1>Buttons<small>demo</small></h1> <a href="/" class="back-button big page-back"></a> </div> </div> <div class="page-region"> <div class="page-region-content"> <div class="grid"> <div class="row"> <div class="span5"> <h2>Push Button</h2> <button class="standart">Button</button> <button class="standart default">Button</button> <button class="standart" disabled="">Button</button> <p><small>You can also change the color of the button by <br />adding bg-color-* class. Example:</small></p> <button class="bg-color-orange">Button</button> <button class="bg-color-red">Button</button> <button class="bg-color-green">Button</button> <button class="bg-color-purple">Button</button> <button class="bg-color-blue">Button</button> <button class="bg-color-grayDark">Button</button> <p> <small>You can use tag <code><a></code> for creating button with class <code>.button</code></small> </p> <a class="button">Button</a> <a class="button default">Button</a> <a class="button disabled">Button</a> </div> <div class="span5"> <h2>Command Button</h2> <button class="command-button">Yes, share and connect<small>Use this option for home or work</small></button> <button class="command-button default">Yes, share and connect<small>Use this option for home or work</small></button> <button class="command-button">Tertiary command, do not press :)</button> <button class="command-button" disabled="">This is disabled command button</button> </div> </div> <div class="row"> <div class="span10"> <pre class="prettyprint linenums"> <button>Button</button> <button class="default">Button</button> <button disabled>Button</button> <a class="button">Button</a> </pre> <pre class="prettyprint linenums"> <button class="command-button"> Yes, share and connect <small>Use this option for home or work</small> </button> <button class="command-button default">...</button> <button class="command-button" disabled>...</button> </pre> </div> </div> <div class="row"> <div class="span10"> <h2>Toolbar</h2> <div class="toolbar"> <button><i class="icon-home"></i></button> <button><i class="icon-bookmark"></i></button> <button><i class="icon-phone"></i></button> <button><i class="icon-compass"></i></button> <button><i class="icon-mail"></i></button> </div> <pre class="prettyprint linenums"> <div class="toolbar"> <button /> ... <button /> </div> </pre> <h2>Toolbar buttons group</h2> <div class="toolbar"> <div class="toolbar-group"> <button></button> <button></button> <button></button> </div> <div class="toolbar-group"> <button></button> <button></button> <button></button> </div> <div class="toolbar-group"> <button class="big"> <i class="icon-home"></i> </button> <button class="big"><i class="icon-home"></i></button> <button class="big"></button> </div> </div> <pre class="prettyprint linenums"> <div class="toolbar"> <div class="toolbar-group"> <button /> ... <button /> </div> ... <div class="toolbar-group"> <button /> ... <button /> </div> </div> </pre> <h2>Toolbar Vertical</h2> <div class="clearfix"> <div class="toolbar-vertical"> <button>1</button> <button>2</button> <button>3</button> </div> </div> <pre class="prettyprint linenums"> <div class="toolbar-vertical"> <button /> ... <button /> </div> </pre> <h2>Toolbar Vertical with groups</h2> <div class="clearfix"> <div class="toolbar-vertical"> <div class="toolbar-group"> <button>1</button> <button>2</button> <button>3</button> </div> <div class="toolbar-group"> <button>1</button> <button>2</button> <button>3</button> </div> </div> </div> <pre class="prettyprint linenums"> <div class="toolbar-vertical"> <div class="toolbar-group"> <button /> ... <button /> </div> ... <div class="toolbar-group"> <button /> ... <button /> </div> </div> </pre> </div> </div> <div class="row"> <div class="span10"> <h2>Image button</h2> <button class="image-button bg-color-darken fg-color-white">Download source<img class="bg-color-green" src="images/download-32.png"/></button> <button class="image-button bg-color-pink fg-color-white">Armor you computer<img class="bg-color-red" src="images/armor.png"/></button> <button class="image-button bg-color-blue fg-color-white">Alarm, alarm<i class="icon-alarm bg-color-red"></i></button> <pre class="prettyprint linenums"> <button class="image-button"> Caption <img/> </button> =================== <button class="image-button bg-color-darken fg-color-white">Download<img src="images/down.png"/></button> =================== <button class="image-button bg-color-blue fg-color-white"> Alarm, alarm <i class="icon-alarm bg-color-red"></i> </button> </pre> </div> </div> <div class="row"> <div class="span10"> <h2>Any size of button</h2> <div> <button class="mini"><i class="icon-home"></i>Mini</button> <button class="mini">Mini<i class="icon-home right"></i></button> <button class="mini">Mini</button> </div> <div> <button><i class="icon-home"></i>Default</button> <button>Default<i class="icon-home right"></i></button> <button>Default</button> </div> <div> <button class="big">Big button</button> <button class="big"><i class="icon-arrow-left-3"></i>Big button</button> <button class="big">Big button<i class="icon-arrow-right-3 right"></i></button> </div> <pre class="prettyprint linenums"> <button class="mini"> Caption </button> <button> Caption </button> <button class="big"> Caption </button> </pre> </div> </div> <div class="row"> <div class="span10"> <h2>Button with icon</h2> <button><i class="icon-bookmark"></i> Button</button> <button>Button <i class="icon-bookmark"></i></button> <button class="default">Button <i class="icon-bookmark"></i></button> <a class="button">Button <i class="icon-bookmark"></i></a> <pre class="prettyprint linenums"> <button><i class="icon-*"></i>Caption</button> <button>Caption<i class="icon-*"></i></button> <button class="default"><i class="icon-*"></i>Caption</button> <a class="button"><i class="icon-*"></i>Caption</a> </pre> </div> </div> <div class="row"> <div class="span10"> <h2>Shortcuts with icon</h2> <p> You can use any tags to create shortcut button. This may be <code>a</code>, <code>button</code>, <code>span</code>, etc. To set background or foreground color shortcut or badge in shortcut, you can use color classes. </p> <button class="shortcut"> <span class="icon"> <i class="icon-bookmark"></i> </span> <span class="label"> Bookmark </span> </button> <button class="shortcut"> <span class="icon"> <i class="icon-user-3"></i> </span> <span class="label"> Users </span> <span class="badge">100</span> </button> <a class="shortcut"> <span class="icon"> <i class="icon-link"></i> </span> <span class="label"> Links </span> <span class="badge bg-color-red">100</span> </a> <pre class="prettyprint linenums"> <button class="shortcut"> <span class="icon"> <i class="icon-*"></i> </span> <span class="label"> Caption </span> <span class="badge">100</span> </button> </pre> </div> </div> <div class="row"> <div class="span10"> <h2>Pagination control</h2> <div class="pagination"> <ul> <li class="first"><a></a></li> <li class="prev"><a></a></li> <li><a>1</a></li> <li><a>2</a></li> <li class="active"><a>3</a></li> <li class="spaces"><a>...</a></li> <li class="disabled"><a>4</a></li> <li><a>500</a></li> <li class="next"><a></a></li> <li class="last"><a></a></li> </ul> </div> <pre class="prettyprint linenums"> <div class="pagination"> <ul> <li class="first"><a></a></li> <li class="prev"><a></a></li> <li><a>1</a></li> ... <li class="active"><a>1</a></li> <li class="disabled"><a>1</a></li> <li class="spaces"><a>...</a></li> ... <li><a>N</a></li> <li class="next"><a></a></li> <li class="last"><a></a></li> </ul> </div> </pre> </div> </div> </div> <div class="grid"> <div class="row"> <? include("adsense.php")?> </div> </div> </div> </div> </div> <?php include("footer.php")?> |