documize/gui/app/templates/components/widget-sample.hbs

<div class="basic-card">
    Hello
</div>
<div class="clearfix" />
<br/>


<div class="round-button-mono" id="sample-1" data-tooltip="Share folder" data-tooltip-position="top center">
    <i class="material-icons">share</i>
</div>
<div class="round-button-mono" id="sample-2" data-tooltip="Share folder" data-tooltip-position="top center">
    <i class="material-icons">clear</i>
</div>
<div class="round-button-mono" id="sample-" data-tooltip="Share folder" data-tooltip-position="top center">
    <i class="material-icons">settings</i>
</div>
<div class="round-button-mono" id="delete-folder">
    <i class="material-icons">delete</i>
</div>
<div class="clearfix" />
<br/>


<div class="round-button button-red" id="sample-3" data-tooltip="Share folder" data-tooltip-position="top center">
    <i class="material-icons">share</i>
</div>
<div class="round-button button-blue" id="sample-4" data-tooltip="Share folder" data-tooltip-position="top center">
    <i class="material-icons">share</i>
</div>
<div class="round-button button-green" data-tooltip="Share folder" data-tooltip-position="top center">
    <i class="material-icons">share</i>
</div>
<div class="round-button button-gray" id="" data-tooltip="Share folder" data-tooltip-position="top center">
    <i class="material-icons">question_answer</i>
</div>
<div class="clearfix" />
<br/>


<div class="square-button button-red" id="sample-3" data-tooltip="Share folder" data-tooltip-position="top center">
    <i class="material-icons">share</i>
</div>
<div class="square-button button-blue" id="sample-4" data-tooltip="Share folder" data-tooltip-position="top center">
    <i class="material-icons">share</i>
</div>
<div class="square-button button-green" id="sample-dropdown-1" data-tooltip="Share folder" data-tooltip-position="top center">
    <i class="material-icons">share</i>
</div>
<div class="square-button button-gray" data-tooltip="Share folder" data-tooltip-position="top center">
    <i class="material-icons">question_answer</i>
</div>
<div class="clearfix" />
<br/>


<div class="regular-button button-red" data-tooltip="Share folder" data-tooltip-position="top center">
    delete
</div>
<div class="regular-button button-blue" data-tooltip="Share folder" data-tooltip-position="top center">
    save
</div>
<div class="regular-button button-green" data-tooltip="Share folder" data-tooltip-position="top center">
    update
</div>
<div class="regular-button button-gray" id="dropdown-menu-1">
    menu
</div>
<div class="clearfix" />
<br/>


<div class="flat-button">
    cancel
</div>
<div class="flat-button flat-blue">
    Got it
</div>
<div class="flat-button flat-green">
    save
</div>
<div class="flat-button flat-red">
    delete
</div>
<div class="flat-button flat-gray">
    ok
</div>
<div class="clearfix" />
<br/>


<div class="chip">
  <span class="chip-text">#finance</span>
    <i class="material-icons right">clear</i>
</div>
<div class="chip">
  <span class="chip-text">#records</span>
</div>
<div class="clearfix" />
<br/>
<br/>


<div class="margin-left-50" style="width: 300px;">
    <div class="input-control">
        <label>Name</label>
        <input type="text" value="">
    </div>

    <div class="input-control">
        <label>Email</label>
        <input type="text" value="">
    </div>

    <div class="input-control">
        <label>Notes</label>
        <div class="tip">No more than 200 characters</div>
        <textarea rows="3"></textarea>
    </div>
    <div class="regular-button button-blue">
        save
    </div>
</div>
<br/>
<br/>


<div id="sample-dropdown-content-1" class="dropdown-dialog">
    <div class="content">
        <p>Are you sure you want to delete this folder?</p>
    </div>
    <div class="actions">
        <div class="flat-button" {{action 'dropClose'}}>
            cancel
        </div>
        <div class="flat-button flat-red">
            delete
        </div>
    </div>
    <div class="clearfix"></div>
</div>

{{#dropdown-dialog target="delete-folder" position="bottom left" button="Add" color="flat-red" onAction=(action 'addFolder')}}
    <p>Are you sure you want to delete this folder?</p>
    <p>There is no undo!</p>
{{/dropdown-dialog}}

{{#dropdown-dialog target="help-dropdown" position="bottom left" button="Got it" color="flat-blue" showCancel=false callback=false}}
    <p>Some text here to help you.</p>
    <p>That you can read.</p>
{{/dropdown-dialog}}

{{#dropdown-menu target="dropdown-menu-1" position="bottom right"}}
    <ul class="menu">
        <li class="item" {{action 'showNotification' 'Yes, yes.'}}>Profile</li>
        <li class="item" {{action 'showNotification' 'Saved profile'}}>Settings</li>
        <li class="divider"></li>
        <li class="item">Sign out</li>
    </ul>
{{/dropdown-menu}}