Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 19:02:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

checkbox label: container removed, props added, style changes

Browse source
This commit is contained in:
svetlagasheva 2019-01-24 18:25:40 +02:00
parent 4d35cfc167
commit 1cb5c9c928
2 changed files with 42 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/routes/Intro/CheckboxLabel/CheckboxLabel.js
View file

@ -6,20 +6,29 @@ import styles from './styles';
const CheckboxLabel = React.forwardRef(({ className, label, link, href, checked, onClick }, ref) => (
<label className={classnames(styles['checkbox-label-container'], className)}>
<div className={styles['checkbox-container']}>
<Checkbox ref={ref} className={styles['checkbox']} checked={checked} onClick={onClick} />
</div>
<Checkbox ref={ref} className={styles['checkbox']} checked={checked} onClick={onClick} />
<div className={styles['label']}>
{label}
{link ? <a className={styles['link']} href={href} target={'_blank'} tabIndex={'-1'}> {link}</a> : null}
{link && href ? <a className={styles['link']} href={href} target={'_blank'} tabIndex={'-1'}> {link}</a> : null}
</div>
</label>
));
CheckboxLabel.propTypes = {
className: PropTypes.string
};
CheckboxLabel.displayName = 'CheckboxLabel';
CheckboxLabel.propTypes = {
className: PropTypes.string,
onClick: PropTypes.func,
label: PropTypes.string,
link: PropTypes.string,
href: PropTypes.string,
checked: PropTypes.bool
};
CheckboxLabel.defaultProps = {
label: '',
link: '',
href: '',
checked: false
};
export default CheckboxLabel;

40
src/routes/Intro/CheckboxLabel/styles.less
View file

@ -1,32 +1,42 @@
.checkbox-label-container {
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
.checkbox-container {
.checkbox {
margin-right: calc(var(--spacing) * 0.5);
width: var(--spacing);
height: var(--spacing);
fill: var(--color-surface);
.checkbox {
width: var(--spacing);
height: var(--spacing);
fill: var(--color-surface);
&:global(.checked) {
fill: var(--color-surfacelight);
background-color: var(--color-primary);
}
&:focus-within {
fill: var(--color-surfacelighter);
}
&:global(.checked) {
fill: var(--color-surfacelight);
background-color: var(--color-primary);
}
}
.label {
line-height: 1.2em;
color: var(--color-surface);
}
.link {
color: var(--color-surfacelighter);
line-height: 1.2em;
color: var(--color-surfacelight);
}
&:focus-within, &:hover {
.checkbox {
fill: var(--color-surfacelighter);
}
.label {
color: var(--color-surfacelight);
}
.link {
color: var(--color-surfacelighter);
}
}
}