mirrors/insomnia
1
0
Fork 0
mirror of https://github.com/Kong/insomnia synced 2024-11-08 06:39:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Styled <select>

Browse Source
This commit is contained in:
Gregory Schier 2017-01-24 14:25:21 -08:00
parent 64146a0392
commit 4ae84d5e1a
2 changed files with 31 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
app/ui/components/settings/SettingsGeneral.js
View File

@ -50,26 +50,29 @@ const SettingsGeneral = ({settings, updateSetting}) => (
</label>
</div>
<div className="form-control form-control--outlined pad-top-sm">
<label>Text Editor Font Size (px)
<input type="number"
min={8}
max={20}
defaultValue={settings.editorFontSize}
onChange={e => updateSetting('editorFontSize', parseInt(e.target.value, 10))}/>
</label>
</div>
<div className="form-row">
<div className="form-control form-control--outlined pad-top-sm">
<label>Text Editor Font Size (px)
<input type="number"
min={8}
max={20}
defaultValue={settings.editorFontSize}
onChange={e => updateSetting('editorFontSize', parseInt(e.target.value, 10))}/>
</label>
</div>
<div className="form-control form-control--outlined pad-top-sm">
<label>Text Editor Key Map
<select defaultValue={settings.editorKeyMap}
onChange={e => updateSetting('editorKeyMap', e.target.value)}>
<option value="default">Default</option>
<option value="vim">Vim</option>
<option value="emacs">Emacs</option>
<option value="sublime">Sublime</option>
</select>
</label>
<div className="form-control form-control--outlined pad-top-sm">
<label>
Text Editor Key Map
<select defaultValue={settings.editorKeyMap}
onChange={e => updateSetting('editorKeyMap', e.target.value)}>
<option value="default">Default</option>
<option value="vim">Vim</option>
<option value="emacs">Emacs</option>
<option value="sublime">Sublime</option>
</select>
</label>
</div>
</div>
<div className="form-control form-control--outlined">

12
app/ui/css/components/forms.less
View File

@ -10,6 +10,7 @@
input,
textarea,
select,
button {
width: 100%;
height: 100%;
@ -57,14 +58,17 @@
&.form-control--outlined,
&.form-control--underlined {
textarea,
input {
input,
select {
height: @line-height-xs;
border: 1px solid @hl-md;
padding: @padding-sm;
padding: 0 @padding-sm;
border-radius: @radius-md;
background-color: @hl-xxs;
}
textarea:focus,
select:focus,
input:focus {
background-color: transparent;
border-color: @hl-lg;
@ -78,6 +82,7 @@
&.form-control--padded {
textarea,
select,
input {
border: 0;
}
@ -85,6 +90,7 @@
&.form-control--underlined {
textarea,
select,
input {
border-radius: 0;
border-top: 0;
@ -181,7 +187,7 @@
}
}
textarea, input, button {
textarea, input, button, select {
box-sizing: border-box;
text-align: left;
font-size: inherit;