form--checkbox-radio--ie.css

Same filename in other branches
  1. 9 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/2815083

  5.  * @preserve

  6.  */

  7. 

  8. /**

  9.  * @file

  10.  * Checkbox and radio input elements styles for IE11 and below.

  11.  */

  12. 

  13. .form-boolean::-ms-check {

  14.   display: inline-block;

  15.   box-sizing: border-box;

  16.   width: 18px;

  17.   height: 18px;

  18.   vertical-align: text-bottom;

  19.   color: transparent; /* IE */

  20.   border: 1px solid #8e929c;

  21.   border-radius: 2px;

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

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

  24.   background-size: 100% 100%;

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

  26. }

  27. 

  28. .form-boolean--type-radio::-ms-check {

  29.   width: 19px;

  30.   height: 19px;

  31.   border-radius: 19px;

  32. }

  33. 

  34. .form-boolean:focus::-ms-check {

  35.   color: transparent; /* IE */

  36. }

  37. 

  38. .form-boolean:active::-ms-check,

  39. .form-boolean:hover::-ms-check {

  40.   border-color: #222330;

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

  42. }

  43. 

  44. .form-boolean:focus:active::-ms-check,

  45. .form-boolean:focus:hover::-ms-check {

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

  47. }

  48. 

  49. .form-boolean--type-checkbox:checked::-ms-check {

  50.   color: transparent; /* IE */

  51.   border-color: #003cc5;

  52.   background-color: #003cc5;

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

  54. }

  55. 

  56. .form-boolean--type-checkbox:checked:active::-ms-check,

  57. .form-boolean--type-checkbox:checked:hover::-ms-check {

  58.   border-color: #222330;

  59.   background-color: #222330;

  60. }

  61. 

  62. .form-boolean--type-radio:checked::-ms-check {

  63.   color: transparent; /* IE */

  64.   border-color: #003cc5;

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

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

  67. }

  68. 

  69. .form-boolean--type-checkbox:checked:active::-ms-check,

  70. .form-boolean--type-checkbox:checked:hover::-ms-check {

  71.   border-color: #222330;

  72.   background-color: #222330;

  73. }

  74. 

  75. .form-boolean--type-radio:checked::-ms-check {

  76.   border-color: #003cc5;

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

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

  79. }

  80. 

  81. .form-boolean--type-radio:checked:focus::-ms-check {

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

  83. }

  84. 

  85. .form-boolean--type-radio:checked:active::-ms-check,

  86. .form-boolean--type-radio:checked:hover::-ms-check {

  87.   border-color: #222330;

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

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

  90. }

  91. 

  92. .form-boolean--type-radio:checked:focus:active::-ms-check,

  93. .form-boolean--type-radio:checked:focus:hover::-ms-check {

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

  95. }

  96. 

  97. /**

  98.  * Error states.

  99.  */

  100. 

  101. .form-boolean.error::-ms-check {

  102.   border-color: #d72222;

  103.   background-color: #fff;

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

  105. }

  106. 

  107. .form-boolean.error:active::-ms-check,

  108. .form-boolean.error:hover::-ms-check {

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

  110. }

  111. 

  112. .form-boolean.error:focus::-ms-check,

  113. .form-boolean.error:focus:active::-ms-check,

  114. .form-boolean.error:focus:hover::-ms-check {

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

  116. }

  117. 

  118. .form-boolean.error:checked:active::-ms-check,

  119. .form-boolean.error:checked:hover::-ms-check {

  120.   border-color: #d72222;

  121.   background-color: #fff;

  122. }

  123. 

  124. .form-boolean--type-checkbox.error:checked::-ms-check,

  125. .form-boolean--type-checkbox.error:checked:active::-ms-check,

  126. .form-boolean--type-checkbox.error:checked:hover::-ms-check {

  127.   background-color: #d72222;

  128. }

  129. 

  130. .form-boolean--type-radio.error:checked::-ms-check,

  131. .form-boolean--type-radio.error:checked:active::-ms-check,

  132. .form-boolean--type-radio.error:checked:hover::-ms-check {

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

  134. }

  135. 

  136. .form-boolean--type-radio.error:checked:focus::-ms-check {

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

  138. }

  139. 

  140. /**

  141.  * Disabled states.

  142.  */

  143. 

  144. .form-boolean[disabled]::-ms-check,

  145. .form-boolean[disabled]:hover::-ms-check,

  146. .form-boolean[disabled].error::-ms-check,

  147. .form-boolean[disabled].error:hover::-ms-check,

  148. .form-boolean--type-radio[disabled]:focus:active::-ms-check,

  149. .form-boolean--type-radio[disabled]:active:hover::-ms-check,

  150. .form-boolean--type-radio[disabled].error:active:hover::-ms-check {

  151.   border-color: #bababf;

  152.   background-color: #f2f2f3;

  153.   background-image: none;

  154.   box-shadow: none;

  155. }

  156. 

  157. .form-boolean--type-checkbox[disabled]:checked::-ms-check {

  158.   color: transparent; /* IE */

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

  160. }

  161. 

  162. .form-boolean--type-radio[disabled]:checked::-ms-check,

  163. .form-boolean--type-radio[disabled].error:checked::-ms-check {

  164.   color: transparent; /* IE */

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

  166. }

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