|
| 1 | +<!doctype html> |
| 2 | +<html ng-app="720kb"> |
| 3 | + <head> |
| 4 | + <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"/> |
| 5 | + <link rel="stylesheet" type="text/css" href="dist/angular-tooltips.css"> |
| 6 | + <title>Angularjs Tooltips Flexbox Test</title> |
| 7 | + <style> |
| 8 | + .clearfix:after { content: "."; display:block; font-size:0; line-height:0; height:0; clear:both; visibility:hidden; } |
| 9 | + .clearfix { display:inline-block; } |
| 10 | + * html .clearfix { height:1%; } |
| 11 | + .clearfix { display:block; } |
| 12 | + body {margin:0; background:#FFF url(img/body.png); -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; padding:10px 2%; font:14px/24px 'Open Sans', Helvetica, Arial, sans-serif ; color:#000;} |
| 13 | + #wrapper { background:#FFF; width:1200px; margin:0 auto; border:solid 0px #E7E7E7; border-top:5px solid #0088cc; border-radius:6px; box-shadow:0 0 3px rgba(0,0,0,0.2), inset 0 4px 0 #ededed } |
| 14 | + #header { padding:30px 20px; border-bottom:solid 1px #e0e0e0; margin-bottom:20px; text-align:center; font-family:'Open Sans', sans-serif;} |
| 15 | + #logo { display:inline-block; font-weight:300; margin:0 0 0px; font-size:30px; line-height:24px; color:#000; text-decoration:none; position:relative; } |
| 16 | + #logo span{ color:#0088cc;} |
| 17 | + section { padding:0 20px 20px} |
| 18 | + h2{ font:300 22px/30px 'Open Sans', sans-serif; margin:0 0 10px 0; padding:0} |
| 19 | + h2 span{color:#0088cc;} |
| 20 | + .classname { display:block; padding:20px; border:solid 2px #CCC; text-align:center;} |
| 21 | + /*Generated Css*/ |
| 22 | + .classname > div{ width:50px; height:50px; padding:10px; background:#037CD5; margin:5px; color:#FFF; text-shadow:0 0 0 rgba(000,000,000,.5); } .classname {min-height:250px;} |
| 23 | + .classname{display:flex ; flex-direction:row ; flex-wrap:wrap ; justify-content:space-around ; align-items:center ; align-content:center } |
| 24 | + </style> |
| 25 | + </head> |
| 26 | + <body id="demo-container" ng-controller="DemoCtrl as demoCtrl"> |
| 27 | + <section class="clearfix"> |
| 28 | + <a href="http://www.htmllion.com/css-flexbox.html" target="_blank">by HTML lion</a> <h2>CSS<span> Flexbox</span></h2> |
| 29 | + <div class="classname"> |
| 30 | + <div>1</div> |
| 31 | + <div tooltips tooltip-append-to-body="true" tooltip-template="A tooltip in flex box">I am a tooltip</div> |
| 32 | + <div>3</div> |
| 33 | + </div> |
| 34 | + </section> |
| 35 | + <script type="text/javascript" src="bower_components/angular/angular.js"></script> |
| 36 | + <script type="text/javascript" src="dist/angular-tooltips.js"></script> |
| 37 | + <script type="text/javascript" src="demo/js/index.js"></script> |
| 38 | + </body> |
| 39 | +</html> |
0 commit comments