mirror of
https://github.com/ruisaraiva19/favycon.git
synced 2026-09-14 11:06:21 +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
124 lines
2.0 KiB
SCSS
124 lines
2.0 KiB
SCSS
@import 'reset';
|
|
@import 'font';
|
|
@import 'variables';
|
|
@import 'nprogress';
|
|
@import 'prism';
|
|
|
|
html,
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-family: Manrope, Arial, Helvetica Neue, Helvetica, sans-serif;
|
|
|
|
/* https://gist.github.com/hsleonis/55712b0eafc9b25f1944 */
|
|
font-size: 100%;
|
|
text-shadow: rgba($black, 0.01) 0 0 1px;
|
|
font-variant-ligatures: none;
|
|
text-rendering: optimizeLegibility;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-font-smoothing: antialiased;
|
|
transition: background 0.2s ease;
|
|
|
|
&.light-mode {
|
|
background: $off-white;
|
|
}
|
|
|
|
&.dark-mode {
|
|
background: $darker-black;
|
|
}
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
hr {
|
|
height: 1px;
|
|
margin: 16px 0;
|
|
background: $light-grey;
|
|
border: none;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.dark-mode {
|
|
hr {
|
|
background: $darker-grey;
|
|
}
|
|
}
|
|
|
|
.ReactModal__Overlay {
|
|
opacity: 0;
|
|
transition: all 0.2s ease;
|
|
transform: translate3d(0, 24px, 0);
|
|
}
|
|
|
|
.ReactModal__Overlay--after-open {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.ReactModal__Overlay--before-close {
|
|
opacity: 0;
|
|
transform: translate3d(0, 24px, 0);
|
|
}
|
|
|
|
.preload,
|
|
.preload * {
|
|
-webkit-transition: none !important;
|
|
-moz-transition: none !important;
|
|
-ms-transition: none !important;
|
|
-o-transition: none !important;
|
|
}
|
|
|
|
.collapse-enter {
|
|
max-width: 0;
|
|
opacity: 0;
|
|
}
|
|
.collapse-enter-active {
|
|
max-width: 50px;
|
|
opacity: 1;
|
|
transition: all 0.2s linear;
|
|
}
|
|
.collapse-exit {
|
|
max-width: 50px;
|
|
opacity: 1;
|
|
}
|
|
.collapse-exit-active {
|
|
max-width: 0;
|
|
opacity: 0;
|
|
transition: all 0.2s linear;
|
|
}
|
|
|
|
.fade-enter {
|
|
opacity: 0;
|
|
}
|
|
.fade-enter-active {
|
|
opacity: 1;
|
|
transition: opacity 0.2s linear;
|
|
}
|
|
.fade-exit {
|
|
opacity: 1;
|
|
}
|
|
.fade-exit-active {
|
|
opacity: 0;
|
|
transition: opacity 0.2s linear;
|
|
}
|
|
|
|
.error-enter {
|
|
opacity: 0;
|
|
transform: translate3d(0, -8px, 0);
|
|
}
|
|
.error-enter-active {
|
|
opacity: 1;
|
|
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
.error-exit {
|
|
opacity: 1;
|
|
}
|
|
.error-exit-active {
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
|
|
transform: translate3d(0, 4px, 0);
|
|
}
|