// Variáveis necessárias para o seu código $form-label-color: #495057; $form-textarea-title-bg: #f8f9fa; $input-border-color: #ced4da; $input-transition: all 0.3s ease; $input-placeholder-color: #6c757d; $form-feedback-invalid-color: #dc3545; $input-focus-bg: #fff; $input-focus-border-color: #80bdff; $gray-400: #ced4da; $theme-colors: ( "primary": #0d6efd, "secondary": #6c757d, "success": #198754, "info": #0dcaf0, "warning": #ffc107, "danger": #dc3545, "light": #f8f9fa, "dark": #212529 ); $choices-bg: #fff; $choices-border-color: #ced4da; $choices-input-color: #495057; $choices-dropdown-bg: #fff; $choices-highlight-bg: #e9ecef; // --- Seu código original abaixo --- .form-group { margin-bottom: .7rem; label { color: $form-label-color; font-weight: 600; } small { font-size: .7rem; } &.with-title { position: relative; label { position: absolute; top: 0; left: 0; padding: 5px; font-size: .6rem; background-color: $form-textarea-title-bg; width: 100%; border-width: 1px 1px 0 1px; border-style: solid; border-color: lighten($input-border-color, 5%); transition: $input-transition; } .form-control, dataTable-input { padding-top: 2rem; &:focus ~ label { border-left: 1px solid map-get($theme-colors, 'primary'); border-top: 1px solid map-get($theme-colors, 'primary'); border-right: 1px solid map-get($theme-colors, 'primary'); } } } &[class*="has-icon-"] { &.has-icon-left { .form-control { padding-left: 2.5rem; } .form-control-icon { left: 0; } } &.has-icon-right { .form-control { padding-right: 2.5rem; } .form-control-icon { right: 0; } } .form-control { &:focus ~ .form-control-icon { i, svg { color: #5A8DEE; } } &.form-control-xl { padding-left: 3rem; & ~ .form-control-icon i { font-size: 1.6rem; &:before { color: #a6a8aa; } } } } .form-control-icon { position: absolute; padding: 0 .6rem; i, svg { width: 1.2rem; color: $input-placeholder-color; font-size: 1.2rem; &:before { vertical-align: sub; } } } } &.mandatory .form-label:first-child:after { content: ' *'; color: $form-feedback-invalid-color; } &.is-invalid * { color: $form-feedback-invalid-color; border-color: $form-feedback-invalid-color; } } .form-control { & ~ .form-control-icon { top: .28rem; } &.form-control-lg { padding: .55rem 1rem; font-size: 1.05rem; & ~ .form-control-icon { top: .55rem; } } &.form-control-xl { padding: .85rem 1rem; font-size: 1.2rem; & ~ .form-control-icon { top: .55rem; } } } .form-check { .form-check-input { &[class*="bg-"] { border: 0; } &:focus { box-shadow: none; } @each $key, $value in $theme-colors { &.form-check-#{$key} { background-color: $value; border-color: $value; &:not(:checked) { background-color: transparent; border: 1px solid $gray-400; } &.form-check-glow { box-shadow: 0 0 5px lighten($value,10%); &:not(:checked) { box-shadow: none; } } } } } &.form-check-sm { .form-check-input { width: .9rem; height: .9rem; margin-top: .3em; } label { font-size: .7rem; } } &.form-check-lg { .form-check-input { width: 1.5rem; height: 1.5rem; margin-top: .3em; } label { font-size: 1rem; } } @each $key, $value in $theme-colors { &.form-check-#{$key} { .form-check-input { background-color: $value; border-color: $value; } } } } // Vendor: Datatable .dataTable-input { min-height: calc(1.5em + 0.934rem + 2px); padding: 0.467rem 0.6rem !important; font-size: 0.9025rem; font-weight: 400; line-height: 1.5; color: #7e7a7a; background-color: white; background-clip: padding-box; border: 1px solid #DFE3E7; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; &:focus { color: #555252; background-color: $input-focus-bg; border-color: $input-focus-border-color; outline: 0; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1); } } .dataTable-selector { padding:0.375rem 1.75rem 0.375rem 0.75rem; } // Vendor: Choices .choices__inner { background-color: $choices-bg; border-color: $choices-border-color; } .choices__input { background-color: $choices-bg !important; color: $choices-input-color; } .choices__list { background-color: $choices-dropdown-bg; } .choices__list--dropdown .choices__item--selectable.is-highlighted { background-color: $choices-highlight-bg; } html[data-bs-theme="dark"] { .form-control { background-color: #232323 !important; color: #e0e0e0 !important; border-color: #333 !important; } .form-label { color: #e0e0e0 !important; } } html[data-bs-theme="dark"] .form-select, html[data-bs-theme="dark"] .form-control { background-color: #232323 !important; color: #e0e0e0 !important; border-color: #333 !important; } html[data-bs-theme="dark"] .form-select:focus, html[data-bs-theme="dark"] .form-control:focus { background-color: #232323 !important; color: #e0e0e0 !important; border-color: #1976d2 !important; box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25) !important; }