$input-margin-y: 4px; $custom-input-line-height: 20px; $custom-input-padding-y: 8px; $custom-input-padding-x: 12px; $custom-input-file-label-padding: 8px; // general form-control class for inputs (text, password, email, etc) .#{$prefix}form-control { padding: $custom-input-padding-y $custom-input-padding-x; margin-top: $input-margin-y; margin-bottom: $input-margin-y; line-height: $custom-input-line-height; color: $dark; &:hover:not(:disabled):not([readonly]) { border: 1px solid $input-focus-border-color; } &:disabled, &[readonly] { color: $muted; cursor: not-allowed; background-color: $cloud; border-color: $smoke; outline: none; box-shadow: none; } &:focus { color: $dark; } &.prefix-icon { padding-left: 36px; } &.suffix-icon { padding-right: 36px; } &.with-reset-icon, // will be deprecated in future version &.suffix-icon--double { padding-right: 36px; &.suffix-icon { padding-right: 72px; } } &.is-invalid, &:invalid { border-color: $danger; } } //plain text class .#{$prefix}form-control-plaintext { &:focus { outline: none; box-shadow: none; } } // supress magrin on .#{$prefix}form-group labels .#{$prefix}form-group { label { margin-bottom: 0; } } // supress margin on labels inside form-row .#{$prefix}form-row { label { margin-bottom: 0; } } .#{$prefix}custom-select, .#{$prefix}custom-file-input { height: 36px; padding: $custom-select-padding-y 8px $custom-select-padding-y 12px; margin: $input-margin-y 0; line-height: $custom-input-line-height; color: $dark; &:hover:not(:disabled) { cursor: pointer; border: 1px solid $input-focus-border-color; } &:focus { box-shadow: $input-focus-box-shadow; } &:disabled { color: $muted; cursor: not-allowed; background-color: $cloud; border-color: $smoke; } &:not(:focus):invalid { color: $text-muted; } } // custom file input input[type="file"] { // stylelint-disable-line selector-no-qualifying-type cursor: pointer; } input[type="file"]::-webkit-file-upload-button { // stylelint-disable-line selector-no-qualifying-type cursor: pointer; } .#{$prefix}custom-file { display: flex; flex-wrap: wrap; align-items: center; height: auto; margin-bottom: 20px; &:hover .#{$prefix}custom-file-label::before { border: 1px solid $muted; } .#{$prefix}form-text { margin-top: 4px; } } .#{$prefix}custom-file ~ .#{$prefix}custom-file-list-wrapper { margin-bottom: 12px; } .#{$prefix}custom-file-input { margin: 0; } .#{$prefix}custom-file-label { display: flex; align-items: flex-end; height: 36px; padding: $custom-input-padding-y $custom-input-padding-x; margin-bottom: 0; color: $muted; &::after { display: none; } // visualize Choose File button &::before { position: relative; top: 3px; bottom: 0; z-index: 3; display: flex; align-items: center; height: 24px; padding: 2px 8px; margin-right: 12px; line-height: $custom-input-line-height; color: $slate; content: "Choose File"; background-color: $snow; border: 1px solid $smoke; // stylelint-disable-next-line property-blacklist border-radius: 4px; } } //input text helper for validation, and normal case (form-text) .valid-feedback, .invalid-feedback { font-size: 12px; } .#{$prefix}form-group-label { margin-bottom: 0; font-weight: 600; line-height: $custom-input-line-height; } .#{$prefix}custom-control { margin-bottom: 4px; } .#{$prefix}form-group-label + .#{$prefix}custom-control, .#{$prefix}form-group-label + .#{$prefix}custom-file { margin-top: 4px; } //special case for checkbox and radio //checkboxes & radios are to use .#{$prefix}custom-control-input (NOT .#{$prefix}form-check) to have customize checkbox & radio .#{$prefix}custom-control-input { &:focus { box-shadow: $custom-control-indicator-focus-box-shadow; } &:hover ~ .#{$prefix}custom-control-label::before { cursor: pointer; border-color: $input-focus-border-color; } &:hover ~ .#{$prefix}custom-control-label::after, &:hover ~ .#{$prefix}custom-control-label { cursor: pointer; } &:disabled ~ .#{$prefix}custom-control-label::after{ cursor: not-allowed; border: none; } &:disabled ~ .#{$prefix}custom-control-label::before{ cursor: not-allowed; background-color: $cloud !important; // stylelint-disable-line declaration-no-important border: 1px solid $smoke !important; // stylelint-disable-line declaration-no-important } &:disabled ~ .#{$prefix}custom-control-label{ cursor: not-allowed; } } .#{$prefix}custom-control-label { font-weight: 400; color: $dark; } .#{$prefix}custom-control-label::before { top: 1px; } .#{$prefix}custom-control-label::after { top: 1px; } .#{$prefix}custom-checkbox { .#{$prefix}custom-control-label::after { background: no-repeat 100% / 100% 65%; } .#{$prefix}custom-control-input:disabled:checked ~ .#{$prefix}custom-control-label::after { background: $custom-checkbox-indicator-icon-checked-inverse no-repeat 100% / 100% 65%; } .#{$prefix}custom-control-input:disabled:indeterminate ~ .#{$prefix}custom-control-label::after { background: $custom-checkbox-indicator-icon-indeterminate-inverse no-repeat 100% / 100% 65%; } } .#{$prefix}custom-radio { .#{$prefix}custom-control-label::after { background: no-repeat 100% / 100% 50%; } .#{$prefix}custom-control-input:disabled:checked ~ .#{$prefix}custom-control-label::after { background: $custom-radio-indicator-icon-checked-inverse no-repeat 100% / 100% 50%; } } // to make sure checkbox & radio have 4px margin bottom .#{$prefix}form-check { margin-bottom: $input-margin-y; } // stylelint-disable-next-line selector-no-qualifying-type textarea.#{$prefix}form-control { min-width: 184px; height: 80px; min-height: 36px; max-height: 200px; padding-right: 12px; padding-left: 12px; @include scroll-default; } // text helper class in Bootstrap .#{$prefix}form-text { font-size: 12px; color: $slate; } // input groups classess .#{$prefix}input-group { margin-top: $input-margin-y; margin-bottom: $input-margin-y; .#{$prefix}form-control { margin-top: 0; margin-bottom: 0; } .valid-feedback, .invalid-feedback { margin-top: 4px; } } /* stylelint-disable property-no-vendor-prefix */ .#{$prefix}custom-select, .#{$prefix}custom-select-sm { -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* stylelint-enable property-no-vendor-prefix */ .#{$prefix}form-xs { width: 80px; max-width: 80px; } .#{$prefix}form-sm { width: 184px; max-width: 184px; } .#{$prefix}form-md { width: 288px; max-width: 288px; } .#{$prefix}form-lg { width: 392px; max-width: 392px; } .#{$prefix}form-xl { width: 600px; max-width: 600px; } .#{$prefix}counter-label { float: right; font-weight: $font-weight-normal; } .#{$prefix}input-group-text { display: flex; align-items: center; padding: $input-padding-y $input-padding-x; margin-bottom: 0; // Allow use of