Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-09-22 05:50:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(buttons): complete buttons

Browse source
This commit is contained in:
Alexander Zhukov 2017-06-27 16:34:00 +03:00
parent 224e0d3390
commit 640d3202dc
10 changed files with 77 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/app/pages/ui-features/buttons/button-groups/button-groups.component.html
View file

@ -1,10 +1,10 @@
<nga-card>
<nga-card-header>Button Groups</nga-card-header>
<nga-card-body>
<div class="row button-groups">
<div class="row">
<div class="col-md-12">
<div>
<div>Toogle Types</div>
<div class="example-container">
<div class="container-title">Toogle Types</div>
<div [(ngModel)]="radioModel" ngbRadioGroup class="btn-group-block btn-group-divider" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" value="Left"/> Left
@ -28,9 +28,9 @@
</label>
</div>
</div>
<div class="toolbars-container">
<div class="example-container toolbars-container">
<div class="pagination-container">
<div>Pagination</div>
<div class="container-title">Pagination</div>
<div class="btn-group btn-group-divider btn-group-pagination" data-toggle="buttons">
<label class="btn btn-success">
<input type="radio"/> 1
@ -50,7 +50,7 @@
</div>
</div>
<div class="icon-toolbar-container">
<div>Icon Toolbar</div>
<div class="container-title">Icon Toolbar</div>
<div class="btn-group btn-group-divider btn-group-pagination" data-toggle="buttons">
<label class="btn btn-success">
<input type="radio"/> <i class="ion-ionic"></i>
@ -67,8 +67,8 @@
</div>
</div>
</div>
<div>
<div>Divided Button Group</div>
<div class="example-container">
<div class="container-title">Divided Button Group</div>
<div class="btn-group btn-group-block btn-group-divided" data-toggle="buttons">
<label class="btn btn-outline-success btn-icon" [class.active]="dividedCheckboxModel.monday">
<input type="checkbox" [(ngModel)]="dividedCheckboxModel.monday"/> <i class="ion-paper-airplane"></i>
@ -90,8 +90,8 @@
</label>
</div>
</div>
<div>
<div>Divided Button Group</div>
<div class="example-container">
<div class="container-title">Divided Button Group</div>
<div [(ngModel)]="radioModel" ngbRadioGroup class="btn-group btn-group-block btn-group-divided-hidden" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" value="Left"/> Left

22
src/app/pages/ui-features/buttons/button-groups/button-groups.component.scss Normal file
View file

@ -0,0 +1,22 @@
@import '../../../../@theme/styles/variables';
@import '~@nga/theme/styles/global/bootstrap/buttons';
@include nga-install-component() {
.toolbars-container {
display: flex;
}
.pagination-container {
flex: 1;
margin-right: 1rem;
}
.icon-toolbar-container {
flex: 1;
}
.example-container:not(:last-child) {
margin-bottom: 2rem;
}
}

1
src/app/pages/ui-features/buttons/button-groups/button-groups.component.ts
View file

@ -2,6 +2,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'ngx-button-groups',
styleUrls: ['./button-groups.component.scss'],
templateUrl: './button-groups.component.html',
})
export class ButtonGroupsComponent {

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

@ -6,6 +6,23 @@
$button-size: 50px;
$button-border-radius: 12px;
.container-title {
color: nga-theme(color-fg-hint);
font-family: nga-theme(font-secondary);
margin-bottom: 0.5rem;
}
.header {
color: white;
}
.subheader {
font-size: 0.875rem;
line-height: 1rem;
font-weight: 300;
color: nga-theme(color-fg-hint);
}
.btn-demo {
width: 180px;
}
@ -29,16 +46,6 @@
justify-content: center;
margin-left: 1rem;
height: $button-size;
.header {
color: white;
}
.subheader {
font-size: 0.875rem;
line-height: 1rem;
font-weight: 300;
}
}
}
@ -46,11 +53,6 @@
padding-right: 0;
}
.example-container .container-title {
font-family: nga-theme(font-secondary);
margin-bottom: 1rem;
}
.example-container .container-btn {
margin-bottom: 1rem;
}
@ -60,7 +62,6 @@
}
.actions-groups .container-title {
font-family: nga-theme(font-secondary);
display: flex;
flex: 1;
flex-direction: column;
@ -72,19 +73,6 @@
margin-bottom: 1rem;
}
.button-groups .toolbars-container {
display: flex;
}
.button-groups .pagination-container {
flex: 1;
margin-right: 1rem;
}
.button-groups .icon-toolbar-container {
flex: 1;
}
.icon-buttons .btn-group:not(:last-child) {
margin-bottom: 1rem;
}

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

@ -9,7 +9,7 @@
<div class="container-btn">
<button class="btn {{ b.class }} btn-demo">{{ b.title }}</button>
</div>
<div class="states-container {{ b.container }}">
<div class="{{ b.container }}">
<div class="state-container">
<div class="state-value original"></div>
<div class="state-details">

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

@ -9,7 +9,7 @@
<div class="container-btn">
<button class="btn {{ hb.class }} btn-demo">{{ hb.buttonTitle }}</button>
</div>
<div class="states-container {{ hb.container }}">
<div class="{{ hb.container }}">
<div class="state-container" *ngIf="hb.border">
<div class="state-value border"></div>
<div class="state-details">

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

@ -3,7 +3,7 @@
<nga-card-body>
<div class="row">
<div class="shape-container col-md-4">
<div class="header">
<div class="container-title">
<span>Rectangle Button</span>
</div>
<div class="subheader">
@ -15,7 +15,7 @@
</div>
</div>
<div class="shape-container col-md-4">
<div class="header">
<div class="container-title">
<span>Semi-round Button</span>
</div>
<div class="subheader">
@ -27,7 +27,7 @@
</div>
</div>
<div class="shape-container col-md-4">
<div class="header">
<div class="container-title">
<span>Rounded Button</span>
</div>
<div class="subheader">

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

@ -1,13 +1,13 @@
.shape-container .header {
margin-bottom: 7px;
}
@import '../../../../@theme/styles/variables';
@import '~@nga/theme/styles/global/bootstrap/buttons';
.shape-container .subheader {
@include nga-install-component() {
.subheader {
margin-bottom: 19px;
font-weight: 300;
font-size: 0.875rem;
span:nth-child(2) {
color: #ffffff;
color: nga-theme(color-fg-heading);
}
}
}

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

@ -3,7 +3,7 @@
<nga-card-body>
<div class="row">
<div class="size-container">
<div class="header">
<div class="container-title">
<span>Rectangle Button</span>
</div>
<div class="subheader">
@ -14,7 +14,7 @@
</div>
</div>
<div class="size-container">
<div class="header">
<div class="container-title">
<span>Medium Button</span>
</div>
<div class="subheader">
@ -25,7 +25,7 @@
</div>
</div>
<div class="size-container">
<div class="header">
<div class="container-title">
<span>Small Button</span>
</div>
<div class="subheader">
@ -36,7 +36,7 @@
</div>
</div>
<div class="size-container">
<div class="header">
<div class="container-title">
<span>Tiny Button</span>
</div>
<div class="subheader">

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

@ -1,18 +1,17 @@
@import '../../../../@theme/styles/variables';
@import '~@nga/theme/styles/global/bootstrap/buttons';
@include nga-install-component() {
.row {
padding: 0 1rem;
}
.size-container {
margin-right: 1rem;
.header {
margin-bottom: 0.5rem;
}
.subheader {
color: #ffffff;
margin-bottom: 1rem;
font-size: 0.875rem;
font-weight: 300;
color: nga-theme(color-fg-heading);
}
}