fix(styling): editor clear button should always be centered

ghiscoding · Dec 1, 2022 · 3e9f330 · 3e9f330
1 parent 2c50c47
commit 3e9f330
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 11 deletions.
diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss
@@ -129,11 +129,8 @@ $slick-row-move-plugin-icon:                                url('data:image/svg+
 $slick-editor-input-height:                                 100% !default;
 $slick-editor-input-group-clear-btn-icon-color:             $slick-icon-color !default;
 $slick-editor-input-group-clear-btn-icon:                   url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($slick-editor-input-group-clear-btn-icon-color)}" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg>') !default;
-$slick-editor-input-group-clear-btn-icon-margin-top:        inherit !default;
 $slick-editor-input-group-clear-btn-icon-padding:           1px 6px !default;
 $slick-editor-input-group-clear-btn-icon-size:              calc(#{$slick-icon-font-size} + 2px) !default;
-$slick-editor-input-group-clear-btn-icon-vertical-align:    initial !default;
-$slick-editor-input-group-clear-btn-icon-height:            14px !default;
 $slick-editor-input-group-clear-btn-icon-width:             14px !default;
 $slick-row-mouse-hover-color:                               #ebfaef !default;
 $slick-row-selected-color:                                  #d4f6d7 !default;

diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss
@@ -157,11 +157,8 @@ $slick-row-move-plugin-icon:                                  url('data:image/sv
 $slick-editor-input-height:                                   100% !default;
 $slick-editor-input-group-clear-btn-icon-color:               $slick-icon-color !default;
 $slick-editor-input-group-clear-btn-icon:                     url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($slick-editor-input-group-clear-btn-icon-color)}" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path></svg>') !default;
-$slick-editor-input-group-clear-btn-icon-margin-top:          inherit !default;
 $slick-editor-input-group-clear-btn-icon-padding:             1px 6px !default;
 $slick-editor-input-group-clear-btn-icon-size:                calc(#{$slick-icon-font-size} + 2px) !default;
-$slick-editor-input-group-clear-btn-icon-vertical-align:      initial !default;
-$slick-editor-input-group-clear-btn-icon-height:              14px !default;
 $slick-editor-input-group-clear-btn-icon-width:               14px !default;
 $slick-editor-focus-box-shadow:                               0 0 3px $slick-primary-color !default;
 $slick-editor-modal-container-radius:                         var(--lwc-borderRadiusMedium, 0.25rem) !default;

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -425,12 +425,10 @@ $slick-editor-input-height:                                 24px !default;
 $slick-editor-focus-border-color:                           $slick-input-focus-border-color !default;
 $slick-editor-focus-box-shadow:                             $slick-input-focus-box-shadow !default;
 $slick-editor-input-group-clear-btn-icon:                   "\f00d" !default;
-$slick-editor-input-group-clear-btn-icon-margin-top:        -14px !default;
 $slick-editor-input-group-clear-btn-icon-padding:           6px !default;
 $slick-editor-input-group-clear-btn-icon-size:              inherit !default;
-$slick-editor-input-group-clear-btn-icon-height:            initial !default;
+$slick-editor-input-group-clear-btn-icon-height:            auto !default;
 $slick-editor-input-group-clear-btn-icon-width:             initial !default;
-$slick-editor-input-group-clear-btn-icon-vertical-align:    middle !default;
 $slick-date-editor-input-padding:                           0 0 0 2px !default;
 $slick-date-editor-focus-border-color:                      $slick-input-focus-border-color !default;
 $slick-date-editor-focus-box-shadow:                        $slick-input-focus-box-shadow !default;

diff --git a/packages/common/src/styles/slick-editors.scss b/packages/common/src/styles/slick-editors.scss
@@ -83,15 +83,17 @@
         border-bottom-right-radius: var(--slick-text-editor-border-radius, $slick-text-editor-border-radius);
         cursor: pointer;
         height: var(--slick-date-editor-height, $slick-date-editor-height);
+        &.icon-clear {
+          display: flex;
+          align-items: center;
+        }
         &.icon-clear:before {
           font-family: var(--slick-icon-font-family, $slick-icon-font-family);
           font-size: var(--slick-editor-input-group-clear-btn-icon-size, $slick-editor-input-group-clear-btn-icon-size);
           content: var(--slick-editor-input-group-clear-btn-icon, $slick-editor-input-group-clear-btn-icon);
-          vertical-align: var(--slick-editor-input-group-clear-btn-icon-vertical-align, $slick-editor-input-group-clear-btn-icon-vertical-align);
           display: inline-block;
           height: var(--slick-editor-input-group-clear-btn-icon-height, $slick-editor-input-group-clear-btn-icon-height);
           width: var(--slick-editor-input-group-clear-btn-icon-width, $slick-editor-input-group-clear-btn-icon-width);
-          margin-top: var(--slick-editor-input-group-clear-btn-icon-margin-top, $slick-editor-input-group-clear-btn-icon-margin-top);
         }
       }
     }