_form-check.scss 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. .form-check:not(.form-switch) .form-check-input {
  2. &[type="checkbox"],
  3. &[type="radio"] {
  4. border: 1px solid darken($gray-200, 10%);
  5. margin-top: $form-text-margin-top;
  6. position: relative;
  7. &:checked {
  8. border: 0;
  9. }
  10. }
  11. &[type="checkbox"] {
  12. &:after {
  13. transition: opacity $form-check-transition-time ease-in-out;
  14. font-family: "FontAwesome";
  15. content: "\f00c";
  16. width: 100%;
  17. height: 100%;
  18. color: $form-check-input-checked-color;
  19. position: absolute;
  20. display: flex;
  21. justify-content: center;
  22. align-items: center;
  23. font-size: $font-size-sm - .205;
  24. opacity: 0;
  25. }
  26. &:checked:after {
  27. opacity: 1;
  28. }
  29. }
  30. &[type="radio"] {
  31. transition: border 0s;
  32. &:after {
  33. transition: opacity $form-check-transition-time ease-in-out;
  34. content: "";
  35. position: absolute;
  36. width: $form-check-radio-after-width;
  37. height: $form-check-radio-after-width;
  38. border-radius: 50%;
  39. background-color: $white;
  40. opacity: 0;
  41. }
  42. &:checked {
  43. padding: 6px;
  44. }
  45. &:checked:after {
  46. opacity: 1;
  47. }
  48. }
  49. }
  50. .form-check-label,
  51. .form-check-input[type="checkbox"] {
  52. cursor: pointer;
  53. }
  54. .form-check-label{
  55. font-size:$font-size-sm;
  56. font-weight: $font-weight-normal;
  57. }
  58. .form-check-input{
  59. -webkit-appearance: none;
  60. -moz-appearance: none;
  61. appearance: none;
  62. }