cobuild-angular-stack/modules/coupleAccount/views/kitchen-components.html

Base stack angular sass jade gulp

<div id="kitchen" class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <a class="btn btn-clear">.btn .btn-clear</a>
            <a class="btn btn-inverse">.btn .btn-inverse</a>
            <a class="btn btn-dark">.btn .btn-dark</a>
            <a class="btn btn-brown">.btn .btn-brown</a>
            <a class="btn btn-gray">.btn .btn-gray</a>
        </div>
        <div class="col-md-4">
            <a class="btn btn-clear disabled">.btn .btn-clear</a>
            <a class="btn btn-inverse disabled">.btn .btn-inverse</a>
            <a class="btn btn-dark disabled">.btn .btn-dark</a>
        </div>
        <div class="col-md-4">
            <div class="btn-group">
                <a class="btn btn-inverse">.btn-inverse</a>
                <a data-target="#" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a>Action</a></li>
                    <li><a>Another action</a></li>
                    <li><a>Something else here</a></li>
                    <li class="divider"></li>
                    <li><a>Separated link</a></li>
                </ul>
            </div>
            <div class="btn-group">
                <a class="btn btn-clear">.btn-clear</a>
                <a data-target="#" class="btn btn-clear dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a>Action</a></li>
                    <li><a>Another action</a></li>
                    <li><a>Something else here</a></li>
                    <li class="divider"></li>
                    <li><a>Separated link</a></li>
                </ul>
            </div>
            <div class="dropdown btn-group">
                <button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Dropdown
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="row margin-top">
        <div class="col-md-4">
            <div class="form-group label-floating">
                <label class="control-label" for="focusedInput1">
                    Write something to make the label float</label>
                <input class="form-control" id="focusedInput1" type="text">
            </div>
            <div class="form-group label-floating">
                <label class="control-label" for="focusedInput2">Focus to show the help-block</label>
                <input class="form-control" id="focusedInput2" type="text">
                <p class="help-block">You should really write something here</p>
            </div>
            <div class="form-group">
                <label class="control-label" for="disabledInput">Disabled input</label>
                <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled="">
            </div>
            <div class="form-group has-warning">
                <label class="control-label" for="inputWarning">Input warning</label>
                <input type="text" class="form-control" id="inputWarning">
                <p class="help-block">You should really write something here</p>
            </div>
        </div>
        <div class="col-md-4">
            <form class="form-inline">
                <div class="form-group">
                    <label class="control-label" for="exampleInputName2">{{'name' | translate}}</label>
                    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
                </div>
                <div class="form-group">
                    <label class="control-label" for="exampleInputEmail2">{{'email' | translate}}</label>
                    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
                </div>
                <!-- <button type="submit" class="btn btn-clear">Send</button> -->
            </form>
            <form class="form-inline margin-top">
                <div class="form-group">
                    <label class="sr-only" for="exampleInputAmount">{{'amount' | translate}} (in dollars)</label>
                    <div class="input-group">
                        <div class="input-group-addon">$</div>
                        <input type="text" class="form-control" id="exampleInputAmount" placeholder="{{'amount' | translate}}">
                        <div class="input-group-addon">.00</div>
                    </div>
                </div>
                <button type="submit" class="btn btn-inverse">Transfer</button>
            </form>
            <form class="form-horizontal margin-top">
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-12 control-label">{{'email' | translate}}</label>
                    <div class="col-sm-12">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="{{'email' | translate}}">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-12 control-label">{{'comments' | translate}}</label>
                    <div class="col-sm-12">
                        <textarea class="form-control"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="">
                        <button type="buttin" class="btn btn-clear-dark">.btn-clear-dark</button>
                        <button type="submit" class="btn btn-clear">.btn-clear</button>
                        <button type="submit" class="btn btn-clear brown-font">.btn-clear .brown-font</button>
                        <button type="submit" class="btn btn-clear gray-font">.btn-clear .gray-font</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-md-4">
            <div>
                <input type="radio" id="radio1" name="radios" value="all">
                <label for="radio1">
                    <div></div>
                </label> Option one is this and that—be sure to include why it's great
            </div>
            <div>
                <input type="radio" id="radio2" name="radios" value="all">
                <label for="radio2">
                    <div></div>
                </label> Option two can be something else and selecting it will deselect option one
            </div>
            <div>
                <input type="checkbox" id="checkbox1" value="all">
                <label for="checkbox1">
                    <div></div>
                </label> Option two can be something else and selecting it will deselect option one
            </div>
            <select class="form-control">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
            <ol class="breadcrumb margin-top">
                <li><a href="#">Home</a></li>
                <li><a href="#">Library</a></li>
                <li class="active">Data</li>
            </ol>
            <div class="list-group margin-top">
                <a href="#" class="list-group-item active">
			    	Cras justo odio
			  	</a>
                <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
                <a href="#" class="list-group-item">Morbi leo risus</a>
                <a href="#" class="list-group-item">Porta ac consectetur ac</a>
                <a href="#" class="list-group-item">Vestibulum at eros</a>
            </div>
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-inverse btn-lg" data-toggle="modal" data-target="#myModal">
                Launch demo modal
            </button>
            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                        </div>
                        <div class="modal-body">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-dark" data-dismiss="modal">{{'close' | translate}}</button>
                            <button type="button" class="btn btn-inverse">{{'save-changes' | translate}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            <span class="label inverse">.inverse</span>
            <span class="label dark">.dark</span>
            <span class="label brown">.brown</span>
            <span class="label gray">.gray</span>
            <button class="btn btn-inverse" type="button">
                Messages <span class="badge">4</span>
            </button>
            <div class="alert inverse margin-top" role="alert">Alert</div>
            <div class="alert dark" role="alert">Alert</div>
            <div class="progress margin-top">
                <div class="progress-bar inverse" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                    <span class="sr-only">60% Complete</span>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading inverse">Panel heading without title</div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading dark">Panel heading without title</div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading brown">Panel heading without title</div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading gray">Panel heading without title</div>
                <div class="panel-body">
                    Panel content
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <nav>
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li class="active"><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <nav>
                <ul class="pager">
                    <li><a href="#">Previous</a></li>
                    <li><a href="#">Next</a></li>
                </ul>
            </nav>
            <ul class="nav nav-pills">
                <li role="presentation" class="active"><a href="#">Home</a></li>
                <li role="presentation"><a href="#">Profile</a></li>
                <li role="presentation"><a href="#">Messages</a></li>
            </ul>
            <ul class="nav nav-pills nav-stacked margin-top">
                <li role="presentation" class="active"><a href="#">Home</a></li>
                <li role="presentation"><a href="#">Profile</a></li>
                <li role="presentation"><a href="#">Messages</a></li>
            </ul>
        </div>
    </div>
</div>