form--checkbox-radio--ie.css
Same filename in other branches
Checkbox and radio input elements styles for IE11 and below.
File
-
core/
themes/ claro/ css/ components/ form--checkbox-radio--ie.css
View source
- /*
- * DO NOT EDIT THIS FILE.
- * See the following change record for more information,
- * https://www.drupal.org/node/3084859
- * @preserve
- */
-
- /**
- * @file
- * Checkbox and radio input elements styles for IE11 and below.
- */
-
- .form-boolean::-ms-check {
- display: inline-block;
- box-sizing: border-box;
- width: 1.125rem;
- height: 1.125rem;
- vertical-align: text-bottom;
- color: transparent; /* IE */
- border: 1px solid #919297;
- border-radius: 2px;
- background: #fff no-repeat 50% 50%;
- 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");
- background-size: 100% 100%;
- box-shadow: 0 0 0 4px transparent;
- }
-
- .form-boolean--type-radio::-ms-check {
- width: 1.1875rem;
- height: 1.1875rem;
- border-radius: 1.1875rem;
- }
-
- .form-boolean:focus::-ms-check {
- color: transparent; /* IE */
- }
-
- .form-boolean:active::-ms-check,
- .form-boolean:hover::-ms-check {
- border-color: #232429;
- box-shadow: inset 0 0 0 1px #232429;
- }
-
- .form-boolean:focus:active::-ms-check,
- .form-boolean:focus:hover::-ms-check {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
- }
-
- .form-boolean--type-checkbox:checked::-ms-check {
- color: transparent; /* IE */
- border-color: #003ecc;
- background-color: #003ecc;
- 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");
- }
-
- .form-boolean--type-checkbox:checked:active::-ms-check,
- .form-boolean--type-checkbox:checked:hover::-ms-check {
- border-color: #232429;
- background-color: #232429;
- }
-
- .form-boolean--type-radio:checked::-ms-check {
- color: transparent; /* IE */
- border-color: #003ecc;
- 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");
- box-shadow: inset 0 0 0 1px #003ecc;
- }
-
- .form-boolean--type-checkbox:checked:active::-ms-check,
- .form-boolean--type-checkbox:checked:hover::-ms-check {
- border-color: #232429;
- background-color: #232429;
- }
-
- .form-boolean--type-radio:checked::-ms-check {
- border-color: #003ecc;
- 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");
- box-shadow: inset 0 0 0 1px #003ecc;
- }
-
- .form-boolean--type-radio:checked:focus::-ms-check {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003ecc;
- }
-
- .form-boolean--type-radio:checked:active::-ms-check,
- .form-boolean--type-radio:checked:hover::-ms-check {
- border-color: #232429;
- 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");
- box-shadow: inset 0 0 0 1px #232429;
- }
-
- .form-boolean--type-radio:checked:focus:active::-ms-check,
- .form-boolean--type-radio:checked:focus:hover::-ms-check {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
- }
-
- /**
- * Error states.
- */
-
- .form-boolean.error::-ms-check {
- border-color: #dc2323;
- background-color: #fff;
- box-shadow: inset 0 0 0 1px #dc2323;
- }
-
- .form-boolean.error:active::-ms-check,
- .form-boolean.error:hover::-ms-check {
- box-shadow: inset 0 0 0 1px #dc2323;
- }
-
- .form-boolean.error:focus::-ms-check,
- .form-boolean.error:focus:active::-ms-check,
- .form-boolean.error:focus:hover::-ms-check {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #dc2323;
- }
-
- .form-boolean.error:checked:active::-ms-check,
- .form-boolean.error:checked:hover::-ms-check {
- border-color: #dc2323;
- background-color: #fff;
- }
-
- .form-boolean--type-checkbox.error:checked::-ms-check,
- .form-boolean--type-checkbox.error:checked:active::-ms-check,
- .form-boolean--type-checkbox.error:checked:hover::-ms-check {
- background-color: #dc2323;
- }
-
- .form-boolean--type-radio.error:checked::-ms-check,
- .form-boolean--type-radio.error:checked:active::-ms-check,
- .form-boolean--type-radio.error:checked:hover::-ms-check {
- 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");
- }
-
- .form-boolean--type-radio.error:checked:focus::-ms-check {
- box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #dc2323;
- }
-
- /**
- * Disabled states.
- */
-
- .form-boolean[disabled]::-ms-check,
- .form-boolean[disabled]:hover::-ms-check,
- .form-boolean[disabled].error::-ms-check,
- .form-boolean[disabled].error:hover::-ms-check,
- .form-boolean--type-radio[disabled]:focus:active::-ms-check,
- .form-boolean--type-radio[disabled]:active:hover::-ms-check,
- .form-boolean--type-radio[disabled].error:active:hover::-ms-check {
- border-color: #bababf;
- background-color: #f2f2f3;
- background-image: none;
- box-shadow: none;
- }
-
- .form-boolean--type-checkbox[disabled]:checked::-ms-check {
- color: transparent; /* IE */
- 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");
- }
-
- .form-boolean--type-radio[disabled]:checked::-ms-check,
- .form-boolean--type-radio[disabled].error:checked::-ms-check {
- color: transparent; /* IE */
- 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");
- }
Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.