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.

189 lines
4.7 KiB

8 months ago
  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-reverse {
  15. padding-right: $form-check-padding-start;
  16. padding-left: 0;
  17. text-align: right;
  18. .form-check-input {
  19. float: right;
  20. margin-right: $form-check-padding-start * -1;
  21. margin-left: 0;
  22. }
  23. }
  24. .form-check-input {
  25. --#{$prefix}form-check-bg: #{$form-check-input-bg};
  26. flex-shrink: 0;
  27. width: $form-check-input-width;
  28. height: $form-check-input-width;
  29. margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
  30. vertical-align: top;
  31. appearance: none;
  32. background-color: var(--#{$prefix}form-check-bg);
  33. background-image: var(--#{$prefix}form-check-bg-image);
  34. background-repeat: no-repeat;
  35. background-position: center;
  36. background-size: contain;
  37. border: $form-check-input-border;
  38. print-color-adjust: exact; // Keep themed appearance for print
  39. @include transition($form-check-transition);
  40. &[type="checkbox"] {
  41. @include border-radius($form-check-input-border-radius);
  42. }
  43. &[type="radio"] {
  44. // stylelint-disable-next-line property-disallowed-list
  45. border-radius: $form-check-radio-border-radius;
  46. }
  47. &:active {
  48. filter: $form-check-input-active-filter;
  49. }
  50. &:focus {
  51. border-color: $form-check-input-focus-border;
  52. outline: 0;
  53. box-shadow: $form-check-input-focus-box-shadow;
  54. }
  55. &:checked {
  56. background-color: $form-check-input-checked-bg-color;
  57. border-color: $form-check-input-checked-border-color;
  58. &[type="checkbox"] {
  59. @if $enable-gradients {
  60. --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
  61. } @else {
  62. --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
  63. }
  64. }
  65. &[type="radio"] {
  66. @if $enable-gradients {
  67. --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
  68. } @else {
  69. --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
  70. }
  71. }
  72. }
  73. &[type="checkbox"]:indeterminate {
  74. background-color: $form-check-input-indeterminate-bg-color;
  75. border-color: $form-check-input-indeterminate-border-color;
  76. @if $enable-gradients {
  77. --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
  78. } @else {
  79. --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
  80. }
  81. }
  82. &:disabled {
  83. pointer-events: none;
  84. filter: none;
  85. opacity: $form-check-input-disabled-opacity;
  86. }
  87. // Use disabled attribute in addition of :disabled pseudo-class
  88. // See: https://github.com/twbs/bootstrap/issues/28247
  89. &[disabled],
  90. &:disabled {
  91. ~ .form-check-label {
  92. cursor: default;
  93. opacity: $form-check-label-disabled-opacity;
  94. }
  95. }
  96. }
  97. .form-check-label {
  98. color: $form-check-label-color;
  99. cursor: $form-check-label-cursor;
  100. }
  101. //
  102. // Switch
  103. //
  104. .form-switch {
  105. padding-left: $form-switch-padding-start;
  106. .form-check-input {
  107. --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
  108. width: $form-switch-width;
  109. margin-left: $form-switch-padding-start * -1;
  110. background-image: var(--#{$prefix}form-switch-bg);
  111. background-position: left center;
  112. @include border-radius($form-switch-border-radius, 0);
  113. @include transition($form-switch-transition);
  114. &:focus {
  115. --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
  116. }
  117. &:checked {
  118. background-position: $form-switch-checked-bg-position;
  119. @if $enable-gradients {
  120. --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
  121. } @else {
  122. --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
  123. }
  124. }
  125. }
  126. &.form-check-reverse {
  127. padding-right: $form-switch-padding-start;
  128. padding-left: 0;
  129. .form-check-input {
  130. margin-right: $form-switch-padding-start * -1;
  131. margin-left: 0;
  132. }
  133. }
  134. }
  135. .form-check-inline {
  136. display: inline-block;
  137. margin-right: $form-check-inline-margin-end;
  138. }
  139. .btn-check {
  140. position: absolute;
  141. clip: rect(0, 0, 0, 0);
  142. pointer-events: none;
  143. &[disabled],
  144. &:disabled {
  145. + .btn {
  146. pointer-events: none;
  147. filter: none;
  148. opacity: $form-check-btn-check-disabled-opacity;
  149. }
  150. }
  151. }
  152. @if $enable-dark-mode {
  153. @include color-mode(dark) {
  154. .form-switch .form-check-input:not(:checked):not(:focus) {
  155. --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
  156. }
  157. }
  158. }