form--checkbox-radio--ie.css

Same filename in other branches
  1. 8.9.x core/themes/claro/css/components/form--checkbox-radio--ie.css

Checkbox and radio input elements styles for IE11 and below.

File

core/themes/claro/css/components/form--checkbox-radio--ie.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/3084859
  5. * @preserve
  6. */
  7. /**
  8. * @file
  9. * Checkbox and radio input elements styles for IE11 and below.
  10. */
  11. .form-boolean::-ms-check {
  12. display: inline-block;
  13. box-sizing: border-box;
  14. width: 1.125rem;
  15. height: 1.125rem;
  16. vertical-align: text-bottom;
  17. color: transparent; /* IE */
  18. border: 1px solid #919297;
  19. border-radius: 2px;
  20. background: #fff no-repeat 50% 50%;
  21. background-image: url("data:image/svg+xml,%3csvg width='12' height='10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.182 6.966L1.977 4.649l-.182-.19-.18.19-.796.835-.164.173.164.172L4 9.172l.18.19.182-.19 6.818-7.164.164-.172-.164-.173-.795-.835-.181-.19-.182.19-5.841 6.138z' fill='%23FFF'/%3e%3c/svg%3e");
  22. background-size: 100% 100%;
  23. box-shadow: 0 0 0 4px transparent;
  24. }
  25. .form-boolean--type-radio::-ms-check {
  26. width: 1.1875rem;
  27. height: 1.1875rem;
  28. border-radius: 1.1875rem;
  29. }
  30. .form-boolean:focus::-ms-check {
  31. color: transparent; /* IE */
  32. }
  33. .form-boolean:active::-ms-check,
  34. .form-boolean:hover::-ms-check {
  35. border-color: #232429;
  36. box-shadow: inset 0 0 0 1px #232429;
  37. }
  38. .form-boolean:focus:active::-ms-check,
  39. .form-boolean:focus:hover::-ms-check {
  40. box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
  41. }
  42. .form-boolean--type-checkbox:checked::-ms-check {
  43. color: transparent; /* IE */
  44. border-color: #003ecc;
  45. background-color: #003ecc;
  46. background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%23fff'/%3e%3c/svg%3e");
  47. }
  48. .form-boolean--type-checkbox:checked:active::-ms-check,
  49. .form-boolean--type-checkbox:checked:hover::-ms-check {
  50. border-color: #232429;
  51. background-color: #232429;
  52. }
  53. .form-boolean--type-radio:checked::-ms-check {
  54. color: transparent; /* IE */
  55. border-color: #003ecc;
  56. background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23003ecc'/%3e%3c/svg%3e");
  57. box-shadow: inset 0 0 0 1px #003ecc;
  58. }
  59. .form-boolean--type-checkbox:checked:active::-ms-check,
  60. .form-boolean--type-checkbox:checked:hover::-ms-check {
  61. border-color: #232429;
  62. background-color: #232429;
  63. }
  64. .form-boolean--type-radio:checked::-ms-check {
  65. border-color: #003ecc;
  66. background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23003ecc'/%3e%3c/svg%3e");
  67. box-shadow: inset 0 0 0 1px #003ecc;
  68. }
  69. .form-boolean--type-radio:checked:focus::-ms-check {
  70. box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003ecc;
  71. }
  72. .form-boolean--type-radio:checked:active::-ms-check,
  73. .form-boolean--type-radio:checked:hover::-ms-check {
  74. border-color: #232429;
  75. background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23000f33'/%3e%3c/svg%3e");
  76. box-shadow: inset 0 0 0 1px #232429;
  77. }
  78. .form-boolean--type-radio:checked:focus:active::-ms-check,
  79. .form-boolean--type-radio:checked:focus:hover::-ms-check {
  80. box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
  81. }
  82. /**
  83. * Error states.
  84. */
  85. .form-boolean.error::-ms-check {
  86. border-color: #dc2323;
  87. background-color: #fff;
  88. box-shadow: inset 0 0 0 1px #dc2323;
  89. }
  90. .form-boolean.error:active::-ms-check,
  91. .form-boolean.error:hover::-ms-check {
  92. box-shadow: inset 0 0 0 1px #dc2323;
  93. }
  94. .form-boolean.error:focus::-ms-check,
  95. .form-boolean.error:focus:active::-ms-check,
  96. .form-boolean.error:focus:hover::-ms-check {
  97. box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #dc2323;
  98. }
  99. .form-boolean.error:checked:active::-ms-check,
  100. .form-boolean.error:checked:hover::-ms-check {
  101. border-color: #dc2323;
  102. background-color: #fff;
  103. }
  104. .form-boolean--type-checkbox.error:checked::-ms-check,
  105. .form-boolean--type-checkbox.error:checked:active::-ms-check,
  106. .form-boolean--type-checkbox.error:checked:hover::-ms-check {
  107. background-color: #dc2323;
  108. }
  109. .form-boolean--type-radio.error:checked::-ms-check,
  110. .form-boolean--type-radio.error:checked:active::-ms-check,
  111. .form-boolean--type-radio.error:checked:hover::-ms-check {
  112. background-image: url("data:image/svg+xml,%3csvg width='17' height='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");
  113. }
  114. .form-boolean--type-radio.error:checked:focus::-ms-check {
  115. box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #dc2323;
  116. }
  117. /**
  118. * Disabled states.
  119. */
  120. .form-boolean[disabled]::-ms-check,
  121. .form-boolean[disabled]:hover::-ms-check,
  122. .form-boolean[disabled].error::-ms-check,
  123. .form-boolean[disabled].error:hover::-ms-check,
  124. .form-boolean--type-radio[disabled]:focus:active::-ms-check,
  125. .form-boolean--type-radio[disabled]:active:hover::-ms-check,
  126. .form-boolean--type-radio[disabled].error:active:hover::-ms-check {
  127. border-color: #bababf;
  128. background-color: #f2f2f3;
  129. background-image: none;
  130. box-shadow: none;
  131. }
  132. .form-boolean--type-checkbox[disabled]:checked::-ms-check {
  133. color: transparent; /* IE */
  134. background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%2382828c'/%3e%3c/svg%3e");
  135. }
  136. .form-boolean--type-radio[disabled]:checked::-ms-check,
  137. .form-boolean--type-radio[disabled].error:checked::-ms-check {
  138. color: transparent; /* IE */
  139. background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%2382828c'/%3e%3c/svg%3e");
  140. }

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