inputs

normal-input   

This is an error message. This is a hint text to help user.
Copy
Edit
<!-- components/inputs/normal-input.html --> <div class="form-group" id="input-name-group"> <label for="input-name" class="control-label"> Normal Input <i class="icomoon-help-circle ml-2 theme-tooltip" data-toggle="popover" data-placement="right" title="This is a tooltip" data-content="And here's some amazing content. It's very engaging. Top?"></i> </label> <input type="email" class="form-control" name="input-name" id="input-name" placeholder="olivia@untitledui.com" value=""> <span class="help-block"> <i class="icomoon-alert-circle mr-2"></i> This is an error message. </span> <span class="text-muted">This is a hint text to help user.</span> </div>
Copy
Copy
Edit
/* scss/inputs/_normal-input.scss */ .form-group { margin-bottom: 16px; position: relative; .help-block { color: $error-500; @extend .text-sm; margin-top: 7px; display: none; i { @extend .text-md; margin-top: -2px; } } .text-muted { color: $gray-500; @extend .text-sm; margin-top: 7px; display: block; } .tooltip { max-width: 150px; } &.has-error { .control-label { color: $gray-700; } .form-control, .intl-tel-input { border: 1px solid $error-300; &:focus, &:focus-within { box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #FEE4E2 !important; border-color: $error-300 !important; } } .help-block { display: flex; } .text-muted { display: none; } } } .control-label { color: $gray-700; margin-bottom: 6px; @extend .text-md; @extend .weight-m; > * { vertical-align: middle; } i { @extend .text-md; color: $gray-500; cursor: pointer; } } .form-control { color: $gray-700; border: solid 1px $gray-300; border-radius: 8px; height: 44px; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); padding: 0 14px; margin: 0; @extend .text-md; @extend .weight-r; &::placeholder { color: $gray-500; } &:focus { box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #DEEFFC; border-color: $primary-300; } &:disabled, &.disabled { background-color: $gray-50; color: $gray-500; } &.with-key { display: flex; align-items: center; @include dir-padding-right(0px); @include dir-padding-left(14px); @extend .weight-r; &:focus-within { box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #DEEFFC; border-color: $primary-300; } .key { @extend .text-md; color: $gray-500; @include dir-margin-right(.5rem); display: flex; align-items: center; i { font-size: 20px; line-height: auto; } } input { width: 100%; height: 100%; border: 0 !important; outline: none; background-color: transparent; box-shadow: none; } } } textarea.form-control { padding: 10px 14px; height: 108px; resize: none; }
Cancel
Copy
Edit

Warning: file_get_contents(../js/normal-input.js): failed to open stream: No such file or directory in /var/www/ecdesigncdn/atomic-core/index.php on line 452
Cancel

input-has-error   

This is an error message. This is a hint text to help user.
Copy
Edit
<!-- components/inputs/input-has-error.html --> <div class="form-group has-error" id="input-name-group"> <label for="input-name" class="control-label"> Input Has Error <i class="icomoon-help-circle ml-2 theme-tooltip" data-toggle="popover" data-placement="right" title="This is a tooltip" data-content="And here's some amazing content. It's very engaging. Top?"></i> </label> <input type="email" class="form-control" name="input-name" id="input-name" placeholder="olivia@untitledui.com" value=""> <span class="help-block"> <i class="icomoon-alert-circle mr-2"></i> This is an error message. </span> <span class="text-muted">This is a hint text to help user.</span> </div>
Copy
Copy
Edit
/* scss/inputs/_input-has-error.scss */
Cancel

input-with-key   

This is an error message. This is a hint text to help user.
Copy
Edit
<!-- components/inputs/input-with-key.html --> <div class="form-group" id="input-name-group"> <label for="input-name" class="control-label"> Input With Key <i class="icomoon-help-circle ml-2 theme-tooltip" data-toggle="popover" data-placement="right" title="This is a tooltip" data-content="And here's some amazing content. It's very engaging. Top?"></i> </label> <label class="form-control with-key"> <span class="key">EGP</span> <input type="number" class="" name="input-name" id="input-name" placeholder="1,000.00" value=""> </label> <span class="help-block"> <i class="icomoon-alert-circle mr-2"></i> This is an error message. </span> <span class="text-muted">This is a hint text to help user.</span> </div>
Copy
Copy
Edit
/* scss/inputs/_input-with-key.scss */
Cancel

input-with-icon   

This is an error message. This is a hint text to help user.
Copy
Edit
<!-- components/inputs/input-with-icon.html --> <div class="form-group" id="input-name-group"> <label for="input-name" class="control-label"> Input With Icon <i class="icomoon-help-circle ml-2 theme-tooltip" data-toggle="popover" data-placement="right" title="This is a tooltip" data-content="And here's some amazing content. It's very engaging. Top?"></i> </label> <label class="form-control with-key"> <span class="key"> <i class="icomoon-mail"></i> </span> <input type="email" class="" name="input-name" id="input-name" placeholder="olivia@untitledui.com" value=""> </label> <span class="help-block"> <i class="icomoon-alert-circle mr-2"></i> This is an error message. </span> <span class="text-muted">This is a hint text to help user.</span> </div>
Copy
Copy
Edit
/* scss/inputs/_input-with-icon.scss */
Cancel

textarea   

This is an error message. This is a hint text to help user.
Copy
Edit
<!-- components/inputs/textarea.html --> <div class="form-group" id="input-name-group"> <label for="input-name" class="control-label"> Description <i class="icomoon-help-circle ml-2 theme-tooltip" data-toggle="popover" data-placement="right" title="This is a tooltip" data-content="And here's some amazing content. It's very engaging. Top?"></i> </label> <textarea class="form-control" name="input-name" id="input-name" placeholder="Enter a description" value=""></textarea> <span class="help-block"> <i class="icomoon-alert-circle mr-2"></i> This is an error message. </span> <span class="text-muted">This is a hint text to help user.</span> </div>
Copy
Copy
Edit
/* scss/inputs/_textarea.scss */
Cancel

tags-input   

This is an error message. This is a hint text to help user.
Copy
Edit
<!-- components/inputs/tags-input.html --> <div class="form-group" id="input-name-group"> <label for="input-name" class="control-label"> Tags Input <i class="icomoon-help-circle ml-2 theme-tooltip" data-toggle="popover" data-placement="right" title="This is a tooltip" data-content="And here's some amazing content. It's very engaging. Top?"></i> </label> <input type="email" class="form-control" name="input-name" id="input-name" value="" data-role="tagsinput" placeholder="Enter keywords"> <span class="help-block"> <i class="icomoon-alert-circle mr-2"></i> This is an error message. </span> <span class="text-muted">This is a hint text to help user.</span> </div>
Copy
Copy
Edit
/* scss/inputs/_tags-input.scss */ .bootstrap-tagsinput { color: $gray-700; border: solid 1px $gray-300; border-radius: 8px; box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05); display: flex; align-items: center; flex-wrap: wrap; min-height: 44px; padding: 6px 14px; margin: 0; cursor: text; @extend .text-md; @extend .weight-r; &::placeholder { color: $gray-500; } &:focus-within { box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #DEEFFC; } input { border: 0; box-shadow: none; outline: none; } .tag { padding: 2px 10px; @extend .text-sm; @extend .weight-m; background-color: $gray-100; border-radius: 16px; color: $gray-700; display: inline-flex; align-items: center; margin: 2px 0; @include dir-margin-right(.5rem); transition: .3s; cursor: context-menu; &:hover { background-color: $gray-200; } span { &::before { content: "\e94c"; display: block; font-size: 12px; color: $gray-700; @include dir-margin-left(4px); font-family: 'icomoonapp'; cursor: pointer; } } } }
Cancel

input-stepper   

This is an error message. This is a hint text to help user.
Copy
Edit
<!-- components/inputs/input-stepper.html --> <div class="form-group" id="input-name-group"> <label for="input-name" class="control-label"> Input Stepper <i class="icomoon-help-circle ml-2 theme-tooltip" data-toggle="popover" data-placement="right" title="This is a tooltip" data-content="And here's some amazing content. It's very engaging. Top?"></i> </label> <input type="number" class="touchspin" name="input-name" id="input-name" placeholder="0" value="0"> <span class="help-block"> <i class="icomoon-alert-circle mr-2"></i> This is an error message. </span> <span class="text-muted">This is a hint text to help user.</span> </div>
Copy
Copy
Edit
/* scss/inputs/_input-stepper.scss */ .bootstrap-touchspin { display: flex; border: 1px solid $gray-300; border-radius: 8px; background-color: $white; transition: .3s; &:focus-within { box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px #DEEFFC; border-color: $primary-300; } .input-group-btn { width: auto; .btn { width: 40px; height: 44px; border: 0; background-color: transparent; font-size: 0; display: flex; align-items: center; justify-content: center; } .bootstrap-touchspin-down { @include dir-border-right(1px solid $gray-300); @include dir-margin-right(1px); &::before { content: "\e9f5"; display: block; font-size: 20px; color: $gray-500; font-family: 'icomoonapp'; cursor: pointer; @extend .weight-r; } } .bootstrap-touchspin-up { @include dir-border-left(1px solid $gray-300); @include dir-margin-left(1px); &::before { content: "\ea12"; display: block; font-size: 20px; color: $gray-500; font-family: 'icomoonapp'; cursor: pointer; @extend .weight-r; } } } .form-control { border: 0 !important; box-shadow: none !important; } }
Cancel
Copy
Edit
/* js/input-stepper.js */ $(".touchspin").TouchSpin({ min: 0, max: 100, boostat: 5, maxboostedstep: 10, });
Cancel