source: resources/assets/sass/components/form.scss@ 582789f

.form-control, .custom-select {
        font-size: .875rem;
        border-color: #e1e1e1;
        border-radius: .50rem;

        &:focus {
                box-shadow: none;
                border-color: rgba($color-primary, .8);
        }
}

.form-control:not(.form-control-lg):not(.form-control-sm) {
        height: calc(1.5em + .75rem + 3px)
}

.form-rounded {
        border-radius: 50px;
}

.form-control-lg {
        font-size: 1.10rem;
}

.form-control-sm {
        font-size: .800rem;
}

.input-group-text {
        border: none;
}

textarea {
        min-height: 100px;
        max-height: 500px
}

.custom-file-input:focus ~ .custom-file-label {
        border-color: lighten($color-primary, 10%);
        box-shadow: none;
}

.custom-control-input {
        right: 0;
}

.custom-control-label {
        line-height: 25px;
}

/* Checkboxes and Radios */
.custom-checkbox, .custom-radio, .custom-switch {

        .custom-control-input:checked ~ .custom-control-label::before {
                border-color: $color-primary;
                background-color: $color-primary;
        }

        .custom-control-input:focus ~ .custom-control-label::before {
                box-shadow: 0 0 0 0.2rem rgba($color-primary, .30)
        }

        & .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
                border-color: lighten($color-primary, 18%);
                background-color: lighten($color-primary, 18%);
        }

        &.custom-checkbox-secondary {
                .custom-control-input:checked ~ .custom-control-label::before {
                        border-color: $color-secondary;
                        background-color: $color-secondary;
                }

                .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
                        border-color: lighten($color-secondary, 18%);
                        background-color: lighten($color-secondary, 18%);
                }

                .custom-control-input:focus ~ .custom-control-label::before {
                        box-shadow: 0 0 0 0.2rem rgba($color-secondary, .30)
                }
        }

        &.custom-checkbox-success {
                .custom-control-input:checked ~ .custom-control-label::before {
                        border-color: $color-success;
                        background-color: $color-success;
                }

                .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
                        border-color: lighten($color-success, 18%);
                        background-color: lighten($color-success, 18%);
                }

                .custom-control-input:focus ~ .custom-control-label::before {
                        box-shadow: 0 0 0 0.2rem rgba($color-success, .30)
                }
        }

        &.custom-checkbox-danger {
                .custom-control-input:checked ~ .custom-control-label::before {
                        border-color: $color-danger;
                        background-color: $color-danger;
                }

                .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
                        border-color: lighten($color-danger, 18%);
                        background-color: lighten($color-danger, 18%);
                }

                .custom-control-input:focus ~ .custom-control-label::before {
                        box-shadow: 0 0 0 0.2rem rgba($color-danger, .30)
                }
        }

        &.custom-checkbox-warning {
                .custom-control-input:checked ~ .custom-control-label::before {
                        border-color: $color-warning;
                        background-color: $color-warning;
                }

                .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
                        border-color: lighten($color-warning, 18%);
                        background-color: lighten($color-warning, 18%);
                }

                .custom-control-input:focus ~ .custom-control-label::before {
                        box-shadow: 0 0 0 0.2rem rgba($color-warning, .30)
                }
        }

        &.custom-checkbox-info {
                .custom-control-input:checked ~ .custom-control-label::before {
                        border-color: $color-info;
                        background-color: $color-info;
                }

                .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
                        border-color: lighten($color-info, 18%);
                        background-color: lighten($color-info, 18%);
                }

                .custom-control-input:focus ~ .custom-control-label::before {
                        box-shadow: 0 0 0 0.2rem rgba($color-info, .30)
                }
        }

        &.custom-checkbox-dark {
                .custom-control-input:checked ~ .custom-control-label::before {
                        border-color: $color-dark;
                        background-color: $color-dark;
                }

                .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
                        border-color: lighten($color-dark, 18%);
                        background-color: lighten($color-dark, 18%);
                }

                .custom-control-input:focus ~ .custom-control-label::before {
                        box-shadow: 0 0 0 0.2rem rgba($color-dark, .30)
                }
        }
}

.custom-checkbox {
        &.custom-range-danger {
                &::before {
                        background-color: $color-danger;
                }

                &::-webkit-slider-thumb:active {
                        background-color: lighten($color-danger, 18%);
                }
        }
}

.custom-range {
        &::-webkit-slider-thumb {
                background-color: $color-primary;
        }

        &::-webkit-slider-thumb:active {
                background-color: lighten($color-primary, 18%);
        }

        &.custom-range-danger {
                &::-webkit-slider-thumb {
                        background-color: $color-danger;
                }

                &::-webkit-slider-thumb:active {
                        background-color: lighten($color-danger, 18%);
                }
        }

        &.custom-range-warning {
                &::-webkit-slider-thumb {
                        background-color: $color-warning;
                }

                &::-webkit-slider-thumb:active {
                        background-color: lighten($color-warning, 18%);
                }
        }

        &.custom-range-success {
                &::-webkit-slider-thumb {
                        background-color: $color-success;
                }

                &::-webkit-slider-thumb:active {
                        background-color: lighten($color-success, 18%);
                }
        }

        &.custom-range-secondary {
                &::-webkit-slider-thumb {
                        background-color: $color-secondary;
                }

                &::-webkit-slider-thumb:active {
                        background-color: lighten($color-secondary, 18%);
                }
        }

        &.custom-range-info {
                &::-webkit-slider-thumb {
                        background-color: $color-info;
                }

                &::-webkit-slider-thumb:active {
                        background-color: lighten($color-info, 18%);
                }
        }

        &.custom-range-light {
                &::-webkit-slider-thumb {
                        background-color: $color-light;
                }

                &::-webkit-slider-thumb:active {
                        background-color: lighten($color-light, 18%);
                }
        }

        &.custom-range-dark {
                &::-webkit-slider-thumb {
                        background-color: $color-dark;
                }

                &::-webkit-slider-thumb:active {
                        background-color: lighten($color-dark, 18%);
                }
        }
}