Initial Commit Rework

frontend/src/Styles/Mixins/clickable.css

@@ -0,0 +1,3 @@
+.clickable {
+  cursor: pointer;
+}

frontend/src/Styles/Mixins/cover.css

@@ -0,0 +1,8 @@
+.cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+}

frontend/src/Styles/Mixins/linkOverlay.css

@@ -0,0 +1,11 @@
+.linkOverlay {
+  composes: cover from 'Styles/Mixins/cover.css';
+
+  pointer-events: none;
+  user-select: none;
+
+  a,
+  button {
+    pointer-events: all;
+  }
+}

frontend/src/Styles/Mixins/scroller.css

@@ -0,0 +1,26 @@
+.scrollbar {
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+}
+
+.scrollbarTrack {
+  &&::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+
+.scrollbarThumb {
+  &::-webkit-scrollbar-thumb {
+    min-height: 50px;
+    border: 1px solid transparent;
+    border-radius: 5px;
+    background-color: $scrollbarBackgroundColor;
+    background-clip: padding-box;
+
+    &:hover {
+      background-color: $scrollbarHoverBackgroundColor;
+    }
+  }
+}

frontend/src/Styles/Mixins/truncate.css

@@ -0,0 +1,18 @@
+/**
+ * From: https://github.com/suitcss/utils-text/blob/master/lib/text.css
+ *
+ * Text truncation
+ *
+ * Prevent text from wrapping onto multiple lines, and truncate with an
+ * ellipsis.
+ *
+ * 1. Ensure that the node has a maximum width after which truncation can
+ *    occur.
+ */
+
+.truncate {
+  overflow: hidden !important;
+  max-width: 100%; /* 1 */
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}