feat: improve ui for color-edit component (#257)

taiga-family · Oct 3, 2023 · b023a6a · b023a6a
1 parent 81d3c1f
commit b023a6a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/libs/tui-editor/components/color-selector/color-edit/color-edit.style.less b/libs/tui-editor/components/color-selector/color-edit/color-edit.style.less
@@ -3,9 +3,14 @@
 }
 
 .t-select {
-    width: 4.875rem;
+    width: 5.875rem;
 }
 
 .t-opacity {
     width: 4.275rem;
 }
+
+.t-rgb,
+.t-opacity {
+    text-align: center;
+}
diff --git a/libs/tui-editor/components/color-selector/color-edit/color-edit.template.html b/libs/tui-editor/components/color-selector/color-edit/color-edit.template.html
@@ -31,6 +31,7 @@
 <ng-template #rgb>
     <tui-input-count
         tuiTextfieldSize="m"
+        class="t-rgb"
         [hideButtons]="true"
         [max]="255"
         [ngModel]="color[0]"
@@ -39,6 +40,7 @@
     ></tui-input-count>
     <tui-input-count
         tuiTextfieldSize="m"
+        class="t-rgb"
         [hideButtons]="true"
         [max]="255"
         [ngModel]="color[1]"
@@ -47,6 +49,7 @@
     ></tui-input-count>
     <tui-input-count
         tuiTextfieldSize="m"
+        class="t-rgb"
         [hideButtons]="true"
         [max]="255"
         [ngModel]="color[2]"