mirror of
https://git.vectorsigma.ru/public/photoview.git
synced 2026-08-03 18:19:11 +00:00
72 lines
2.4 KiB
TypeScript
72 lines
2.4 KiB
TypeScript
import React from 'react'
|
|
import styled from 'styled-components'
|
|
|
|
const CheckboxLabelWrapper = styled.label`
|
|
& input[type='checkbox'] {
|
|
appearance: none;
|
|
outline: none;
|
|
}
|
|
|
|
& input[type='checkbox'] + span {
|
|
cursor: pointer;
|
|
}
|
|
|
|
& input[type='checkbox'] + span::before {
|
|
content: '';
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
width: 12px;
|
|
height: 12px;
|
|
background-color: #f9fafb;
|
|
border: 1px solid #aaa;
|
|
display: inline-block;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
margin-right: 8px;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
& input[type='checkbox']:checked + span::before {
|
|
background-color: #0072ff;
|
|
border-color: #109dff;
|
|
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='7px' height='4px' viewBox='0 0 7 4' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EPath 5%3C/title%3E%3Cg stroke='none' stroke-width='1.5' fill='none' fill-rule='evenodd'%3E%3Cpolyline stroke='white' points='1 1.93487039 2.77174339 3.70661378 6.47835718 2.27373675e-13'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E");
|
|
}
|
|
|
|
& input[type='checkbox']:focus + span::before {
|
|
outline: 2px solid #86c6ff;
|
|
border-color: #109dff;
|
|
}
|
|
|
|
& input[type='checkbox']:disabled + span::before {
|
|
border-color: #ccc;
|
|
background-color: #fefefe;
|
|
cursor: initial;
|
|
}
|
|
|
|
& input[type='checkbox']:disabled:checked + span::before {
|
|
background-color: #eee;
|
|
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='7px' height='4px' viewBox='0 0 7 4' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EPath 5%3C/title%3E%3Cg stroke='none' stroke-width='1.5' fill='none' fill-rule='evenodd'%3E%3Cpolyline stroke='%23444444' points='1 1.93487039 2.77174339 3.70661378 6.47835718 2.27373675e-13'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E");
|
|
}
|
|
|
|
& input[type='checkbox']:disabled + span {
|
|
color: #555;
|
|
cursor: initial;
|
|
}
|
|
`
|
|
|
|
type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
|
|
label: string
|
|
className?: string
|
|
}
|
|
|
|
const Checkbox = ({ label, className, ...props }: CheckboxProps) => {
|
|
return (
|
|
<CheckboxLabelWrapper className={className}>
|
|
<input type="checkbox" {...props} />
|
|
<span>{label}</span>
|
|
</CheckboxLabelWrapper>
|
|
)
|
|
}
|
|
|
|
export default Checkbox
|