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

fix(forms): fix the input styles

Browse source
This commit is contained in:
Alexander Zhukov 2017-07-12 11:16:16 +03:00
parent 727f50dd6c
commit 468e3500fa
5 changed files with 40 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

5
package-lock.json generated
View file

@ -7527,11 +7527,6 @@
} }
} }
}, },
"segoe-fonts": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/segoe-fonts/-/segoe-fonts-1.0.1.tgz",
"integrity": "sha1-7CyCcJIbhFe8LOFmsa7hBoy6fLc="
},
"select-hose": { "select-hose": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",

1
package.json
View file

@ -59,7 +59,6 @@
"normalize.css": "6.0.0", "normalize.css": "6.0.0",
"roboto-fontface": "0.7.0", "roboto-fontface": "0.7.0",
"rxjs": "5.4.0", "rxjs": "5.4.0",
"segoe-fonts": "1.0.1",
"tether": "1.4.0", "tether": "1.4.0",
"tinymce": "4.5.7", "tinymce": "4.5.7",
"typeface-exo": "0.0.22", "typeface-exo": "0.0.22",

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

@ -17,10 +17,7 @@
<div class="input-group"> <div class="input-group">
<input type="password" placeholder="Password" class="form-control" /> <input type="password" placeholder="Password" class="form-control" />
</div> </div>
<div class="input-group"> <div class="input-group has-person-icon">
<span class="input-group-addon input-group-icon">
<i class="ion-ios-person-outline"></i>
</span>
<input type="text" placeholder="With Icon" class="form-control" /> <input type="text" placeholder="With Icon" class="form-control" />
</div> </div>
<div class="input-group input-group-rounded"> <div class="input-group input-group-rounded">
@ -95,21 +92,21 @@
<div class="form-group"> <div class="form-group">
<label>Simple Select</label> <label>Simple Select</label>
<select class="form-control"> <select class="form-control">
<option>1</option> <option>Minsk</option>
<option>2</option> <option>Gomel</option>
<option>3</option> <option>Brest</option>
<option>4</option> <option>Grodno</option>
<option>5</option> <option>Mogilev</option>
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label>Multiple Select</label> <label>Multiple Select</label>
<select multiple class="form-control"> <select multiple class="form-control">
<option>1</option> <option>Item 1</option>
<option>2</option> <option>Item 2</option>
<option>3</option> <option>Item 3</option>
<option>4</option> <option>Item 4</option>
<option>5</option> <option>Item 5</option>
</select> </select>
</div> </div>
</nga-card-body> </nga-card-body>
@ -185,9 +182,9 @@
</label> </label>
</div> </div>
<div class="demo-disabled-checkbox-radio"> <div class="demo-disabled-checkbox-radio">
<nga-checkbox>Disbaled Checkbox</nga-checkbox> <nga-checkbox [disabled]="true">Disbaled Checkbox</nga-checkbox>
<label class="custom-control custom-radio"> <label class="custom-control custom-radio">
<input type="radio" class="custom-control-input"> <input type="radio" class="custom-control-input" disabled>
<span class="custom-control-indicator"></span> <span class="custom-control-indicator"></span>
<span class="custom-control-description">Disabled Radio</span> <span class="custom-control-description">Disabled Radio</span>
</label> </label>
@ -199,7 +196,7 @@
<nga-card-body class="demo-rating"> <nga-card-body class="demo-rating">
<span class="header">Rating</span> <span class="header">Rating</span>
<div> <div>
<ngb-rating [(rate)]="currentRate" max=5> <ngb-rating [(rate)]="starRate" max=5>
<ng-template let-fill="fill"> <ng-template let-fill="fill">
<span class="star fill" [class.filled]="fill === 100"> <span class="star fill" [class.filled]="fill === 100">
<i class="ion-android-star" *ngIf="fill === 100"></i> <i class="ion-android-star" *ngIf="fill === 100"></i>
@ -207,18 +204,18 @@
</span> </span>
</ng-template> </ng-template>
</ngb-rating> </ngb-rating>
<span class="current-rate">{{ currentRate | number : '1.1' }}</span> <span class="current-rate">{{ starRate | number : '1.1' }}</span>
</div> </div>
<div> <div>
<ngb-rating [(rate)]="currentRate" max=5> <ngb-rating [(rate)]="heartRate" max=5>
<ng-template let-fill="fill"> <ng-template let-fill="fill">
<span class="star fill" [class.filled]="fill === 100"> <span class="star fill" [class.filled]="fill === 100">
<i class="ion-android-star" *ngIf="fill === 100"></i> <i class="ion-ios-heart" *ngIf="fill === 100"></i>
<i class="ion-android-star-outline" *ngIf="fill !== 100"></i> <i class="ion-ios-heart-outline" *ngIf="fill !== 100"></i>
</span> </span>
</ng-template> </ng-template>
</ngb-rating> </ngb-rating>
<span class="current-rate">{{ currentRate | number : '1.1' }}</span> <span class="current-rate">{{ heartRate | number : '1.1' }}</span>
</div> </div>
</nga-card-body> </nga-card-body>
</nga-card> </nga-card>

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

@ -68,4 +68,22 @@
margin-right: 1rem; margin-right: 1rem;
} }
} }
.input-group.has-person-icon {
position: relative;
.form-control {
padding-left: 3rem;
}
&::before {
content: '\F47D';
font-family: 'Ionicons';
font-size: 2rem;
position: absolute;
z-index: 100;
left: 1rem;
top: 0.25rem;
}
}
} }

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

@ -6,5 +6,7 @@ import { Component } from '@angular/core';
templateUrl: './form-inputs.component.html', templateUrl: './form-inputs.component.html',
}) })
export class FormInputsComponent { export class FormInputsComponent {
currentRate: number = 3;
starRate: number = 3;
heartRate: number = 3;
} }