hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Fine-tuning styles

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2021-12-27 10:54:20 +03:00
parent 181149d49b
commit cc52e382c0
2 changed files with 33 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/renderer/components/switch/switch.module.scss
View File

@ -19,28 +19,15 @@
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/ */
/* Based on switch component from https://github.com/argyleink/gui-challenges */
.Switch { .Switch {
--thumb-size: 2rem; --thumb-size: 2rem;
--thumb: hsl(0 0% 100%); --thumb-color: hsl(0 0% 100%);
--thumb-highlight: hsl(0 0% 100% / 25%); --thumb-color-highlight: hsl(0 0% 100% / 25%);
--track-size: calc(var(--thumb-size) * 2); --track-size: calc(var(--thumb-size) * 2);
--track-padding: 2px; --track-padding: 2px;
--track-inactive: hsl(80 0% 35%); --track-color-inactive: hsl(80 0% 35%);
--track-active: hsl(110, 60%, 60%); --track-color-active: hsl(110, 60%, 60%);
--thumb-color: var(--thumb);
--thumb-color-highlight: var(--thumb-highlight);
--track-color-inactive: var(--track-inactive);
--track-color-active: var(--track-active);
/* TODO: change vars for light theme
--thumb-highlight
--track-active
--track-inactive
*/
display: flex; display: flex;
align-items: center; align-items: center;
@ -63,7 +50,6 @@
appearance: none; appearance: none;
pointer-events: none; pointer-events: none;
touch-action: pan-y;
border: none; border: none;
outline-offset: 5px; outline-offset: 5px;
box-sizing: content-box; box-sizing: content-box;
@ -103,12 +89,32 @@
} }
&:disabled { &:disabled {
cursor: not-allowed; --track-color-inactive: hsl(80 0% 30%);
--thumb-color: transparent; --thumb-color: transparent;
&::before { &::before {
cursor: not-allowed; cursor: not-allowed;
box-shadow: inset 0 0 0 2px hsl(0 0% 0% / 50%); box-shadow: inset 0 0 0 2px hsl(0 0% 0% / 40%);
}
}
&:focus-visible {
box-shadow: 0 0 0 2px var(--blue);
}
}
&.disabled {
cursor: not-allowed;
}
}
:global(.theme-light) {
.Switch {
--thumb-highlight: hsl(0 0% 0% / 25%);
& > input {
&:disabled {
--track-color-inactive: hsl(80 0% 80%);
} }
} }
} }

8
src/renderer/components/switch/switch.tsx
View File

@ -22,6 +22,7 @@
import styles from "./switch.module.scss"; import styles from "./switch.module.scss";
import React, { DetailedHTMLProps, InputHTMLAttributes } from "react"; import React, { DetailedHTMLProps, InputHTMLAttributes } from "react";
import { cssNames } from "../../utils";
interface Props extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> { interface Props extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
onClick?: () => void; onClick?: () => void;
@ -39,7 +40,12 @@ export function Switch({ children, onClick, ...settings }: Props) {
}; };
return ( return (
<label htmlFor={id} className={styles.Switch} onClick={onLabelClick}> <label
htmlFor={id}
className={cssNames(styles.Switch, { [styles.disabled]: settings.disabled })}
onClick={onLabelClick}
data-testid="switch"
>
{children} {children}
<input type="checkbox" role="switch" id={id} {...settings}/> <input type="checkbox" role="switch" id={id} {...settings}/>
</label> </label>