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

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

7 files changed, 100 insertions, 82 deletions

diff --git a/core/src/components/UnifiedSearch/SearchResult.vue b/core/src/components/UnifiedSearch/SearchResult.vue
index 93e104f1a20..231ac97642c 100644
--- a/core/src/components/UnifiedSearch/SearchResult.vue
+++ b/core/src/components/UnifiedSearch/SearchResult.vue
@@ -106,68 +106,67 @@ $clickable-area: 44px;
 $margin: 10px;
 
 .result-items {
-    &__item {
-
-    ::v-deep a {
-            border-radius: 12px;
-            border: 2px solid transparent;
-            border-radius: var(--border-radius-large) !important;
-
-            &--focused {
-                background-color: var(--color-background-hover);
-            }
-
-            &:active,
-            &:hover,
-            &:focus {
-                background-color: var(--color-background-hover);
-                border: 2px solid var(--color-border-maxcontrast);
-            }
-
-            * {
-                cursor: pointer;
-            }
-
-        }
-
-        &-icon {
-            overflow: hidden;
-            width: $clickable-area;
-            height: $clickable-area;
-            border-radius: var(--border-radius);
-            background-repeat: no-repeat;
-            background-position: center center;
-            background-size: 32px;
-
-            &--rounded {
-                border-radius: math.div($clickable-area, 2);
-            }
-
-            &--no-preview {
-                background-size: 32px;
-            }
-
-            &--with-thumbnail {
-                background-size: cover;
-            }
-
-            &--with-thumbnail:not(&--rounded) {
-                // compensate for border
-                max-width: $clickable-area - 2px;
-                max-height: $clickable-area - 2px;
-                border: 1px solid var(--color-border);
-            }
-
-            img {
-                // Make sure to keep ratio
-                width: 100%;
-                height: 100%;
-
-                object-fit: cover;
-                object-position: center;
-            }
-        }
-
-    }
+	&__item:deep {
+
+		a {
+			border: 2px solid transparent;
+			border-radius: var(--border-radius-large) !important;
+
+			&--focused {
+				background-color: var(--color-background-hover);
+			}
+
+			&:active,
+			&:hover,
+			&:focus {
+				background-color: var(--color-background-hover);
+				border: 2px solid var(--color-border-maxcontrast);
+			}
+
+			* {
+				cursor: pointer;
+			}
+
+		}
+
+		&-icon {
+			overflow: hidden;
+			width: $clickable-area;
+			height: $clickable-area;
+			border-radius: var(--border-radius);
+			background-repeat: no-repeat;
+			background-position: center center;
+			background-size: 32px;
+
+			&--rounded {
+				border-radius: math.div($clickable-area, 2);
+			}
+
+			&--no-preview {
+				background-size: 32px;
+			}
+
+			&--with-thumbnail {
+				background-size: cover;
+			}
+
+			&--with-thumbnail:not(&--rounded) {
+				// compensate for border
+				max-width: $clickable-area - 2px;
+				max-height: $clickable-area - 2px;
+				border: 1px solid var(--color-border);
+			}
+
+			img {
+				// Make sure to keep ratio
+				width: 100%;
+				height: 100%;
+
+				object-fit: cover;
+				object-position: center;
+			}
+		}
+
+	}
 }
 </style>
