From 0e5a08cc4949a2ae3f939d65b9545e18ea8d0d76 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 9 Mar 2025 10:56:09 +0100
Subject: [PATCH] Split common.scss into multiple style files.
---
frontend/src/styles/animations.scss | 44 ++++++++++
frontend/src/styles/common.scss | 129 +---------------------------
frontend/src/styles/elements.scss | 86 +++++++++++++++++++
frontend/src/styles/layout.scss | 17 ++++
frontend/src/styles/variables.scss | 1 +
5 files changed, 152 insertions(+), 125 deletions(-)
create mode 100644 frontend/src/styles/animations.scss
create mode 100644 frontend/src/styles/elements.scss
create mode 100644 frontend/src/styles/layout.scss
create mode 100644 frontend/src/styles/variables.scss
diff --git a/frontend/src/styles/animations.scss b/frontend/src/styles/animations.scss
new file mode 100644
index 0000000..0475eda
--- /dev/null
+++ b/frontend/src/styles/animations.scss
@@ -0,0 +1,44 @@
+@keyframes slide-up {
+ from {
+ transform: translateY(100%);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
+
+@keyframes slide-down {
+ from {
+ transform: translateY(0);
+ }
+ to {
+ transform: translateY(100%);
+ }
+}
+
+@keyframes fade-in {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes fade-out {
+ from {
+ opacity: 1;
+ }
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes unroll {
+ from {
+ transform: translateY(7.5em);
+ }
+ to {
+ transform: translateY(0);
+ }
+}
diff --git a/frontend/src/styles/common.scss b/frontend/src/styles/common.scss
index 12045a8..da41ae1 100644
--- a/frontend/src/styles/common.scss
+++ b/frontend/src/styles/common.scss
@@ -1,125 +1,4 @@
-// Set screen width breakpoints
-$screen-xs: 480px;
-$screen-sm: 768px;
-$screen-md: 992px;
-$screen-lg: 1200px;
-
-$header-height: 3.5rem;
-
-// @media utilities for common screen sizes
-@mixin mobile {
- @media (max-width: $screen-sm) {
- @content;
- }
-}
-
-@mixin tablet {
- @media (min-width: $screen-sm) and (max-width: $screen-md) {
- @content;
- }
-}
-
-@mixin desktop {
- @media (min-width: $screen-md) {
- @content;
- }
-}
-
-// Common element styles
-
-button {
- margin: 0 0.5em;
- padding: 0.25em 0.5em;
- border: 1px solid var(--color-border);
- border-radius: 0.25em;
- background: var(--color-background);
- font-size: 1.25em;
- cursor: pointer;
-
- &:disabled {
- color: var(--color-text);
- opacity: 0.5;
- cursor: not-allowed;
- }
-
- &:hover {
- color: var(--color-hover);
- }
-}
-
-[type=submit] {
- background: var(--color-accent);
- color: white !important;
- margin: 0.5em;
- font-size: 1.15em;
- padding: 0.5em;
- transition: background-color 0.5s;
-
- &:hover {
- background: var(--color-hover);
- color: var(--color-background);
- }
-}
-
-[type=text], [type=email], [type=password], textarea {
- width: 100%;
- background: var(--color-background-soft);
- color: var(--color-text);
- padding: 0.5em;
- border: 1px solid var(--color-border);
- border-radius: 4px;
- transition: border-color 0.5s;
- transition: border-color 0.5s;
- //
- width: 100%;
- padding: 0.5em;
- border: 1px solid var(--color-border);
- border-radius: 4px;
- background: var(--color-background-soft);
-}
-
-/* Animations */
-@keyframes slide-up {
- from {
- transform: translateY(100%);
- }
- to {
- transform: translateY(0);
- }
-}
-
-@keyframes slide-down {
- from {
- transform: translateY(0);
- }
- to {
- transform: translateY(100%);
- }
-}
-
-@keyframes fade-in {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-@keyframes fade-out {
- from {
- opacity: 1;
- }
- to {
- opacity: 0;
- }
-}
-
-@keyframes unroll {
- from {
- transform: translateY(7.5em);
- }
- to {
- transform: translateY(0);
- }
-}
+@forward "./animations.scss";
+@forward "./elements.scss";
+@forward "./layout.scss";
+@forward "./variables.scss";
diff --git a/frontend/src/styles/elements.scss b/frontend/src/styles/elements.scss
new file mode 100644
index 0000000..fd63aa1
--- /dev/null
+++ b/frontend/src/styles/elements.scss
@@ -0,0 +1,86 @@
+// Common element styles
+button {
+ margin: 0 0.5em;
+ padding: 0.25em 0.5em;
+ border: 1px solid var(--color-border);
+ border-radius: 0.25em;
+ background: var(--color-background);
+ color: var(--color-text);
+ font-size: 1.25em;
+ cursor: pointer;
+
+ &:disabled {
+ color: var(--color-text);
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+
+ &:hover {
+ color: var(--color-hover);
+ }
+}
+
+[type=submit] {
+ background: var(--color-accent);
+ color: white !important;
+ margin: 0.5em;
+ font-size: 1.15em;
+ padding: 0.5em;
+ transition: background-color 0.5s;
+
+ &:hover {
+ background: var(--color-hover);
+ color: var(--color-background);
+ }
+}
+
+[type=text],
+[type=email],
+[type=password],
+[type=number],
+[type=date],
+[type=datetime-local],
+select,
+textarea {
+ width: 100%;
+ background: var(--color-background-soft);
+ color: var(--color-text);
+ padding: 0.5em;
+ border: 1px solid var(--color-border);
+ border-radius: 4px;
+ transition: border-color 0.5s;
+ transition: border-color 0.5s;
+ //
+ width: 100%;
+ padding: 0.5em;
+ border: 1px solid var(--color-border);
+ border-radius: 4px;
+ background: var(--color-background-soft);
+}
+
+.loading-container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(255, 255, 255, 0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1;
+}
+
+form {
+ .buttons {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ margin-top: 0.33em;
+ padding-top: 0.33em;
+
+ button {
+ height: 2.5em;
+ }
+ }
+}
diff --git a/frontend/src/styles/layout.scss b/frontend/src/styles/layout.scss
new file mode 100644
index 0000000..a9505f0
--- /dev/null
+++ b/frontend/src/styles/layout.scss
@@ -0,0 +1,17 @@
+@use "sass:map";
+
+// Set screen width breakpoints
+$breakpoints: (
+ mobile : 0px,
+ tablet : 680px,
+ desktop: 960px
+);
+
+// Mixin to print out media queries (based on map keys passed)
+@mixin media($keys...){
+ @each $key in $keys {
+ @media (min-width: map.get($breakpoints, $key)){
+ @content
+ }
+ }
+}
diff --git a/frontend/src/styles/variables.scss b/frontend/src/styles/variables.scss
new file mode 100644
index 0000000..8575e34
--- /dev/null
+++ b/frontend/src/styles/variables.scss
@@ -0,0 +1 @@
+$header-height: 3.5rem;