fix: align theme color picker with buttons (#198)

Fix the issue described in: #173 (comment) Use the vertical-align CSS property instead of manually hardcoding pixel offsets and margins.
SchweizerischeBundesbahnen · Jul 31, 2024 · e3a8798 · e3a8798
1 parent 41341ca
commit e3a8798
Showing 1 changed file with 5 additions and 8 deletions.
diff --git a/src/app/view/editor-properties-view-component/editor-properties-view.component.html b/src/app/view/editor-properties-view-component/editor-properties-view.component.html
@@ -25,15 +25,14 @@ <h2 class="SummaryTitle">Einstellungen</h2>
         type="color"
         sbbInput
         name="Hintergrundfarbe"
-        style="width: 242px; min-height: 37px"
+        style="width: 242px; min-height: 37px; vertical-align: middle;"
         [(ngModel)]="activeBackgroundColor"
         (change)="colorPicked($event)"
       />
       &nbsp;
       <button
         sbb-secondary-button
-        class="sbb-mt-m"
-        style="transform: translate(0px, -6px);"
+        style="vertical-align: middle;"
         [disabled]="isBackgroundColorWhite()"
         title="Hintergrundfarbe auf 'weiss' setzten"
         (click)="setBackgroundColorToWhite()"
@@ -57,9 +56,8 @@ <h2 class="SummaryTitle">Einstellungen</h2>
       &nbsp;
       <button
         sbb-secondary-button
-        class="sbb-mt-m"
         [disabled]="isDefaultBackgroundColorActive()"
-        style="transform: translate(0px, -6px);"
+        style="vertical-align: middle;"
         title="Hintergrundfarbe auf Standard zurücksetzen"
         (click)="onResetBackgroundColor()"
       >
@@ -74,17 +72,16 @@ <h2 class="SummaryTitle">Einstellungen</h2>
         type="color"
         sbbInput
         name="Hintergrundfarbe"
-        style="width: 242px; min-height: 37px"
+        style="width: 242px; min-height: 37px; vertical-align: middle;"
         [(ngModel)]="activeDarkBackgroundColor"
         (change)="colorPicked($event)"
       />
       &nbsp;
       <button
         sbb-secondary-button
-        class="sbb-mt-m"
         [disabled]="isDefaultDarkBackgroundColorActive()"
         title="Hintergrundfarbe auf Standard zurücksetzen"
-        style="transform: translate(0px, -6px);"
+        style="vertical-align: middle;"
         (click)="onResetDarkBackgroundColor()"
       >
         <sbb-icon svgIcon="trash-small"></sbb-icon>