github.com/blixtra/nomad@v0.7.2-0.20171221000451-da9a1d7bb050/ui/app/templates/freestyle.hbs (about) 1 <div id="styleguide"> 2 {{#freestyle-guide title='Nomad UI'subtitle='Styles and Patterns'}} 3 {{#freestyle-section name='Buttons' as |section|}} 4 {{#freestyle-subsection name='Standard' section=section}} 5 {{#freestyle-usage 'buttons-standard' title='Standard Buttons'}} 6 <div class="block"> 7 <a class="button">Button</a> 8 <a class="button is-white">White</a> 9 <a class="button is-light">Light</a> 10 <a class="button is-dark">Dark</a> 11 <a class="button is-black">Black</a> 12 <a class="button is-link">Link</a> 13 </div> 14 <div class="block"> 15 <a class="button is-primary">Primary</a> 16 <a class="button is-info">Info</a> 17 <a class="button is-success">Success</a> 18 <a class="button is-warning">Warning</a> 19 <a class="button is-danger">Danger</a> 20 </div> 21 {{/freestyle-usage}} 22 {{/freestyle-subsection}} 23 24 {{#freestyle-subsection name='Outlines' section=section}} 25 {{#freestyle-usage 'buttons-outlines' title='Outline Buttons'}} 26 <div class="block"> 27 <a class="button is-outlined">Outlined</a> 28 <a class="button is-primary is-outlined">Primary</a> 29 <a class="button is-info is-outlined">Info</a> 30 <a class="button is-success is-outlined">Success</a> 31 <a class="button is-warning is-outlined">Warning</a> 32 <a class="button is-danger is-outlined is-important">Danger</a> 33 </div> 34 {{/freestyle-usage}} 35 {{/freestyle-subsection}} 36 37 {{#freestyle-subsection name='Hollow' section=section}} 38 {{#freestyle-usage 'buttons-hollow' title='Hollow Buttons'}} 39 <div class="block" style="background:#25BA81; padding:30px"> 40 <a class="button is-primary is-inverted is-outlined">Primary</a> 41 <a class="button is-info is-inverted is-outlined">Info</a> 42 <a class="button is-success is-inverted is-outlined">Success</a> 43 <a class="button is-warning is-inverted is-outlined">Warning</a> 44 <a class="button is-danger is-inverted is-outlined">Danger</a> 45 </div> 46 {{/freestyle-usage}} 47 {{/freestyle-subsection}} 48 49 {{#freestyle-subsection name='Sizing' section=section}} 50 {{#freestyle-usage 'buttons-sizing' title='Button Sizes'}} 51 <div class="block"> 52 <a class="button is-small">Small</a> 53 <a class="button">Normal</a> 54 <a class="button is-medium">Medium</a> 55 <a class="button is-large">Large</a> 56 </div> 57 {{/freestyle-usage}} 58 {{/freestyle-subsection}} 59 {{/freestyle-section}} 60 61 {{#freestyle-section name='Distribution Bar' as |section|}} 62 {{#freestyle-subsection name='Standard' section=section}} 63 {{#freestyle-usage 'distribution-bar-standard'}} 64 <div class="block" style="height:50px; width:200px;"> 65 {{distribution-bar data=distributionBarData}} 66 </div> 67 {{/freestyle-usage}} 68 {{#freestyle-annotation}} 69 <div class="block"> 70 The distribution bar chart proportionally show data in a single bar. It includes a tooltip out of the box, assumes the size of the container element, and is designed to be styled with CSS. 71 </div> 72 {{/freestyle-annotation}} 73 {{/freestyle-subsection}} 74 75 {{#freestyle-subsection name='With Classes' section=section}} 76 {{#freestyle-usage 'distribution-bar-with-classes'}} 77 <div class="block" style="height:50px; width:200px;"> 78 {{distribution-bar data=distributionBarDataWithClasses}} 79 </div> 80 {{/freestyle-usage}} 81 {{#freestyle-annotation}} 82 <div class="block"> 83 If a datum provides a <code>className</code> property, it will be assigned to the corresponding <code>rect</code> element, allowing for custom colorization. 84 </div> 85 {{/freestyle-annotation}} 86 {{/freestyle-subsection}} 87 88 {{#freestyle-subsection name='Flexible Sizing' section=section}} 89 {{#freestyle-usage 'distribution-bar-sizing-1'}} 90 <div class="block" style="height:10px; width:600px;"> 91 {{distribution-bar data=distributionBarData}} 92 </div> 93 {{/freestyle-usage}} 94 {{#freestyle-usage 'distribution-bar-sizing-2'}} 95 <div class="block" style="height:200px; width:30px;"> 96 {{distribution-bar data=distributionBarData}} 97 </div> 98 {{/freestyle-usage}} 99 {{#freestyle-annotation}} 100 <div class="block"> 101 Distribution bar assumes the dimensions of the container. 102 </div> 103 {{/freestyle-annotation}} 104 {{/freestyle-subsection}} 105 106 {{#freestyle-subsection name='Updating Data' section=section}} 107 {{#freestyle-usage 'distribution-bar-updating'}} 108 <div class="block" style="height:50px; width:600px;"> 109 {{distribution-bar data=distributionBarDataRotating}} 110 </div> 111 {{/freestyle-usage}} 112 {{#freestyle-annotation}} 113 <div class="block"> 114 Distribution bar animates with data changes. 115 </div> 116 {{/freestyle-annotation}} 117 {{/freestyle-subsection}} 118 {{/freestyle-section}} 119 {{/freestyle-guide}} 120 </div>