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

fix(form-input): form-input responsive

Browse source
This commit is contained in:
Mikhail Hryb 2017-09-18 11:25:26 +03:00 • committed by KostyaDanovsky
parent acd68d4ec0
commit b1a0024a27
2 changed files with 44 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,40 +4,41 @@
<nb-card-header>Default Inputs</nb-card-header> <nb-card-header>Default Inputs</nb-card-header>
<nb-card-body> <nb-card-body>
<div class="input-group"> <div class="input-group">
<input type="text" placeholder="Project" class="form-control" /> <input type="text" placeholder="Project" class="form-control"/>
</div> </div>
<div class="full-name-inputs"> <div class="row full-name-inputs">
<div class="input-group"> <div class="col-xs-12 col-sm-6 input-group">
<input type="text" placeholder="Nick" class="form-control" /> <input type="text" placeholder="Nick" class="form-control"/>
</div> </div>
<div class="input-group"> <div class="col-xs-12 col-sm-6 input-group">
<input type="text" placeholder="Last Name" class="form-control" /> <input type="text" placeholder="Last Name" class="form-control"/>
</div> </div>
</div> </div>
<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 has-person-icon"> <div class="input-group has-person-icon">
<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">
<input type="text" placeholder="Rounded border" class="form-control" /> <input type="text" placeholder="Rounded border" class="form-control"/>
</div> </div>
<div class="form-group"> <div class="form-group">
<input type="text" placeholder="Project" class="form-control" /> <input type="text" placeholder="Project" class="form-control"/>
<small class="form-text">A block of help text that breaks into a new line and may extend beyond one line.</small> <small class="form-text">A block of help text that breaks into a new line and may extend beyond one line.
</small>
</div> </div>
<div class="input-group"> <div class="input-group">
<input type="text" placeholder="Disabled input" class="form-control" disabled /> <input type="text" placeholder="Disabled input" class="form-control" disabled/>
</div> </div>
<div class="input-group"> <div class="input-group">
<textarea rows="5" placeholder="Text Area" class="form-control"></textarea> <textarea rows="5" placeholder="Text Area" class="form-control"></textarea>
</div> </div>
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
<input type="text" placeholder="Small Input" class="form-control" /> <input type="text" placeholder="Small Input" class="form-control"/>
</div> </div>
<div class="input-group input-group-lg"> <div class="input-group input-group-lg">
<input type="text" placeholder="Large Input" class="form-control" /> <input type="text" placeholder="Large Input" class="form-control"/>
</div> </div>
</nb-card-body> </nb-card-body>
</nb-card> </nb-card>
@ -49,7 +50,7 @@
<span class="input-group-addon success">@</span> <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>
<div class="input-group"> <div class="input-group mail-btn-group">
<span class="input-group-btn"> <span class="input-group-btn">
<button class="btn btn-primary btn-icon"> <button class="btn btn-primary btn-icon">
<i class="ion-ios-email-outline"></i> <i class="ion-ios-email-outline"></i>
@ -120,7 +121,7 @@
<nb-card-header>Input Styles</nb-card-header> <nb-card-header>Input Styles</nb-card-header>
<nb-card-body> <nb-card-body>
<div class="input-group input-group-border-only"> <div class="input-group input-group-border-only">
<input type="text" placeholder="Border Only" class="form-control" /> <input type="text" placeholder="Border Only" class="form-control"/>
</div> </div>
<div class="input-group"> <div class="input-group">
<input type="text" placeholder="Default Input" class="form-control"> <input type="text" placeholder="Default Input" class="form-control">
@ -143,10 +144,10 @@
<div class="form-group"> <div class="form-group">
<input type="text" placeholder="Input with Danger" class="form-control form-control-danger"> <input type="text" placeholder="Input with Danger" class="form-control form-control-danger">
</div> </div>
<div class="form-group validation-checkboxes"> <div class="form-group validation-checkboxes row">
<nb-checkbox status="success">Checkbox with Success</nb-checkbox> <nb-checkbox status="success" class="col-xs-4">Checkbox with Success</nb-checkbox>
<nb-checkbox status="warning">Checkbox with Warning</nb-checkbox> <nb-checkbox status="warning" class="col-xs-4">Checkbox with Warning</nb-checkbox>
<nb-checkbox status="danger">Checkbox with Danger</nb-checkbox> <nb-checkbox status="danger" class="col-xs-4">Checkbox with Danger</nb-checkbox>
</div> </div>
<div class="form-group has-success"> <div class="form-group has-success">
<input type="text" placeholder="Input with Success Icon" class="form-control form-control-success"> <input type="text" placeholder="Input with Success Icon" class="form-control form-control-success">
@ -163,8 +164,8 @@
<nb-card> <nb-card>
<nb-card-header>Checkboxes & Radios</nb-card-header> <nb-card-header>Checkboxes & Radios</nb-card-header>
<nb-card-body> <nb-card-body>
<div class="demo-checkboxes-radio"> <div class="row demo-checkboxes-radio">
<div class="demo-checkboxes"> <div class="demo-checkboxes col-xs-4">
<nb-checkbox>Checkbox 1</nb-checkbox> <nb-checkbox>Checkbox 1</nb-checkbox>
<nb-checkbox [value]="true">Checkbox 2</nb-checkbox> <nb-checkbox [value]="true">Checkbox 2</nb-checkbox>
<label class="custom-control custom-checkbox"> <label class="custom-control custom-checkbox">
@ -173,7 +174,7 @@
<span class="custom-control-description">Bootstrap Checkbox</span> <span class="custom-control-description">Bootstrap Checkbox</span>
</label> </label>
</div> </div>
<div class="demo-radio"> <div class="demo-radio col-xs-4">
<label class="custom-control custom-radio"> <label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="customRadio"> <input type="radio" class="custom-control-input" name="customRadio">
<span class="custom-control-indicator"></span> <span class="custom-control-indicator"></span>
@ -190,7 +191,7 @@
<span class="custom-control-description">Radio 3</span> <span class="custom-control-description">Radio 3</span>
</label> </label>
</div> </div>
<div class="demo-disabled-checkbox-radio"> <div class="demo-disabled-checkbox-radio col-xs-4">
<nb-checkbox disabled>Disabled Checkbox</nb-checkbox> <nb-checkbox disabled>Disabled Checkbox</nb-checkbox>
<label class="custom-control custom-radio"> <label class="custom-control custom-radio">
<input type="radio" class="custom-control-input" disabled> <input type="radio" class="custom-control-input" disabled>

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

