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

Inputs: readonly and disabled state

Browse source 
- 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
This commit is contained in:
Felix Niklas 2017-07-21 15:06:07 +02:00
parent 3a9762faa2
commit 7253631f54
2 changed files with 48 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/app/views/layout_ref/inputs.jst.eco
View file

@ -51,6 +51,10 @@
<label for="id1">Name</label> <label for="id1">Name</label>
<input id="id1" class="form-control" type="text" placeholder="Text Input"> <input id="id1" class="form-control" type="text" placeholder="Text Input">
</div> </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"> <div class="input form-group">
<label for="id2">Password</label> <label for="id2">Password</label>
<input id="id2" class="form-control" type="password" value="Password Input"> <input id="id2" class="form-control" type="password" value="Password Input">

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

@ -398,7 +398,8 @@ pre code.hljs {
} }
&.is-disabled, &.is-disabled,
&[disabled] { &[disabled],
&:disabled {
pointer-events: none; pointer-events: none;
cursor: not-allowed; cursor: not-allowed;
opacity: .33; opacity: .33;
@ -1623,6 +1624,24 @@ textarea,
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%);
} }
&.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] { input[type=url] {
@ -1700,13 +1719,6 @@ select.form-control:not([multiple]) {
display: none; display: none;
} }
.form-control[disabled], .form-control.is-disabled {
cursor: not-allowed;
background-color: #fff;
color: #d5d5d5;
opacity: 1;
}
.form-control.form-control--borderless { .form-control.form-control--borderless {
border: none; border: none;
padding: 0; padding: 0;
@ -5487,8 +5499,13 @@ footer {
.newTicket .sidebar { .newTicket .sidebar {
width: 290px; width: 290px;
} }
.newTicket .form-control:not(:focus):not(.focus) { .newTicket .form-control {
border-color: hsl(0,0%,90%); border-color: hsl(0,0%,90%);
&:focus,
&.focus {
border-color: hsl(200,71%,59%);
}
} }
.newTicket .article-form-top { .newTicket .article-form-top {
margin-top: 15px; margin-top: 15px;
@ -6309,7 +6326,9 @@ footer {
cursor: default; cursor: default;
} }
.checkbox.form-group .controls label { .checkbox,
.radio {
&.form-group .controls label {
padding: 2px 0; padding: 2px 0;
font: inherit; font: inherit;
font-size: 13px; font-size: 13px;
@ -6318,6 +6337,7 @@ footer {
text-transform: inherit; text-transform: inherit;
letter-spacing: 0; letter-spacing: 0;
@extend .u-clickable; @extend .u-clickable;
}
} }
.userSearch-label { .userSearch-label {
@ -7191,6 +7211,12 @@ output {
.zammad-switch input { .zammad-switch input {
display: none; display: none;
&[disabled] + label {
cursor: not-allowed;
background: hsl(210,17%,93%);
border-color: hsl(210,10%,85%);
}
&:focus + label { &:focus + label {
transition: none; transition: none;
background: hsl(200,71%,59%); background: hsl(200,71%,59%);