You are here

Home » API reference » Drupal 10

form--checkbox-radio--ie.css in Drupal 10

Same filename and directory in other branches
  1. 8 core/themes/claro/css/components/form--checkbox-radio--ie.css
  2. 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/3084859

  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: 1.125rem;

  17.   height: 1.125rem;

  18.   vertical-align: text-bottom;

  19.   color: transparent; /* IE */

  20.   border: 1px solid var(--input-border-color);

  21.   border-radius: 2px;

  22.   background: var(--input-bg-color) no-repeat 50% 50%;

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

  24.   background-size: 100% 100%;

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

  26. }

  27. 

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

  29.   width: 1.1875rem;

  30.   height: 1.1875rem;

  31.   border-radius: 1.1875rem;

  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: var(--input-fg-color);

  41.   box-shadow: inset 0 0 0 1px var(--input-fg-color);

  42. }

  43. 

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

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

  46.   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);

  47. }

  48. 

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

  50.   color: transparent; /* IE */

  51.   border-color: var(--input--focus-border-color);

  52.   background-color: var(--input--focus-border-color);

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

  54. }

  55. 

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

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

  58.   border-color: var(--input-fg-color);

  59.   background-color: var(--input-fg-color);

  60. }

  61. 

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

  63.   color: transparent; /* IE */

  64.   border-color: var(--input--focus-border-color);

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

  66.   box-shadow: inset 0 0 0 1px var(--input--focus-border-color);

  67. }

  68. 

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

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

  71.   border-color: var(--input-fg-color);

  72.   background-color: var(--input-fg-color);

  73. }

  74. 

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

  76.   border-color: var(--input--focus-border-color);

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

  78.   box-shadow: inset 0 0 0 1px var(--input--focus-border-color);

  79. }

  80. 

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

  82.   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);

  83. }

  84. 

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

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

  87.   border-color: var(--input-fg-color);

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

  89.   box-shadow: inset 0 0 0 1px var(--input-fg-color);

  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 var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input-fg-color);

  95. }

  96. 

  97. /**

  98.  * Error states.

  99.  */

  100. 

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

  102.   border-color: var(--input--error-border-color);

  103.   background-color: var(--input-bg-color);

  104.   box-shadow: inset 0 0 0 1px var(--input--error-border-color);

  105. }

  106. 

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

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

  109.   box-shadow: inset 0 0 0 1px var(--input--error-border-color);

  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 var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);

  116. }

  117. 

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

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

  120.   border-color: var(--input--error-border-color);

  121.   background-color: var(--input-bg-color);

  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: var(--input--error-border-color);

  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' 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 var(--color-white), 0 0 0 5px var(--color-focus), inset 0 0 0 1px var(--input--error-border-color);

  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: var(--input--disabled-border-color);

  152.   background-color: var(--input--disabled-bg-color);

  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' 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");

  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='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");

  166. }