diff --git a/src/assets/scss/abstracts/_mixins.scss b/src/assets/scss/abstracts/_mixins.scss
index fb13ead..4ebbd60 100644
--- a/src/assets/scss/abstracts/_mixins.scss
+++ b/src/assets/scss/abstracts/_mixins.scss
@@ -101,6 +101,31 @@
}
+// List Groups
+
+@mixin list-group-item-variant($state, $osef1, $osef2) {
+ $color: theme-color($state);
+
+ .list-group-item-#{$state} {
+ color: darken($color, 32%);
+ background-color: lighten($color, 3.25%);
+
+ &.list-group-item-action {
+ @include hover-focus() {
+ color: darken($color, 40%);
+ background-color: $color;
+ }
+
+ // &.active {
+ // color: $white;
+ // background-color: $color;
+ // border-color: $color;
+ // }
+ }
+ }
+}
+
+
@mixin line-clamp($lines, $line-height) {
display: block;
display: -webkit-box;
diff --git a/src/assets/scss/abstracts/_variables.scss b/src/assets/scss/abstracts/_variables.scss
index 8f2639c..c338a49 100644
--- a/src/assets/scss/abstracts/_variables.scss
+++ b/src/assets/scss/abstracts/_variables.scss
@@ -116,7 +116,12 @@ $card-spacer-x: .75rem;
$card-border-width: 0;
// $card-border-color: $black;
-// INPUT RANGE
+// List group
+$list-group-border-width: 0;
+$list-group-item-padding-y: 5px;
+$list-group-item-padding-x: 18px;
+
+// INPUT RANGE
$custom-range-track-height: .1875rem;
$custom-range-track-bg: $black;
$custom-range-track-box-shadow: inset 0 .25rem .25rem rgba($black, .1);
diff --git a/src/components/nodes/NodeView.vue b/src/components/nodes/NodeView.vue
index f975383..552ed62 100644
--- a/src/components/nodes/NodeView.vue
+++ b/src/components/nodes/NodeView.vue
@@ -13,23 +13,28 @@
+
+
-