From beee042621a3d3e7f0440aede198897b2bd1d33a Mon Sep 17 00:00:00 2001 From: Lauri Eskola <lauri.eskola@acquia.com> Date: Fri, 5 Jun 2020 16:20:55 +0300 Subject: [PATCH] Issue #3097540 by imganesh, boulaffasae, antoineh, sauravk, KondratievaS, atul4drupal, Neetika K, Devipriya Rajamanickam: The 'M' of Machine name overlaps with the green border around text box --- core/themes/claro/css/components/form.css | 13 +++++++++++++ core/themes/claro/css/components/form.pcss.css | 12 ++++++++++++ 2 files changed, 25 insertions(+) diff --git a/core/themes/claro/css/components/form.css b/core/themes/claro/css/components/form.css index e614b9e8dbcd..9a0e45e0dd8a 100644 --- a/core/themes/claro/css/components/form.css +++ b/core/themes/claro/css/components/form.css @@ -185,6 +185,19 @@ tr .form-item, color: #82828c; } +/* Add some spacing so that the focus ring and suffix don't overlap. */ + +@media screen and (min-width: 601px) { + .form-item__suffix { + margin-left: 0.5rem; /* LTR */ + } + + [dir="rtl"] .form-item__suffix { + margin-right: 0.5rem; + margin-left: 0; + } +} + /** * Form actions. */ diff --git a/core/themes/claro/css/components/form.pcss.css b/core/themes/claro/css/components/form.pcss.css index 9ff2ac3b19f4..390944840de9 100644 --- a/core/themes/claro/css/components/form.pcss.css +++ b/core/themes/claro/css/components/form.pcss.css @@ -114,6 +114,18 @@ tr .form-item, color: var(--input--disabled-fg-color); } +/* Add some spacing so that the focus ring and suffix don't overlap. */ +@media screen and (min-width: 601px) { + .form-item__suffix { + margin-left: var(--space-xs); /* LTR */ + } + + [dir="rtl"] .form-item__suffix { + margin-right: var(--space-xs); + margin-left: 0; + } +} + /** * Form actions. */ -- GitLab