From 7253631f54d9fc0d08163b7ffe220d816310df65 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Fri, 21 Jul 2017 15:06:07 +0200 Subject: [PATCH] Inputs: readonly and disabled state MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - inputs and textareas will get a dark background as an indicator when they’re set to readonly - checkboxes and radios can’t be set to readonly (html limitation) - added disabled support for the zammad-switch --- .../app/views/layout_ref/inputs.jst.eco | 4 ++ app/assets/stylesheets/zammad.scss | 62 +++++++++++++------ 2 files changed, 48 insertions(+), 18 deletions(-) diff --git a/app/assets/javascripts/app/views/layout_ref/inputs.jst.eco b/app/assets/javascripts/app/views/layout_ref/inputs.jst.eco index 7fc1e34c6..50ff41cc4 100644 --- a/app/assets/javascripts/app/views/layout_ref/inputs.jst.eco +++ b/app/assets/javascripts/app/views/layout_ref/inputs.jst.eco @@ -51,6 +51,10 @@ +
+ + +
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss index 3ab10f4d1..e4557822d 100644 --- a/app/assets/stylesheets/zammad.scss +++ b/app/assets/stylesheets/zammad.scss @@ -398,7 +398,8 @@ pre code.hljs { } &.is-disabled, - &[disabled] { + &[disabled], + &:disabled { pointer-events: none; cursor: not-allowed; opacity: .33; @@ -1623,6 +1624,24 @@ textarea, border-color: hsl(200,71%,59%); box-shadow: 0 0 0 3px hsl(201,62%,90%); } + + &.is-disabled, // .is-disabled should not be used - legacy support + &[disabled], + &[readonly] { + background: hsl(210,17%,93%); + border-color: hsl(210,10%,85%); + + &:focus, + &.focus { + border-color: hsl(200,71%,59%); + } + } + + &.is-disabled, // .is-disabled should not be used + &[disabled] { + cursor: not-allowed; + opacity: 1; + } } input[type=url] { @@ -1700,13 +1719,6 @@ select.form-control:not([multiple]) { display: none; } -.form-control[disabled], .form-control.is-disabled { - cursor: not-allowed; - background-color: #fff; - color: #d5d5d5; - opacity: 1; -} - .form-control.form-control--borderless { border: none; padding: 0; @@ -5487,8 +5499,13 @@ footer { .newTicket .sidebar { width: 290px; } - .newTicket .form-control:not(:focus):not(.focus) { + .newTicket .form-control { border-color: hsl(0,0%,90%); + + &:focus, + &.focus { + border-color: hsl(200,71%,59%); + } } .newTicket .article-form-top { margin-top: 15px; @@ -6309,15 +6326,18 @@ footer { cursor: default; } -.checkbox.form-group .controls label { - padding: 2px 0; - font: inherit; - font-size: 13px; - margin-bottom: 0; - color: inherit; - text-transform: inherit; - letter-spacing: 0; - @extend .u-clickable; +.checkbox, +.radio { + &.form-group .controls label { + padding: 2px 0; + font: inherit; + font-size: 13px; + margin-bottom: 0; + color: inherit; + text-transform: inherit; + letter-spacing: 0; + @extend .u-clickable; + } } .userSearch-label { @@ -7191,6 +7211,12 @@ output { .zammad-switch input { display: none; + &[disabled] + label { + cursor: not-allowed; + background: hsl(210,17%,93%); + border-color: hsl(210,10%,85%); + } + &:focus + label { transition: none; background: hsl(200,71%,59%);