Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-06-17 12:50:03 +04:00
Code Issues Projects Releases Wiki Activity

input masks

Browse Source
This commit is contained in:
codecalm
2018-02-19 21:43:55 +01:00
parent 7afe368344
commit 9fa162dd32
4 changed files with 102 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/cards/form-all-elements.html
+86 -85
View File
@@ -10,23 +10,19 @@
<div class="form-control-plaintext">Username</div>
</div>
<div class="form-group">
<label class="form-label" for="example-text-input">Text</label>
<label class="form-label">Text</label>
<input type="text" class="form-control" name="example-text-input" placeholder="Text..">
</div>
<div class="form-group">
<label class="form-label" for="example-disabled-input">Disabled</label>
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
value="Well, she turned me into a newt."
disabled>
<label class="form-label">Disabled</label>
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.." value="Well, she turned me into a newt." disabled>
</div>
<div class="form-group">
<label class="form-label" for="example-disabled-input">Readonly</label>
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.."
value="Well, how'd you become king, then?"
readonly>
<label class="form-label">Readonly</label>
<input type="text" class="form-control" name="example-disabled-input" placeholder="Disabled.." value="Well, how'd you become king, then?" readonly>
</div>
<div class="form-group">
<label class="form-label" for="example-textarea-input">Textarea <span class="form-label-small">56/100</span></label>
<label class="form-label">Textarea <span class="form-label-small">56/100</span></label>
<textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
</div>
@@ -86,28 +82,29 @@
<input type="text" class="form-control" placeholder="Search for...">
</div>
<span class="col-auto align-self-center">
<span class="form-help" data-toggle="popover" data-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
<span class="form-help" data-toggle="popover" data-placement="top"
data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
</span>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="form-group">
<label class="form-label" for="example-password-input">Password</label>
<label class="form-label">Password</label>
<input type="password" class="form-control" name="example-password-input" placeholder="Password..">
</div>
<div class="form-group">
<label class="form-label" for="example-text-input-valid">Valid State</label>
<label class="form-label">Valid State</label>
<input type="text" class="form-control is-valid" name="example-text-input-valid" placeholder="Valid State..">
<input type="text" class="form-control mt-3 state-valid" value="Valid state">
</div>
<div class="form-group">
<label class="form-label" for="example-text-input-invalid">Invalid State</label>
<label class="form-label">Invalid State</label>
<input type="text" class="form-control is-invalid" name="example-text-input-invalid"
placeholder="Invalid State..">
placeholder="Invalid State..">
<div class="invalid-feedback">Invalid feedback</div>
<input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
@@ -257,17 +254,19 @@
</div>
<div class="form-group">
<div class="form-label">Inline Radios</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked="">
<span class="custom-control-label">Option 1</span>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option2">
<span class="custom-control-label">Option 2</span>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option3">
<span class="custom-control-label">Option 3</span>
<div class="custom-controls-stacked">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option1" checked="">
<span class="custom-control-label">Option 1</span>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option2">
<span class="custom-control-label">Option 2</span>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="example-inline-radios" value="option3">
<span class="custom-control-label">Option 3</span>
</div>
</div>
</div>
<div class="form-group">
@@ -293,18 +292,20 @@
</div>
<div class="form-group">
<div class="form-label">Inline Checkboxes</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1"
checked="">
<label class="custom-control-label">Option 1</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox2" value="option2">
<label class="custom-control-label">Option 2</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox3" value="option3">
<label class="custom-control-label">Option 3</label>
<div class="custom-controls-stacked">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox1" value="option1"
checked="">
<label class="custom-control-label">Option 1</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox2" value="option2">
<label class="custom-control-label">Option 2</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="example-inline-checkbox3" value="option3">
<label class="custom-control-label">Option 3</label>
</div>
</div>
</div>
<div class="form-group">
@@ -606,55 +607,55 @@
{% contentfor js %}
<script>
require(['jquery', 'selectize'], function ($, selectize) {
$(document).ready(function () {
$('#input-tags').selectize({
delimiter: ',',
persist: false,
create: function (input) {
return {
value: input,
text: input
}
}
});
require(['jquery', 'selectize'], function ($, selectize) {
$(document).ready(function () {
$('#input-tags').selectize({
delimiter: ',',
persist: false,
create: function (input) {
return {
value: input,
text: input
}
}
});
$('#select-beast').selectize({});
$('#select-beast').selectize({});
$('#select-users').selectize({
render: {
option: function (data, escape) {
return '<div>' +
'<span class="image"><img src="' + data.image + '" alt=""></span>' +
'<span class="title">' + escape(data.text) + '</span>' +
'</div>';
},
item: function (data, escape) {
return '<div>' +
'<span class="image"><img src="' + data.image + '" alt=""></span>' +
escape(data.text) +
'</div>';
}
}
});
$('#select-users').selectize({
render: {
option: function (data, escape) {
return '<div>' +
'<span class="image"><img src="' + data.image + '" alt=""></span>' +
'<span class="title">' + escape(data.text) + '</span>' +
'</div>';
},
item: function (data, escape) {
return '<div>' +
'<span class="image"><img src="' + data.image + '" alt=""></span>' +
escape(data.text) +
'</div>';
}
}
});
$('#select-countries').selectize({
render: {
option: function (data, escape) {
return '<div>' +
'<span class="image"><img src="' + data.image + '" alt=""></span>' +
'<span class="title">' + escape(data.text) + '</span>' +
'</div>';
},
item: function (data, escape) {
return '<div>' +
'<span class="image"><img src="' + data.image + '" alt=""></span>' +
escape(data.text) +
'</div>';
}
}
});
});
});
$('#select-countries').selectize({
render: {
option: function (data, escape) {
return '<div>' +
'<span class="image"><img src="' + data.image + '" alt=""></span>' +
'<span class="title">' + escape(data.text) + '</span>' +
'</div>';
},
item: function (data, escape) {
return '<div>' +
'<span class="image"><img src="' + data.image + '" alt=""></span>' +
escape(data.text) +
'</div>';
}
}
});
});
});
</script>
{% endcontentfor %}
assets/css/dashboard.css
+5
View File
@@ -9543,6 +9543,7 @@ img {
.text-wrap {
padding: 3rem 5rem;
font-size: 1rem;
line-height: 1.6;
}
.text-wrap > :first-child {
@@ -11809,6 +11810,10 @@ textarea[cols] {
margin: 0;
}
.custom-controls-stacked .custom-control {
margin-bottom: .25rem;
}
.custom-control-label:before {
border: 1px solid rgba(0, 40, 100, 0.12);
background-color: #fff;
assets/scss/dashboard/_form.scss
+6
View File
@@ -37,6 +37,12 @@ textarea {
margin: 0;
}
.custom-controls-stacked {
.custom-control {
margin-bottom: .25rem;
}
}
.custom-control-label {
&:before {
border: 1px solid $input-border-color;
gulpfile.js
+5 -5
View File
@@ -5,7 +5,7 @@ var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer');
gulp.task('styles', function () {
return gulp.src('src/assets/scss/bundle.scss', { base: '.' })
return gulp.src('assets/scss/bundle.scss', { base: '.' })
.pipe(sass({
precision: 8,
outputStyle: 'expanded'
@@ -15,11 +15,11 @@ gulp.task('styles', function () {
cascade: false
}))
.pipe(rename('dashboard.css'))
.pipe(gulp.dest('src/assets/css/'));
.pipe(gulp.dest('assets/css/'));
});
gulp.task('styles-plugins', function () {
return gulp.src('src/assets/plugins/**/plugin.scss', { base: '.' })
return gulp.src('assets/plugins/**/plugin.scss', { base: '.' })
.pipe(sass({
precision: 6,
outputStyle: 'expanded'
@@ -39,8 +39,8 @@ gulp.task('styles-plugins', function () {
});
gulp.task('watch', ['styles', 'styles-plugins'], function() {
gulp.watch('src/assets/scss/**/*.scss', ['styles']);
gulp.watch('src/assets/plugins/**/*.scss', ['styles-plugins']);
gulp.watch('assets/scss/**/*.scss', ['styles']);
gulp.watch('assets/plugins/**/*.scss', ['styles-plugins']);
});
gulp.task('default', ['styles', 'styles-plugins']);