form--checkbox-radio.pcss.css

Same filename in other branches
  1. 9 core/themes/claro/css/components/form--checkbox-radio.pcss.css
  2. 10 core/themes/claro/css/components/form--checkbox-radio.pcss.css
  3. 11.x core/themes/claro/css/components/form--checkbox-radio.pcss.css

Checkbox and radio input elements.

File

core/themes/claro/css/components/form--checkbox-radio.pcss.css

View source
  1. /**
  2. * @file
  3. * Checkbox and radio input elements.
  4. */
  5. @import "../base/variables.pcss.css";
  6. /**
  7. * Form item modifiers.
  8. */
  9. .form-type--boolean {
  10. margin-left: var(--input--label-spacing); /* LTR */
  11. line-height: var(--space-l);
  12. }
  13. [dir="rtl"] .form-type--boolean {
  14. margin-right: var(--input--label-spacing);
  15. margin-left: 0;
  16. }
  17. /**
  18. * Radio and checkbox items that are the child of a form item.
  19. */
  20. .form-type--boolean .form-boolean {
  21. position: relative;
  22. top: calc(var(--space-l) / 2);
  23. float: left; /* LTR */
  24. margin-left: calc(var(--input--label-spacing) * -1); /* LTR */
  25. transform: translateY(-50%);
  26. }
  27. [dir="rtl"] .form-type--boolean .form-boolean {
  28. float: right;
  29. margin-right: calc(var(--input--label-spacing) * -1);
  30. margin-left: 0;
  31. }
  32. .form-type--boolean.form-item--no-label {
  33. margin-left: 0;
  34. }
  35. [dir="rtl"] .form-type--boolean.form-item--no-label {
  36. margin-right: 0;
  37. }
  38. .form-type--boolean.form-item--no-label .form-boolean,
  39. [dir="rtl"] .form-type--boolean.form-item--no-label .form-boolean {
  40. position: static;
  41. float: none;
  42. margin-right: 0;
  43. margin-left: 0;
  44. transform: none;
  45. }
  46. /**
  47. * When form items are nested in radios or checkboxes group, reduce the default
  48. * space between them.
  49. */
  50. .form-boolean-group .form-type--boolean {
  51. margin-top: 0.4em;
  52. margin-bottom: 0.4em;
  53. }
  54. /**
  55. * Input appearance.
  56. */
  57. .form-boolean {
  58. display: inline-block;
  59. box-sizing: border-box;
  60. width: 18px;
  61. height: 18px;
  62. vertical-align: text-bottom;
  63. border: 1px solid var(--input-border-color);
  64. border-radius: 2px;
  65. background: var(--input-bg-color) no-repeat 50% 50%;
  66. background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.18182 6.96572L1.97655 4.64855L1.79545 4.45826L1.61436 4.64855L0.818904 5.48437L0.654878 5.65672L0.818904 5.82907L4.00072 9.17235L4.18182 9.36263L4.36291 9.17235L11.1811 2.00817L11.3451 1.83582L11.1811 1.66347L10.3856 .827651L10.2045 .637365L10.0234 .82765L4.18182 6.96572Z' fill='white' /%3E%3C/svg%3E");
  67. background-size: 100% 100%;
  68. box-shadow: 0 0 0 4px transparent;
  69. appearance: none;
  70. }
  71. .form-boolean--type-radio {
  72. width: 19px;
  73. height: 19px;
  74. border-radius: 19px;
  75. }
  76. .form-boolean:active,
  77. .form-boolean:hover {
  78. border-color: var(--input-fg-color);
  79. box-shadow: inset 0 0 0 1px var(--input-fg-color);
  80. }
  81. .form-boolean:focus:active,
  82. .form-boolean:focus:hover {
  83. box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
  84. }
  85. .form-boolean--type-checkbox:checked {
  86. border-color: var(--input--focus-border-color);
  87. background-color: var(--input--focus-border-color);
  88. background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='white'/%3E%3C/svg%3E");
  89. }
  90. .form-boolean--type-checkbox:checked:active,
  91. .form-boolean--type-checkbox:checked:hover {
  92. border-color: var(--input-fg-color);
  93. background-color: var(--input-fg-color);
  94. }
  95. .form-boolean--type-radio:checked {
  96. border-color: var(--input--focus-border-color);
  97. background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23004adc'/%3E%3C/svg%3E");
  98. box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
  99. }
  100. .form-boolean--type-radio:checked:focus {
  101. box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--focus-border-color);
  102. }
  103. .form-boolean--type-radio:checked:active,
  104. .form-boolean--type-radio:checked:hover {
  105. border-color: var(--input-fg-color);
  106. background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3E%3C/svg%3E");
  107. box-shadow: inset 0 0 0 1px var(--input-fg-color);
  108. }
  109. .form-boolean--type-radio:checked:focus:active,
  110. .form-boolean--type-radio:checked:focus:hover {
  111. box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);
  112. }
  113. /**
  114. * Error states.
  115. */
  116. .form-boolean.error {
  117. border-color: var(--input--error-border-color);
  118. background-color: var(--input-bg-color);
  119. box-shadow: inset 0 0 0 1px var(--input--error-border-color);
  120. }
  121. .form-boolean.error:active,
  122. .form-boolean.error:hover {
  123. box-shadow: inset 0 0 0 1px var(--input--error-border-color);
  124. }
  125. .form-boolean.error:focus,
  126. .form-boolean.error:focus:active,
  127. .form-boolean.error:focus:hover {
  128. box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);
  129. }
  130. .form-boolean.error:checked:active,
  131. .form-boolean.error:checked:hover {
  132. border-color: var(--input--error-border-color);
  133. background-color: var(--input-bg-color);
  134. }
  135. .form-boolean--type-checkbox.error:checked,
  136. .form-boolean--type-checkbox.error:checked:active,
  137. .form-boolean--type-checkbox.error:checked:hover {
  138. background-color: var(--input--error-border-color);
  139. }
  140. .form-boolean--type-radio.error:checked,
  141. .form-boolean--type-radio.error:checked:active,
  142. .form-boolean--type-radio.error:checked:hover {
  143. background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%23d72222'/%3E%3C/svg%3E");
  144. }
  145. .form-boolean--type-radio.error:checked:focus {
  146. box-shadow: 0 0 0 2px var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);
  147. }
  148. /**
  149. * Disabled states.
  150. */
  151. .form-boolean[disabled],
  152. .form-boolean[disabled]:hover,
  153. .form-boolean[disabled].error,
  154. .form-boolean[disabled].error:hover,
  155. .form-boolean--type-radio[disabled]:focus:active,
  156. .form-boolean--type-radio[disabled]:active:hover,
  157. .form-boolean--type-radio[disabled].error:active:hover {
  158. border-color: var(--input--disabled-border-color);
  159. background-color: var(--input--disabled-bg-color);
  160. background-image: none;
  161. box-shadow: none;
  162. }
  163. .form-boolean--type-checkbox[disabled]:checked {
  164. background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7949219,7.095703 6.1816406,9.601563 12.205078,3.2753906 13.689453,4.8359375 6.1816406,12.724609 2.3105469,8.65625 Z' fill='%2382828c'/%3E%3C/svg%3E");
  165. }
  166. .form-boolean--type-radio[disabled]:checked,
  167. .form-boolean--type-radio[disabled].error:checked {
  168. background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='4.5' cx='8.5' cy='8.5' fill='%2382828c'/%3E%3C/svg%3E");
  169. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.