From 7f37b8d1dd2763b8e850ef0a1876ad1eb32112dc Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Tue, 21 Nov 2017 18:17:56 +0300
Subject: [PATCH] unify markup and CSS for icons within options

---
 edit.html     |  8 +++++---
 edit/edit.css | 11 ++++-------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/edit.html b/edit.html
index ae229084..984182e6 100644
--- a/edit.html
+++ b/edit.html
@@ -201,7 +201,9 @@
         <div class="option aligned">
           <label id="keyMap-label" for="editor.keyMap" i18n-text="cm_keyMap"></label>
           <select id="editor.keyMap"></select>
-          <svg id="keyMap-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+          <span class="svg-inline-wrapper">
+            <svg id="keyMap-help" class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
+          </span>
         </div>
         <div class="option aligned">
           <label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
@@ -222,10 +224,10 @@
             <option value="stylelint">Stylelint</option>
             <option value="" i18n-text="genericDisabledLabel"></option>
           </select>
-          <span class="linter-settings" i18n-title="linterConfigTooltip">
+          <span class="svg-inline-wrapper" i18n-title="linterConfigTooltip">
             <svg id="linter-settings" class="svg-icon settings">
               <use xlink:href="#svg-icon-settings"/>
-            </svg>&nbsp;
+            </svg>
           </span>
         </div>
       </details>
diff --git a/edit/edit.css b/edit/edit.css
index 0ec03229..19f3c4b7 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -44,7 +44,7 @@ body {
 .aligned {
   display: table-row;
 }
-.aligned > *:not(svg) {
+.aligned > *:not(.svg-inline-wrapper) {
   display: table-cell;
   margin-top: 0.1rem;
   min-height: 1.4rem;
@@ -83,8 +83,6 @@ input[type="checkbox"] {
   transition: fill .5s;
   width: 16px;
   height: 16px;
-}
-.svg-icon:not(.dismiss) {
   margin-left: 0.2rem;
 }
 h2 .svg-icon, label .svg-icon {
@@ -132,7 +130,7 @@ h2 .svg-icon, label .svg-icon {
   text-align: left;
   padding-left: .25em;
 }
-#options .option > * {
+#options .option.aligned > * {
   padding-right: 0.25rem;
 }
 .set-option-progress {
@@ -400,8 +398,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
   margin-left: 10px;
   font-weight: bold;
 }
-#help-popup .saved-message.show,
-#options .linter-settings {
+#help-popup .saved-message.show {
   display: inline-block;
 }
 
@@ -601,7 +598,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
   #options h2 {
     margin: 0 0 .5em;
   }
-  #options .aligned > *:not(svg) {
+  #options .aligned > *:not(.svg-inline-wrapper) {
     margin: 1px 0 0 0; /* workaround the flowing-padding column bug in webkit */
     padding-right: 0.4rem;
     vertical-align: baseline;