Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-26 12:18:49 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(ui-features): add the buttons page

Browse source
This commit is contained in:
Alexander Zhukov 2017-05-02 19:28:27 +03:00
parent 3d4cf8754f
commit 44318d9e25
9 changed files with 112 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/app/pages/ui-features/buttons/buttons.component.html
View file

@ -5,7 +5,7 @@
Flat buttons
</nga-card-header>
<nga-card-body>
<ngx-flat-buttons></ngx-flat-buttons>
<ngx-flat-buttons class="button-panel"></ngx-flat-buttons>
</nga-card-body>
</nga-card>
</div>
@ -15,7 +15,7 @@
Raised buttons
</nga-card-header>
<nga-card-body>
<ngx-raised-buttons></ngx-raised-buttons>
<ngx-raised-buttons class="button-panel"></ngx-raised-buttons>
</nga-card-body>
</nga-card>
</div>
@ -25,7 +25,7 @@
Different sizes
</nga-card-header>
<nga-card-body>
<ngx-sized-buttons></ngx-sized-buttons>
<ngx-sized-buttons class="button-panel df-size-button-panel"></ngx-sized-buttons>
</nga-card-body>
</nga-card>
</div>
@ -35,7 +35,7 @@
Disabled
</nga-card-header>
<nga-card-body>
<ngx-disabled-buttons></ngx-disabled-buttons>
<ngx-disabled-buttons class="button-panel"></ngx-disabled-buttons>
</nga-card-body>
</nga-card>
</div>
@ -69,7 +69,7 @@
Large buttons
</nga-card-header>
<nga-card-body>
<ngx-large-buttons></ngx-large-buttons>
<ngx-large-buttons class="large-buttons-panel"></ngx-large-buttons>
</nga-card-body>
</nga-card>
</div>

112
src/app/pages/ui-features/buttons/buttons.component.scss
View file

@ -1,63 +1,79 @@
:host {
display: block;
font-size: 1rem;
/deep/ {
.basic-btns {
padding-top: 8px;
margin-bottom: -8px;
h5 {
line-height: 35px;
font-size: 12px;
&.row-sm {
line-height: 30px;
}
&.row-xs {
line-height: 22px;
}
}
& {
.row {
padding-bottom: 4px;
}
}
}
.btns-row {
& {
div {
margin-bottom: 12px;
}
}
}
.btns-same-width-sm {
.btn {
width: 48px;
}
}
.btns-same-width-md {
.btn {
width: 79px;
}
}
.btns-same-width-lg {
.btn {
width: 112px;
}
}
ul.btn-list {
margin: 0 0 0 -18px;
padding: 0;
padding-top: 6px;
clear: both;
li {
margin: 0 0 12px 18px;
ul {
&.btn-list {
margin: 0 0 0 -18px;
padding: 0;
list-style: none;
float: left;
padding-top: 6px;
clear: both;
li {
margin: 0 0 12px 18px;
padding: 0;
list-style: none;
float: left;
}
}
}
.btn-group-wrapper {
margin-bottom: 12px;
}
$btn-icon-size: 34px;
.btn-icon {
width: $btn-icon-size;
height: $btn-icon-size;
@ -65,64 +81,84 @@
padding: 0;
text-align: center;
}
.btn-group-example {
float: left;
margin-right: 30px;
margin-bottom: 12px;
}
.btn-toolbar-example {
float: left;
}
.progress-buttons-container {
text-align: center;
font-size: 16px;
span.button-title {
display: inline-block;
width: 100%;
line-height: 1;
font-size: 14px;
margin-bottom: 10px;
margin-top: 10px;
span {
.button-title {
display: inline-block;
width: 100%;
line-height: 1;
margin-bottom: 10px;
margin-top: 10px;
}
}
.row + .row {
margin-top: 30px;
}
}
.button-panel {
height: 315px;
.btn {
width: 150px;
}
}
.large-buttons-panel {
height: 202px;
}
.button-panel.df-size-button-panel {
.btn-xs {
width: 60px;
}
.btn-sm {
width: 90px;
}
.btn-mm {
width: 120px;
}
.btn-md {
width: 150px;
}
.btn-xm {
width: 175px;
}
.btn-lg {
width: 200px;
.button-panel {
&.df-size-button-panel {
.btn-xs {
width: 60px;
}
.btn-sm {
width: 90px;
}
.btn-mm {
width: 120px;
}
.btn-md {
width: 150px;
}
.btn-xm {
width: 175px;
}
.btn-lg {
width: 200px;
}
}
}
.button-wrapper {
text-align: center;
margin: 5px 0;
}
.btn-group.flex-dropdown {
display: flex;
.btn-group {
&.flex-dropdown {
display: flex;
}
}
}
}