frontend: use sass for cascading styles
diff --git a/frontend/config/tree.component.scss b/frontend/config/tree.component.scss
new file mode 100644
index 0000000..6f837c0
--- /dev/null
+++ b/frontend/config/tree.component.scss
@@ -0,0 +1,94 @@
+@import '../netopeer-common';
+
+.subtree {
+ cursor: default;
+ display: block;
+ width: 100%;
+}
+
+.node {
+ width: 100%;
+ overflow: hidden;
+
+ &:hover {
+ background-color: #e1e1e1
+ }
+
+ > div {
+ display: inline-block;
+ }
+}
+
+.node_edit {
+ display: table;
+ width: 100%;
+ overflow: hidden;
+
+ &:hover {
+ background-color: #e1e1e1
+ }
+
+ img,
+ input {
+ display: inline-table;
+ margin-right: 0.25em;
+ }
+ input {
+ height: 2em;
+ padding-left: 0.3em;
+ background-color: #def2de;
+
+ &.invalid {
+ background-color: #f2dede;
+ }
+ }
+
+ &.indentation {
+ height:2.1em;
+ }
+}
+
+.status,
+.node_info {
+ color: grey;
+}
+
+.dirty {
+ background-color: #fafad2;
+}
+
+.icon,
+.icon_action {
+ font-size: xx-small;
+ height: 2em;
+}
+
+.icon_action {
+ cursor: pointer;
+}
+
+.icon_hidden {
+ visibility: hidden;
+}
+
+.module_name {
+ float: right;
+ text-align: right;
+ max-width: 10em;
+ word-wrap: break-word;
+}
+
+.children {
+ padding-left: 0em;
+}
+
+.value {
+ display: inline-block;
+ margin-left: 1.5em;
+ word-wrap: break-word;
+}
+
+.indentation {
+ width: 1.7em;
+}
+