2 files changed, 36 insertions, 0 deletions
diff --git a/opendc-web/opendc-web-ui/src/style/_mixins.scss b/opendc-web/opendc-web-ui/src/style/_mixins.scss
new file mode 100644
index 00000000..5f103cd7
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/style/_mixins.scss
@@ -0,0 +1,5 @@
+/* General Button Abstractions */
+@mixin clickable {
+    cursor: pointer;
+    user-select: none;
+}
diff --git a/opendc-web/opendc-web-ui/src/style/_variables.scss b/opendc-web/opendc-web-ui/src/style/_variables.scss
new file mode 100644
index 00000000..e3df6cbd
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/style/_variables.scss
@@ -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: 350px;
+$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;