| Current Path : /var/www/html1/bbp/web/core/themes/claro/css/components/ |
Linux ift1.ift-informatik.de 5.4.0-216-generic #236-Ubuntu SMP Fri Apr 11 19:53:21 UTC 2025 x86_64 |
| Current File : /var/www/html1/bbp/web/core/themes/claro/css/components/form--checkbox-radio.css |
/*
* 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.
*/
/**
* Form item modifiers.
*/
.form-type--boolean {
margin-left: 1.6875rem; /* LTR */
line-height: 1.5rem;
}
[dir="rtl"] .form-type--boolean {
margin-right: 1.6875rem;
margin-left: 0;
}
/**
* Radio and checkbox items that are the child of a form item.
*/
.form-type--boolean .form-boolean {
position: relative;
top: 0.75rem;
float: left; /* LTR */
margin-left: -1.6875rem; /* LTR */
transform: translateY(-50%);
}
[dir="rtl"] .form-type--boolean .form-boolean {
float: right;
margin-right: -1.6875rem;
margin-left: 0;
}
.form-type--boolean.form-item--no-label {
margin-left: 0;
}
[dir="rtl"] .form-type--boolean.form-item--no-label {
margin-right: 0;
}
.form-type--boolean.form-item--no-label .form-boolean,
[dir="rtl"] .form-type--boolean.form-item--no-label .form-boolean {
position: static;
float: none;
margin-right: 0;
margin-left: 0;
transform: none;
}
/**
* When form items are nested in radios or checkboxes group, reduce the default
* space between them.
*/
.form-boolean-group .form-type--boolean {
margin-top: 0.4em;
margin-bottom: 0.4em;
}
/**
* Input appearance.
*/
.form-boolean {
display: inline-block;
box-sizing: border-box;
width: 1.125rem;
height: 1.125rem;
vertical-align: text-bottom;
border: 1px solid #8e929c;
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;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-boolean--type-radio {
width: 1.1875rem;
height: 1.1875rem;
border-radius: 1.1875rem;
}
.form-boolean:active,
.form-boolean:hover {
border-color: #222330;
box-shadow: inset 0 0 0 1px #222330;
}
.form-boolean:focus:active,
.form-boolean:focus:hover {
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
}
.form-boolean--type-checkbox:checked {
border-color: #003cc5;
background-color: #003cc5;
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,
.form-boolean--type-checkbox:checked:hover {
border-color: #222330;
background-color: #222330;
}
.form-boolean--type-radio:checked {
border-color: #003cc5;
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='%23004adc'/%3e%3c/svg%3e");
box-shadow: inset 0 0 0 1px #003cc5;
}
.form-boolean--type-radio:checked:focus {
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003cc5;
}
.form-boolean--type-radio:checked:active,
.form-boolean--type-radio:checked:hover {
border-color: #222330;
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='%23222330'/%3e%3c/svg%3e");
box-shadow: inset 0 0 0 1px #222330;
}
.form-boolean--type-radio:checked:focus:active,
.form-boolean--type-radio:checked:focus:hover {
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
}
/**
* Error states.
*/
.form-boolean.error {
border-color: #d72222;
background-color: #fff;
box-shadow: inset 0 0 0 1px #d72222;
}
.form-boolean.error:active,
.form-boolean.error:hover {
box-shadow: inset 0 0 0 1px #d72222;
}
.form-boolean.error:focus,
.form-boolean.error:focus:active,
.form-boolean.error:focus:hover {
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
}
.form-boolean.error:checked:active,
.form-boolean.error:checked:hover {
border-color: #d72222;
background-color: #fff;
}
.form-boolean--type-checkbox.error:checked,
.form-boolean--type-checkbox.error:checked:active,
.form-boolean--type-checkbox.error:checked:hover {
background-color: #d72222;
}
.form-boolean--type-radio.error:checked,
.form-boolean--type-radio.error:checked:active,
.form-boolean--type-radio.error:checked:hover {
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 {
box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
}
/**
* Disabled states.
*/
.form-boolean[disabled],
.form-boolean[disabled]:hover,
.form-boolean[disabled].error,
.form-boolean[disabled].error:hover,
.form-boolean--type-radio[disabled]:focus:active,
.form-boolean--type-radio[disabled]:active:hover,
.form-boolean--type-radio[disabled].error:active:hover {
border-color: #bababf;
background-color: #f2f2f3;
background-image: none;
box-shadow: none;
}
.form-boolean--type-checkbox[disabled]:checked {
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,
.form-boolean--type-radio[disabled].error:checked {
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='%2382828c'/%3e%3c/svg%3e");
}