Fix style linters

louislam · Aug 26, 2024 · a8371ce · a8371ce
1 parent d61d3e8
commit a8371ce
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/src/components/EditMonitorConditionGroup.vue b/src/components/EditMonitorConditionGroup.vue
@@ -7,15 +7,15 @@
             </select>
         </div>
 
-        <div class="condition-group__inner mt-2 pa-2">
+        <div class="condition-group-inner mt-2 pa-2">
             <div class="d-flex mb-3">
                 <button class="btn btn-outline-secondary btn-sm ms-auto" type="button" @click="remove">
                     <font-awesome-icon icon="trash" />
                     {{ $t("conditionDeleteGroup") }}
                 </button>
             </div>
 
-            <div class="condition-group__conditions">
+            <div class="condition-group-conditions">
                 <template v-for="(child, childIndex) in model.children" :key="childIndex">
                     <EditMonitorConditionGroup
                         v-if="child.type === 'group'"
@@ -38,7 +38,7 @@
                 </template>
             </div>
 
-            <div class="condition-group__actions mt-3">
+            <div class="condition-group-actions mt-3">
                 <button class="btn btn-outline-secondary btn-sm" type="button" data-testid="add-condition-button" @click="addCondition">
                     {{ $t("conditionAdd") }}
                 </button>
@@ -145,27 +145,31 @@ export default {
 <style lang="scss" scoped>
 @import "../assets/vars.scss";
 
-.condition-group__inner {
+.condition-group-inner {
     background: rgba(0, 0, 0, 0.05);
     padding: 20px;
 }
 
-.dark .condition-group__inner {
+.dark .condition-group-inner {
     background: rgba(255, 255, 255, 0.05);
 }
 
-.condition-group__conditions {
+.condition-group-conditions {
     container-type: inline-size;
 }
 
-.condition-group__actions {
+.condition-group-actions {
     display: grid;
     gap: 10px;
 }
 
 @container (min-width: 400px) {
-    .condition-group__actions {
+    .condition-group-actions {
         display: flex;
     }
+
+    .btn-delete-group {
+        margin-left: auto;
+    }
 }
 </style>
diff --git a/src/components/EditMonitorConditions.vue b/src/components/EditMonitorConditions.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="monitor-conditions">
         <label class="form-label">{{ $t("Conditions") }}</label>
-        <div class="monitor-conditions__conditions">
+        <div class="monitor-conditions-conditions">
             <template v-for="(condition, conditionIndex) in model" :key="conditionIndex">
                 <EditMonitorConditionGroup
                     v-if="condition.type === 'group'"
@@ -22,7 +22,7 @@
                 />
             </template>
         </div>
-        <div class="monitor-conditions__buttons">
+        <div class="monitor-conditions-buttons">
             <button class="btn btn-outline-secondary btn-sm me-2" type="button" data-testid="add-condition-button" @click="addCondition">
                 {{ $t("conditionAdd") }}
             </button>
@@ -126,17 +126,17 @@ export default {
 @import "../assets/vars.scss";
 
 .monitor-conditions,
-.monitor-conditions__conditions {
+.monitor-conditions-conditions {
     container-type: inline-size;
 }
 
-.monitor-conditions__buttons {
+.monitor-conditions-buttons {
     display: grid;
     gap: 10px;
 }
 
 @container (min-width: 400px) {
-    .monitor-conditions__buttons {
+    .monitor-conditions-buttons {
         display: flex;
     }
 }