diff --git a/app/assets/javascripts/app/views/navigation/menu.jst.eco b/app/assets/javascripts/app/views/navigation/menu.jst.eco index e78b7f188..d29a54bda 100644 --- a/app/assets/javascripts/app/views/navigation/menu.jst.eco +++ b/app/assets/javascripts/app/views/navigation/menu.jst.eco @@ -30,7 +30,7 @@ <%= item.counter %> <% end %> <% if item.switch isnt undefined: %> - + checked<% end %>> diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index 03aec776d..b0c88236a 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -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 {