form--checkbox-radio.css

Checkbox and radio input elements.

File

View on git.drupalcode.org

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

View source 
  1. /*

  2.  * DO NOT EDIT THIS FILE.

  3.  * See the following change record for more information,

  4.  * https://www.drupal.org/node/2815083

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

  10.  * Checkbox and radio input elements.

  11.  */

  12. 

  13. /**

  14.  * Form item modifiers.

  15.  */

  16. 

  17. .form-type--boolean {

  18.   margin-left: 1.6875rem; /* LTR */

  19.   line-height: 1.5rem;

  20. }

  21. 

  22. [dir="rtl"] .form-type--boolean {

  23.   margin-right: 1.6875rem;

  24.   margin-left: 0;

  25. }

  26. 

  27. /**

  28.  * Radio and checkbox items that are the child of a form item.

  29.  */

  30. 

  31. .form-type--boolean .form-boolean {

  32.   position: relative;

  33.   top: 0.75rem;

  34.   float: left; /* LTR */

  35.   margin-left: -1.6875rem; /* LTR */

  36.   transform: translateY(-50%);

  37. }

  38. 

  39. [dir="rtl"] .form-type--boolean .form-boolean {

  40.   float: right;

  41.   margin-right: -1.6875rem;

  42.   margin-left: 0;

  43. }

  44. 

  45. .form-type--boolean.form-item--no-label {

  46.   margin-left: 0;

  47. }

  48. 

  49. [dir="rtl"] .form-type--boolean.form-item--no-label {

  50.   margin-right: 0;

  51. }

  52. 

  53. .form-type--boolean.form-item--no-label .form-boolean,

  54. [dir="rtl"] .form-type--boolean.form-item--no-label .form-boolean {

  55.   position: static;

  56.   float: none;

  57.   margin-right: 0;

  58.   margin-left: 0;

  59.   transform: none;

  60. }

  61. 

  62. /**

  63.  * When form items are nested in radios or checkboxes group, reduce the default

  64.  * space between them.

  65.  */

  66. 

  67. .form-boolean-group .form-type--boolean {

  68.   margin-top: 0.4em;

  69.   margin-bottom: 0.4em;

  70. }

  71. 

  72. /**

  73.  * Input appearance.

  74.  */

  75. 

  76. .form-boolean {

  77.   display: inline-block;

  78.   box-sizing: border-box;

  79.   width: 18px;

  80.   height: 18px;

  81.   vertical-align: text-bottom;

  82.   border: 1px solid #8e929c;

  83.   border-radius: 2px;

  84.   background: #fff no-repeat 50% 50%;

  85.   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");

  86.   background-size: 100% 100%;

  87.   box-shadow: 0 0 0 4px transparent;

  88.   -webkit-appearance: none;

  89.   -moz-appearance: none;

  90.   appearance: none;

  91. }

  92. 

  93. .form-boolean--type-radio {

  94.   width: 19px;

  95.   height: 19px;

  96.   border-radius: 19px;

  97. }

  98. 

  99. .form-boolean:active,

  100. .form-boolean:hover {

  101.   border-color: #222330;

  102.   box-shadow: inset 0 0 0 1px #222330;

  103. }

  104. 

  105. .form-boolean:focus:active,

  106. .form-boolean:focus:hover {

  107.   box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;

  108. }

  109. 

  110. .form-boolean--type-checkbox:checked {

  111.   border-color: #003cc5;

  112.   background-color: #003cc5;

  113.   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");

  114. }

  115. 

  116. .form-boolean--type-checkbox:checked:active,

  117. .form-boolean--type-checkbox:checked:hover {

  118.   border-color: #222330;

  119.   background-color: #222330;

  120. }

  121. 

  122. .form-boolean--type-radio:checked {

  123.   border-color: #003cc5;

  124.   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");

  125.   box-shadow: inset 0 0 0 1px #003cc5;

  126. }

  127. 

  128. .form-boolean--type-radio:checked:focus {

  129.   box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003cc5;

  130. }

  131. 

  132. .form-boolean--type-radio:checked:active,

  133. .form-boolean--type-radio:checked:hover {

  134.   border-color: #222330;

  135.   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");

  136.   box-shadow: inset 0 0 0 1px #222330;

  137. }

  138. 

  139. .form-boolean--type-radio:checked:focus:active,

  140. .form-boolean--type-radio:checked:focus:hover {

  141.   box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;

  142. }

  143. 

  144. /**

  145.  * Error states.

  146.  */

  147. 

  148. .form-boolean.error {

  149.   border-color: #d72222;

  150.   background-color: #fff;

  151.   box-shadow: inset 0 0 0 1px #d72222;

  152. }

  153. 

  154. .form-boolean.error:active,

  155. .form-boolean.error:hover {

  156.   box-shadow: inset 0 0 0 1px #d72222;

  157. }

  158. 

  159. .form-boolean.error:focus,

  160. .form-boolean.error:focus:active,

  161. .form-boolean.error:focus:hover {

  162.   box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;

  163. }

  164. 

  165. .form-boolean.error:checked:active,

  166. .form-boolean.error:checked:hover {

  167.   border-color: #d72222;

  168.   background-color: #fff;

  169. }

  170. 

  171. .form-boolean--type-checkbox.error:checked,

  172. .form-boolean--type-checkbox.error:checked:active,

  173. .form-boolean--type-checkbox.error:checked:hover {

  174.   background-color: #d72222;

  175. }

  176. 

  177. .form-boolean--type-radio.error:checked,

  178. .form-boolean--type-radio.error:checked:active,

  179. .form-boolean--type-radio.error:checked:hover {

  180.   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");

  181. }

  182. 

  183. .form-boolean--type-radio.error:checked:focus {

  184.   box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;

  185. }

  186. 

  187. /**

  188.  * Disabled states.

  189.  */

  190. 

  191. .form-boolean[disabled],

  192. .form-boolean[disabled]:hover,

  193. .form-boolean[disabled].error,

  194. .form-boolean[disabled].error:hover,

  195. .form-boolean--type-radio[disabled]:focus:active,

  196. .form-boolean--type-radio[disabled]:active:hover,

  197. .form-boolean--type-radio[disabled].error:active:hover {

  198.   border-color: #bababf;

  199.   background-color: #f2f2f3;

  200.   background-image: none;

  201.   box-shadow: none;

  202. }

  203. 

  204. .form-boolean--type-checkbox[disabled]:checked {

  205.   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");

  206. }

  207. 

  208. .form-boolean--type-radio[disabled]:checked,

  209. .form-boolean--type-radio[disabled].error:checked {

  210.   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");

  211. }

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