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>
<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">

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

@ -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%);