// // Component: Forms // .form-group { &.has-icon { position: relative; .form-control { padding-right: 35px; } .form-icon { background-color: transparent; border: 0; cursor: pointer; font-size: 1rem; // margin-top: -3px; padding: $input-btn-padding-y $input-btn-padding-x; position: absolute; right: 3px; top: 0; } } } // Button groups .btn-group-vertical { .btn { &.btn-flat:first-of-type, &.btn-flat:last-of-type { @include border-radius(0); } } } // Support icons in form-control .form-control-feedback { &.fa, &.fas, &.far, &.fab, &.fal, &.fad, &.svg-inline--fa, &.ion { line-height: $input-height; } } .input-lg + .form-control-feedback, .input-group-lg + .form-control-feedback { &.fa, &.fas, &.far, &.fab, &.fal, &.fad, &.svg-inline--fa, &.ion { line-height: $input-height-lg; } } .form-group-lg { .form-control + .form-control-feedback { &.fa, &.fas, &.far, &.fab, &.fal, &.fad, &.svg-inline--fa, &.ion { line-height: $input-height-lg; } } } .input-sm + .form-control-feedback, .input-group-sm + .form-control-feedback { &.fa, &.fas, &.far, &.fab, &.fal, &.fad, &.svg-inline--fa, &.ion { line-height: $input-height-sm; } } .form-group-sm { .form-control + .form-control-feedback { &.fa, &.fas, &.far, &.fab, &.fal, &.fad, &.svg-inline--fa, &.ion { line-height: $input-height-sm; } } } label:not(.form-check-label):not(.custom-file-label) { font-weight: $font-weight-bold; } .warning-feedback { @include font-size($form-feedback-font-size); color: theme-color("warning"); display: none; margin-top: $form-feedback-margin-top; width: 100%; } .warning-tooltip { @include border-radius($form-feedback-tooltip-border-radius); @include font-size($form-feedback-tooltip-font-size); background-color: rgba(theme-color("warning"), $form-feedback-tooltip-opacity); color: color-yiq(theme-color("warning")); display: none; line-height: $form-feedback-tooltip-line-height; margin-top: .1rem; max-width: 100%; // Contain to parent when possible padding: $form-feedback-tooltip-padding-y $form-feedback-tooltip-padding-x; position: absolute; top: 100%; z-index: 5; } .form-control { &.is-warning { border-color: theme-color("warning"); @if $enable-validation-icons { // padding-right: $input-height-inner; // background-image: none; // background-repeat: no-repeat; // background-position: center right $input-height-inner-quarter; // background-size: $input-height-inner-half $input-height-inner-half; } &:focus { border-color: theme-color("warning"); box-shadow: 0 0 0 $input-focus-width rgba(theme-color("warning"), .25); } ~ .warning-feedback, ~ .warning-tooltip { display: block; } } } // stylelint-disable-next-line selector-no-qualifying-type textarea.form-control { &.is-warning { @if $enable-validation-icons { padding-right: $input-height-inner; background-position: top $input-height-inner-quarter right $input-height-inner-quarter; } } } .custom-select { &.is-warning { border-color: theme-color("warning"); @if $enable-validation-icons { // padding-right: $custom-select-feedback-icon-padding-right; // background: $custom-select-background, none $custom-select-bg no-repeat $custom-select-feedback-icon-position / $custom-select-feedback-icon-size; } &:focus { border-color: theme-color("warning"); box-shadow: 0 0 0 $input-focus-width rgba(theme-color("warning"), .25); } ~ .warning-feedback, ~ .warning-tooltip { display: block; } } } .form-control-file { &.is-warning { ~ .warning-feedback, ~ .warning-tooltip { display: block; } } } .form-check-input { &.is-warning { ~ .form-check-label { color: theme-color("warning"); } ~ .warning-feedback, ~ .warning-tooltip { display: block; } } } .custom-control-input.is-warning { ~ .custom-control-label { color: theme-color("warning"); &::before { border-color: theme-color("warning"); } } ~ .warning-feedback, ~ .warning-tooltip { display: block; } &:checked { ~ .custom-control-label::before { @include gradient-bg(lighten(theme-color("warning"), 10%)); border-color: lighten(theme-color("warning"), 10%); } } &:focus { ~ .custom-control-label::before { box-shadow: 0 0 0 $input-focus-width rgba(theme-color("warning"), .25); } &:not(:checked) ~ .custom-control-label::before { border-color: theme-color("warning"); } } } // custom file .custom-file-input { &.is-warning { ~ .custom-file-label { border-color: theme-color("warning"); } ~ .warning-feedback, ~ .warning-tooltip { display: block; } &:focus { ~ .custom-file-label { border-color: theme-color("warning"); box-shadow: 0 0 0 $input-focus-width rgba(theme-color("warning"), .25); } } } } // body.text-sm support body.text-sm { .input-group-text { font-size: $font-size-sm; } } // custom .form-control styles .form-control, .custom-select { &.form-control-border { border-top: 0; border-left: 0; border-right: 0; border-radius: 0; box-shadow: inherit; &.border-width-2 { border-bottom-width: 2px; } &.border-width-3 { border-bottom-width: 3px; } } } // custom switch color variations .custom-switch { @each $name, $color in $theme-colors { @include custom-switch-variant($name, $color); } @each $name, $color in $colors { @include custom-switch-variant($name, $color); } } // custom range color variations .custom-range { @each $name, $color in $theme-colors { @include custom-range-variant($name, $color); } @each $name, $color in $colors { @include custom-range-variant($name, $color); } } // custom control input variations @each $name, $color in $theme-colors { @include custom-control-input-variant($name, $color); } @each $name, $color in $colors { @include custom-control-input-variant($name, $color); } .custom-control-input-outline { ~ .custom-control-label::before { background-color: transparent !important; box-shadow: none; } &:checked ~ .custom-control-label::before { @include gradient-bg(transparent); } } .navbar-dark { .btn-navbar, .form-control-navbar { background-color: lighten($sidebar-dark-bg, 5%); border: 1px solid lighten($sidebar-dark-bg, 15%); color: lighten(color-yiq(lighten($sidebar-dark-bg, 5%)), 15%); } .btn-navbar { &:hover { background-color: lighten($sidebar-dark-bg, 7.5%); } &:focus { background-color: lighten($sidebar-dark-bg, 10%); } } .form-control-navbar + .input-group-prepend, .form-control-navbar + .input-group-append { > .btn-navbar { background-color: lighten($sidebar-dark-bg, 5%); color: $white; border: 1px solid lighten($sidebar-dark-bg, 15%); border-left: none; } } } @include dark-mode () { .form-control:not(.form-control-navbar):not(.form-control-sidebar), .custom-select, .custom-file-label, .custom-file-label::after, .custom-control-label::before, .input-group-text { background-color: $dark; color: $white; } .form-control:not(.form-control-navbar):not(.form-control-sidebar):not(.is-invalid):not(:focus), .custom-file-label, .custom-file-label::after { border-color: $gray-600; } select { background-color: $dark; color: $white; border-color: $gray-600; } .custom-select { background: $dark $custom-select-dark-background; &[multiple]{ background: $dark; } } .input-group-text { border-color: $gray-600; } .custom-control-input:disabled ~ .custom-control-label::before, .custom-control-input[disabled] ~ .custom-control-label::before { background-color: lighten($dark, 5%); border-color: $gray-600; color: $white; } .custom-range { &::-webkit-slider-runnable-track { background-color: lighten($dark, 7.5%); } &::-moz-range-track { background-color: lighten($dark, 7.5%); } &::-ms-track { background-color: lighten($dark, 7.5%); } @each $name, $color in $theme-colors-alt { @include custom-range-variant($name, $color); } @each $name, $color in $colors-alt { @include custom-range-variant($name, $color); } } // custom switch color variations .custom-switch { @each $name, $color in $theme-colors-alt { @include custom-switch-variant($name, $color); } @each $name, $color in $colors-alt { @include custom-switch-variant($name, $color); } } @each $name, $color in $theme-colors-alt { @include custom-control-input-variant($name, $color); } @each $name, $color in $colors-alt { @include custom-control-input-variant($name, $color); } }