open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

unify markup and CSS for icons within options

Browse Source
This commit is contained in:
tophf 2017-11-21 18:17:56 +03:00
parent aa1ac63c1c
commit 7f37b8d1dd
2 changed files with 9 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
edit.html
View File

@ -201,7 +201,9 @@
<div class="option aligned"> <div class="option aligned">
<label id="keyMap-label" for="editor.keyMap" i18n-text="cm_keyMap"></label> <label id="keyMap-label" for="editor.keyMap" i18n-text="cm_keyMap"></label>
<select id="editor.keyMap"></select> <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>
<div class="option aligned"> <div class="option aligned">
<label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label> <label id="theme-label" for="editor.theme" i18n-text="cm_theme"></label>
@ -222,10 +224,10 @@
<option value="stylelint">Stylelint</option> <option value="stylelint">Stylelint</option>
<option value="" i18n-text="genericDisabledLabel"></option> <option value="" i18n-text="genericDisabledLabel"></option>
</select> </select>
<span class="linter-settings" i18n-title="linterConfigTooltip"> <span class="svg-inline-wrapper" i18n-title="linterConfigTooltip">
<svg id="linter-settings" class="svg-icon settings"> <svg id="linter-settings" class="svg-icon settings">
<use xlink:href="#svg-icon-settings"/> <use xlink:href="#svg-icon-settings"/>
</svg>&nbsp; </svg>
</span> </span>
</div> </div>
</details> </details>

11
edit/edit.css
View File

@ -44,7 +44,7 @@ body {
.aligned { .aligned {
display: table-row; display: table-row;
} }
.aligned > *:not(svg) { .aligned > *:not(.svg-inline-wrapper) {
display: table-cell; display: table-cell;
margin-top: 0.1rem; margin-top: 0.1rem;
min-height: 1.4rem; min-height: 1.4rem;
@ -83,8 +83,6 @@ input[type="checkbox"] {
transition: fill .5s; transition: fill .5s;
width: 16px; width: 16px;
height: 16px; height: 16px;
}
.svg-icon:not(.dismiss) {
margin-left: 0.2rem; margin-left: 0.2rem;
} }
h2 .svg-icon, label .svg-icon { h2 .svg-icon, label .svg-icon {
@ -132,7 +130,7 @@ h2 .svg-icon, label .svg-icon {
text-align: left; text-align: left;
padding-left: .25em; padding-left: .25em;
} }
#options .option > * { #options .option.aligned > * {
padding-right: 0.25rem; padding-right: 0.25rem;
} }
.set-option-progress { .set-option-progress {
@ -400,8 +398,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
margin-left: 10px; margin-left: 10px;
font-weight: bold; font-weight: bold;
} }
#help-popup .saved-message.show, #help-popup .saved-message.show {
#options .linter-settings {
display: inline-block; display: inline-block;
} }
@ -601,7 +598,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
#options h2 { #options h2 {
margin: 0 0 .5em; 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 */ margin: 1px 0 0 0; /* workaround the flowing-padding column bug in webkit */
padding-right: 0.4rem; padding-right: 0.4rem;
vertical-align: baseline; vertical-align: baseline;