Fix BEM compliance

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

src/components/ListItem/ListItem.vue

@@ -34,7 +34,7 @@
 		<template v-slot:subtitle>
 			In this slot you can put both text and other components such as icons
 		</template>
-		<AppNavigationCounter #counter">
+		<AppNavigationCounter #counter>
 			7
 		</AppNavigationCounter>
 		<template #actions>
@@ -78,27 +78,31 @@
 			<!-- Main content -->
 			<div class="list-item-content">
 				<div class="list-item-content__main">
-					<div class="list-item-content__line-one">
+
+					<!-- First line, title and details -->
+					<div class="line-one">
 						<span
-							class="list-item-content__line-one__title"
+							class="line-one__title"
 							:class="{'bold': bold}">
 							{{ title }}
 						</span>
 						<span
 							v-if="hasDetails && !displayActions"
-							class="list-item-content__line-one__details">
+							class="line-one__details">
 							{{ details }}
 						</span>
 					</div>
-					<div class="list-item-content__line-two"
+
+					<!-- Second line, subtitle and counter -->
+					<div class="line-two"
 						:class="{'bold': bold}">
-						<span v-if="hasSubtitle" class="list-item-content__line-two__subtitle">
+						<span v-if="hasSubtitle" class="line-two__subtitle">
 							<!-- @slot Slot for the second line of the component -->
 							<slot name="subtitle" />
 						</span>
 
 						<!-- Counter -->
-						<span v-if="!displayActions" class="list-item-content__line-two__counter">
+						<span v-if="!displayActions" class="line-two__counter">
 							<AppNavigationCounter
 								v-if="counterNumber != 0"
 								:highlighted="counterHighlighted">
@@ -107,6 +111,8 @@
 						</span>
 					</div>
 				</div>
+
+				<!-- Actions -->
 				<div
 					v-show="displayActions"
 					class="list-item-content__actions"
@@ -394,47 +400,6 @@ export default {
 			margin: auto 0;
 		}
 
-		&__line-one {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			white-space: nowrap;
-			margin: 0 auto;
-
-			&__title {
-				overflow: hidden;
-				flex-grow: 1;
-				cursor: pointer;
-				text-overflow: ellipsis;
-				color: var(--color-main-text);
-			}
-
-			&__details {
-				color: var(--color-text-lighter);
-				margin: 0 8px;
-			}
-		}
-
-		&__line-two {
-			display: flex;
-			align-items: flex-start;
-			justify-content: space-between;
-			white-space: nowrap;
-
-				&__subtitle {
-				overflow: hidden;
-				flex-grow: 1;
-				padding-right: 4px;
-				cursor: pointer;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				color: var(--color-text-lighter);
-			}
-
-			&__counter {
-				margin: 2px 4px 0 0;
-			}
-		}
 		&__actions {
 			flex: 0 0 auto;
 			align-self: center;
@@ -444,26 +409,46 @@ export default {
 	}
 }
 
-// Counter
-::v-deep .counter {
-	font-size: 12px;
-	/*
-	 * Always add the bubble
-	 */
-	padding: 4px 6px !important;
-	border-radius: 10px;
-
-	&:not(.app-navigation-entry__counter--highlighted) {
-		background-color: var(--color-background-darker);
+.line-one {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	white-space: nowrap;
+	margin: 0 auto;
+
+	&__title {
+		overflow: hidden;
+		flex-grow: 1;
+		cursor: pointer;
+		text-overflow: ellipsis;
+		color: var(--color-main-text);
 	}
 
-	span {
-		padding: 2px 6px;
+	&__details {
+		color: var(--color-text-lighter);
+		margin: 0 8px;
 	}
 }
 
-.bold {
-	font-weight: bold;
+.line-two {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+	white-space: nowrap;
+
+		&__subtitle {
+		overflow: hidden;
+		flex-grow: 1;
+		padding-right: 4px;
+		cursor: pointer;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		color: var(--color-text-lighter);
+	}
+
+	&__counter {
+		margin: 2px 4px 0 0;
+	}
 }
 
 </style>