form--checkbox-radio--ie.pcss.css

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

Checkbox and radio input elements styles for IE11 and below.

File

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

View source 
  1. /**

  2.  * @file

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

  4.  */

  5. 

  6. @import "../base/variables.pcss.css";

  7. 

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

  9.   display: inline-block;

  10.   box-sizing: border-box;

  11.   width: 18px;

  12.   height: 18px;

  13.   vertical-align: text-bottom;

  14.   color: transparent; /* IE */

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

  16.   border-radius: 2px;

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

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

  19.   background-size: 100% 100%;

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

  21. }

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

  23.   width: 19px;

  24.   height: 19px;

  25.   border-radius: 19px;

  26. }

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

  28.   color: transparent; /* IE */

  29. }

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

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

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

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

  34. }

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

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

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

  38. }

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

  40.   color: transparent; /* IE */

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

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

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

  44. }

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

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

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

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

  49. }

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

  51.   color: transparent; /* IE */

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

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

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

  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. .form-boolean--type-radio:checked::-ms-check {

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

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

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

  65. }

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

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

  68. }

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

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

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

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

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

  74. }

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

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

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

  78. }

  79. 

  80. /**

  81.  * Error states.

  82.  */

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

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

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

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

  87. }

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

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

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

  91. }

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

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

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

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

  96. }

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

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

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

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

  101. }

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

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

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

  105.   background-color: var(--input--error-border-color);

  106. }

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

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

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

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

  111. }

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

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

  114. }

  115. 

  116. /**

  117.  * Disabled states.

  118.  */

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

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

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

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

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

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

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

  126.   border-color: var(--input--disabled-border-color);

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

  128.   background-image: none;

  129.   box-shadow: none;

  130. }

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

  132.   color: transparent; /* IE */

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

  134. }

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

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

  137.   color: transparent; /* IE */

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

  139. }

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