frontend: use sass for cascading styles
diff --git a/frontend-assets/icons/tree_last_branch.svg b/frontend-assets/icons/tree_last_branch.svg
index efb8e20..0b3f751 100644
--- a/frontend-assets/icons/tree_last_branch.svg
+++ b/frontend-assets/icons/tree_last_branch.svg
@@ -12,9 +12,8 @@
version="1.1"
id="svg2"
inkscape:version="0.91+devel r14491"
- width="32"
- height="32"
viewBox="0 0 32 32"
+ preserveAspectRatio="none"
sodipodi:docname="tree_last_branch.svg">
<metadata
id="metadata8">
diff --git a/frontend/_netopeer-common.scss b/frontend/_netopeer-common.scss
new file mode 100644
index 0000000..9154f15
--- /dev/null
+++ b/frontend/_netopeer-common.scss
@@ -0,0 +1,51 @@
+$colorSuccess: #def2de;
+$colorSuccessBorder: green;
+$colorFailure: #f2dede;
+$colorFailureBorder: red;
+
+a:not([href]) {
+ cursor: pointer;
+ text-decoration: underline;
+ font-weight: bold;
+}
+
+.netopeer-content {
+ display: block;
+ padding: 0.7em 1em 1em 2em;
+ background-color: #FAFAFA;
+ color: #000;
+}
+
+.msg-rounded {
+ border-radius: 5px;
+}
+
+.msg-close {
+ padding-right: 10px;
+ padding-left: 10px;
+ font-weight: bold;
+ font-family: monospace;
+ font-size: large;
+ cursor: pointer;
+ height: 1em;
+}
+
+.msg-success {
+ background-color: $colorSuccess;
+ color: green;
+ padding: 5px 1em 5px 0em;
+
+ .msg-close {
+ color: $colorSuccessBorder;
+ }
+}
+
+.msg-failure {
+ background-color: $colorFailure;
+ color: red;
+ padding: 5px 1em 5px 0em;
+
+ .msg-close {
+ color: $colorFailureBorder;
+ }
+}
\ No newline at end of file
diff --git a/frontend/config/config.component.css b/frontend/config/config.component.css
deleted file mode 100644
index 6a10dab..0000000
--- a/frontend/config/config.component.css
+++ /dev/null
@@ -1,107 +0,0 @@
-.tab-add,
-.tab-reload,
-.tab-close {
- cursor: pointer;
- font-weight: bold;
- font-family: monospace;
- font-size: large;
-}
-.tab-action-first {
- padding-left: 0.3em;
-}
-.tab-action-last {
- padding-right: 0.5em;
-}
-
-.tab-icon {
- vertical-align: middle;
- height: 1em;
-}
-
-.tab-add {
- filter: invert(100%);
-}
-
-.tab-add:hover {
- color: green;
-}
-.tab-close:hover {
- color: red;
-}
-.tab-reload:hover {
- color: blue;
-}
-
-#confignav {
- position: fixed;
- width: 100%;
- background-color: #3B4257;
- padding-left: 1em;
-}
-
-#confignav a {
- cursor: pointer;
- text-decoration: none;
- display: inline-block;
- padding: 0.2em 0em 0.1em 1em;
- color: #FAFAFA;
-}
-
-#confignav a:visited,
-#confignav a:link {
- color: inherited;
-}
-
-#confignav a:hover,
-#confignav a.active {
- background-color: #FAFAFA;
- color: #000;
-}
-
-#confignav a.active:hover {
- cursor: default;
-}
-
-#config-toc {
- position: fixed;
- width: 10em;
- border-right: 1px solid #313747;
-}
-
-.config-toc-item {
- cursor: pointer;
- padding: 0em 0em 0.2em 0.5em;
-}
-.config-toc-item:hover {
- background-color: #3B4257;
- color: #FFF;
-}
-
-#config-data {
- width: 100%;
-}
-
-.item_action_expand,
-.item_action_collapse {
- height: 1em;
-}
-
-.item_action_collapse:hover {
- color:red;
-}
-
-.item_action_expand:hover {
- color:green;
-}
-
-.modifications-status {
- position: fixed;
- bottom: 2em;
- right: 2em;
- background-color: #fafad2;
- border: 2px solid #e4e4a4;
-}
-.modifications-status-place {
- margin-bottom: 2em;
- margin-right: 2em;
-}
diff --git a/frontend/config/config.component.html b/frontend/config/config.component.html
index 7a1ef15..d201fe8 100644
--- a/frontend/config/config.component.html
+++ b/frontend/config/config.component.html
@@ -70,8 +70,8 @@
<tree-view [treeData]="activeSession.data"></tree-view>
<!--<pre>{{activeSession.data | json}}</pre>-->
</div>
- <div #modificationsStatus *ngIf="activeSession.modifications" class="modifications-status-place">
- <div *ngIf="activeSession.modifications" class="modifications-status msg-rounded" [style.width.px]="modificationsStatus.offsetWidth">
+ <div #modificationsStatus *ngIf="activeSession.modifications" class="modifications-status">
+ <div *ngIf="activeSession.modifications" class="msg-rounded" [style.width.px]="modificationsStatus.offsetWidth">
Configuration data were changed. Do you wish to
<button (click)="applyChanges()">apply</button> /
<button (click)="cancelChanges()">cancel</button>
diff --git a/frontend/config/config.component.scss b/frontend/config/config.component.scss
new file mode 100644
index 0000000..0caa675
--- /dev/null
+++ b/frontend/config/config.component.scss
@@ -0,0 +1,98 @@
+@import '../netopeer-common';
+@import '../inventory/inventory.component';
+@import './tree.component';
+
+.tab-add,
+.tab-reload,
+.tab-close {
+ cursor: pointer;
+ font-weight: bold;
+ font-family: monospace;
+ font-size: large;
+}
+.tab-action-first {
+ padding-left: 0.3em;
+}
+.tab-action-last {
+ padding-right: 0.5em;
+}
+
+.tab-icon {
+ vertical-align: middle;
+ height: 1em;
+}
+
+.tab-add {
+ filter: invert(100%);
+
+ &:hover {
+ color: green;
+ }
+}
+
+.tab-close:hover {
+ color: red;
+}
+.tab-reload:hover {
+ color: blue;
+}
+
+#confignav {
+ position: fixed;
+ width: 100%;
+ background-color: #3B4257;
+ padding-left: 1em;
+
+ a {
+ cursor: pointer;
+ text-decoration: none;
+ display: inline-block;
+ padding: 0.2em 0em 0.1em 1em;
+ color: #FAFAFA;
+
+ &:visited,
+ &:link {
+ color: inherited;
+ }
+ &:hover,
+ &.active {
+ background-color: #FAFAFA;
+ color: #000;
+ }
+ &active:hover {
+ cursor: default;
+ }
+ }
+}
+
+#config-data {
+ width: 100%;
+}
+
+.item_action_expand,
+.item_action_collapse {
+ height: 1em;
+}
+
+.item_action_collapse:hover {
+ color:red;
+}
+
+.item_action_expand:hover {
+ color:green;
+}
+
+.modifications-status {
+ margin-bottom: 2em;
+ margin-right: 2em;
+ padding: 0.5em 1em;
+
+ div {
+ position: fixed;
+ bottom: 2em;
+ right: 2em;
+ background-color: #fafad2;
+ border: 2px solid #e4e4a4;
+ padding: 0.5em 1em;
+ }
+}
diff --git a/frontend/config/config.component.ts b/frontend/config/config.component.ts
index d13931f..303e792 100644
--- a/frontend/config/config.component.ts
+++ b/frontend/config/config.component.ts
@@ -7,7 +7,7 @@
@Component({
selector: 'netopeer-config',
templateUrl: './config.component.html',
- styleUrls: ['../netopeer.css', './config.component.css', './tree.component.css', '../inventory/inventory.component.css']
+ styleUrls: ['./config.component.scss']
})
export class ConfigComponent implements OnInit {
diff --git a/frontend/config/tree.component.css b/frontend/config/tree.component.css
deleted file mode 100644
index d511188..0000000
--- a/frontend/config/tree.component.css
+++ /dev/null
@@ -1,88 +0,0 @@
-.subtree {
- cursor: default;
- display: block;
- width: 100%;
-}
-
-.node {
- width: 100%;
- overflow: hidden;
-}
-.node:hover,
-.node_edit:hover {
- background-color: #e1e1e1
-}
-
-.node_edit {
- display: table;
- width: 100%;
- overflow: hidden;
-}
-.node_edit img,
-.node_edit input {
- display: inline-table;
- margin-right: 0.25em;
-}
-.node_edit input {
- height: 2em;
- padding-left: 0.3em;
- background-color: #def2de;
-}
-.node_edit input.invalid {
- background-color: #f2dede;
-}
-.node_edit .indentation {
- height:2.1em;
-}
-
-.node > div {
- display: inline-block;
-}
-
-.dirty {
- background-color: #fafad2;
-}
-
-.status,
-.node_info {
- color: grey;
-}
-
-.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;
-}
-
-.value {
- word-wrap: break-word;
-}
-
-.indentation {
- width: 1.7em;
-}
-
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;
+}
+
diff --git a/frontend/config/tree.component.ts b/frontend/config/tree.component.ts
index c61ae1a..3f6f7e0 100644
--- a/frontend/config/tree.component.ts
+++ b/frontend/config/tree.component.ts
@@ -6,7 +6,7 @@
@Component({
selector: 'tree-view',
templateUrl: './tree.component.html',
- styleUrls: ['../netopeer.css', './tree.component.css']
+ styleUrls: ['./tree.component.scss']
})
export class TreeView implements OnInit {
diff --git a/frontend/dashboard.component.ts b/frontend/dashboard.component.ts
index 5bf0ba3..636f735 100644
--- a/frontend/dashboard.component.ts
+++ b/frontend/dashboard.component.ts
@@ -3,7 +3,7 @@
@Component({
selector : 'netopeer-dashboard',
templateUrl : './dashboard.component.html',
- styleUrls : ['./netopeer.css']
+ styleUrls : ['./netopeer.scss']
})
export class DashboardComponent { }
diff --git a/frontend/inventory/devices.component.html b/frontend/inventory/devices.component.html
index 01ae07a..0a978fc 100644
--- a/frontend/inventory/devices.component.html
+++ b/frontend/inventory/devices.component.html
@@ -73,4 +73,4 @@
</tr>
</table>
-</div>
\ No newline at end of file
+</div>
diff --git a/frontend/inventory/devices.component.ts b/frontend/inventory/devices.component.ts
index 1aa3dd5..0a91e2f 100644
--- a/frontend/inventory/devices.component.ts
+++ b/frontend/inventory/devices.component.ts
@@ -11,7 +11,7 @@
@Component({
selector: 'inventoryDevices',
templateUrl: './devices.component.html',
- styleUrls: ['../netopeer.css', './inventory.component.css'],
+ styleUrls: ['./inventory.component.scss'],
providers: [DevicesService]
})
diff --git a/frontend/inventory/inventory.component.html b/frontend/inventory/inventory.component.html
index 65ffe8f..d75963a 100644
--- a/frontend/inventory/inventory.component.html
+++ b/frontend/inventory/inventory.component.html
@@ -3,4 +3,4 @@
routerLink="{{component}}" routerLinkActive="active">{{ component | titlecase }}</a>
</nav>
-<router-outlet class="netopeer-content"></router-outlet>
+<router-outlet></router-outlet>
diff --git a/frontend/inventory/inventory.component.css b/frontend/inventory/inventory.component.scss
similarity index 61%
rename from frontend/inventory/inventory.component.css
rename to frontend/inventory/inventory.component.scss
index 96c5919..a5cc004 100644
--- a/frontend/inventory/inventory.component.css
+++ b/frontend/inventory/inventory.component.scss
@@ -1,28 +1,29 @@
+@import '../netopeer-common';
+
nav {
background-color: #3B4257;
padding-left: 1em;
-}
-
-nav a {
- text-decoration: none;
- display: inline-block;
- padding: 0.2em 1em 0.1em 1em;
- color: #FAFAFA;
-}
-
-nav a:visited,
-nav a:link {
- color: #FAFAFA;
-}
-
-nav a:hover,
-nav a.active {
- background-color: #FAFAFA;
- color: #000
-}
-
-nav a.active:hover {
- cursor: default;
+
+ a {
+ text-decoration: none;
+ display: inline-block;
+ padding: 0.2em 1em 0.1em 1em;
+ color: #FAFAFA;
+
+ &:visited,
+ &:link {
+ color: #FAFAFA;
+ }
+
+ &:hover,
+ &.active {
+ background-color: #FAFAFA;
+ color: #000;
+ }
+ &.active:hover {
+ cursor: default;
+ }
+ }
}
.items {
@@ -38,9 +39,17 @@
left: 0.5em;
top: 0.5em;
color: black;
+
+ &:hover,
+ &.selected {
+ background-color: #454D67;
+ color: #FAFAFA;
+ }
+ &.selected:hover {
+ cursor: default;
+ }
}
-.item.selected,
.item_header {
background-color: #454D67;
color: #FAFAFA;
@@ -56,15 +65,6 @@
border-bottom-right-radius: 5px;
}
-.item.selected:hover {
- cursor: default;
-}
-
-.item:hover {
- background-color: #454D67;
- color: #FAFAFA;
-}
-
.item_actions {
cursor: pointer;
width: 2em;
@@ -76,13 +76,13 @@
color: grey;
}
-.item_action_delete{
+.item_action_delete {
height: 1.3em;
vertical-align: middle;
-}
-
-.item_action_delete:hover {
- color: red;
+
+ &:hover {
+ color: red;
+ }
}
.schema-revision {
@@ -100,11 +100,11 @@
.input_line {
display: block;
margin-right: 2em;
-}
-
-.input_line input {
- display: inline-block;
- padding-left: 1em;
+
+ input {
+ display: inline-block;
+ padding-left: 1em;
+ }
}
.input_line_alert {
@@ -113,14 +113,14 @@
color: red;
}
-form input,
-form select {
- border-left: 5px solid green;
-}
-
-form input.invalid,
-form select.invalid {
- border-left: 5px solid red;
+form {
+ input,
+ select {
+ border-left: 5px solid green;
+ &.invalid {
+ border-left: 5px solid red;
+ }
+ }
}
.input_switch {
diff --git a/frontend/inventory/inventory.component.ts b/frontend/inventory/inventory.component.ts
index da0fbcf..52e8ce0 100644
--- a/frontend/inventory/inventory.component.ts
+++ b/frontend/inventory/inventory.component.ts
@@ -4,7 +4,7 @@
@Component({
selector : 'netopeer-inventory',
templateUrl : './inventory.component.html',
- styleUrls : ['./inventory.component.css']
+ styleUrls : ['./inventory.component.scss']
})
export class InventoryComponent implements OnInit {
diff --git a/frontend/inventory/schemas.component.ts b/frontend/inventory/schemas.component.ts
index df2af13..b7b5f2b 100644
--- a/frontend/inventory/schemas.component.ts
+++ b/frontend/inventory/schemas.component.ts
@@ -8,7 +8,7 @@
@Component({
selector : 'inventorySchemas',
templateUrl : './schemas.component.html',
- styleUrls : ['../netopeer.css', './inventory.component.css'],
+ styleUrls : ['./inventory.component.scss'],
providers: [SchemasService]
})
diff --git a/frontend/monitoring/monitoring.component.scss b/frontend/monitoring/monitoring.component.scss
new file mode 100644
index 0000000..12dd39c
--- /dev/null
+++ b/frontend/monitoring/monitoring.component.scss
@@ -0,0 +1 @@
+@import '../netopeer-common';
\ No newline at end of file
diff --git a/frontend/monitoring/monitoring.component.ts b/frontend/monitoring/monitoring.component.ts
index e1818ee..719930b 100644
--- a/frontend/monitoring/monitoring.component.ts
+++ b/frontend/monitoring/monitoring.component.ts
@@ -3,7 +3,7 @@
@Component({
selector : 'netopeer-config',
templateUrl : './monitoring.component.html',
- styleUrls : ['../netopeer.css']
+ styleUrls : ['./monitoring.component.scss']
})
export class MonitoringComponent {
diff --git a/frontend/netopeer.component.ts b/frontend/netopeer.component.ts
index 4922062..5fd613a 100644
--- a/frontend/netopeer.component.ts
+++ b/frontend/netopeer.component.ts
@@ -16,7 +16,7 @@
@Component({
selector : 'netopeer',
templateUrl : './netopeer.component.html',
- styleUrls : ['./netopeer.css'],
+ styleUrls : ['./netopeer.scss'],
})
export class NetopeerComponent {
diff --git a/frontend/netopeer.css b/frontend/netopeer.css
deleted file mode 100644
index c3a723c..0000000
--- a/frontend/netopeer.css
+++ /dev/null
@@ -1,95 +0,0 @@
-a:not([href]) {
- cursor: pointer;
- text-decoration: underline;
- font-weight: bold;
-}
-
-#netopeer-header {
- position: fixed;
- width: 100%;
- margin: -0.5em -1em 0em -1em;
- padding-top: 1em;
- background-color: #313747;
- color: #FAFAFA;
- display: block;
-}
-
-#netopeer-header h1 {
- margin-left: 1em;
-}
-
-#netopeer-component {
- margin: 0em -1em 0em -1em;
-}
-
-.netopeer-content {
- display: block;
- padding: 0.7em 1em 1em 2em;
- background-color: #FAFAFA;
- color: #000;
-}
-
-#mainnav {
- with: 100%;
- padding-left: 1em;
-}
-
-#mainnav a:visited,
-#mainnav a:link {
- color: inherit;
-}
-
-#mainnav a:hover {
- border-top-color: #3B4257;
- background-color: #3B4257;
-}
-
-#mainnav a.active {
- border-top-color: #BAE4F0;
- background-color: #3B4257;
-}
-#mainnav a.active:hover {
- cursor: default;
-}
-
-#mainnav a {
- text-decoration: none;
- display: inline-block;
- padding: 0.5em 1em 0.5em 0.5em;
- color: #FAFAFA;
- border-top: 0.2em solid #313747;
-}
-
-.msg-rounded {
- border-radius: 5px;
-}
-
-.msg-close {
- padding-right: 10px;
- padding-left: 10px;
- font-weight: bold;
- font-family: monospace;
- font-size: large;
- cursor: pointer;
- height: 1em;
-}
-
-.msg-success {
- background-color: #def2de;
- color: green;
- padding: 5px 1em 5px 0em;
-}
-
-.msg-success.msg-close {
- color: green;
-}
-
-.msg-failure {
- background-color: #f2dede;
- color: red;
- padding: 5px 1em 5px 0em;
-}
-
-.msg-failure .msg-close {
- color: red;
-}
\ No newline at end of file
diff --git a/frontend/netopeer.scss b/frontend/netopeer.scss
new file mode 100644
index 0000000..3ede088
--- /dev/null
+++ b/frontend/netopeer.scss
@@ -0,0 +1,50 @@
+@import 'netopeer-common';
+
+#netopeer-header {
+ position: fixed;
+ width: 100%;
+ margin: -0.5em -1em 0em -1em;
+ padding-top: 1em;
+ background-color: #313747;
+ color: #FAFAFA;
+ display: block;
+}
+
+#netopeer-header h1 {
+ margin-left: 1em;
+}
+
+#netopeer-component {
+ margin: 0em -1em 0em -1em;
+}
+
+#mainnav {
+ with: 100%;
+ padding-left: 1em;
+}
+
+#mainnav a:visited,
+#mainnav a:link {
+ color: inherit;
+}
+
+#mainnav a:hover {
+ border-top-color: #3B4257;
+ background-color: #3B4257;
+}
+
+#mainnav a.active {
+ border-top-color: #BAE4F0;
+ background-color: #3B4257;
+}
+#mainnav a.active:hover {
+ cursor: default;
+}
+
+#mainnav a {
+ text-decoration: none;
+ display: inline-block;
+ padding: 0.5em 1em 0.5em 0.5em;
+ color: #FAFAFA;
+ border-top: 0.2em solid #313747;
+}
diff --git a/frontend/plugins/plugins.component.scss b/frontend/plugins/plugins.component.scss
new file mode 100644
index 0000000..12dd39c
--- /dev/null
+++ b/frontend/plugins/plugins.component.scss
@@ -0,0 +1 @@
+@import '../netopeer-common';
\ No newline at end of file
diff --git a/frontend/plugins/plugins.component.ts b/frontend/plugins/plugins.component.ts
index 43abb2d..41836c2 100644
--- a/frontend/plugins/plugins.component.ts
+++ b/frontend/plugins/plugins.component.ts
@@ -3,7 +3,7 @@
@Component({
selector : 'netopeer-plugins',
templateUrl : './plugins.component.html',
- styleUrls : ['../netopeer.css']
+ styleUrls : ['./plugins.component.scss']
})
export class PluginsComponent {
diff --git a/frontend/yang/yang.component.scss b/frontend/yang/yang.component.scss
new file mode 100644
index 0000000..12dd39c
--- /dev/null
+++ b/frontend/yang/yang.component.scss
@@ -0,0 +1 @@
+@import '../netopeer-common';
\ No newline at end of file
diff --git a/frontend/yang/yang.component.ts b/frontend/yang/yang.component.ts
index 4734d4c..de0fac9 100644
--- a/frontend/yang/yang.component.ts
+++ b/frontend/yang/yang.component.ts
@@ -3,7 +3,7 @@
@Component({
selector : 'netopeer-yang',
templateUrl : './yang.component.html',
- styleUrls : ['../netopeer.css']
+ styleUrls : ['./yang.component.scss']
})
export class YANGComponent {
