enhanced custom forms
- removed box-shadow from custom form element #2200 - updated pages/forms/general.html (splited general and custom elements) - fixed focus on custom switch & range
This commit is contained in:
REJack
parent
42b6ff1b11
commit
6d0fcbc8b1
|
|
@ -490,7 +490,7 @@ $custom-select-border-color: $input-border-color !default;
|
|||
$custom-select-border-radius: $border-radius !default;
|
||||
|
||||
$custom-select-focus-border-color: $input-focus-border-color !default;
|
||||
$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
|
||||
$custom-select-focus-box-shadow: none !default;
|
||||
|
||||
$custom-select-font-size-sm: 75% !default;
|
||||
$custom-select-height-sm: $input-height-sm !default;
|
||||
|
|
@ -500,7 +500,7 @@ $custom-select-height-lg: $input-height-lg !default;
|
|||
|
||||
$custom-file-height: $input-height !default;
|
||||
$custom-file-focus-border-color: $input-focus-border-color !default;
|
||||
$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default;
|
||||
$custom-file-focus-box-shadow: $custom-select-focus-box-shadow !default;
|
||||
|
||||
$custom-file-padding-y: $input-btn-padding-y !default;
|
||||
$custom-file-padding-x: $input-btn-padding-x !default;
|
||||
|
|
@ -510,7 +510,7 @@ $custom-file-bg: $input-bg !default;
|
|||
$custom-file-border-width: $input-btn-border-width !default;
|
||||
$custom-file-border-color: $input-border-color !default;
|
||||
$custom-file-border-radius: $input-border-radius !default;
|
||||
$custom-file-box-shadow: $input-box-shadow !default;
|
||||
$custom-file-box-shadow: $custom-select-focus-box-shadow !default;
|
||||
$custom-file-button-color: $custom-file-color !default;
|
||||
$custom-file-button-bg: $input-group-addon-bg !default;
|
||||
$custom-file-text: (
|
||||
|
|
|
|||
|
|
@ -362,6 +362,10 @@
|
|||
border-color: darken($color, 20%);
|
||||
}
|
||||
|
||||
& .custom-control-input:focus ~ .custom-control-label::before {
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
|
||||
}
|
||||
|
||||
& .custom-control-input ~ .custom-control-label::after {
|
||||
background: darken($color, 25%);
|
||||
}
|
||||
|
|
@ -373,6 +377,10 @@
|
|||
border-color: darken($color, 20%);
|
||||
}
|
||||
|
||||
& .custom-control-input:checked:focus ~ .custom-control-label::before {
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
|
||||
}
|
||||
|
||||
& .custom-control-input:checked ~ .custom-control-label::after {
|
||||
background: lighten($color, 30%);
|
||||
}
|
||||
|
|
@ -386,15 +394,15 @@
|
|||
outline: none;
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($color, .25);
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($color, .25);
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($color, .25);
|
||||
box-shadow: 0 0 0 1px $body-bg, 0 0 0 2px rgba($color, .25);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -826,11 +826,6 @@
|
|||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
|
||||
</div>
|
||||
<!--/.col (left) -->
|
||||
<!-- right column -->
|
||||
<div class="col-md-6">
|
||||
<!-- Horizontal Form -->
|
||||
<div class="card card-info">
|
||||
<div class="card-header">
|
||||
|
|
@ -870,6 +865,11 @@
|
|||
</form>
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
|
||||
</div>
|
||||
<!--/.col (left) -->
|
||||
<!-- right column -->
|
||||
<div class="col-md-6">
|
||||
<!-- general form elements disabled -->
|
||||
<div class="card card-warning">
|
||||
<div class="card-header">
|
||||
|
|
@ -878,24 +878,35 @@
|
|||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<form role="form">
|
||||
<!-- text input -->
|
||||
<div class="form-group">
|
||||
<label>Text</label>
|
||||
<input type="text" class="form-control" placeholder="Enter ...">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<!-- text input -->
|
||||
<div class="form-group">
|
||||
<label>Text</label>
|
||||
<input type="text" class="form-control" placeholder="Enter ...">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label>Text Disabled</label>
|
||||
<input type="text" class="form-control" placeholder="Enter ..." disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Text Disabled</label>
|
||||
<input type="text" class="form-control" placeholder="Enter ..." disabled>
|
||||
</div>
|
||||
|
||||
<!-- textarea -->
|
||||
<div class="form-group">
|
||||
<label>Textarea</label>
|
||||
<textarea class="form-control" rows="3" placeholder="Enter ..."></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Textarea Disabled</label>
|
||||
<textarea class="form-control" rows="3" placeholder="Enter ..." disabled></textarea>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<!-- textarea -->
|
||||
<div class="form-group">
|
||||
<label>Textarea</label>
|
||||
<textarea class="form-control" rows="3" placeholder="Enter ..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label>Textarea Disabled</label>
|
||||
<textarea class="form-control" rows="3" placeholder="Enter ..." disabled></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- input states -->
|
||||
|
|
@ -915,105 +926,243 @@
|
|||
<input type="text" class="form-control is-invalid" id="inputError" placeholder="Enter ...">
|
||||
</div>
|
||||
|
||||
<!-- checkbox -->
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="option1">
|
||||
<label class="form-check-label">Checkbox</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" value="option1" disabled>
|
||||
<label class="form-check-label">Checkbox disabled</label>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<!-- checkbox -->
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox">
|
||||
<label class="form-check-label">Checkbox</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" checked>
|
||||
<label class="form-check-label">Checkbox checked</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" disabled>
|
||||
<label class="form-check-label">Checkbox disabled</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<!-- radio -->
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="radio1">
|
||||
<label class="form-check-label">Radio</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="radio1" checked>
|
||||
<label class="form-check-label">Radio checked</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" disabled>
|
||||
<label class="form-check-label">Radio disabled</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- radio -->
|
||||
<div class="form-group">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" value="option1">
|
||||
<label class="form-check-label">Radio</label>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<!-- select -->
|
||||
<div class="form-group">
|
||||
<label>Select</label>
|
||||
<select class="form-control">
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" value="option1" disabled>
|
||||
<label class="form-check-label">Radio disabled</label>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label>Select Disabled</label>
|
||||
<select class="form-control" disabled>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- select -->
|
||||
<div class="form-group">
|
||||
<label>Select</label>
|
||||
<select class="form-control">
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<!-- Select multiple-->
|
||||
<div class="form-group">
|
||||
<label>Select Multiple</label>
|
||||
<select multiple class="form-control">
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label>Select Multiple Disabled</label>
|
||||
<select multiple class="form-control" disabled>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Select Disabled</label>
|
||||
<select class="form-control" disabled>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
<!-- general form elements disabled -->
|
||||
<div class="card card-secondary">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Custom Elements</h3>
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
<form role="form">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<!-- checkbox -->
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input class="custom-control-input" type="checkbox" id="customCheckbox1" value="option1">
|
||||
<label for="customCheckbox1" class="custom-control-label">Custom Checkbox</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input class="custom-control-input" type="checkbox" id="customCheckbox2" checked>
|
||||
<label for="customCheckbox2" class="custom-control-label">Custom Checkbox checked</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input class="custom-control-input" type="checkbox" id="customCheckbox3" disabled>
|
||||
<label for="customCheckbox3" class="custom-control-label">Custom Checkbox disabled</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<!-- radio -->
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-radio">
|
||||
<input class="custom-control-input" type="radio" id="customRadio1" name="customRadio">
|
||||
<label for="customRadio1" class="custom-control-label">Custom Radio</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input class="custom-control-input" type="radio" id="customRadio2" name="customRadio" checked>
|
||||
<label for="customRadio2" class="custom-control-label">Custom Radio checked</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input class="custom-control-input" type="radio" id="customRadio3" disabled>
|
||||
<label for="customRadio3" class="custom-control-label">Custom Radio disabled</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Select multiple-->
|
||||
<div class="form-group">
|
||||
<label>Select Multiple</label>
|
||||
<select multiple class="form-control">
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<!-- select -->
|
||||
<div class="form-group">
|
||||
<label>Custom Select</label>
|
||||
<select class="custom-select">
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label>Custom Select Disabled</label>
|
||||
<select class="custom-select" disabled>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Select Multiple Disabled</label>
|
||||
<select multiple class="form-control" disabled>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<!-- Select multiple-->
|
||||
<div class="form-group">
|
||||
<label>Custom Select Multiple</label>
|
||||
<select multiple class="custom-select">
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label>Custom Select Multiple Disabled</label>
|
||||
<select multiple class="custom-select" disabled>
|
||||
<option>option 1</option>
|
||||
<option>option 2</option>
|
||||
<option>option 3</option>
|
||||
<option>option 4</option>
|
||||
<option>option 5</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-switch">
|
||||
<input type="checkbox" class="custom-control-input" id="customSwitch1">
|
||||
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
|
||||
<label class="custom-control-label" for="customSwitch1">Toggle this custom switch element</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
|
||||
<input type="checkbox" class="custom-control-input" id="customSwitch3">
|
||||
<label class="custom-control-label" for="customSwitch3">Toggle this switch element with Custom Colors danger/success</label>
|
||||
<label class="custom-control-label" for="customSwitch3">Toggle this custom switch element with custom colors danger/success</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="custom-control custom-switch">
|
||||
<input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
|
||||
<label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
|
||||
<label class="custom-control-label" for="customSwitch2">Disabled custom switch element</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="customRange1">Example range</label>
|
||||
<label for="customRange1">Custom range</label>
|
||||
<input type="range" class="custom-range" id="customRange1">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="customRange1">Example range (custom-range-danger)</label>
|
||||
<label for="customRange1">Custom range (custom-range-danger)</label>
|
||||
<input type="range" class="custom-range custom-range-danger" id="customRange1">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="customRange1">Example range (custom-range-teal)</label>
|
||||
<label for="customRange1">Custom range (custom-range-teal)</label>
|
||||
<input type="range" class="custom-range custom-range-teal" id="customRange1">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="customFile">Custom File</label>
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="customFile">
|
||||
<label class="custom-file-label" for="customFile">Choose file</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
|
|
|
|||
Loading…
Reference in a new issue