btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

♿ State focus on input

Browse Source
This commit is contained in:
Liyas Thomas
2019-09-04 15:52:16 +05:30
parent 0a91fb66e3
commit e95a4a9782
4 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
assets/css/styles.scss
View File

@@ -212,12 +212,19 @@ pre {
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
font-family: monospace; font-family: monospace;
transition: all 0.2s ease-in-out;
} }
select, select,
input, input,
option { option {
height: 41px; height: 41px;
&:not([readonly]):hover,
&:not([readonly]):focus {
background-color: var(--bg-color);
box-shadow: inset 0 0 0 2px var(--ac-color);
}
} }
input[type="checkbox"] { input[type="checkbox"] {

5
components/toggle.vue
View File

@@ -25,11 +25,13 @@
div { div {
display: inline-block; display: inline-block;
cursor: pointer;
} }
label.caption { label.caption {
margin-left: 4px; margin-left: 4px;
vertical-align: middle; vertical-align: middle;
cursor: pointer;
} }
label.toggle { label.toggle {
@@ -46,6 +48,7 @@
box-sizing: initial; box-sizing: initial;
padding: 0; padding: 0;
margin: 10px 5px; margin: 10px 5px;
cursor: pointer;
.handle { .handle {
position: absolute; position: absolute;
@@ -62,8 +65,6 @@
pointer-events: none; pointer-events: none;
transition: $transition; transition: $transition;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
} }
&.on { &.on {

8
pages/settings.vue
View File

@@ -24,9 +24,11 @@
<ul> <ul>
<li> <li>
<h3 class="title">Frames</h3> <h3 class="title">Frames</h3>
<pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')"> <span>
Multi-color {{ settings.DISABLE_FRAME_COLORS ? "disabled" : "enabled" }} <pw-toggle :on="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
</pw-toggle> Multi-color {{ settings.DISABLE_FRAME_COLORS ? "disabled" : "enabled" }}
</pw-toggle>
</span>
</li> </li>
</ul> </ul>
</pw-section> </pw-section>

2
pages/websocket.vue
View File

@@ -27,7 +27,7 @@
<ul> <ul>
<li> <li>
<label for="message">Message</label> <label for="message">Message</label>
<input id="message" name="message" type="text" v-model="communication.input" :disabled="!connectionState" @keyup.enter="connectionState ? sendMessage() : null"> <input id="message" name="message" type="text" v-model="communication.input" :readonly="!connectionState" @keyup.enter="connectionState ? sendMessage() : null">
</li> </li>
<li> <li>
<label for="send" class="hide-on-small-screen">&nbsp;</label> <label for="send" class="hide-on-small-screen">&nbsp;</label>