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

refactor(Checkbox): style

Browse source
This commit is contained in:
Tim 2023-07-06 13:31:28 +02:00
parent eb45f8408e
commit bdf50041aa
2 changed files with 35 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/common/Checkbox/Checkbox.js
View file

@ -3,21 +3,13 @@
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const { default: Icon } = require('@stremio/stremio-icons/react');
const Button = require('stremio/common/Button');
const styles = require('./styles');
const Checkbox = React.forwardRef(({ className, checked, children, ...props }, ref) => {
return (
<Button {...props} ref={ref} className={classnames(className, styles['checkbox-container'], { 'checked': checked })}>
{
checked ?
<svg className={styles['icon']} viewBox={'0 0 100 100'}>
<Icon x={'10'} y={'10'} width={'80'} height={'80'} name={'checkmark'} />
</svg>
:
<Icon className={styles['icon']} name={'ic_box_empty'} />
}
<div className={styles['toggle']} />
{children}
</Button>
);

43
src/common/Checkbox/styles.less
View file

@ -2,18 +2,43 @@
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@height: 1.7rem;
@width: 3.2rem;
@thumb-margin: 0.5rem;
@thumb-size: calc(@height - @thumb-margin);
.checkbox-container {
&:global(.checked) {
.icon {
color: @color-surface-light5;
background-color: @color-primaryvariant1;
position: relative;
.toggle {
position: relative;
width: @width;
height: @height;
border-radius: @height;
background-color: var(--primary-overlay-color);
transition: background-color 0.1s ease-in-out;
&::before {
content: "";
position: absolute;
height: @thumb-size;
width: @thumb-size;
top: calc(@thumb-margin / 2);
left: calc(@thumb-margin / 2);
border-radius: 50%;
background-color: var(--primary-foreground-color);
transition: transform 0.1s ease-in-out;
}
}
.icon {
display: block;
width: 1rem;
height: 1rem;
color: @color-surface-light5;
&:global(.checked) {
.toggle {
background-color: var(--secondary-accent-color);
&::before {
transform: translateX(calc(@width - @thumb-size - @thumb-margin));
}
}
}
}