Home Explore Help
Sign In
kevin
/
Popsu-coloque
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: c11935cb48
Branches Tags
Popsu-coloque
/
web
/
core
/
themes
/
claro
/
css
/
components
/
form--checkbox-radio--ie.pcss.css

form--checkbox-radio--ie.pcss.css 6.6 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139 
  1. /**
    2. 

  2.  * @file
    3. 

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

  4.  */
    5. 

  5. 

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

  7. 

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

  9.   display: inline-block;
    10. 

  10.   box-sizing: border-box;
    11. 

  11.   width: 18px;
    12. 

  12.   height: 18px;
    13. 

  13.   vertical-align: text-bottom;
    14. 

  14.   color: transparent; /* IE */
    15. 

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

  16.   border-radius: 2px;
    17. 

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

  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. 

  19.   background-size: 100% 100%;
    20. 

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

  21. }
    22. 

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

  23.   width: 19px;
    24. 

  24.   height: 19px;
    25. 

  25.   border-radius: 19px;
    26. 

  26. }
    27. 

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

  28.   color: transparent; /* IE */
    29. 

  29. }
    30. 

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

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

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

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

  34. }
    35. 

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

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

  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. 

  38. }
    39. 

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

  40.   color: transparent; /* IE */
    41. 

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

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

  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. 

  44. }
    45. 

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

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

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

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

  49. }
    50. 

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

  51.   color: transparent; /* IE */
    52. 

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

  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. 

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

  55. }
    56. 

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

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

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

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

  60. }
    61. 

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

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

  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. 

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

  65. }
    66. 

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

  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. 

  68. }
    69. 

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

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

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

  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. 

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

  74. }
    75. 

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

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

  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. 

  78. }
    79. 

  79. 

  80. /**
    81. 

  81.  * Error states.
    82. 

  82.  */
    83. 

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

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

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

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

  87. }
    88. 

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

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

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

  91. }
    92. 

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

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

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

  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. 

  96. }
    97. 

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

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

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

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

  101. }
    102. 

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

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

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

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

  106. }
    107. 

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

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

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

  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. 

  111. }
    112. 

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

  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. 

  114. }
    115. 

  115. 

  116. /**
    117. 

  117.  * Disabled states.
    118. 

  118.  */
    119. 

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

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

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

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

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

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

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

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

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

  128.   background-image: none;
    129. 

  129.   box-shadow: none;
    130. 

  130. }
    131. 

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

  132.   color: transparent; /* IE */
    133. 

  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. 

  134. }
    135. 

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

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

  137.   color: transparent; /* IE */
    138. 

  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. 

  139. }
    140.