Buttons for menu revamped (#40)

* menu buttons revamped
This commit is contained in:
Anwesh Nayak
2018-06-08 00:05:25 +05:30
committed by GitHub
parent c52f192b26
commit 928997b5de
3 changed files with 160 additions and 138 deletions
@@ -70,7 +70,7 @@
</aw-wizard-step> </aw-wizard-step>
<aw-wizard-step stepTitle="Title of step 2" [navigationSymbol]="{ symbol: '2' }" awOptionalStep> <aw-wizard-step stepTitle="Title of step 2" [navigationSymbol]="{ symbol: '2' }" >
<div class="col-sm-6 mx-auto"> <div class="col-sm-6 mx-auto">
<div class="card mt-5"> <div class="card mt-5">
<!-- <div class="card-header"><legend> Loan</legend></div> <!-- <div class="card-header"><legend> Loan</legend></div>
+154 -134
View File
@@ -5,15 +5,26 @@
<div class="col text-center"> <div class="col text-center">
<div class="card border-secondary d-inline-block mt-5"> <div class="card border-secondary d-inline-block mt-5">
<button type="button" class="btn btn-flat btn-default"><b>Add Loan</b></button> <div class="btn-group" role="group">
<button type="button" class="btn btn-flat btn-default"><b>Approve</b></button> <button type="button" class="btn btn-flat btn-default">
<button type="button" class="btn btn-flat btn-default"><b>Modify</b></button> <b>Add Loan</b>
<button type="button" class="btn btn-flat btn-default"><b>Reject</b></button> </button>
<button type="button" class="btn btn-flat btn-default"><b>More</b></button> <button type="button" class="btn btn-flat btn-default">
<b>Approve</b>
</button>
<button type="button" class="btn btn-flat btn-default">
<b>Modify</b>
</button>
<button type="button" class="btn btn-flat btn-default">
<b>Reject</b>
</button>
<button type="button" class="btn btn-flat btn-default">
<b>More</b>
</button>
</div>
</div> </div>
</div> </div>
<div class="row mt-5 mb-5"> <div class="row mt-5 mb-5">
<div class="col-sm-4"> <div class="col-sm-4">
<div class="card"> <div class="card">
@@ -185,124 +196,127 @@
</div> </div>
</div> </div>
<div class="card bg-secondary mb-5 mt-5"> <div class="card bg-secondary mb-5 mt-5">
<ngb-tabset class="ml-3 mt-1 mr-3" > <ngb-tabset class="ml-3 mt-1 mr-3">
<ngb-tab title="Simple"> <ngb-tab title="Simple">
<ng-template ngbTabContent>
<table class="table table-active table-hover table-responsive-md table-fixed mt-3">
<!--Table head--> <ng-template ngbTabContent>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
<th>Country</th>
<th>City</th>
<th>Position</th>
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<tr>
<th scope="row">4</th>
<td>Jerry</td>
<td>Horwitz</td>
<td>Italy</td>
<td>Bari</td>
<td>Editor-in-chief</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Janis</td>
<td>Joplin</td>
<td>Poland</td>
<td>Warsaw</td>
<td>Video Maker</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Gary</td>
<td>Winogrand</td>
<td>Germany</td>
<td>Berlin</td>
<td>Photographer</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Angie</td>
<td>Smith</td>
<td>USA</td>
<td>San Francisco</td>
<td>Teacher</td>
</tr>
<tr>
<th scope="row">8</th>
<td>John</td>
<td>Mattis</td>
<td>France</td>
<td>Paris</td>
<td>Actor</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Otto</td>
<td>Morris</td>
<td>Germany</td>
<td>Munich</td>
<td>Singer</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Otto</td>
<td>Morris</td>
<td>Germany</td>
<td>Munich</td>
<td>Singer</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Otto</td>
<td>Morris</td>
<td>Germany</td>
<td>Munich</td>
<td>Singer</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Otto</td>
<td>Morris</td>
<td>Germany</td>
<td>Munich</td>
<td>Singer</td>
</tr>
</tbody>
<!--Table body-->
</table>
</ng-template>
</ngb-tab>
<ngb-tab>
<ng-template ngbTabTitle><b>Title</b></ng-template>
<ng-template ngbTabContent> <table class="table table-active table-hover table-responsive-md table-fixed mt-3">
<thead> <table class="table table-active table-hover table-responsive-md table-fixed mt-3">
<!--Table head-->
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
<th>Country</th>
<th>City</th>
<th>Position</th>
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<tr>
<th scope="row">4</th>
<td>Jerry</td>
<td>Horwitz</td>
<td>Italy</td>
<td>Bari</td>
<td>Editor-in-chief</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Janis</td>
<td>Joplin</td>
<td>Poland</td>
<td>Warsaw</td>
<td>Video Maker</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Gary</td>
<td>Winogrand</td>
<td>Germany</td>
<td>Berlin</td>
<td>Photographer</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Angie</td>
<td>Smith</td>
<td>USA</td>
<td>San Francisco</td>
<td>Teacher</td>
</tr>
<tr>
<th scope="row">8</th>
<td>John</td>
<td>Mattis</td>
<td>France</td>
<td>Paris</td>
<td>Actor</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Otto</td>
<td>Morris</td>
<td>Germany</td>
<td>Munich</td>
<td>Singer</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Otto</td>
<td>Morris</td>
<td>Germany</td>
<td>Munich</td>
<td>Singer</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Otto</td>
<td>Morris</td>
<td>Germany</td>
<td>Munich</td>
<td>Singer</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Otto</td>
<td>Morris</td>
<td>Germany</td>
<td>Munich</td>
<td>Singer</td>
</tr>
</tbody>
<!--Table body-->
</table>
</ng-template>
</ngb-tab>
<ngb-tab>
<ng-template ngbTabTitle>
<b>Title</b>
</ng-template>
<ng-template ngbTabContent>
<table class="table table-active table-hover table-responsive-md table-fixed mt-3">
<thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">First</th> <th scope="col">First</th>
@@ -330,16 +344,22 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</ng-template> </ng-template>
</ngb-tab> </ngb-tab>
<ngb-tab title="Disabled"> <ngb-tab title="Disabled">
<ng-template ngbTabContent> <ng-template ngbTabContent>
<p>Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi. Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et odio. Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed diam urna, egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim, nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies in eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p> <p>Sed commodo, leo at suscipit dictum, quam est porttitor sapien, eget sodales nibh elit id diam. Nulla facilisi.
</ng-template> Donec egestas ligula vitae odio interdum aliquet. Duis lectus turpis, luctus eget tincidunt eu, congue et odio.
</ngb-tab> Duis pharetra et nisl at faucibus. Quisque luctus pulvinar arcu, et molestie lectus ultrices et. Sed diam urna,
</ngb-tabset> egestas ut ipsum vel, volutpat volutpat neque. Praesent fringilla tortor arcu. Vivamus faucibus nisl enim,
nec tristique ipsum euismod facilisis. Morbi ut bibendum est, eu tincidunt odio. Orci varius natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Mauris aliquet odio ac lorem aliquet ultricies in
eget neque. Phasellus nec tortor vel tellus pulvinar feugiat.</p>
</ng-template>
</ngb-tab>
</ngb-tabset>
</div>
</div> </div>
</div> </div>
</div>
@@ -7,6 +7,8 @@
border:0; border:0;
} }
.card-color{ .btn {
background-color:gray; border: 1px solid #DDD;
} border-right-width: 0;
border-radius: 0;
}