form--checkbox-radio--ie.css 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  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. * @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: 18px;
  15. height: 18px;
  16. vertical-align: text-bottom;
  17. color: transparent; /* IE */
  18. border: 1px solid #8e929c;
  19. border-radius: 2px;
  20. background: #fff no-repeat 50% 50%;
  21. 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");
  22. background-size: 100% 100%;
  23. box-shadow: 0 0 0 4px transparent;
  24. }
  25. .form-boolean--type-radio::-ms-check {
  26. width: 19px;
  27. height: 19px;
  28. border-radius: 19px;
  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: #222330;
  36. box-shadow: inset 0 0 0 1px #222330;
  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 #222330;
  41. }
  42. .form-boolean--type-checkbox:checked::-ms-check {
  43. color: transparent; /* IE */
  44. border-color: #003cc5;
  45. background-color: #003cc5;
  46. 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");
  47. }
  48. .form-boolean--type-checkbox:checked:active::-ms-check,
  49. .form-boolean--type-checkbox:checked:hover::-ms-check {
  50. border-color: #222330;
  51. background-color: #222330;
  52. }
  53. .form-boolean--type-radio:checked::-ms-check {
  54. color: transparent; /* IE */
  55. border-color: #003cc5;
  56. 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");
  57. box-shadow: inset 0 0 0 1px #003cc5;
  58. }
  59. .form-boolean--type-checkbox:checked:active::-ms-check,
  60. .form-boolean--type-checkbox:checked:hover::-ms-check {
  61. border-color: #222330;
  62. background-color: #222330;
  63. }
  64. .form-boolean--type-radio:checked::-ms-check {
  65. border-color: #003cc5;
  66. 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");
  67. box-shadow: inset 0 0 0 1px #003cc5;
  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 #003cc5;
  71. }
  72. .form-boolean--type-radio:checked:active::-ms-check,
  73. .form-boolean--type-radio:checked:hover::-ms-check {
  74. border-color: #222330;
  75. 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");
  76. box-shadow: inset 0 0 0 1px #222330;
  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 #222330;
  81. }
  82. /**
  83. * Error states.
  84. */
  85. .form-boolean.error::-ms-check {
  86. border-color: #d72222;
  87. background-color: #fff;
  88. box-shadow: inset 0 0 0 1px #d72222;
  89. }
  90. .form-boolean.error:active::-ms-check,
  91. .form-boolean.error:hover::-ms-check {
  92. box-shadow: inset 0 0 0 1px #d72222;
  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 #d72222;
  98. }
  99. .form-boolean.error:checked:active::-ms-check,
  100. .form-boolean.error:checked:hover::-ms-check {
  101. border-color: #d72222;
  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: #d72222;
  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' 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");
  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 #d72222;
  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' 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");
  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='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");
  140. }