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 @@ + + -