Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add multiselect and switch to input layoutref

Browse source
This commit is contained in:
Felix Niklas 2015-07-20 12:57:03 +02:00
parent 92caa6402e
commit c447cd5f1f
2 changed files with 89 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
app/assets/javascripts/app/views/layout_ref/inputs.jst.eco
View file

@ -81,5 +81,31 @@
</label>
</div>
</div>
<h2>Multiselect</h2>
<div class="radio form-group">
<div class="controls">
<label>
<input type="radio" name="options"> Option A
</label>
<label>
<input type="radio" name="options" checked> Option B
</label>
<label>
<input type="radio" name="options"> Option C
</label>
</div>
</div>
<h2>Switch</h2>
<div class="switch form-group">
<div class="controls">
<div class="zammad-switch">
<input type="checkbox" id="c">
<label for="c"></label>
</div>
</div>
</div>
</div>
</div>

63
app/assets/stylesheets/zammad.css.scss
View file

@ -5387,6 +5387,69 @@ output {
}
}
.zammad-switch label {
position: relative;
width: 48px;
height: 30px;
border-radius: 15px;
outline: none;
cursor: pointer;
background: hsl(0,0%,90%);
transition: background 400ms;
}
.zammad-switch input {
display: none;
}
.zammad-switch input:checked + label {
background: hsl(200,71%,59%);
}
.zammad-switch input:focus + label {
transition: none;
background: hsl(200,71%,59%);
box-shadow: 0 0 0 3px hsl(201,62%,90%);
}
.zammad-switch label:after,
.zammad-switch label:before {
content: "";
position: absolute;
transition: 200ms;
}
.zammad-switch label:before {
width: 46px;
height: 28px;
left: 1px;
top: 1px;
border-radius: inherit;
background: hsl(210,17%,99%);
transform-origin: right;
}
.zammad-switch input:checked + label:before {
transform: scaleX(0);
opacity: 0;
}
.zammad-switch label:after {
width: 28px;
height: 28px;
border-radius: 100%;
left: 1px;
top: 1px;
box-shadow:
0 0 0 1px rgba(0,0,0,.05),
0 1px 3px rgba(0,0,0,.2);
background: white;
}
.zammad-switch input:checked + label:after {
transform: translateX(18px);
}
.horizontal-filter-text {
margin-right: 5px;
}