D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home
/
shubmkcj
/
urbane.createerp.com
/
assets
/
scss
/
Filename :
_form-elements.scss
back
Copy
/* ============= Form ============= */ /* Form components */ label { font-size: 14px; color: $dark; letter-spacing: 0.01em; font-family: $font-secondary; } select[multiple] option+option, select[size] option+option { margin-top: 1px; } select[multiple] option, select[size] option { padding: 6px 12px; border-radius: 2px; } textarea.form-control { min-height: 90px; } .form-control { border: 1px solid darken($light,3%); border-radius: 4px; padding: 7px 12px; height: 38px; max-width: 100%; font-size: $font-size-base; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; transition: all 300ms linear; } .form-control:focus { border: 1px solid darken($light,20%); -webkit-box-shadow: none; box-shadow: none; outline: 0 !important; } .input-lg { height: 46px; padding: 10px 16px; font-size: 16px; line-height: 1.3333333; border-radius: 4px; } .input-sm { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .input-group-btn .btn { padding: 7px 12px; } .input-group-btn .btn-sm { padding: 5px 10px; } .input-group-btn .btn-md { padding: 8px 14px; } .input-group-btn .btn-lg { padding: 10px 17px; } /* == Form Advanced */ /* Bootstrap tagsinput */ .bootstrap-tagsinput { box-shadow: none; padding: 5px 7px 5px; width: 100%; border: 1px solid #e3e3e3; .label-info { background-color: $custom !important; display: inline-block; padding: 5px; margin: 3px 1px; } } /* Bootstrap select */ .bootstrap-select.show>.dropdown-menu>.dropdown-menu { display: block; } .bootstrap-select > .dropdown-menu > .dropdown-menu li.hidden{ display:none; } .bootstrap-select > .dropdown-menu > .dropdown-menu li a{ display: block; width: 100%; padding: 3px 1.5rem; clear: both; font-weight: 400; color: #292b2c; text-align: inherit; white-space: nowrap; background: 0 0; border: 0; } .bootstrap-select .check-mark::after { content: "\F12C"; font-family: "Material Design Icons"; } .bootstrap-select button { overflow: hidden; text-overflow: ellipsis; } .bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark { margin-top: 0; } /* Select 2 */ .select2-container { width: 100% !important; .select2-selection--single { border: 1px solid #E3E3E3 !important; height: 38px !important; .select2-selection__rendered { line-height: 36px !important; padding-left: 12px !important; } .select2-selection__arrow { height: 34px; width: 34px; right: 3px; b{ border-color: #999 transparent transparent transparent; border-width: 6px 6px 0 6px; } } } } .select2-container--open { .select2-selection--single { .select2-selection__arrow { b{ border-color: transparent transparent #999 transparent !important; border-width: 0 6px 6px 6px !important; } } } } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: $custom; } .select2-results__option { padding: 6px 12px; } .select2-dropdown { border: 1px solid #e3e3e3 !important; padding-top: 5px; box-shadow: 0 2px 2px rgba(0, 0, 0, .15); } .select2-search { input{ border: 1px solid #e3e3e3 !important; } } .select2-container .select2-selection--multiple { min-height: 38px !important; border: 1px solid #e3e3e3 !important; .select2-selection__rendered { padding: 2px 10px; } .select2-search__field { margin-top: 7px; border: 0 !important; } .select2-selection__choice { background-color: #f5f5f5; border: 1px solid #e3e3e3; border-radius: 1px; padding: 0 7px; } } /* AUTOCOMPLETE */ .autocomplete-suggestions { border: 1px solid #f9f9f9; background: $white; cursor: default; overflow: auto; -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15); } .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; } .autocomplete-no-suggestion { padding: 2px 5px; } .autocomplete-selected { background: rgba($muted,0.3); cursor: pointer; } .autocomplete-suggestions strong { font-weight: bold; color: $dark; } .autocomplete-group { padding: 2px 5px; } .autocomplete-group strong { font-weight: bold; font-size: 16px; color: $dark; display: block; } /* Bootstrap-select */ .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width: 100% !important; } .bootstrap-select { .dropdown-toggle { &:focus { outline: none !important; } } .glyphicon { padding-right: 6px; } } /* Bootstrap filestyle */ .icon-span-filestyle { padding-right: 5px; } .bootstrap-filestyle { label { margin-bottom: 0; } } /* Bootstrap-touchSpin */ .bootstrap-touchspin { .input-group-btn-vertical { .btn { padding: 9px 12px; } i { top: 4px; left: 8px; } } } /* Form validation */ .parsley-errors-list { margin: 0; padding: 0; } .parsley-errors-list > li { font-size: 12px; list-style: none; color: $danger; margin-top: 5px; padding-left: 20px; font-weight: 600; position: relative; &:before { content: "\F159"; font: normal normal normal 14px/1 "Material Design Icons"; position: absolute; left: 2px; top: 2px; } } // Timepicker .bootstrap-timepicker-widget table td input { border: 1px solid rgba($dark,0.3); width: 35px; } // Datepicker .datepicker-dropdown { padding: 10px !important; } .datepicker td, .datepicker th { width: 30px; height: 30px; } .datepicker table tr td.active:hover, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active:active, .datepicker table tr td.active:hover:active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.active, .datepicker table tr td.active:hover.active, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active[disabled], .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active.disabled:hover[disabled], .datepicker table tr td.selected, .datepicker table tr td.selected:hover, .datepicker table tr td.selected.disabled, .datepicker table tr td.selected.disabled:hover{ background-color: $custom !important; color: $white !important; background-image: none !important; text-shadow: none !important; } .datepicker table tr td.today, .datepicker table tr td.today:hover, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover { background-color: $success !important; color: $white !important; background-image: none !important; } .datepicker-inline { border: 2px solid rgba($dark,0.1); width: 240px; } //Daterange Picker .daterangepicker td.active, .daterangepicker td.active:hover { background-color: $custom; } .daterangepicker .input-mini.active { border: 1px solid rgba($dark,0.3); } .daterangepicker .ranges li { border-radius: 2px; color: $dark; font-weight: 600; font-size: 12px; } .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect{ border: 1px solid rgba($dark,0.3); padding: 2px; width: 60px; } .daterangepicker .ranges li.active, .daterangepicker .ranges li:hover { background-color: $custom; border: 1px solid $custom; color: $white; } /* Bootstrap Touchspin */ .bootstrap-touchspin { .input-group-addon { padding: .5rem .75rem; margin-bottom: 0; font-size: 1rem; font-weight: 400; line-height: 1.25; color: $dark; text-align: center; background-color: lighten($light,5%); border: 1px solid rgba($dark,.15); } .input-group-btn:not(:first-child)>.btn, .input-group-btn:not(:first-child)>.btn-group { z-index: 2; margin-left: -1px; } .input-group .form-control:not(:first-child), .input-group-addon:not(:first-child), .input-group-btn:not(:first-child)>.btn, .input-group-btn:not(:first-child)>.btn-group>.btn, .input-group-btn:not(:first-child)>.dropdown-toggle, .input-group-btn:not(:last-child)>.btn-group:not(:first-child)>.btn, .input-group-btn:not(:last-child)>.btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group .form-control:not(:last-child), .input-group-addon:not(:last-child), .input-group-btn:not(:first-child)>.btn-group:not(:last-child)>.btn, .input-group-btn:not(:first-child)>.btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:not(:last-child)>.btn, .input-group-btn:not(:last-child)>.btn-group>.btn, .input-group-btn:not(:last-child)>.dropdown-toggle { border-top-right-radius: 0; border-bottom-right-radius: 0; } }