// Input groups // ******************************************************************************* $validation-messages: ''; @each $state in map-keys($form-validation-states) { $validation-messages: $validation-messages + ':not(.' + unquote($state) + '-tooltip)' + ':not(.' + unquote($state) + '-feedback)'; } // Using :focus-within to apply focus/validation border and shadow to default and merged input-group .input-group { border-radius: $input-border-radius; // Input group (Default) .input-group-text { padding: calc($input-padding-y - $input-focus-border-width) calc($input-padding-x - $input-border-width); @include transition($input-transition); } //? Info :focus-within to apply focus/validation border and shadow to default and merged input & input-group &:focus-within { .input-group-text { border-width: $input-focus-border-width; padding: calc($input-padding-y - calc($input-focus-border-width + $input-border-width)) calc($input-padding-x - $input-focus-border-width); .was-validated &, .fv-plugins-bootstrap5-row-invalid & { padding: calc($input-padding-y - $input-focus-border-width) calc($input-padding-x - $input-border-width); } } .form-control, .form-select { border-width: $input-focus-border-width; padding: calc($input-padding-y - $input-focus-border-width) calc($input-padding-x - $input-border-width); &:first-child { padding-inline-start: calc($input-padding-x - $input-focus-border-width); } } } // Input group (lg) &.input-group-lg { .input-group-text { padding: calc($input-padding-y-lg - $input-border-width) calc($input-padding-x-lg - $input-border-width); } &:focus-within { .input-group-text { padding: calc($input-padding-y-lg - $input-border-width) calc($input-padding-x-lg - $input-focus-border-width); } .form-control:not(:first-child), .form-select:not(:first-child) { padding: calc($input-padding-y-lg - $input-border-width) calc($input-padding-x-lg); } } } // Input group (sm) &.input-group-sm { .form-control, .form-select { padding-inline: calc($input-padding-x-sm - $input-border-width); } .input-group-text { padding: calc($input-padding-y-sm - $input-border-width) calc($input-padding-x-sm - $input-border-width); } &:focus-within { .input-group-text { padding: calc($input-padding-y-sm - $input-focus-border-width) calc($input-padding-x-sm - $input-focus-border-width); } .form-control, .form-select { padding: calc($input-padding-y-sm - $input-border-width) calc($input-padding-x-sm); } } } > :not(:first-child):not(.dropdown-menu):not(.btn):not(.dropdown-menu + .form-control):not( .btn + .form-control )#{$validation-messages} { margin-inline-start: calc($input-focus-border-width - 3px); } // Input group merge &.input-group-merge { > :not(:first-child):not(.dropdown-menu):not(.btn):not(.dropdown-menu + .form-control):not( .btn + .form-control )#{$validation-messages} { margin-inline-start: calc(($input-focus-border-width + $input-border-width) * -1); } &:focus-within { > .form-control:first-child, > .form-select:first-child { padding-inline: calc($input-padding-x - $input-focus-border-width); } } &.input-group-sm { &:focus-within { > .form-control:first-child, > .form-select:first-child { padding-inline: calc($input-padding-x - $input-focus-border-width); } } } .input-group-text { &:first-child { border-inline-end: 0; } &:last-child { border-inline-start: 0; } } .form-control { &:not(:first-child) { border-inline-start: 0; } &:not(:last-child) { border-inline-end: 0; } &:not(textarea) { &:not(:first-child) { padding-inline-start: 0 !important; } &:not(:last-child) { padding-inline-end: 0 !important; } } } &.disabled, &[disabled] { margin-inline: 0 !important; } } // Input group on focus-within use margin-left same as as focus border width &:focus-within { > :not(:first-child):not(.dropdown-menu):not(.btn):not(.dropdown-menu + .form-control):not( .btn + .form-control )#{$validation-messages} { margin-inline-start: calc($input-focus-border-width * -1); } } // Rounded pill option &.rounded-pill { .input-group-text, .form-control { @include border-radius($border-radius-pill); } } &:hover { .input-group-text, .form-control { border-color: $input-border-hover-color; } } &:focus-within { box-shadow: $input-focus-box-shadow; .form-control, .input-group-text { box-shadow: none; } } .was-validated & { &:has(.is-invalid), &:has(.is-valid), &:has(:valid), &:has(:invalid) { box-shadow: none; } } &.has-validation, &.is-invalid { &:has(.is-invalid), &:has(.is-valid), &:has(:invalid), &:has(.form-control.is-invalid) { box-shadow: none; } } // For disabled input group &.disabled, &[disabled] { .input-group-text, .form-control { pointer-events: none; color: $text-muted; background-color: $input-disabled-bg; border-color: $input-disabled-border-color; } } // ! FIX: Formvalidation border radius issue &.has-validation { > .input-group-text:first-child { @include border-end-radius(0); } > .form-control:first-child { @include border-end-radius(0); } > .form-control:not(:first-child):not(:last-child) { @include border-radius(0); } } } // input-group-text icon size .input-group-text { background-clip: padding-box; i { @include font-size(1.25rem); } } .input-group-lg > .input-group-text { i { @include font-size(1.375rem); } } .input-group-sm > .input-group-text { i { @include font-size(1.125rem); } } // Merge input // Input group merge .form-control border & padding @include ltr-only { .input-group-merge { .input-group-text { &:first-child { border-right: 0; } &:last-child { border-left: 0; } } &.disabled { > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not( .invalid-feedback ) { margin-left: 0 !important; } } } } // Adding transition (On focus border color change) .input-group-text { @include transition($input-transition); } // RTL Style // ******************************************************************************* @include rtl-only { .input-group { // Rounded input field &.rounded-pill { .input-group-text { border-top-right-radius: $border-radius-pill !important; border-bottom-right-radius: $border-radius-pill !important; } .form-control { border-top-left-radius: $border-radius-pill !important; border-bottom-left-radius: $border-radius-pill !important; } } // Input group with dropdown rounded corners, while not validate &:not(.has-validation) { > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu), > .dropdown-toggle:nth-last-child(n + 3) { @include border-start-radius(0); @include border-end-radius($input-border-radius); } } &.input-group-lg { &:not(.has-validation) { > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu), > .dropdown-toggle:nth-last-child(n + 3) { @include border-end-radius($input-border-radius-lg); } } } &.input-group-sm { &:not(.has-validation) { > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu), > .dropdown-toggle:nth-last-child(n + 3) { @include border-end-radius($input-border-radius-sm); } } } // Input group with dropdown rounded corners, while validate &.has-validation { > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu), > .dropdown-toggle:nth-last-child(n + 4) { @include border-start-radius(0); @include border-end-radius($input-border-radius); } } &.input-group-lg { > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu), > .dropdown-toggle:nth-last-child(n + 4) { @include border-end-radius($input-border-radius-lg); } } &.input-group-sm { > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu), > .dropdown-toggle:nth-last-child(n + 4) { @include border-end-radius($input-border-radius-sm); } } // Input group border radius $validation-messages: ''; @each $state in map-keys($form-validation-states) { $validation-messages: $validation-messages + ':not(.' + unquote($state) + '-tooltip)' + ':not(.' + unquote($state) + '-feedback)'; } > :not(:first-child):not(.dropdown-menu)#{$validation-messages} { margin-right: calc(#{$input-border-width} * -1); @include border-end-radius(0); margin-left: 0px; @include border-start-radius($input-border-radius); } &.input-group-lg { > :not(:first-child):not(.dropdown-menu)#{$validation-messages} { @include border-start-radius($input-border-radius-lg); } } &.input-group-sm { > :not(:first-child):not(.dropdown-menu)#{$validation-messages} { @include border-start-radius($input-border-radius-sm); } } // ? We apply border radius from the above styles // Remove border radius from first and last element > :not(:first-child):not(:last-child):not(.dropdown-toggle):not(.dropdown-menu), > .dropdown-toggle:nth-last-child(n + 3):not(:first-child) { @include border-radius(0 !important); } // ! FIX: Formvalidation border radius issue &.has-validation { > .input-group-text:first-child { @include border-start-radius(0); @include border-end-radius($input-border-radius); } > .form-control:first-child { @include border-start-radius(0); @include border-end-radius($input-border-radius); } } } // Input group merge .input-group-text border & .form-control border & padding // Merge input } //! FIX: Formvalidation : .input-group-text valid/invalid border color, If .input-group has .input-group-text first. .fv-plugins-bootstrap5-row-invalid { .input-group.has-validation, .input-group.has-validation:focus-within { .input-group-text { border-color: $form-feedback-invalid-color !important; } } } // ? UnComment If eleValidClass is not blank i.e form-validation.js Line no. ~208 // .fv-plugins-bootstrap5-row-valid { // .input-group, // .input-group:focus-within { // .input-group-text { // border-color: $form-feedback-valid-color; // } // } // }