_form-control.scss 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. //
  2. // General form controls (plus a few specific high-level interventions)
  3. //
  4. .form-control {
  5. color: $input-color-alt;
  6. background-color: $input-bg-alt;
  7. border: $input-border-width solid $input-border-color-alt;
  8. @include box-shadow($input-box-shadow-alt);
  9. // Customize the `:focus` state to imitate native WebKit styles.
  10. &:focus {
  11. color: $input-focus-color-alt;
  12. background-color: $input-focus-bg-alt;
  13. border-color: $input-focus-border-color-alt;
  14. @if $enable-shadows {
  15. @include box-shadow($input-box-shadow-alt, $input-focus-box-shadow-alt);
  16. } @else {
  17. box-shadow: $input-focus-box-shadow-alt;
  18. }
  19. }
  20. // Placeholder
  21. &::placeholder {
  22. color: $input-placeholder-color-alt;
  23. }
  24. // Disabled and read-only inputs
  25. &:disabled,
  26. &:read-only {
  27. background-color: $input-disabled-bg-alt;
  28. border-color: $input-disabled-border-color-alt;
  29. }
  30. // File input buttons theming
  31. &::file-selector-button {
  32. color: $form-file-button-color-alt;
  33. @include gradient-bg($form-file-button-bg-alt);
  34. border-color: inherit;
  35. }
  36. &:hover:not(:disabled):not(:read-only)::file-selector-button {
  37. background-color: $form-file-button-hover-bg-alt;
  38. }
  39. &::-webkit-file-upload-button {
  40. color: $form-file-button-color-alt;
  41. @include gradient-bg($form-file-button-bg-alt);
  42. border-color: inherit;
  43. }
  44. &:hover:not(:disabled):not(:read-only)::-webkit-file-upload-button {
  45. background-color: $form-file-button-hover-bg-alt;
  46. }
  47. }
  48. // Readonly controls as plain text
  49. .form-control-plaintext {
  50. color: $input-plaintext-color-alt;
  51. background-color: transparent;
  52. border: solid transparent;
  53. }