diff --git a/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue b/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue
index 44d1d716375..67853490d9f 100644
--- a/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue
+++ b/core/src/components/UnifiedSearch/UnifiedSearchLocalSearchBar.vue
@@ -93,7 +93,6 @@ function clearAndCloseSearch() {
 <style scoped lang="scss">
 .local-unified-search {
 	--local-search-width: min(calc(250px + v-bind('searchGlobalButtonCSSWidth')), 95vw);
-
 	box-sizing: border-box;
 	position: relative;
 	height: var(--header-height);
diff --git a/core/src/jquery/css/jquery-ui-fixes.scss b/core/src/jquery/css/jquery-ui-fixes.scss
index a5fee7ea0d9..637f4bfe14b 100644
--- a/core/src/jquery/css/jquery-ui-fixes.scss
+++ b/core/src/jquery/css/jquery-ui-fixes.scss
@@ -9,14 +9,17 @@
 	background: var(--color-main-background) none;
 	color: var(--color-main-text);
 }
+
 .ui-widget-content a {
 	color: var(--color-main-text);
 }
+
 .ui-widget-header {
 	border: none;
 	color: var(--color-main-text);
 	background-image: none;
 }
+
 .ui-widget-header a {
 	color: var(--color-main-text);
 }
@@ -31,11 +34,13 @@
 	font-weight: bold;
 	color: #555;
 }
+
 .ui-state-default a,
 .ui-state-default a:link,
 .ui-state-default a:visited {
 	color: #555;
 }
+
 .ui-state-hover,
 .ui-widget-content .ui-state-hover,
 .ui-widget-header .ui-state-hover,
@@ -47,12 +52,14 @@
 	font-weight: bold;
 	color: var(--color-main-text);
 }
+
 .ui-state-hover a,
 .ui-state-hover a:hover,
 .ui-state-hover a:link,
 .ui-state-hover a:visited {
 	color: var(--color-main-text);
 }
+
 .ui-state-active,
 .ui-widget-content .ui-state-active,
 .ui-widget-header .ui-state-active {
@@ -61,6 +68,7 @@
 	font-weight: bold;
 	color: var(--color-main-text);
 }
+
 .ui-state-active a,
 .ui-state-active a:link,
 .ui-state-active a:visited {
@@ -77,11 +85,13 @@
 	color: var(--color-text-light);
 	font-weight: 600;
 }
+
 .ui-state-highlight a,
 .ui-widget-content .ui-state-highlight a,
 .ui-widget-header .ui-state-highlight a {
 	color: var(--color-text-lighter);
 }
+
 .ui-state-error,
 .ui-widget-content .ui-state-error,
 .ui-widget-header .ui-state-error {
@@ -89,11 +99,13 @@
 	background: var(--color-error) none;
 	color: #ffffff;
 }
+
 .ui-state-error a,
 .ui-widget-content .ui-state-error a,
 .ui-widget-header .ui-state-error a {
 	color: #ffffff;
 }
+
 .ui-state-error-text,
 .ui-widget-content .ui-state-error-text,
 .ui-widget-header .ui-state-error-text {
@@ -105,20 +117,25 @@
 .ui-state-default .ui-icon {
 	background-image: url('images/ui-icons_1d2d44_256x240.png');
 }
+
 .ui-state-hover .ui-icon,
 .ui-state-focus .ui-icon {
 	background-image: url('images/ui-icons_1d2d44_256x240.png');
 }
+
 .ui-state-active .ui-icon {
 	background-image: url('images/ui-icons_1d2d44_256x240.png');
 }
+
 .ui-state-highlight .ui-icon {
 	background-image: url('images/ui-icons_ffffff_256x240.png');
 }
+
 .ui-state-error .ui-icon,
 .ui-state-error-text .ui-icon {
 	background-image: url('images/ui-icons_ffd27a_256x240.png');
 }
+
 .ui-icon.ui-icon-none {
 	display: none;
 }
@@ -130,6 +147,7 @@
 	background: #666666 url('images/ui-bg_diagonals-thick_20_666666_40x40.png') 50% 50% repeat;
 	opacity: .5;
 }
+
 .ui-widget-shadow {
 	margin: -5px 0 0 -5px;
 	padding: 5px;
diff --git a/core/src/jquery/css/jquery.ocdialog.scss b/core/src/jquery/css/jquery.ocdialog.scss
index a1946bc648f..b950d98c381 100644
--- a/core/src/jquery/css/jquery.ocdialog.scss
+++ b/core/src/jquery/css/jquery.ocdialog.scss
@@ -19,14 +19,16 @@
 	max-width: calc(100% - 20px);
 	overflow: auto;
 }
