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

fix(form): update checkbox and radio styles

Browse source
This commit is contained in:
Alexander Zhukov 2017-07-25 14:07:11 +03:00
parent 52f49856b1
commit b58b8f9345
3 changed files with 34 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/app/pages/forms/form-layouts/form-layouts.component.html
View file

@ -6,21 +6,14 @@
</nga-card-header> </nga-card-header>
<nga-card-body> <nga-card-body>
<form class="form-inline"> <form class="form-inline">
<label class="sr-only" for="inlineFormInput">Name</label> <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0 fullname" placeholder="Jane Doe">
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe"> <div class="input-group mb-2 mr-sm-2 mb-sm-0 username">
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">@</div> <div class="input-group-addon">@</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username"> <input type="text" class="form-control" placeholder="Username">
</div> </div>
<div class="form-check mb-2 mr-sm-2 mb-sm-0"> <div class="form-check mb-2 mr-sm-2 mb-sm-0">
<label class="form-check-label"> <nga-checkbox>Remember me</nga-checkbox>
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div> </div>
<button type="submit" class="btn btn-primary">Submit</button> <button type="submit" class="btn btn-primary">Submit</button>
</form> </form>
</nga-card-body> </nga-card-body>
@ -49,22 +42,25 @@
<legend class="col-form-legend col-sm-2">Radios</legend> <legend class="col-form-legend col-sm-2">Radios</legend>
<div class="col-sm-10"> <div class="col-sm-10">
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <label class="custom-control custom-radio">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> <input type="radio" class="custom-control-input" name="gridRadios" checked>
Option one is this and that&mdash;be sure to include why it's great <span class="custom-control-indicator"></span>
</label> <span class="custom-control-description">Option one is this and that&mdash;be sure to include why it's great</span>
</label>
</div> </div>
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <label class="custom-control custom-radio">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2"> <input type="radio" class="custom-control-input" name="gridRadios">
Option two can be something else and selecting it will deselect option one <span class="custom-control-indicator"></span>
</label> <span class="custom-control-description">Option two can be something else and selecting it will deselect option one</span>
</label>
</div> </div>
<div class="form-check disabled"> <div class="form-check disabled">
<label class="form-check-label"> <label class="custom-control custom-radio">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> <input type="radio" class="custom-control-input" name="gridRadios" disabled>
Option three is disabled <span class="custom-control-indicator"></span>
</label> <span class="custom-control-description">Option three is disabled</span>
</label>
</div> </div>
</div> </div>
</fieldset> </fieldset>
@ -72,9 +68,7 @@
<label class="col-sm-2">Checkbox</label> <label class="col-sm-2">Checkbox</label>
<div class="col-sm-10"> <div class="col-sm-10">
<div class="form-check"> <div class="form-check">
<label class="form-check-label"> <nga-checkbox>Check me out</nga-checkbox>
<input class="form-check-input" type="checkbox"> Check me out
</label>
</div> </div>
</div> </div>
</div> </div>
@ -122,10 +116,7 @@
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div> </div>
<div class="form-group"> <div class="form-group">
<label> <nga-checkbox>Check me out</nga-checkbox>
Check me out
<input type="checkbox"/>
</label>
</div> </div>
<button type="submit" class="btn btn-danger">Submit</button> <button type="submit" class="btn btn-danger">Submit</button>
</form> </form>
@ -192,10 +183,7 @@
<div class="form-group row"> <div class="form-group row">
<div class="offset-sm-2 col-sm-10"> <div class="offset-sm-2 col-sm-10">
<div class="checkbox"> <div class="checkbox">
<label> <nga-checkbox>Remember me</nga-checkbox>
Remember me
<input type="checkbox"/>
</label>
</div> </div>
</div> </div>
</div> </div>

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

@ -0,0 +1,11 @@
.form-inline {
display: flex;
.fullname {
flex: 1;
}
.username {
flex: 1;
}
}

1
src/app/pages/forms/form-layouts/form-layouts.component.ts
View file

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