mirror of
https://github.com/ruisaraiva19/favycon.git
synced 2026-09-12 19:51:07 +05:00
3ad6bcd128
* improvement(styles): update hovers and backgrounds * feat(about-us): add project link and contact email * chore(colors): update colors * chore(storybook): add Chromatic * chore: update repo info * chore(deps): upgrade dependencies * refactor: update colors and repo info * chore: remove chromatic * refactor(deps): upgrade react-dropzone to v11 * feat: update app icon * chore: update background image * chore: dark mode favicon
91 lines
1.2 KiB
SCSS
91 lines
1.2 KiB
SCSS
@import '../../styles/variables.scss';
|
|
|
|
.root {
|
|
position: relative;
|
|
}
|
|
|
|
.label {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.checkbox {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
visibility: hidden;
|
|
outline: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.sun,
|
|
.moon {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: all 0.3s ease;
|
|
|
|
path {
|
|
transition: all 0.3s ease;
|
|
}
|
|
}
|
|
|
|
:global(.light-mode) {
|
|
.sun {
|
|
visibility: hidden;
|
|
transform: translateX(-1px) scale(0);
|
|
}
|
|
.moon {
|
|
transform: translate(0, 0) rotate(0) scale(1);
|
|
}
|
|
.sun,
|
|
.moon {
|
|
path {
|
|
fill: #ccc;
|
|
}
|
|
}
|
|
}
|
|
|
|
:global(.dark-mode) {
|
|
.sun {
|
|
transform: translateX(0) scale(1);
|
|
}
|
|
.moon {
|
|
visibility: hidden;
|
|
transform: translate(0, -2px) rotate(115deg) scale(0.4);
|
|
}
|
|
.sun,
|
|
.moon {
|
|
path {
|
|
fill: #657584;
|
|
}
|
|
}
|
|
}
|
|
|
|
:global(.light-mode) .label {
|
|
&:hover path {
|
|
fill: $link;
|
|
}
|
|
}
|
|
|
|
:global(.dark-mode) .label {
|
|
&:hover path {
|
|
fill: $link-dark;
|
|
}
|
|
}
|