You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

152 lines
3.8 KiB

  1. //
  2. // Check/radio
  3. //
  4. .form-check {
  5. display: block;
  6. min-height: $form-check-min-height;
  7. padding-left: $form-check-padding-start;
  8. margin-bottom: $form-check-margin-bottom;
  9. .form-check-input {
  10. float: left;
  11. margin-left: $form-check-padding-start * -1;
  12. }
  13. }
  14. .form-check-input {
  15. width: $form-check-input-width;
  16. height: $form-check-input-width;
  17. margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
  18. vertical-align: top;
  19. background-color: $form-check-input-bg;
  20. background-repeat: no-repeat;
  21. background-position: center;
  22. background-size: contain;
  23. border: $form-check-input-border;
  24. appearance: none;
  25. color-adjust: exact; // Keep themed appearance for print
  26. @include transition($form-check-transition);
  27. &[type="checkbox"] {
  28. @include border-radius($form-check-input-border-radius);
  29. }
  30. &[type="radio"] {
  31. // stylelint-disable-next-line property-disallowed-list
  32. border-radius: $form-check-radio-border-radius;
  33. }
  34. &:active {
  35. filter: $form-check-input-active-filter;
  36. }
  37. &:focus {
  38. border-color: $form-check-input-focus-border;
  39. outline: 0;
  40. box-shadow: $form-check-input-focus-box-shadow;
  41. }
  42. &:checked {
  43. background-color: $form-check-input-checked-bg-color;
  44. border-color: $form-check-input-checked-border-color;
  45. &[type="checkbox"] {
  46. @if $enable-gradients {
  47. background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient);
  48. } @else {
  49. background-image: escape-svg($form-check-input-checked-bg-image);
  50. }
  51. }
  52. &[type="radio"] {
  53. @if $enable-gradients {
  54. background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);
  55. } @else {
  56. background-image: escape-svg($form-check-radio-checked-bg-image);
  57. }
  58. }
  59. }
  60. &[type="checkbox"]:indeterminate {
  61. background-color: $form-check-input-indeterminate-bg-color;
  62. border-color: $form-check-input-indeterminate-border-color;
  63. @if $enable-gradients {
  64. background-image: escape-svg($form-check-input-indeterminate-bg-image), var(--#{$variable-prefix}gradient);
  65. } @else {
  66. background-image: escape-svg($form-check-input-indeterminate-bg-image);
  67. }
  68. }
  69. &:disabled {
  70. pointer-events: none;
  71. filter: none;
  72. opacity: $form-check-input-disabled-opacity;
  73. }
  74. // Use disabled attribute in addition of :disabled pseudo-class
  75. // See: https://github.com/twbs/bootstrap/issues/28247
  76. &[disabled],
  77. &:disabled {
  78. ~ .form-check-label {
  79. opacity: $form-check-label-disabled-opacity;
  80. }
  81. }
  82. }
  83. .form-check-label {
  84. color: $form-check-label-color;
  85. cursor: $form-check-label-cursor;
  86. }
  87. //
  88. // Switch
  89. //
  90. .form-switch {
  91. padding-left: $form-switch-padding-start;
  92. .form-check-input {
  93. width: $form-switch-width;
  94. margin-left: $form-switch-padding-start * -1;
  95. background-image: escape-svg($form-switch-bg-image);
  96. background-position: left center;
  97. @include border-radius($form-switch-border-radius);
  98. @include transition($form-switch-transition);
  99. &:focus {
  100. background-image: escape-svg($form-switch-focus-bg-image);
  101. }
  102. &:checked {
  103. background-position: $form-switch-checked-bg-position;
  104. @if $enable-gradients {
  105. background-image: escape-svg($form-switch-checked-bg-image), var(--#{$variable-prefix}gradient);
  106. } @else {
  107. background-image: escape-svg($form-switch-checked-bg-image);
  108. }
  109. }
  110. }
  111. }
  112. .form-check-inline {
  113. display: inline-block;
  114. margin-right: $form-check-inline-margin-end;
  115. }
  116. .btn-check {
  117. position: absolute;
  118. clip: rect(0, 0, 0, 0);
  119. pointer-events: none;
  120. &[disabled],
  121. &:disabled {
  122. + .btn {
  123. pointer-events: none;
  124. filter: none;
  125. opacity: $form-check-btn-check-disabled-opacity;
  126. }
  127. }
  128. }