chore(dav): use proper BEM

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

Author: susnux

apps/dav/src/components/AbsenceForm.vue

@@ -4,20 +4,20 @@
 -->
 
 <template>
-	<form class="absence" @submit.prevent="saveForm">
-		<div class="absence__dates">
+	<form :class="$style.absenceForm" @submit.prevent="saveForm">
+		<div :class="$style.absenceForm__pickerContainer">
 			<NcDateTimePickerNative
 				id="absence-first-day"
 				v-model="firstDay"
+				:class="$style.absenceForm__picker"
 				:label="t('dav', 'First day')"
-				class="absence__dates__picker"
-				:required="true" />
+				required />
 			<NcDateTimePickerNative
 				id="absence-last-day"
 				v-model="lastDay"
+				:class="$style.absenceForm__picker"
 				:label="t('dav', 'Last day (inclusive)')"
-				class="absence__dates__picker"
-				:required="true" />
+				required />
 		</div>
 		<label for="replacement-search-input">{{ t('dav', 'Out of office replacement (optional)') }}</label>
 		<NcSelectUsers
@@ -28,11 +28,17 @@
 			:options="options"
 			@search="asyncFind" />
 		<NcTextField v-model="status" :label="t('dav', 'Short absence status')" :required="true" />
-		<div class="absence-long-message__wrapper">
-			<NcTextArea input-class="absence-long-message" v-model="message" :label="t('dav', 'Long absence Message')" :required="true" resize="none" rows="6"/>
+		<div :class="$style.absenceForm__longMessageContainer">
+			<NcTextArea
+				v-model="message"
+				:inputClass="$style.absenceForm__longMessage"
+				:label="t('dav', 'Long absence Message')"
+				required
+				resize="none"
+				rows="6" />
 		</div>
 
-		<div class="absence__buttons">
+		<div :class="$style.absenceForm__actions">
 			<NcButton
 				:disabled="loading || !valid"
 				variant="primary"
@@ -253,40 +259,40 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.absence {
+<style module>
+.absenceForm {
 	display: flex;
 	flex-direction: column;
 	gap: 5px;
+}
 
-	&__dates {
-		display: flex;
-		gap: 10px;
-		width: 100%;
+.absenceForm__pickerContainer {
+	display: flex;
+	gap: 10px;
+	width: 100%;
+}
 
-		&__picker {
-			flex: 1 auto;
+.absenceForm__picker {
+	flex: 1 auto;
 
-			:deep(.native-datetime-picker--input) {
-				margin-bottom: 0;
-			}
-		}
+	:global(.native-datetime-picker--input) {
+		margin-bottom: 0;
 	}
+}
 
-	.absence-long-message {
-		height: calc(var(--default-line-height) * 6 * var(--font-size-small));
+.absenceForm__longMessage {
+	height: calc(var(--default-line-height) * 6 * var(--font-size-small));
+}
 
-		&__wrapper {
-			height: calc(var(--default-line-height) * 6 * var(--font-size-small) + var(--default-grid-baseline) * 2);
-			display: flex;
-			flex-direction: column;
-			justify-content: start;
-		}
-	}
+.absenceForm__longMessageContainer {
+	height: calc(var(--default-line-height) * 6 * var(--font-size-small) + var(--default-grid-baseline) * 2);
+	display: flex;
+	flex-direction: column;
+	justify-content: start;
+}
 
-	&__buttons {
-		display: flex;
-		gap: 5px;
-	}
+.absenceForm__actions {
+	display: flex;
+	gap: 5px;
 }
 </style>