mirror of
https://codeberg.org/streams/streams.git
synced 2024-09-19 23:35:12 +00:00
Reworked switch to also display text
This commit is contained in:
parent
68c612c597
commit
42773a1122
7 changed files with 62 additions and 82 deletions
|
@ -6,8 +6,6 @@
|
||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* first-of-type needed to style switches */
|
#sellpage-edit > label {
|
||||||
#sellpage-edit label.mainlabel,
|
|
||||||
#sellpage-edit label:first-of-type {
|
|
||||||
width: 300px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,9 +3,7 @@
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* first-of-type needed to style switches */
|
#group-edit-form > label {
|
||||||
#group-edit-form label.mainlabel,
|
|
||||||
#group-edit-form label:first-of-type {
|
|
||||||
float: left;
|
float: left;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -28,9 +28,7 @@ ul#settings-privacy-macros {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* first-of-type needed to be able to style switches */
|
#settings-permissions-wrapper .field > label {
|
||||||
#settings-permissions-wrapper .field label.mainlabel,
|
|
||||||
#settings-permissions-wrapper .field label:first-of-type {
|
|
||||||
width: 350px;
|
width: 350px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -43,9 +41,7 @@ ul#settings-privacy-macros {
|
||||||
margin-bottom: 45px;
|
margin-bottom: 45px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* first-of-type needed to be able to style switches */
|
#settings-notifications .field > label {
|
||||||
#settings-notifications .field label.mainlabel,
|
|
||||||
#settings-notifications .field label:first-of-type {
|
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
width: 330px;
|
width: 330px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,9 +4,7 @@
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* first-of-type needed to style switches */
|
.thing-label, .field > label, .thing-verb-label, .thing-profile-label{
|
||||||
.field label.mainlabel,
|
|
||||||
.thing-label, .field label:first-of-type, .thing-verb-label, .thing-profile-label{
|
|
||||||
float: left;
|
float: left;
|
||||||
width: 350px;
|
width: 350px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -306,9 +306,7 @@ footer {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* first-of-type needed to style switches */
|
#main-login .field.checkbox > label {
|
||||||
#main-login .field.checkbox label.mainlabel,
|
|
||||||
#main-login .field.checkbox label:first-of-type {
|
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
float: left;
|
float: left;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
@ -376,9 +374,7 @@ footer {
|
||||||
#profile-edit-wrapper .field {
|
#profile-edit-wrapper .field {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
/* first-of-type needed to style switches */
|
#profile-edit-wrapper .field > label {
|
||||||
#profile-edit-wrapper .field label.mainlabel,
|
|
||||||
#profile-edit-wrapper .field label:first-of-type {
|
|
||||||
width: 175px;
|
width: 175px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1245,9 +1241,7 @@ footer {
|
||||||
width: 100%
|
width: 100%
|
||||||
}
|
}
|
||||||
|
|
||||||
/* first-of-type needed to style switches */
|
.field > label {
|
||||||
.field label.mainlabel,
|
|
||||||
.field label:first-of-type {
|
|
||||||
float: left;
|
float: left;
|
||||||
width: 350px;
|
width: 350px;
|
||||||
}
|
}
|
||||||
|
@ -2358,69 +2352,65 @@ aside .nav > li > a:hover, aside .nav > li > a:focus {
|
||||||
border: 1px solid #cccccc;
|
border: 1px solid #cccccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide the placeholder label which is used for styling switches */
|
|
||||||
/* Many places give a width to all labels, so need to specifically set these to 0 width */
|
|
||||||
/* This should probably be moved to core */
|
|
||||||
.field.checkbox label.switchlabel,
|
|
||||||
.field.checkbox label:nth-of-type(2) {
|
|
||||||
width: 0px;
|
|
||||||
margin: 0px;
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Turn checkboxes into switches */
|
/* Turn checkboxes into switches */
|
||||||
/* Doesn't work with IE<9. */
|
.field.checkbox .fieldhelp { vertical-align:top; }
|
||||||
|
.field.checkbox > div {
|
||||||
|
position: relative; width: 70px;
|
||||||
|
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
|
||||||
|
display:inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
.field.checkbox input {
|
.field.checkbox input {
|
||||||
position: absolute;
|
display: none;
|
||||||
margin-left: -9999px;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
.field.checkbox input + label.switchlabel,
|
|
||||||
.field.checkbox input + label:nth-of-type(2) {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
outline: none;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
padding: 2px;
|
|
||||||
width: 60px;
|
|
||||||
height: 24px;
|
|
||||||
background-color: #dddddd;
|
|
||||||
border-radius: 60px;
|
|
||||||
transition: background 0.4s;
|
|
||||||
|
|
||||||
float:left;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.field.checkbox input + label:before,
|
.field.checkbox > div label {
|
||||||
.field.checkbox input + label:after {
|
display: block; overflow: hidden; cursor: pointer;
|
||||||
display: block;
|
border: 2px solid #999999;
|
||||||
position: absolute;
|
border-radius: 20px;
|
||||||
content: "";
|
margin:0px;
|
||||||
}
|
}
|
||||||
.field.checkbox input + label:before {
|
|
||||||
top: 2px;
|
.onoffswitch-inner {
|
||||||
left: 2px;
|
display: block; width: 200%; margin-left: -100%;
|
||||||
bottom: 2px;
|
-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
|
||||||
right: 2px;
|
-o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 30px;
|
|
||||||
transition: background 0.4s;
|
|
||||||
}
|
}
|
||||||
.field.checkbox input + label:after {
|
|
||||||
top: 4px;
|
.onoffswitch-inner:before, .onoffswitch-inner:after {
|
||||||
left: 4px;
|
display: block; float: left; width: 50%; height: 20px; padding: 0; line-height:20px;
|
||||||
bottom: 4px;
|
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
|
||||||
width: 30px;
|
|
||||||
background-color: #dddddd;
|
|
||||||
border-radius: 30px;
|
|
||||||
transition: margin 0.4s, background 0.4s;
|
|
||||||
}
|
}
|
||||||
.field.checkbox input:checked + label {
|
|
||||||
background-color: #8ce196;
|
.onoffswitch-inner:before {
|
||||||
|
content: attr(data-on);
|
||||||
|
padding-left: 10px;
|
||||||
|
background-color: #EEEEEE;
|
||||||
}
|
}
|
||||||
.field.checkbox input:checked + label:after {
|
|
||||||
margin-left: 22px;
|
.onoffswitch-inner:after {
|
||||||
background-color: #8ce196;
|
content: attr(data-off);
|
||||||
|
padding-right: 10px;
|
||||||
|
background-color: #EEEEEE; color: #999999;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onoffswitch-switch {
|
||||||
|
display: block; width: 25px; margin-left: 6px; margin-right: 6px; margin-top:5%; margin-bottom:5%;
|
||||||
|
background: #A1A1A1;
|
||||||
|
border: 2px solid #999999; border-radius: 20px;
|
||||||
|
position: absolute; top: 0; bottom: 0; right: 36px;
|
||||||
|
-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
|
||||||
|
-o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field.checkbox > div > input:checked + label .onoffswitch-inner {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field.checkbox > div > input:checked + label .onoffswitch-switch {
|
||||||
|
right: -2px;
|
||||||
|
background-color: #27A1CA;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class='field checkbox'>
|
<div class='field checkbox'>
|
||||||
<label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label>
|
<label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label>
|
||||||
<input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="1" {{if $field.2}}checked="checked"{{/if}}><label class="switchlabel" for='id_{{$field.0}}'></label><span class='field_help'>{{$field.3}}</span>
|
<div><input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="1" {{if $field.2}}checked="checked"{{/if}}><label class="switchlabel" for='id_{{$field.0}}'> <span class="onoffswitch-inner" data-on='{{if $field.4}}{{$field.4.1}}{{/if}}' data-off='{{if $field.4}}{{$field.4.0}}{{/if}}'></span><span class="onoffswitch-switch"></span> </label></div><span class='field_help'>{{$field.3}}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class='field checkbox'>
|
<div class='field checkbox'>
|
||||||
<label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label>
|
<label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label>
|
||||||
<input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.3}}" {{if $field.2}}checked="true"{{/if}}><label class="switchlabel" for='id_{{$field.0}}'></label><span class='field_help'>{{$field.4}}</span>
|
<div><input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.3}}" {{if $field.2}}checked="checked"{{/if}}><label class="switchlabel" for='id_{{$field.0}}'> <span class="onoffswitch-inner" data-on='{{if $field.5}}{{$field.5.1}}{{/if}}' data-off='{{if $field.5}}{{$field.5.0}}{{/if}}'></span><span class="onoffswitch-switch"></span> </label></div><span class='field_help'>{{$field.4}}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue