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> <span class="counter badge badge--big"><%= item.counter %></span>
<% end %> <% end %>
<% if item.switch isnt undefined: %> <% 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 %>> <input type="checkbox" id="<%- item.class %>-switch" class="js-switch" <% if item.switch: %>checked<% end %>>
<label for="<%- item.class %>-switch"></label> <label for="<%- item.class %>-switch"></label>
</span> </span>

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

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