From fe89ba21c27437bc5dd5873dd85da718751ce58c Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 4 Jun 2022 01:46:28 -0700
Subject: [PATCH] Add scss utilities

---
 src/renderer/app.tsx                          |  2 +-
 src/renderer/styles/base.scss                 |  2 +
 src/renderer/styles/fonts.scss                |  0
 src/renderer/{App.scss => styles/global.scss} | 16 ++++----
 src/renderer/styles/mixins.scss               | 37 +++++++++++++++++++
 5 files changed, 48 insertions(+), 9 deletions(-)
 create mode 100644 src/renderer/styles/base.scss
 create mode 100644 src/renderer/styles/fonts.scss
 rename src/renderer/{App.scss => styles/global.scss} (93%)
 create mode 100644 src/renderer/styles/mixins.scss

diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx
index da9874e..b8f6ba2 100644
--- a/src/renderer/app.tsx
+++ b/src/renderer/app.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { MantineProvider } from '@mantine/core';
 import { useLocalStorage } from '@mantine/hooks';
 import { Router } from './router/Router';
-import './App.scss';
+import './styles/global.scss';
 
 export const App = () => {
   const [theme] = useLocalStorage({
diff --git a/src/renderer/styles/base.scss b/src/renderer/styles/base.scss
new file mode 100644
index 0000000..42c72fa
--- /dev/null
+++ b/src/renderer/styles/base.scss
@@ -0,0 +1,2 @@
+@forward './mixins.scss';
+@forward './fonts.scss';
diff --git a/src/renderer/styles/fonts.scss b/src/renderer/styles/fonts.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/renderer/App.scss b/src/renderer/styles/global.scss
similarity index 93%
rename from src/renderer/App.scss
rename to src/renderer/styles/global.scss
index 153b5f7..2164c1e 100644
--- a/src/renderer/App.scss
+++ b/src/renderer/styles/global.scss
@@ -1,21 +1,21 @@
-@use 'themes/default.scss';
-@use 'themes/dark.scss';
+@use '../themes/default.scss';
+@use '../themes/dark.scss';
 
 * {
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
-  box-sizing: border-box;
 }
 
 body,
 html {
-  min-width: 640px;
-  display: block;
-  height: 100%;
-  width: 100%;
   position: absolute;
-  overflow-y: hidden;
+  display: block;
+  width: 100%;
+  min-width: 640px;
+  height: 100%;
   overflow-x: hidden;
+  overflow-y: hidden;
   color: var(--content-text-color);
   background: var(--content-bg);
 }
diff --git a/src/renderer/styles/mixins.scss b/src/renderer/styles/mixins.scss
new file mode 100644
index 0000000..40a9712
--- /dev/null
+++ b/src/renderer/styles/mixins.scss
@@ -0,0 +1,37 @@
+@mixin hidden-text-overflow {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+@mixin flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin flex-center-column {
+  @include flex-center;
+  flex-direction: column;
+}
+
+@mixin flex-center-vertical {
+  display: flex;
+  align-items: center;
+}
+
+@mixin flex-center-horizontal {
+  display: flex;
+  justify-content: center;
+}
+
+@mixin cover-background {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+}