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

rewrite zammad-swatch to fit in line with other inputs

Browse source
This commit is contained in:
Felix Niklas 2015-11-24 13:07:39 +01:00
parent a7fb55b43d
commit d3605697df
2 changed files with 47 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/app/views/navigation/menu.jst.eco
View file

@ -30,7 +30,7 @@
<span class="counter badge badge--big"><%= item.counter %></span>
<% end %>
<% if item.switch isnt undefined: %>
<span class="zammad-switch zammad-switch--dark zammad-switch--small">
<span class="zammad-switch zammad-switch--dark zammad-switch--small zammad-switch--green">
<input type="checkbox" id="<%- item.class %>-switch" class="js-switch" <% if item.switch: %>checked<% end %>>
<label for="<%- item.class %>-switch"></label>
</span>

81
app/assets/stylesheets/zammad.scss
View file

@ -1383,6 +1383,12 @@ textarea,
&.form-control--multiline {
height: auto;
}
&:focus,
&.focus {
border-color: hsl(200,71%,59%);
box-shadow: 0 0 0 3px hsl(201,62%,90%);
}
}
input[type=url] {
@ -1417,8 +1423,6 @@ input.time.time--12 {
width: 7.5ch;
}
.form-control:focus,
.form-control.focus,
.tokenfield.focus {
border-color: hsl(200,71%,59%);
box-shadow: 0 0 0 3px hsl(201,62%,90%);
@ -6451,10 +6455,10 @@ output {
}
.zammad-switch {
overflow: hidden;
width: 50px;
height: 30px;
border-radius: 15px;
overflow: hidden;
&.zammad-switch--small {
width: 40px;
@ -6473,9 +6477,14 @@ output {
background: hsl(234,10%,19%);
}
}
&.zammad-switch--green input:checked + label {
background: $supergood-color;
}
}
.zammad-switch label {
margin: 0;
position: relative;
width: 100%;
height: 100%;
@ -6483,44 +6492,46 @@ output {
outline: none;
cursor: pointer;
background: white;
box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;
user-select: none;
transition: background 200ms;
&:after {
content: "";
position: absolute;
transition: transform 200ms;
width: calc(60% - 2px);
height: calc(100% - 2px);
border-radius: inherit;
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 {
display: none;
&:focus + label {
transition: none;
background: hsl(200,71%,59%);
box-shadow: 0 0 0 3px hsl(201,62%,90%);
}
&:checked + label {
background: hsl(200,71%,59%);
}
&:checked + label:after {
transform: translateX(70%);
}
}
.zammad-switch input:checked + label {
background: $supergood-color;
transition: none;
}
.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 {
content: "";
position: absolute;
transition: transform 200ms;
}
.zammad-switch label:after {
width: calc(60% - 2px);
height: calc(100% - 2px);
border-radius: inherit;
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(70%);
.controls .zammad-switch {
margin-top: 10px;
}
.horizontal-filter-text {