diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss index 6b634a2ab..1b1270e10 100644 --- 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,') !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 index 4ad3dcfbf..e9d695779 100644 --- 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,') !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 index c2a98ba7f..c7ec6134f 100644 --- 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 index 6ffbbf20c..69a8062bd 100644 --- 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); } } }