various form css fixes

This commit is contained in:
Mario Vavti 2017-03-31 16:13:58 +02:00
parent 572a04b40a
commit 1bcee2f11c
10 changed files with 38 additions and 42 deletions

View File

@ -72,6 +72,7 @@ code {
white-space: normal;
}
/* Bootstrap assumes that checkboxes are on the left of labels, while it's usually the opposite in Red */
.field.checkbox input[type="checkbox"] { margin-left: 0px; }
.field.checkbox label { padding-left: 0px; font-weight: 700}
.form-group label {
font-weight: bold;
padding-left: 0px;
}

View File

@ -117,7 +117,7 @@ a:focus,
}
input, optgroup, select, textarea {
color: $font_colour;
font-size: 0.9rem !important;
resize: vertical;
}
@ -1059,8 +1059,6 @@ img.mail-conv-sender-photo {
height: $reply_photo;
}
.wall-item-ago,
.dropdown-sub-text {
color: #777;
@ -1480,17 +1478,17 @@ dl.bb-dl > dd > li {
/* Turn checkboxes into switches */
.field.checkbox > div {
.form-group.checkbox > div {
position: relative; width: 60px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
display:inline-block;
}
.field.checkbox input {
.form-group.checkbox input {
display: none;
}
.field.checkbox > div label {
.form-group.checkbox > div label {
display: block; overflow: hidden; cursor: pointer;
border: 1px solid #ccc;
border-radius: 4px;
@ -1500,11 +1498,11 @@ dl.bb-dl > dd > li {
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.field.checkbox:hover label {
.form-group.checkbox:hover label {
color: $link_colour;
}
.field.checkbox:hover > div label {
.form-group.checkbox:hover > div label {
border-color: $link_colour;
}
@ -1543,11 +1541,11 @@ dl.bb-dl > dd > li {
-o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
}
.field.checkbox > div > input:checked + label .onoffswitch-inner {
.form-group.checkbox > div > input:checked + label .onoffswitch-inner {
margin-left: 0px;
}
.field.checkbox > div > input:checked + label .onoffswitch-switch {
.form-group.checkbox > div > input:checked + label .onoffswitch-switch {
right: 0px;
background-color: #0275d8;
}

View File

@ -32,7 +32,7 @@
<div id="acl-wrapper">
<div id="acl-list">
<input class="form-control" type="text" id="acl-search" placeholder="&#xf002; {{$search}}">
<div class="p-2 dropdown-sub-text">{{$showlimitedDesc}}</div>
<small class="text-muted">{{$showlimitedDesc}}</small>
<div id="acl-list-content"></div>
</div>
</div>

View File

@ -1,6 +1,5 @@
<div id="{{$field.0}}_container" class="form-group field checkbox">
<div id="{{$field.0}}_container" class="clearfix form-group checkbox">
<label for="id_{{$field.0}}">{{$field.1}}</label>
<div class="pull-right"><input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="1" {{if $field.2}}checked="checked"{{/if}} {{if $field.5}}{{$field.5}}{{/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="help-block">{{$field.3}}</span>
<div class="float-right"><input type="checkbox" name='{{$field.0}}' id='id_{{$field.0}}' value="1" {{if $field.2}}checked="checked"{{/if}} {{if $field.5}}{{$field.5}}{{/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>
<small class="form-text text-muted">{{$field.3}}</small>
</div>
<div class="clear"></div>

View File

@ -1,6 +1,5 @@
<div id="id_{{$field.0}}_wrapper" class='form-group field input'>
<label for='id_{{$field.0}}' id='label_{{$field.0}}'>{{$field.1}}{{if $field.4}}<span class="required"> {{$field.4}}</span>{{/if}}</label>
<input class="form-control" name='{{$field.0}}' id='id_{{$field.0}}' type="text" value="{{$field.2}}"{{if $field.5}} {{$field.5}}{{/if}}>
<span id='help_{{$field.0}}' class='help-block'>{{$field.3}}</span>
<div class="clear"></div>
<div id="id_{{$field.0}}_wrapper" class="form-group">
<label for="id_{{$field.0}}" id="label_{{$field.0}}">{{$field.1}}{{if $field.4}}<span class="required"> {{$field.4}}</span>{{/if}}</label>
<input class="form-control" name="{{$field.0}}" id="id_{{$field.0}}" type="text" value="{{$field.2}}"{{if $field.5}} {{$field.5}}{{/if}}>
<small id="help_{{$field.0}}" class="form-text text-muted">{{$field.3}}</small>
</div>

View File

@ -1,6 +1,5 @@
<div class="form-group field checkbox">
<label for='id_{{$field.0}}'>{{$field.1}}</label>
<div class="pull-right"><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='help-block'>{{$field.4}}</span>
<div class="clearfix form-group checkbox">
<label for="id_{{$field.0}}">{{$field.1}}</label>
<div class="pull-right"><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>
<small class="form-text text-muted">{{$field.4}}</small>
</div>
<div class="clear"></div>

View File

@ -1,5 +1,5 @@
<div class='form-group field password'>
<label for='id_{{$field.0}}'>{{$field.1}}</label>
<input class="form-control" type='password' name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.2}}"{{if $field.5}} {{$field.5}}{{/if}}>{{if $field.4}} <span class="required">{{$field.4}}</span> {{/if}}
<span id="help_{{$field.0}}" class="help-block">{{$field.3}}</span>
<div class="form-group">
<label for="id_{{$field.0}}">{{$field.1}}</label>
<input class="form-control" type="password" name="{{$field.0}}" id="id_{{$field.0}}" value="{{$field.2}}"{{if $field.5}} {{$field.5}}{{/if}}>{{if $field.4}} <span class="required">{{$field.4}}</span> {{/if}}
<small id="help_{{$field.0}}" class="form-text text-muted">{{$field.3}}</small>
</div>

View File

@ -1,7 +1,7 @@
<div class='form-group field select'>
<label for='id_{{$field.0}}'>{{$field.1}}</label>
<select class="form-control" name='{{$field.0}}' id='id_{{$field.0}}'>
<div class="form-group">
<label for="id_{{$field.0}}">{{$field.1}}</label>
<select class="form-control" name="{{$field.0}}" id="id_{{$field.0}}">
{{foreach $field.4 as $opt=>$val}}<option value="{{$opt}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>{{/foreach}}
</select>
<span class='help-block'>{{$field.3}}</span>
<small class="form-text text-muted">{{$field.3}}</small>
</div>

View File

@ -1,5 +1,5 @@
<div class='form-group field textarea'>
<label for='id_{{$field.0}}'>{{$field.1}}</label>
<textarea class="form-control" name='{{$field.0}}' id='id_{{$field.0}}' {{if $field.4}}{{$field.4}}{{/if}} >{{$field.2}}</textarea>
<span class='help-block'>{{$field.3}}</span>
<div class="form-group">
<label for="id_{{$field.0}}">{{$field.1}}</label>
<textarea class="form-control" name="{{$field.0}}" id="id_{{$field.0}}" {{if $field.4}}{{$field.4}}{{/if}} >{{$field.2}}</textarea>
<small class="form-text text-muted">{{$field.3}}</small>
</div>

View File

@ -1,4 +1,4 @@
<div class='field yesno'>
<div class='clearfix form-group'>
<label class="mainlabel" for='id_{{$field.0}}'>{{$field.1}}</label>
<div class='onoff' id="id_{{$field.0}}_onoff">
<input type="hidden" name='{{$field.0}}' id='id_{{$field.0}}' value="{{$field.2}}">
@ -9,5 +9,5 @@
{{if $field.4}}{{$field.4.1}}{{else}}ON{{/if}}
</a>
</div>
<span class='field_help'>{{$field.3}}</span>
<small class='form-text text-muted'>{{$field.3}}</small>
</div>