Drawing slices, expanding and collapsing slices
Drawing forms
Added keybindings
Change-Id: Ic1f06eef20a6e1e7c0f1fea51752fe738f86d600
diff --git a/views/ngXosViews/mcord-slicing/src/sass/main.scss b/views/ngXosViews/mcord-slicing/src/sass/main.scss
new file mode 100644
index 0000000..7224300
--- /dev/null
+++ b/views/ngXosViews/mcord-slicing/src/sass/main.scss
@@ -0,0 +1,88 @@
+@import '../../../../style/sass/lib/_variables.scss';
+
+#xosMcord-slicing,
+#xosMcord-slicing > [ui-view],
+slicing-topo {
+ width: 100%;
+ height: 100%;
+}
+
+slicing-topo {
+ display: block;
+}
+
+#xosMcord-slicing {
+ .node {
+ stroke: $brand-primary;
+ fill: white;
+ }
+
+ .node,
+ .node + text {
+ cursor: pointer;
+ }
+
+ text {
+ pointer-events: none;
+ -webkit-user-select: none; /* Chrome all / Safari all */
+ -moz-user-select: none; /* Firefox all */
+ -ms-user-select: none; /* IE 10+ */
+ user-select: none;
+ }
+
+ .node.control {
+ stroke-dasharray: 5;
+ stroke: $brand-danger;
+ }
+
+ .node.button {
+ //stroke-dasharray: 5;
+ stroke: $brand-info;
+ fill: lighten($brand-info, 30)
+ }
+
+ .node.selected{
+ stroke-width: 5px;
+ stroke-dasharray: 5;
+ }
+
+ .link {
+ stroke: darken($brand-primary, 10);
+ stroke-width: 2px;
+ cursor: pointer;
+ }
+
+ .link.control {
+ stroke-dasharray: 5;
+ stroke: $brand-danger;
+ }
+
+ .link.selected {
+ stroke-width: 5px;
+ stroke-dasharray: 5;
+ }
+
+ // drag line
+ .dragline {
+ stroke-dasharray: 5;
+ stroke: darken($brand-primary, 10);
+ stroke-width: 2px;
+ }
+
+ .dragline.hidden {
+ stroke-width: 0;
+ }
+
+ // form styling
+ div.element-form {
+ position: absolute;
+ border: 1px solid $brand-info;
+ padding: 10px;
+ background: #fff;
+ }
+
+ .form-line {
+ stroke: darken($brand-info, 10);
+ stroke-width: 1px;
+ }
+}
\ No newline at end of file