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(inputs): fix inputs groups

Browse source
This commit is contained in:
KostyaDanovsky 2017-08-09 20:05:04 +03:00
parent ffa5c0d2c9
commit 0fcee9cb26
4 changed files with 27 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/app/pages/dashboard/temperature/temperature.component.scss
View file

@ -130,6 +130,7 @@
border-color: nb-theme(form-control-border-color);
&.active {
color: nb-theme(color-fg-heading);
border-color: nb-theme(color-fg-highlight);
box-shadow: 0 2px 12px 0 rgba(nb-theme(color-fg-highlight), 0.25);
background-color: rgba(nb-theme(color-fg-highlight), 0.25);

20
src/app/pages/forms/form-inputs/form-inputs.component.html
View file

@ -41,12 +41,13 @@
</div>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-header>Input Groups</nb-card-header>
<nb-card-body>
<div class="input-group">
<span class="input-group-addon success">@</span>
<input type="text" class="form-control" placeholder="Username" />
<input type="text" class="form-control" placeholder="Username"/>
</div>
<div class="input-group">
<span class="input-group-btn">
@ -54,7 +55,7 @@
<i class="ion-ios-email-outline"></i>
</button>
</span>
<input type="text" placeholder="Recipient's username" class="form-control">
<input type="text" class="form-control" placeholder="Recipient's username">
<span class="input-group-btn">
<button class="btn btn-primary">
@example.com
@ -62,7 +63,7 @@
</span>
</div>
<div class="input-group">
<input type="text" placeholder="Search for..." class="form-control">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-danger">
Search
@ -86,6 +87,7 @@
</div>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-header>Selects</nb-card-header>
<nb-card-body>
@ -112,6 +114,7 @@
</nb-card-body>
</nb-card>
</div>
<div class="col-md-6">
<nb-card>
<nb-card-header>Input Styles</nb-card-header>
@ -127,6 +130,7 @@
</div>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-header>Validation States</nb-card-header>
<nb-card-body>
@ -155,13 +159,14 @@
</div>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-header>Checkboxes & Radios</nb-card-header>
<nb-card-body>
<div class="demo-checkboxes-radio">
<div class="demo-checkboxes">
<nb-checkbox>Checkbox 1</nb-checkbox>
<nb-checkbox>Checkbox 2</nb-checkbox>
<nb-checkbox [value]="true">Checkbox 2</nb-checkbox>
<label class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
@ -175,7 +180,7 @@
<span class="custom-control-description">Radio 1</span>
</label>
<label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="customRadio">
<input type="radio" class="custom-control-input" name="customRadio" checked>
<span class="custom-control-indicator"></span>
<span class="custom-control-description">Radio 2</span>
</label>
@ -196,6 +201,7 @@
</div>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-body class="demo-rating">
<span class="rating-header">Rating</span>
@ -208,7 +214,7 @@
</span>
</ng-template>
</ngb-rating>
<span class="current-rate">{{ starRate | number : '1.1' }}</span>
<span class="current-rate">{{ starRate }}</span>
</div>
<div>
<ngb-rating [(rate)]="heartRate" max=5>
@ -219,7 +225,7 @@
</span>
</ng-template>
</ngb-rating>
<span class="current-rate">{{ heartRate | number : '1.1' }}</span>
<span class="current-rate">{{ heartRate }}</span>
</div>
</nb-card-body>
</nb-card>

11
src/app/pages/forms/form-inputs/form-inputs.component.scss
View file

@ -97,4 +97,15 @@
.dropdown {
width: 25%;
}
.form-group label {
padding: 0 0 0.75rem;
}
ngb-rating i {
color: nb-theme(color-success);
@include nb-for-theme(cosmic) {
color: nb-theme(color-primary);
}
}
}

4
src/app/pages/forms/form-inputs/form-inputs.component.ts
View file

@ -7,6 +7,6 @@ import { Component } from '@angular/core';
})
export class FormInputsComponent {
starRate: number = 3;
heartRate: number = 3;
starRate: number = 2;
heartRate: number = 4;
}