fix: adjust all styles for RTL support

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

Author: susnux

src/components/NcModal/NcModal.vue

@@ -897,7 +897,7 @@ export default {
 	position: fixed;
 	z-index: 9998;
 	top: 0;
-	left: 0;
+	inset-inline-start: 0;
 	display: block;
 	width: 100%;
 	height: 100%;
@@ -916,8 +916,7 @@ export default {
 	position: absolute;
 	z-index: 10001;
 	top: 0;
-	right: 0;
-	left: 0;
+	inset-inline: 0 0;
 	// prevent vue show to use display:none and resetting
 	// the circle animation loop
 	display: flex !important;
@@ -943,14 +942,14 @@ export default {
 	// On wider screens the name can be centered
 	@media only screen and (min-width: $breakpoint-mobile) {
 		&__name {
-			padding-left: calc(var(--default-clickable-area) * 3); // maximum actions is 3
+			padding-inline-start: calc(var(--default-clickable-area) * 3); // maximum actions is 3
 			text-align: center;
 		}
 	}
 
 	.icons-menu {
 		position: absolute;
-		right: 0;
+		inset-inline-end: 0;
 		display: flex;
 		align-items: center;
 		justify-content: flex-end;
@@ -1051,10 +1050,10 @@ export default {
 	}
 
 	.prev {
-		left: 2px;
+		inset-inline-start: 2px;
 	}
 	.next {
-		right: 2px;
+		inset-inline-end: 2px;
 	}
 
 	/* Content */
@@ -1182,7 +1181,7 @@ $pi: 3.14159265358979;
 	.progress-ring {
 		position: absolute;
 		top: 0;
-		left: 0;
+		inset-inline-start: 0;
 		transform: rotate(-90deg);
 		.progress-ring__circle {
 			transition: 100ms stroke-dashoffset;

src/components/NcPopover/NcPopover.vue

@@ -415,44 +415,44 @@ export default {
 </script>
 
 <style lang="scss">
-
-.resize-observer {
-	position:absolute;
-	top:0;
-	left:0;
-	z-index:-1;
-	width:100%;
-	height:100%;
-	border:none;
-	background-color:transparent;
-	pointer-events:none;
-	display:block;
-	overflow:hidden;
-	opacity:0
-}
-
-.resize-observer object {
-	display:block;
-	position:absolute;
-	top:0;
-	left:0;
-	height:100%;
-	width:100%;
-	overflow:hidden;
-	pointer-events:none;
-	z-index:-1
-}
-
 $arrow-width: 10px;
 // Move the arrow just slightly inside the popover
 // To prevent a visual gap on page scaling
 $arrow-position: $arrow-width - 1px;
 
+// Size class comes from the floating-vue library we use
+.resize-observer {
+	position: absolute;
+	top: 0;
+	inset-inline-start: 0;
+	z-index: -1;
+	width: 100%;
+	height: 100%;
+	border: none;
+	background-color: transparent;
+	pointer-events: none;
+	display: block;
+	overflow: hidden;
+	opacity: 0;
+
+	object {
+		display: block;
+		position: absolute;
+		top: 0;
+		inset-inline-start: 0;
+		height: 100%;
+		width: 100%;
+		overflow: hidden;
+		pointer-events: none;
+		z-index: -1;
+	}
+}
+
 .v-popper--theme-dropdown {
 	&.v-popper__popper {
 		z-index: 100000;
 		top: 0;
-		left: 0;
+		inset-inline-start: 0;
 		display: block !important;
 
 		.v-popper__wrapper {
@@ -499,15 +499,15 @@ $arrow-position: $arrow-width - 1px;
 		}
 
 		&[data-popper-placement^='right'] .v-popper__arrow-container {
-			left: -$arrow-position;
-			border-left-width: 0;
-			border-right-color: var(--color-main-background);
+			inset-inline-start: -$arrow-position;
+			border-inline-start-width: 0;
+			border-inline-end-color: var(--color-main-background);
 		}
 
 		&[data-popper-placement^='left'] .v-popper__arrow-container {
-			right: -$arrow-position;
-			border-right-width: 0;
-			border-left-color: var(--color-main-background);
+			inset-inline-end: -$arrow-position;
+			border-inline-end-width: 0;
+			border-inline-start-color: var(--color-main-background);
 		}
 
 		&[aria-hidden='true'] {

src/directives/Tooltip/index.scss

@@ -12,12 +12,10 @@ $arrow-width: 10px;
 		position: absolute;
 		z-index: 100000;
 		top: 0;
-		right: auto;
-		left: auto;
+		inset-inline: auto;
 		display: block;
 		margin: 0;
 		padding: 0;
-		text-align: left;
 		text-align: start;
 		opacity: 0;
 		line-height: 1.6;
@@ -41,16 +39,16 @@ $arrow-width: 10px;
 
 		// RIGHT
 		&[data-popper-placement^='right'] .v-popper__arrow-container {
-			right: 100%;
-			border-left-width: 0;
-			border-right-color: var(--color-main-background);
+			inset-inline-end: 100%;
+			border-inline-start-width: 0;
+			border-inline-end-color: var(--color-main-background);
 		}
 
 		// LEFT
 		&[data-popper-placement^='left'] .v-popper__arrow-container {
-			left: 100%;
-			border-right-width: 0;
-			border-left-color: var(--color-main-background);
+			inset-inline-start: 100%;
+			border-inline-end-width: 0;
+			border-inline-start-color: var(--color-main-background);
 		}
 
 		// HIDDEN / SHOWN

stylelint.config.js

@@ -20,7 +20,7 @@ module.exports = {
 		'csstools/use-logical': [
 			'always',
 			{
-				severity: 'warning',
+				severity: 'error',
 				// Only lint LTR-RTL properties for now
 				except: [
 					// Position properties