5 files changed, 54 insertions, 0 deletions
diff --git a/web/sass-files/sass/utils/_animations.scss b/web/sass-files/sass/utils/_animations.scss
new file mode 100644
index 000000000..767e30847
--- /dev/null
+++ b/web/sass-files/sass/utils/_animations.scss
@@ -0,0 +1,19 @@
+@charset 'UTF-8';
+
+@-webkit-keyframes spin2 {
+    from {
+        -webkit-transform: rotate(0deg);
+    }
+    to {
+        -webkit-transform: rotate(360deg);
+    }
+}
+
+@keyframes spin {
+    from {
+        transform: scale(1) rotate(0deg);
+    }
+    to {
+        transform: scale(1) rotate(360deg);
+    }
+}
diff --git a/web/sass-files/sass/utils/_functions.scss b/web/sass-files/sass/utils/_functions.scss
new file mode 100644
index 000000000..9013920fa
--- /dev/null
+++ b/web/sass-files/sass/utils/_functions.scss
@@ -0,0 +1,9 @@
+@charset "UTF-8";
+
+@function em($pixels, $context: 14px) {
+	@return #{$pixels/$context}em
+}
+
+%popover-box-shadow {
+    @include box-shadow(rgba(black, .175) 1px -3px 12px);
+}
+\ No newline at end of file
diff --git a/web/sass-files/sass/utils/_mixins.scss b/web/sass-files/sass/utils/_mixins.scss
new file mode 100644
index 000000000..28723e1a5
--- /dev/null
+++ b/web/sass-files/sass/utils/_mixins.scss
@@ -0,0 +1,8 @@
+@charset 'UTF-8';
+
+@mixin file-icon($path) {
+    background: #fff url($path);
+    background-position: center;
+    background-repeat: no-repeat;
+    @include background-size(60px auto);
+}
diff --git a/web/sass-files/sass/utils/_module.scss b/web/sass-files/sass/utils/_module.scss
new file mode 100644
index 000000000..e7f0c0c46
--- /dev/null
+++ b/web/sass-files/sass/utils/_module.scss
@@ -0,0 +1,5 @@
+// Only for combining all the files in this folder
+@import 'variables';
+@import 'animations';
+@import 'functions';
+@import 'mixins';
diff --git a/web/sass-files/sass/utils/_variables.scss b/web/sass-files/sass/utils/_variables.scss
new file mode 100644
index 000000000..065c37a17
--- /dev/null
+++ b/web/sass-files/sass/utils/_variables.scss
@@ -0,0 +1,13 @@
+@charset 'UTF-8';
+
+// Color Variables
+$color--primary: rgb(35, 137, 215);
+$color--primary--hover: darken($color--primary, 10%);
+$bg--gray: rgb(245, 245, 245);
+$bg--white: rgb(255, 255, 255);
+
+// Page Variables
+$border-gray: 1px solid #ddd;
+
+// Random variables
+$border-rad: 1px;