From 929cf08841ea7012616ae89e436a4804e578545f Mon Sep 17 00:00:00 2001 From: Marco Ambrosini Date: Wed, 12 Jun 2024 13:35:01 +0200 Subject: [PATCH] refactor: Replace all hardcoded values with the variable Replace scss variable with css one and remove declaration Co-authored-by: Marco Co-authored-by: Ferdinand Thiessen Signed-off-by: Marco --- src/assets/NcAppNavigationItem.scss | 20 ++++++------- src/assets/action.scss | 15 +++++----- src/assets/variables.scss | 12 ++------ .../NcActionButton/NcActionButton.vue | 2 +- .../NcActionCaption/NcActionCaption.vue | 4 +-- .../NcActionCheckbox/NcActionCheckbox.vue | 2 +- .../NcActionInput/NcActionInput.vue | 10 +++---- .../NcActionRadio/NcActionRadio.vue | 2 +- .../NcActionTextEditable.vue | 24 +++++++-------- src/components/NcActions/NcActions.vue | 2 +- .../NcAppContent/NcAppDetailsToggle.vue | 4 +-- .../NcAppNavigationCaption.vue | 6 ++-- .../NcAppNavigationIconBullet.vue | 2 +- .../NcAppNavigationNewItem.vue | 2 +- .../NcAppNavigationSettings.vue | 10 +++---- .../NcAppNavigationToggle.vue | 2 +- .../NcAppSettingsDialog.vue | 4 +-- src/components/NcAppSidebar/NcAppSidebar.vue | 26 ++++++++-------- src/components/NcBreadcrumb/NcBreadcrumb.vue | 2 +- .../NcBreadcrumbs/NcBreadcrumbs.vue | 2 +- .../NcCheckboxContent.vue | 6 ++-- .../NcColorPicker/NcColorPicker.vue | 13 ++++---- .../NcCounterBubble/NcCounterBubble.vue | 2 +- .../NcDashboardWidget/NcDashboardWidget.vue | 2 +- .../NcDashboardWidgetItem.vue | 6 ++-- src/components/NcDateTimePicker/index.scss | 2 +- src/components/NcHeaderMenu/NcHeaderMenu.vue | 4 +-- src/components/NcInputField/NcInputField.vue | 4 ++- src/components/NcListItem/NcListItem.vue | 30 +++++++++---------- .../NcListItemIcon/NcListItemIcon.vue | 6 ++-- src/components/NcModal/NcModal.vue | 20 ++++++------- .../NcRelatedResourcesPanel/NcResource.vue | 2 +- .../NcTeamResources.vue | 8 ++--- .../NcRichContenteditable.vue | 6 ++-- src/components/NcRichText/NcReferenceList.vue | 2 +- .../NcRichText/NcReferencePicker/NcSearch.vue | 2 +- .../NcReferencePicker/NcSearchResult.vue | 2 +- src/components/NcSelect/NcSelect.vue | 2 +- .../NcSettingsSection/NcSettingsSection.vue | 6 ++-- 39 files changed, 134 insertions(+), 144 deletions(-) diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss index 95738f4244..4ebd98030e 100644 --- a/src/assets/NcAppNavigationItem.scss +++ b/src/assets/NcAppNavigationItem.scss @@ -10,7 +10,7 @@ flex-wrap: wrap; box-sizing: border-box; width: 100%; - min-height: $clickable-area; + min-height: var(--default-clickable-area); transition: background-color var(--animation-quick) ease-in-out; transition: background-color 200ms ease-in-out; border-radius: var(--border-radius-element, var(--border-radius-pill)); @@ -86,22 +86,22 @@ overflow: hidden; flex: 1 1 0; box-sizing: border-box; - min-height: $clickable-area; + min-height: var(--default-clickable-area); padding: 0; white-space: nowrap; color: var(--color-main-text); background-repeat: no-repeat; background-position: $icon-margin center; background-size: $icon-size $icon-size; - line-height: $clickable-area; + line-height: var(--default-clickable-area); .app-navigation-entry-icon { display: flex; align-items: center; - flex: 0 0 $clickable-area; + flex: 0 0 var(--default-clickable-area); justify-content: center; - width: $clickable-area; - height: $clickable-area; + width: var(--default-clickable-area); + height: var(--default-clickable-area); background-size: $icon-size $icon-size; background-repeat: no-repeat; background-position: $icon-margin center; @@ -115,7 +115,7 @@ } .editingContainer { - width: calc(100% - #{$clickable-area}); + width: calc(100% - var(--default-clickable-area)); margin: auto; } @@ -146,21 +146,21 @@ .app-navigation-entry__deleted { display: inline-flex; flex: 1 1 0; - padding-left: $clickable-area - $icon-margin !important; + padding-left: calc(var(--default-clickable-area) - $icon-margin) !important; .app-navigation-entry__deleted-description { position: relative; overflow: hidden; flex: 1 1 0; white-space: nowrap; text-overflow: ellipsis; - line-height: $clickable-area; + line-height: var(--default-clickable-area); } } /* counter and actions */ .app-navigation-entry__utils { display: flex; - min-width: $clickable-area; + min-width: var(--default-clickable-area); align-items: center; flex: 0 1 auto; justify-content: flex-end; diff --git a/src/assets/action.scss b/src/assets/action.scss index 25566a2e04..a74b187883 100644 --- a/src/assets/action.scss +++ b/src/assets/action.scss @@ -51,7 +51,7 @@ font-weight: normal; font-size: var(--default-font-size); - line-height: $clickable-area; + line-height: var(--default-clickable-area); & > span { cursor: pointer; @@ -59,8 +59,8 @@ } &__icon { - width: $clickable-area; - height: $clickable-area; + width: var(--default-clickable-area); + height: var(--default-clickable-area); opacity: $opacity_full; background-position: $icon-margin center; background-size: $icon-size; @@ -68,8 +68,8 @@ } &:deep(.material-design-icon) { - width: $clickable-area; - height: $clickable-area; + width: var(--default-clickable-area); + height: var(--default-clickable-area); opacity: $opacity_full; .material-design-icon__svg { @@ -83,8 +83,7 @@ max-width: 220px; line-height: 1.6em; - // 14px are currently 1em line-height. Mixing units as '44px - 1.6em' does not work. - padding: #{math.div($clickable-area - 1.6 * 14px, 2)} 0; + padding: calc((var(--default-clickable-area) - 1.6em) / 2) 0; cursor: pointer; text-align: left; @@ -114,7 +113,7 @@ margin-left: auto; // Align with right end of the button // This is the padding-right - margin-right: -$icon-margin; + margin-right: calc($icon-margin * -1); } } } diff --git a/src/assets/variables.scss b/src/assets/variables.scss index 0ccc78a100..5d978245df 100644 --- a/src/assets/variables.scss +++ b/src/assets/variables.scss @@ -2,19 +2,13 @@ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors * SPDX-License-Identifier: AGPL-3.0-or-later */ - -// https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556 -// recommended is 48px -// 44px is what we choose and have very good visual-to-usability ratio -$clickable-area: 44px; - // background icon size // also used for the scss icon font $icon-size: 16px; -// icon padding for a $clickable-area width and a $icon-size icon -// ( 44px - 16px ) / 2 -$icon-margin: math.div($clickable-area - $icon-size, 2); +// icon padding for a var(--default-clickable-area) width and a $icon-size icon +// ( 34px - 16px ) / 2 +$icon-margin: calc(calc(var(--default-clickable-area) - $icon-size) / 2); // transparency background for icons $icon-focus-bg: rgba(127, 127, 127, .25); diff --git a/src/components/NcActionButton/NcActionButton.vue b/src/components/NcActionButton/NcActionButton.vue index 124c52f86a..f638495651 100644 --- a/src/components/NcActionButton/NcActionButton.vue +++ b/src/components/NcActionButton/NcActionButton.vue @@ -548,6 +548,6 @@ export default { .action-button__pressed-icon { margin-left: auto; - margin-right: -$icon-margin; + margin-right: calc($icon-margin * -1); } diff --git a/src/components/NcActionCaption/NcActionCaption.vue b/src/components/NcActionCaption/NcActionCaption.vue index 964847eac0..a7931c0987 100644 --- a/src/components/NcActionCaption/NcActionCaption.vue +++ b/src/components/NcActionCaption/NcActionCaption.vue @@ -46,7 +46,7 @@ export default { diff --git a/src/components/NcActionRadio/NcActionRadio.vue b/src/components/NcActionRadio/NcActionRadio.vue index c637aa3133..7b655260c0 100644 --- a/src/components/NcActionRadio/NcActionRadio.vue +++ b/src/components/NcActionRadio/NcActionRadio.vue @@ -177,7 +177,7 @@ export default { box-shadow: none; font-weight: normal; - line-height: $clickable-area; + line-height: var(--default-clickable-area); /* checkbox/radio fixes */ &__radio { diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue index edf6e0f9dc..29d91bb237 100644 --- a/src/components/NcActionTextEditable/NcActionTextEditable.vue +++ b/src/components/NcActionTextEditable/NcActionTextEditable.vue @@ -203,7 +203,7 @@ $input-margin: 4px; box-shadow: none; font-weight: normal; - line-height: $clickable-area; + line-height: var(--default-clickable-area); & > span { cursor: pointer; @@ -215,15 +215,15 @@ $input-margin: 4px; min-height: 0; /* Keep padding to define the width to assure correct position of a possible text */ - padding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area; + padding: calc(var(--default-clickable-area) / 2) 0 calc(var(--default-clickable-area) / 2) var(--default-clickable-area); background-position: #{$icon-margin} center; background-size: $icon-size; } &:deep(.material-design-icon) { - width: $clickable-area; - height: $clickable-area; + width: var(--default-clickable-area); + height: var(--default-clickable-area); opacity: $opacity_full; .material-design-icon__svg { @@ -258,10 +258,10 @@ $input-margin: 4px; // bottom-right corner position: absolute; - right: $icon-margin + 1; + right: calc($icon-margin + 1); bottom: 1px; - width: #{$clickable-area - $input-margin * 2}; - height: #{$clickable-area - $input-margin * 2}; + width: calc(var(--default-clickable-area) - $input-margin * 2); + height: calc(var(--default-clickable-area) - $input-margin * 2); box-sizing: border-box; margin: 0; padding: 7px 6px; @@ -283,10 +283,10 @@ $input-margin: 4px; color: inherit; border-color: var(--color-border-maxcontrast); - min-height: #{$clickable-area * 2 - $input-margin * 2}; /* twice the element margin-y */ - max-height: #{$clickable-area * 3 - $input-margin * 2}; /* twice the element margin-y */ + min-height: calc(var(--default-clickable-area) * 2 - $input-margin * 2); /* twice the element margin-y */ + max-height: calc(var(--default-clickable-area) * 3 - $input-margin * 2); /* twice the element margin-y */ // block width widening - min-width: $clickable-area * 4; + min-width: calc(var(--default-clickable-area) * 4); width: 100% !important; margin: 0; @@ -329,11 +329,11 @@ $input-margin: 4px; // add the same bottomMargin as the right padding // for visual balance li:last-child > .action-text-editable { - margin-bottom: $icon-margin - $input-margin; + margin-bottom: calc($icon-margin - $input-margin); } // same for first item li:first-child > .action-text-editable { - margin-top: $icon-margin - $input-margin; + margin-top: calc($icon-margin - $input-margin); } diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue index 5e8a202499..08f6f3f8c1 100644 --- a/src/components/NcActions/NcActions.vue +++ b/src/components/NcActions/NcActions.vue @@ -2009,7 +2009,7 @@ export default { // Spacing between buttons & > button { - margin-right: math.div($icon-margin, 2); + margin-right: calc($icon-margin / 2); } } diff --git a/src/components/NcAppContent/NcAppDetailsToggle.vue b/src/components/NcAppContent/NcAppDetailsToggle.vue index eaa384dba0..b056683ae3 100644 --- a/src/components/NcAppContent/NcAppDetailsToggle.vue +++ b/src/components/NcAppContent/NcAppDetailsToggle.vue @@ -81,8 +81,8 @@ export default { diff --git a/src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue b/src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue index 51ad8c172e..57e53a5f13 100644 --- a/src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue +++ b/src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue @@ -72,7 +72,7 @@ export default { .app-navigation-entry__icon-bullet { display: block; // there is 2 margins - padding: $icon-margin + 1px; + padding: calc($icon-margin + 1px); div { width: $icon-size - 2px; height: $icon-size - 2px; diff --git a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue index 981225f664..6b3f455dda 100644 --- a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue +++ b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue @@ -171,7 +171,7 @@ export default { } .newItemContainer { - width: calc(100% - #{$clickable-area}); + width: calc(100% - var(--default-clickable-area)); margin: auto; } diff --git a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue b/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue index 3abbbd66dc..5803ed5954 100644 --- a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue +++ b/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue @@ -85,7 +85,7 @@ export default { .settings-button { display: flex; flex: 1 1 0; - height: $clickable-area; + height: var(--default-clickable-area); width: 100%; padding: 0; margin: 0; @@ -98,7 +98,7 @@ export default { font-size: 100%; color: var(--color-main-text); padding-right: 14px; - line-height: $clickable-area; + line-height: var(--default-clickable-area); &:hover, &:focus { @@ -106,9 +106,9 @@ export default { } &__icon { - width: $clickable-area; - height: $clickable-area; - min-width: $clickable-area; + width: var(--default-clickable-area); + height: var(--default-clickable-area); + min-width: var(--default-clickable-area); } &__label { overflow: hidden; diff --git a/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue b/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue index 17dad1b1da..2733a4f405 100644 --- a/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue +++ b/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue @@ -72,7 +72,7 @@ export default { position: absolute; top: var(--app-navigation-padding); right: calc(0px - var(--app-navigation-padding)); - margin-right: - $clickable-area; + margin-right: calc(0px - var(--default-clickable-area)); } button.app-navigation-toggle { diff --git a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue index 8edd3fd7e8..735b789692 100644 --- a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue +++ b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue @@ -408,9 +408,9 @@ export default { display: flex; align-content: center; font-size: 16px; - height: $clickable-area; + height: var(--default-clickable-area); margin: 4px 0; - line-height: $clickable-area; + line-height: var(--default-clickable-area); border-radius: var(--border-radius-pill); font-weight: bold; padding: 0 20px; diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue index 4a6afb92b7..4ef191eac6 100644 --- a/src/components/NcAppSidebar/NcAppSidebar.vue +++ b/src/components/NcAppSidebar/NcAppSidebar.vue @@ -1297,10 +1297,10 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation z-index: 100; top: $top-buttons-spacing; right: $top-buttons-spacing; - width: $clickable-area; - height: $clickable-area; + width: var(--default-clickable-area); + height: var(--default-clickable-area); opacity: $opacity_normal; - border-radius: math.div($clickable-area, 2); + border-radius: calc(var(--default-clickable-area) / 2); &:hover, &:active, &:focus { @@ -1327,23 +1327,23 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation padding-left: 0; flex: 1 1 auto; min-width: 0; - padding-right: calc(2 * $clickable-area + $top-buttons-spacing); + padding-right: calc(2 * var(--default-clickable-area) + $top-buttons-spacing); padding-top: var(--app-sidebar-padding); &.app-sidebar-header__desc--without-actions { - padding-right: calc($clickable-area + $top-buttons-spacing); + padding-right: calc(var(--default-clickable-area) + $top-buttons-spacing); } .app-sidebar-header__tertiary-actions { z-index: 3; // above star position: absolute; top: calc(var(--app-sidebar-padding) / 2); - left: -1 * $clickable-area; + left: calc(-1 * var(--default-clickable-area)); gap: 0; // override gap } .app-sidebar-header__menu { top: $top-buttons-spacing; - right: calc($clickable-area + $top-buttons-spacing); // left of the close button + right: calc(var(--default-clickable-area) + $top-buttons-spacing); // left of the close button position: absolute; } } @@ -1356,14 +1356,14 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation .app-sidebar-header__menu { position: absolute; top: $top-buttons-spacing; - right: calc($top-buttons-spacing + $clickable-area); + right: calc($top-buttons-spacing + var(--default-clickable-area)); } // increase the padding to not overlap the menu .app-sidebar-header__desc { - padding-right: calc($clickable-area * 2 + $top-buttons-spacing); + padding-right: calc(var(--default-clickable-area) * 2 + $top-buttons-spacing); &.app-sidebar-header__desc--without-actions { - padding-right: calc($clickable-area + $top-buttons-spacing); + padding-right: calc(var(--default-clickable-area) + $top-buttons-spacing); } } } @@ -1415,8 +1415,8 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation .app-sidebar-header__tertiary-actions { display: flex; - height: $clickable-area; - width: $clickable-area; + height: var(--default-clickable-area); + width: var(--default-clickable-area); justify-content: center; flex: 0 0 auto; @@ -1441,7 +1441,7 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation .app-sidebar-header__mainname-container { display: flex; align-items: center; - min-height: $clickable-area; + min-height: var(--default-clickable-area); // main name .app-sidebar-header__mainname { diff --git a/src/components/NcBreadcrumb/NcBreadcrumb.vue b/src/components/NcBreadcrumb/NcBreadcrumb.vue index 49ee53bf98..50e6dd2229 100644 --- a/src/components/NcBreadcrumb/NcBreadcrumb.vue +++ b/src/components/NcBreadcrumb/NcBreadcrumb.vue @@ -274,7 +274,7 @@ export default { .vue-crumb { background-image: none; display: inline-flex; - height: $clickable-area; + height: var(--default-clickable-area); padding: 0; &:last-child { diff --git a/src/components/NcBreadcrumbs/NcBreadcrumbs.vue b/src/components/NcBreadcrumbs/NcBreadcrumbs.vue index 8e7903bf7e..f4b7aca10a 100644 --- a/src/components/NcBreadcrumbs/NcBreadcrumbs.vue +++ b/src/components/NcBreadcrumbs/NcBreadcrumbs.vue @@ -112,7 +112,7 @@ export default { .dragme { display: block; width: 100px; - height: 44px; + height: var(--default-clickable-area); background-color: var(--color-background-dark); } diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue index 290debd243..446bb3449f 100644 --- a/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue +++ b/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue @@ -197,9 +197,9 @@ export default { flex-direction: row; gap: 4px; user-select: none; - min-height: $clickable-area; - border-radius: $clickable-area; - padding: 4px calc(($clickable-area - var(--icon-height)) / 2); + min-height: var(--default-clickable-area); + border-radius: var(--default-clickable-area); + padding: 4px calc((var(--default-clickable-area) - var(--icon-height)) / 2); // Set to 100% to make text overflow work on button style width: 100%; // but restrict to content so plain checkboxes / radio switches do not expand diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue index ee950e2eb0..b9baf91bcb 100644 --- a/src/components/NcColorPicker/NcColorPicker.vue +++ b/src/components/NcColorPicker/NcColorPicker.vue @@ -426,16 +426,16 @@ export default { &__simple { display: grid; - grid-template-columns: repeat(auto-fit, $clickable-area); - grid-auto-rows: $clickable-area; + grid-template-columns: repeat(auto-fit, var(--default-clickable-area)); + grid-auto-rows: var(--default-clickable-area); &-color-circle { display: flex; align-items: center; justify-content: center; - width: 34px; - height: 34px; - min-height: 34px; + width: var(--clickable-area-small, 34px); + height: var(--clickable-area-small, 34px); + min-height: var(--clickable-area-small, 34px); margin: auto; padding: 0; color: white; @@ -449,9 +449,6 @@ export default { opacity: .6; } &--active { - width: 38px; - height: 38px; - min-height: 38px; transition: all 100ms ease-in-out; opacity: 1 !important; } diff --git a/src/components/NcCounterBubble/NcCounterBubble.vue b/src/components/NcCounterBubble/NcCounterBubble.vue index 614dbd0aa7..483734d70c 100644 --- a/src/components/NcCounterBubble/NcCounterBubble.vue +++ b/src/components/NcCounterBubble/NcCounterBubble.vue @@ -75,7 +75,7 @@ export default { font-size: calc(var(--default-font-size) * .8); overflow: hidden; width: fit-content; - max-width: $clickable-area; + max-width: var(--default-clickable-area); text-align: center; text-overflow: ellipsis; line-height: 1em; diff --git a/src/components/NcDashboardWidget/NcDashboardWidget.vue b/src/components/NcDashboardWidget/NcDashboardWidget.vue index ad1d594dcd..0ccf7ff833 100644 --- a/src/components/NcDashboardWidget/NcDashboardWidget.vue +++ b/src/components/NcDashboardWidget/NcDashboardWidget.vue @@ -370,7 +370,7 @@ export default { } .item__details { padding-left: 8px; - max-height: 44px; + max-height: var(--default-clickable-area); flex-grow: 1; overflow: hidden; display: flex; diff --git a/src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue b/src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue index d06ee3452d..8d96683648 100644 --- a/src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue +++ b/src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue @@ -181,7 +181,7 @@ export default { diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue index f262907e22..82d5d9ace3 100644 --- a/src/components/NcInputField/NcInputField.vue +++ b/src/components/NcInputField/NcInputField.vue @@ -428,7 +428,8 @@ export default { position: absolute; margin-inline: 14px 0; max-width: fit-content; - inset-block-start: 11px; + // center the label + inset-block-start: calc((var(--default-clickable-area) - ( var(--default-font-size) * 1.5 )) / 2); inset-inline: 0; // Fix color so that users do not think the input already has content color: var(--color-text-maxcontrast); @@ -475,6 +476,7 @@ export default { align-items: center; justify-content: center; opacity: 0.7; + top: 1px; &--leading { inset-block-end: 0; diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue index e5f277f972..aa88675fe5 100644 --- a/src/components/NcListItem/NcListItem.vue +++ b/src/components/NcListItem/NcListItem.vue @@ -18,7 +18,7 @@ :counter-number="44" counterType="highlighted">