refactor(styles): Adjust code style in SCSS sources to match our

stylelint config Signed-off-by: Ferdinand Thiessen <[email protected]>
nextcloud · Nov 18, 2024 · 5aa503d · 5aa503d
1 parent 01dfac5
commit 5aa503d
Show file tree

Hide file tree

Showing 69 changed files with 581 additions and 457 deletions.
diff --git a/apps/dashboard/src/DashboardApp.vue b/apps/dashboard/src/DashboardApp.vue
@@ -507,7 +507,6 @@ export default {
 .panel, .panels > div {
 	// Ensure the maxcontrast color is set for the background
 	--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
-
 	width: 320px;
 	max-width: 100%;
 	margin: 16px;
@@ -532,7 +531,8 @@ export default {
 		padding: 16px;
 		cursor: grab;
 
-		&, ::v-deep * {
+		&,
+		:deep(*) {
 			-webkit-touch-callout: none;
 			-webkit-user-select: none;
 			-khtml-user-select: none;
@@ -618,11 +618,10 @@ export default {
 .button,
 .button-vue,
 .edit-panels,
-.statuses ::v-deep .action-item .action-item__menutoggle,
-.statuses ::v-deep .action-item.action-item--open .action-item__menutoggle {
+.statuses :deep(.action-item .action-item__menutoggle),
+.statuses :deep(.action-item.action-item--open .action-item__menutoggle) {
 	// Ensure the maxcontrast color is set for the background
 	--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-main-text));
-
 	background-color: var(--color-main-background-blur);
 	-webkit-backdrop-filter: var(--filter-background-blur);
 	backdrop-filter: var(--filter-background-blur);

diff --git a/apps/dashboard/src/components/ApiDashboardWidget.vue b/apps/dashboard/src/components/ApiDashboardWidget.vue
@@ -117,6 +117,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-</style>
diff --git a/apps/dav/src/components/AbsenceForm.vue b/apps/dav/src/components/AbsenceForm.vue
@@ -261,7 +261,7 @@ export default {
 		&__picker {
 			flex: 1 auto;
 
-			::v-deep .native-datetime-picker--input {
+			:deep(.native-datetime-picker--input) {
 				margin-bottom: 0;
 			}
 		}

diff --git a/apps/dav/src/components/AvailabilityForm.vue b/apps/dav/src/components/AvailabilityForm.vue
@@ -139,30 +139,37 @@ export default {
 	padding: 0 10px 0 10px;
 	position: absolute;
 }
+
 :deep(.availability-slots) {
 	display: flex;
 	white-space: normal;
 }
+
 :deep(.availability-slot) {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	flex-wrap: wrap;
 }
+
 :deep(.availability-slot-group) {
 	display: flex;
 	flex-direction: column;
 }
+
 :deep(.mx-input-wrapper) {
 	width: 85px;
 }
+
 :deep(.mx-datepicker) {
 	width: 97px;
 }
+
 :deep(.multiselect) {
 	border: 1px solid var(--color-border-dark);
 	width: 120px;
 }
+
 .time-zone {
 	padding-block: 32px 12px;
 	padding-inline: 0 12px;
@@ -175,6 +182,7 @@ export default {
 		font-weight: bold;
 	}
 }
+
 .grid-table {
 	display: grid;
 	margin-bottom: 32px;
@@ -183,9 +191,11 @@ export default {
 	grid-template-columns: min-content auto min-content;
 	max-width: 500px;
 }
+
 .button {
 	align-self: flex-end;
 }
+
 :deep(.label-weekday) {
 	position: relative;
 	display: inline-flex;

diff --git a/apps/dav/src/views/CalDavSettings.vue b/apps/dav/src/views/CalDavSettings.vue
@@ -156,6 +156,7 @@ export default {
 	* :deep(a) {
 		text-decoration: underline;
 	}
+
 	.settings-hint {
 		margin-top: -.2em;
 		margin-bottom: 1em;

diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
@@ -350,7 +350,6 @@ export default defineComponent({
 	--icon-preview-size: 32px;
 
 	--fixed-block-start-position: var(--default-clickable-area);
-
 	overflow: auto;
 	height: 100%;
 	will-change: scroll-position;
@@ -453,7 +452,6 @@ export default defineComponent({
 			display: flex;
 			align-items: center;
 			width: 100%;
-			user-select: none;
 			border-block-end: 1px solid var(--color-border);
 			box-sizing: border-box;
 			user-select: none;
@@ -764,7 +762,6 @@ tbody.files-list__tbody.files-list__tbody--grid {
 	--row-width: calc(var(--icon-preview-size) + var(--item-padding) * 2);
 	--row-height: calc(var(--icon-preview-size) + var(--name-height) + var(--mtime-height) + var(--item-padding) * 2);
 	--checkbox-padding: 0px;
-
 	display: grid;
 	grid-template-columns: repeat(auto-fill, var(--row-width));
 
@@ -787,8 +784,8 @@ tbody.files-list__tbody.files-list__tbody--grid {
 	.files-list__row-checkbox {
 		position: absolute;
 		z-index: 9;
-		top: calc(var(--item-padding)/2);
-		inset-inline-start: calc(var(--item-padding)/2);
+		top: calc(var(--item-padding) / 2);
+		inset-inline-start: calc(var(--item-padding) / 2);
 		overflow: hidden;
 		--checkbox-container-size: 44px;
 		width: var(--checkbox-container-size);

diff --git a/apps/files/src/components/LegacyView.vue b/apps/files/src/components/LegacyView.vue
@@ -38,5 +38,3 @@ export default {
 	},
 }
 </script>
-<style>
-</style>
diff --git a/apps/files/src/components/TemplatePreview.vue b/apps/files/src/components/TemplatePreview.vue
@@ -198,7 +198,7 @@ export default {
 	&__title {
 		overflow: hidden;
 		// also count preview border
-		max-width: calc(var(--width) + 2*2px);
+		max-width: calc(var(--width) + 2 * 2px);
 		padding: var(--margin);
 		white-space: nowrap;
 		text-overflow: ellipsis;

diff --git a/apps/files/src/components/TransferOwnershipDialogue.vue b/apps/files/src/components/TransferOwnershipDialogue.vue
@@ -206,10 +206,12 @@ export default {
 .middle-align {
 	vertical-align: middle;
 }
+
 p {
 	margin-top: 12px;
 	margin-bottom: 12px;
 }
+
 .new-owner-row {
 	display: flex;
 	flex-wrap: wrap;
@@ -229,6 +231,7 @@ p {
 		max-width: 280px;
 	}
 }
+
 .transfer-select-row {
 	span {
 		margin-inline-end: 8px;

diff --git a/apps/files/src/views/Navigation.vue b/apps/files/src/views/Navigation.vue
@@ -201,19 +201,15 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
-// TODO: remove when https://github.com/nextcloud/nextcloud-vue/pull/3539 is in
-.app-navigation::v-deep .app-navigation-entry-icon {
-	background-repeat: no-repeat;
-	background-position: center;
-}
-
-.app-navigation::v-deep .app-navigation-entry.active .button-vue.icon-collapse:not(:hover) {
-	color: var(--color-primary-element-text);
-}
+.app-navigation {
+	:deep(.app-navigation-entry.active .button-vue.icon-collapse:not(:hover)) {
+		color: var(--color-primary-element-text);
+	}
 
-.app-navigation > ul.app-navigation__list {
-	// Use flex gap value for more elegant spacing
-	padding-bottom: var(--default-grid-baseline, 4px);
+	> ul.app-navigation__list {
+		// Use flex gap value for more elegant spacing
+		padding-bottom: var(--default-grid-baseline, 4px);
+	}
 }
 
 .app-navigation-entry__settings {

diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue
@@ -612,7 +612,7 @@ export default {
 	}
 
 	.svg-icon {
-		::v-deep svg {
+		:deep(svg) {
 			width: 20px;
 			height: 20px;
 			fill: currentColor;

diff --git a/apps/files/src/views/TemplatePicker.vue b/apps/files/src/views/TemplatePicker.vue
@@ -313,15 +313,15 @@ export default defineComponent({
 		padding: calc(var(--margin) * 2) var(--margin);
 		position: sticky;
 		bottom: 0;
-		background-image: linear-gradient(0, var(--gradient-main-background));
+		background-image: linear-gradient(0deg, var(--gradient-main-background));
 
 		button, input[type='submit'] {
 			height: 44px;
 		}
 	}
 
 	// Make sure we're relative for the loading emptycontent on top
-	::v-deep .modal-container {
+	:deep(.modal-container) {
 		position: relative;
 	}