Inputs: readonly and disabled state

- 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/assets/javascripts/app/views/layout_ref/inputs.jst.eco

@@ -51,6 +51,10 @@
       <label for="id1">Name</label>
       <input id="id1" class="form-control" type="text" placeholder="Text Input">
     </div>
+    <div class="input form-group">
+      <label for="id1">Name (readonly)</label>
+      <input id="id1" class="form-control" type="text" placeholder="Text Input" readonly value="Sandor Clegane">
+    </div>
     <div class="input form-group">
       <label for="id2">Password</label>
       <input id="id2" class="form-control" type="password" value="Password Input">

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,7 +6326,9 @@ footer {
   cursor: default;
 }
 
-.checkbox.form-group .controls label {
+.checkbox,
+.radio {
+  &.form-group .controls label {
     padding: 2px 0;
     font: inherit;
     font-size: 13px;
@@ -6318,6 +6337,7 @@ footer {
     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%);