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

🎨 Styled input checkbox

Browse Source
This commit is contained in:
Liyas Thomas
2019-08-28 10:47:31 +05:30
parent ae2d996754
commit 1652381444
2 changed files with 29 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
assets/css/styles.scss
View File

@@ -187,11 +187,32 @@ option {
} }
input[type="checkbox"] { input[type="checkbox"] {
width: initial; display: none;
&, &,
& + label { & + label {
vertical-align: middle; vertical-align: middle;
cursor: pointer;
&:before {
content: "\2714";
border: 2px solid var(--fg-color);
border-radius: 4px;
display: inline-flex;
height: 16px;
width: 16px;
align-items: center;
justify-content: center;
margin: 8px 8px 8px 0;
color: transparent;
transition: .2s;
}
}
&:checked + label:before {
background-color: var(--ac-color);
border-color: var(--ac-color);
color: var(--act-color);
} }
} }

9
pages/settings.vue
View File

@@ -19,10 +19,13 @@
<swatch :color="entry.color" :name="entry.name" :class="{ vibrant: entry.vibrant }" :active="settings.THEME_COLOR === entry.color.toUpperCase()" /> <swatch :color="entry.color" :name="entry.name" :class="{ vibrant: entry.vibrant }" :active="settings.THEME_COLOR === entry.color.toUpperCase()" />
</span> </span>
</div> </div>
<p> </li>
</ul>
<ul>
<li>
<h3 class="title">Frames</h3>
<input id="disableFrameColors" type="checkbox" :checked="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')"> <input id="disableFrameColors" type="checkbox" :checked="!settings.DISABLE_FRAME_COLORS" @change="toggleSetting('DISABLE_FRAME_COLORS')">
<label for="disableFrameColors">Enable multi-colored frames</label> <label for="disableFrameColors">Enable multi-color</label>
</p>
</li> </li>
</ul> </ul>
</pw-section> </pw-section>