+
 .oc-dialog-title {
 	background: var(--color-main-background);
 }
+
 .oc-dialog-buttonrow {
 	position: relative;
 	display: flex;
 	background: transparent;
-	right: 0;
+	inset-inline-end: 0;
 	bottom: 0;
 	padding: 0;
 	padding-top: 10px;
@@ -57,7 +59,7 @@
 	width: 44px !important;
 	height: 44px !important;
 	top: 4px;
-	right: 4px;
+	inset-inline-end: 4px;
 	padding: 25px;
 	background: var(--icon-close-dark) no-repeat center;
 	opacity: .5;
@@ -76,7 +78,7 @@
 	z-index: 100001;
 	position: fixed;
 	top: 0;
-	left: 0;
+	inset-inline-start: 0;
 	width: 100%;
 	height: 100%;
 }
diff --git a/core/src/views/LegacyUnifiedSearch.vue b/core/src/views/LegacyUnifiedSearch.vue
index fdf4c95a4cc..0bb55dc53e4 100644
--- a/core/src/views/LegacyUnifiedSearch.vue
+++ b/core/src/views/LegacyUnifiedSearch.vue
@@ -728,16 +728,6 @@ $input-padding: 10px;
 		}
 	}
 
-	&__form-input {
-		margin: 0 !important;
-		&:focus,
-		&:focus-visible,
-		&:active {
-			border-color: 2px solid var(--color-main-text) !important;
-			box-shadow: 0 0 0 2px var(--color-main-background) !important;
-		}
-	}
-
 	&__input-row {
 		display: flex;
 		width: 100%;
@@ -774,6 +764,13 @@ $input-padding: 10px;
 			height: $input-height;
 			padding: $input-padding;
 
+			&:focus,
+			&:focus-visible,
+			&:active {
+				border-color: 2px solid var(--color-main-text) !important;
+				box-shadow: 0 0 0 2px var(--color-main-background) !important;
+			}
+
 			&,
 			&[placeholder],
 			&::placeholder {
@@ -791,7 +788,8 @@ $input-padding: 10px;
 			}
 		}
 
-		&-reset, &-submit {
+		&-reset,
+		&-submit {
 			position: absolute;
 			top: 0;
 			inset-inline-end: 4px;
@@ -832,16 +830,16 @@ $input-padding: 10px;
 		}
 	}
 
-	.unified-search__result-more::v-deep {
+	:deep(.unified-search__result-more) {
 		color: var(--color-text-maxcontrast);
 	}
 
 	.empty-content {
 		margin: 10vh 0;
 
-		::v-deep .empty-content__title {
+		:deep(.empty-content__title) {
 			font-weight: normal;
-            font-size: var(--default-font-size);
+			font-size: var(--default-font-size);
 			text-align: center;
 		}
 	}
diff --git a/core/src/views/Login.vue b/core/src/views/Login.vue
index d6c88d607ad..a13109bb766 100644
--- a/core/src/views/Login.vue
+++ b/core/src/views/Login.vue
@@ -196,6 +196,7 @@ body {
 .fade-enter-active, .fade-leave-active {
 	transition: opacity .3s;
 }
+
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
 	opacity: 0;
 }
diff --git a/core/src/views/UnsupportedBrowser.vue b/core/src/views/UnsupportedBrowser.vue
index daeac632e3c..d8d7dc55208 100644
--- a/core/src/views/UnsupportedBrowser.vue
+++ b/core/src/views/UnsupportedBrowser.vue
@@ -164,7 +164,8 @@ $spacing: 30px;
 
 	.empty-content {
 		margin: 0;
-		&::v-deep .empty-content__icon {
+
+		:deep(.empty-content__icon) {
 			opacity: 1;
 		}
 	}