Split common.scss into multiple style files.

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);
+  }
+}

frontend/src/styles/common.scss

@@ -1,125 +1,4 @@
-// Set screen width breakpoints
+@forward "./animations.scss";
-$screen-xs: 480px;
+@forward "./elements.scss";
-$screen-sm: 768px;
+@forward "./layout.scss";
-$screen-md: 992px;
+@forward "./variables.scss";
-$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);
-  }
-}

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;
+    }
+  }
+}

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
+    }
+  }
+}

frontend/src/styles/variables.scss

@@ -0,0 +1 @@
+$header-height: 3.5rem;