//some extra form variables @input-border: @default-border-color; @input-bg: @white; @input-color: @baseFontcolor; @input-focus-border: @themeColor; @input-focus-bg: @white; @input-focus-color: @gray-lighter; form { .input-icon { position:relative; input { padding-left:33px !important; } [class*="fa-"], [class^="fa-"], [class*=" glyphicon-"], [class^="glyphicon-"] { display:block; position:absolute; margin:11px 2px 4px 10px; width:16px; min-width:16px; height:16px; font-size:16px; font-weight: 400; } } .input-icon.right input { padding-left:15px !important; padding-right:33px !important; } .input-icon.right [class*="fa-"], [class^="fa-"] { right:8px; float:right; } .labels { cursor:pointer; } .input-group-addon { border: 1px solid @default-border-color; [class*=" fa-"], [class^="fa-"], [class*=" glyphicon-"], [class^="glyphicon-"] { color: @baseFontcolor; } } .form-group { .help-block { font-size: @baseFontSize - 1; margin-bottom: 5px; } } select, select.form-control { background-repeat: no-repeat!important; background-size: 10px 10px!important; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI2cHgiIHZpZXdCb3g9IjAgMCAxMCA2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0NC4xICg0MTQ1NSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+UGF0aCA0PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlZlbmRvciIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9ImRldmVsb3Blci1kYXNoYm9hcmQtc3VibWl0LXRoZW1lIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtOTY1LjAwMDAwMCwgLTQ5NC4wMDAwMDApIiBmaWxsPSIjRDFEOEREIj4KICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ1MC4wMDAwMDAsIDQ1Mi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJQYXRoLTQiIHBvaW50cz0iNTE1IDQyIDUyNSA0MiA1MjAgNDgiPjwvcG9seWdvbj4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+')!important; background-position: right 10px center!important; -webkit-appearance: none!important; } } .form-control { background-color:@input-bg; border:1px solid @input-border; box-shadow:none !important; height: 43px; &:hover { border-color:darken(@input-border,10%); } &:focus { .box-shadow(none); color: @input-color; border-color:@input-focus-border; background-color:@input-focus-bg; outline:0 none; .transition-duration(0.1s); } &.disabled, &.readonly, &disabled, &readonly { background-color: darken(@gray-lighter, 2%); } } #inputCaptcha.form-control { height: 29px; } .input-lg { height: 46px; } .input-sm { height: 30px; } .input-group-append { .btn { padding: .375rem .75rem; } } .input-fw-200 { @media (min-width:541px) { max-width: 200px; } } .input-group-text, .input-group-append { [class*="fa-"], [class^="fa-"] { opacity: 0.50; } } @media (min-width: 768px) { .form-inline .form-control { min-width: 50px; } } .checkbox label, .radio label { margin-bottom: 0; } .tswicther[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; + span { display: flex; justify-content: center; cursor: pointer; font-size: 125%; transition: all .4s ease .2s; .fad { font-family: "Font Awesome 5 Duotone"; &:before { content: "\f185"; } &:after { content: "\10f185"; } } } &:checked { + span { transform: rotate(365deg); .fad { &:before { content: "\f186"; } &:after { content: "\10f186"; } } } } } .select2-container--default { .select2-selection--single { .select2-selection__arrow { right: 5px; } } } .select2-container { width: 100%!important; min-width: 70px; .select2-selection--single, .select2-container--default { border: 1px solid @default-border-color; height: 43px; .select2-selection__rendered { line-height: 40px; } .select2-selection__arrow { height: 40px; } } .select2-selection--single { .select2-selection__rendered { padding-left: 0.75rem; padding-right: 0.75rem; } } .select2-dropdown { border: 1px solid @default-border-color; } .select2-search--dropdown .select2-search__field { outline: none!important; border-color: @default-border-color; } &.select2-container--default { .select2-results__option[aria-selected=true] { background-color: @gray-lighter; } .select2-results__option--highlighted.select2-results__option--selectable, .select2-results__option--highlighted[aria-selected] { background-color: @themeColor!important; } } }