2 files changed, 52 insertions, 0 deletions
diff --git a/frontend/src/style-globals/_mixins.sass b/frontend/src/style-globals/_mixins.sass
new file mode 100644
index 00000000..4ac5a9bc
--- /dev/null
+++ b/frontend/src/style-globals/_mixins.sass
@@ -0,0 +1,21 @@
+=transition($property, $time)
+  -webkit-transition: $property $time
+  -moz-transition: $property $time
+  -o-transition: $property $time
+  transition: $property $time
+
+=user-select
+  -webkit-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+
+=border-radius($length)
+  -webkit-border-radius: $length
+  -moz-border-radius: $length
+  border-radius: $length
+
+/* General Button Abstractions */
+=clickable
+  cursor: pointer
+  +user-select
diff --git a/frontend/src/style-globals/_variables.sass b/frontend/src/style-globals/_variables.sass
new file mode 100644
index 00000000..00c2b479
--- /dev/null
+++ b/frontend/src/style-globals/_variables.sass
@@ -0,0 +1,31 @@
+// Sizes and Margins
+$document-padding: 20px
+$inter-element-margin: 5px
+$standard-border-radius: 5px
+$side-menu-width: 350px
+$color-indicator-width: 140px
+
+$global-padding: 30px
+$side-bar-width: 250px
+$navbar-height: 50px
+$navbar-padding: 10px
+
+// Durations
+$transition-length: 150ms
+
+// Colors
+$gray-very-dark: #5c5c5c
+$gray-dark: #aaa
+$gray-semi-dark: #bbb
+$gray-semi-light: #ccc
+$gray-light: #ddd
+$gray-very-light: #eee
+$blue: #00A6D6
+$blue-dark: #0087b5
+$blue-very-dark: #006182
+$blue-light: #deebf7
+
+// Media queries
+$screen-sm: 768px
+$screen-md: 992px
+$screen-lg: 1200px