/mizuxe2017/scss/bootstrap/mixins/_forms.scss

https://bitbucket.org/Trulsh/personal-bootstrap-projects · Sass · 137 lines · 106 code · 17 blank · 14 comment · 0 complexity · f59f20bbe380dfaf2651559dbed61080 MD5 · raw file

  1. // Form control focus state
  2. //
  3. // Generate a customized focus state and for any input with the specified color,
  4. // which defaults to the `$input-focus-border-color` variable.
  5. //
  6. // We highly encourage you to not customize the default value, but instead use
  7. // this to tweak colors on an as-needed basis. This aesthetic change is based on
  8. // WebKit's default styles, but applicable to a wider range of browsers. Its
  9. // usability and accessibility should be taken into account with any change.
  10. //
  11. // Example usage: change the default blue border and shadow to white for better
  12. // contrast against a dark gray background.
  13. @mixin form-control-focus() {
  14. &:focus {
  15. color: $input-focus-color;
  16. background-color: $input-focus-bg;
  17. border-color: $input-focus-border-color;
  18. outline: 0;
  19. // Avoid using mixin so we can pass custom focus shadow properly
  20. @if $enable-shadows {
  21. box-shadow: $input-box-shadow, $input-focus-box-shadow;
  22. } @else {
  23. box-shadow: $input-focus-box-shadow;
  24. }
  25. }
  26. }
  27. @mixin form-validation-state($state, $color) {
  28. .#{$state}-feedback {
  29. display: none;
  30. width: 100%;
  31. margin-top: $form-feedback-margin-top;
  32. font-size: $form-feedback-font-size;
  33. color: $color;
  34. }
  35. .#{$state}-tooltip {
  36. position: absolute;
  37. top: 100%;
  38. z-index: 5;
  39. display: none;
  40. max-width: 100%; // Contain to parent when possible
  41. padding: .5rem;
  42. margin-top: .1rem;
  43. font-size: .875rem;
  44. line-height: 1;
  45. color: #fff;
  46. background-color: rgba($color, .8);
  47. border-radius: .2rem;
  48. }
  49. .form-control,
  50. .custom-select {
  51. .was-validated &:#{$state},
  52. &.is-#{$state} {
  53. border-color: $color;
  54. &:focus {
  55. border-color: $color;
  56. box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
  57. }
  58. ~ .#{$state}-feedback,
  59. ~ .#{$state}-tooltip {
  60. display: block;
  61. }
  62. }
  63. }
  64. .form-check-input {
  65. .was-validated &:#{$state},
  66. &.is-#{$state} {
  67. ~ .form-check-label {
  68. color: $color;
  69. }
  70. ~ .#{$state}-feedback,
  71. ~ .#{$state}-tooltip {
  72. display: block;
  73. }
  74. }
  75. }
  76. .custom-control-input {
  77. .was-validated &:#{$state},
  78. &.is-#{$state} {
  79. ~ .custom-control-label {
  80. color: $color;
  81. &::before {
  82. background-color: lighten($color, 25%);
  83. }
  84. }
  85. ~ .#{$state}-feedback,
  86. ~ .#{$state}-tooltip {
  87. display: block;
  88. }
  89. &:checked {
  90. ~ .custom-control-label::before {
  91. @include gradient-bg(lighten($color, 10%));
  92. }
  93. }
  94. &:focus {
  95. ~ .custom-control-label::before {
  96. box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
  97. }
  98. }
  99. }
  100. }
  101. // custom file
  102. .custom-file-input {
  103. .was-validated &:#{$state},
  104. &.is-#{$state} {
  105. ~ .custom-file-label {
  106. border-color: $color;
  107. &::before { border-color: inherit; }
  108. }
  109. ~ .#{$state}-feedback,
  110. ~ .#{$state}-tooltip {
  111. display: block;
  112. }
  113. &:focus {
  114. ~ .custom-file-label {
  115. box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
  116. }
  117. }
  118. }
  119. }
  120. }