@ -1,4 +1,6 @@
@import '../../../@theme/styles/themes'; @import '../../../@theme/styles/themes';
@import '~bootstrap/scss/mixins/breakpoints';
@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
@include nb-install-component() { @include nb-install-component() {
@ -22,16 +24,19 @@
.demo-checkboxes { .demo-checkboxes {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 1rem;
} }
.demo-radio { .demo-radio {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 1rem;
} }
.demo-disabled-checkbox-radio { .demo-disabled-checkbox-radio {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 1rem;
} }
.demo-checkboxes-radio { .demo-checkboxes-radio {
@ -42,6 +47,7 @@
.demo-rating { .demo-rating {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap;
} }
.star { .star {
@ -70,10 +76,6 @@
.full-name-inputs { .full-name-inputs {
display: flex; display: flex;
.input-group:not(:last-child) {
margin-right: 1rem;
}
} }
.input-group.has-person-icon { .input-group.has-person-icon {
@ -95,7 +97,12 @@
} }
.dropdown { .dropdown {
width: 25%; min-width: 7rem;
}
.dropdown-menu {
width: auto;
} }
.form-group label { .form-group label {
@ -108,4 +115,11 @@
color: nb-theme(color-primary); color: nb-theme(color-primary);
} }
} }
@include media-breakpoint-down(xs) {
button:not(.btn-icon) {
padding: 0.75rem 1rem;
font-size: 0.75rem;
}
}
} }