diff --git a/src/components/NcCounterBubble/NcCounterBubble.vue b/src/components/NcCounterBubble/NcCounterBubble.vue
index c02ddc29b2..7fbc684a6d 100644
--- a/src/components/NcCounterBubble/NcCounterBubble.vue
+++ b/src/components/NcCounterBubble/NcCounterBubble.vue
@@ -62,6 +62,16 @@ export default {
return ['highlighted', 'outlined', ''].indexOf(value) !== -1
},
},
+
+ /**
+ * Specifies whether the component is used within a component that is
+ * active and therefore has a primary background. Inverts the color of
+ * this component when that is the case.
+ */
+ active: {
+ type: Boolean,
+ default: false,
+ },
},
computed: {
@@ -69,6 +79,7 @@ export default {
return {
'counter-bubble__counter--highlighted': this.type === 'highlighted',
'counter-bubble__counter--outlined': this.type === 'outlined',
+ active: this.active,
}
},
},
@@ -91,16 +102,30 @@ export default {
font-weight: bold;
color: var(--color-primary-element-light-text);
+ & .active {
+ color: var(--color-main-background);
+ background-color: var(--color-primary-element-light);
+ }
+
&--highlighted {
color: var(--color-primary-element-text);
background-color: var(--color-primary-element);
}
+ &--highlighted,.active {
+ color: var(--color-primary-element);
+ background-color: var(--color-main-background);
+ }
+
&--outlined {
color: var(--color-primary-element);
background: transparent;
box-shadow: inset 0 0 0 2px;
}
+ &--outlined,.active {
+ color: var(--color-main-background);
+ box-shadow: inset 0 0 0 2px;
+ }
}
diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
index dfdd2fccc9..21e9d4c015 100644
--- a/src/components/NcListItem/NcListItem.vue
+++ b/src/components/NcListItem/NcListItem.vue
@@ -26,11 +26,13 @@
+ counterType="highlighted"
+ class="active">
@@ -39,7 +41,7 @@
-
+
@@ -205,7 +207,7 @@
:to="to"
:exact="to ? exact : null">
+ :class="{ 'list-item__wrapper--active' : isActive || active }">
{{ counterNumber }}
@@ -272,6 +275,7 @@
class="list-item-content__actions"
@click.prevent.stop="">
@@ -284,6 +288,7 @@
class="list-item-content__actions"
@click.prevent.stop="">
@@ -602,7 +607,15 @@ export default {
&:active,
&.active {
.list-item {
- background-color: var(--color-primary-element-light);
+ background-color: var(--color-primary-element);
+ }
+
+ .line-one__name, .line-one__details {
+ color: var(--color-primary-element-text) !important;
+ }
+
+ .line-two__subname {
+ color: var(--color-primary-element-text) !important;
}
}
}
@@ -671,19 +684,6 @@ export default {
}
}
-// Add more contrast for active entry
-[data-themes*='highcontrast'] {
- .list-item__wrapper {
- &--active,
- &:active,
- &.active {
- .list-item {
- background-color: var(--color-primary-element-light-hover);
- }
- }
- }
-}
-
.line-one {
display: flex;
align-items: center;