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

code cosmetics: simplify onoffswitch

Browse Source
This commit is contained in:
tophf 2017-04-29 20:05:42 +03:00
parent ee86ef3037
commit cb79b3561c
2 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
options/index.css
View File

@ -201,11 +201,11 @@ sup {
-ms-user-select: none; -ms-user-select: none;
} }
.onoffswitch-checkbox { .onoffswitch input {
display: none; display: none;
} }
.onoffswitch-label { .onoffswitch span {
display: block; display: block;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
@ -218,7 +218,7 @@ sup {
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1); box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1);
} }
.onoffswitch-label:before { .onoffswitch span:before {
content: ""; content: "";
display: block; display: block;
width: 18px; width: 18px;
@ -232,19 +232,19 @@ sup {
box-shadow: 0 3px 13px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 3px 13px 0 rgba(0, 0, 0, 0.4);
} }
.onoffswitch-checkbox:checked + .onoffswitch-label { .onoffswitch input:checked + span {
background-color: #CAEBE3; background-color: #CAEBE3;
} }
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before { .onoffswitch input:checked + span, .onoffswitch input:checked + span:before {
border-color: #CAEBE3; border-color: #CAEBE3;
} }
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { .onoffswitch input:checked + span .onoffswitch-inner {
margin-left: 0; margin-left: 0;
} }
.onoffswitch-checkbox:checked + .onoffswitch-label:before { .onoffswitch input:checked + span:before {
right: 0; right: 0;
background-color: #04BA9F; background-color: #04BA9F;
box-shadow: 3px 6px 18px 0 rgba(0, 0, 0, 0.2); box-shadow: 3px 6px 18px 0 rgba(0, 0, 0, 0.2);

16
options/index.html
View File

@ -19,8 +19,8 @@
<label> <label>
<span i18n-text="prefShowBadge"></span> <span i18n-text="prefShowBadge"></span>
<span class="onoffswitch"> <span class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox" id="show-badge"> <input type="checkbox" id="show-badge">
<span class="onoffswitch-label"></span> <span></span>
</span> </span>
</label> </label>
<label> <label>
@ -44,8 +44,8 @@
<label> <label>
<span i18n-text="popupStylesFirst"></span> <span i18n-text="popupStylesFirst"></span>
<span class="onoffswitch"> <span class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox" id="popup.stylesFirst"> <input type="checkbox" id="popup.stylesFirst">
<span class="onoffswitch-label" for="popup.stylesFirst"></span> <span></span>
</span> </span>
</label> </label>
</div> </div>
@ -67,15 +67,15 @@
<label> <label>
<span i18n-text="optionsAdvancedExposeIframes"> <sup>2</sup></span> <span i18n-text="optionsAdvancedExposeIframes"> <sup>2</sup></span>
<span class="onoffswitch"> <span class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox" id="exposeIframes"> <input type="checkbox" id="exposeIframes">
<span class="onoffswitch-label" for="exposeIframes"></span> <span></span>
</span> </span>
</label> </label>
<label> <label>
<span i18n-text="optionsAdvancedContextDelete"></span> <span i18n-text="optionsAdvancedContextDelete"></span>
<span class="onoffswitch"> <span class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox" id="editor.contextDelete"> <input type="checkbox" id="editor.contextDelete">
<span class="onoffswitch-label" for="editor.contextDelete"></span> <span></span>
</span> </span>
</label> </label>
</div> </div>