1 files changed, 85 insertions, 0 deletions
diff --git a/ui/client/main.styl b/ui/client/main.styl
new file mode 100644
index 0000000..e142eda
--- /dev/null
+++ b/ui/client/main.styl
@@ -0,0 +1,85 @@
+/* CSS declarations go here */
+normalize-css()
+
+// Colors
+black = #222
+grey = #D8D8D8
+purp = #524763
+dark-purp = #373142
+red = #E54B4B
+teal = #82D8D8
+dark-teal = #66A6A6
+green = #CBE56C
+blue = #16528E
+bright-blue = #0082C8
+maroon = #6A2140
+light-red = #CA5765
+pink = #CF256D
+orange = #E8846B
+
+// cisco brand Colors
+brand-blue = #2196F3
+spark-blue = #0A9AD7
+spark-green = #73BE46
+spark-grey = #D1D2D1
+dk-blue = #303f9f
+light-grey = #efefef
+dk-gray1 = #58585b
+// cisco brand status Colors
+status-blue = #64bbe3
+status-turq = #14a792
+status-green = #6cc04a
+status-yellow = #ffcc00
+status-orange = #ff7300
+status-red = #cf2030
+// cisco accepteble colors
+
+// Material Shadows
+shadow-level(l = 1)
+    if l == -1
+        box-shadow: inset -2px 7px 9px -7px rgba(0,0,0,0.7);
+    if l == 0
+        box-shadow: none;
+    if l == 1
+        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    if l == 2
+        box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+    if l == 3
+        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+    if l == 4
+        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+    if l == 5
+        box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
+
+// Common Transition
+trans($sec = 0.3s)
+    transition: all $sec ease
+
+// Grid
+$xsmall = 340px
+$small = 500px
+$med = 700px
+$large = 960px
+$wide = 1200px
+
+z = {
+    neg: -7,
+    lowest: 1,
+    low: 4,
+    mid: 5,
+    video: 6,
+    header: 7,
+    nav: 8,
+    mini: 9,
+    modal: 10,
+    highest: 11
+}
+
+$side-nav = 100px
+$side-nav-large = 200px
+
+body{
+    background light-grey
+}
+
+@import 'css/*'