imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add check and x icons for validation feedback

Browse source 
Adds icons from the Feather set with the same color as text. Tweaks validation
item spacing to match the design.
This commit is contained in:
J. Ryan Stinnett 2019-04-16 18:49:03 +01:00
parent 87f13cfe55
commit 37e09b5569
4 changed files with 39 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

33
res/css/views/elements/_Validation.scss
View file

@ -14,19 +14,48 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_Validation_description {
margin-bottom: 1em;
}
.mx_Validation_details {
padding-left: 15px;
padding-left: 20px;
margin: 0;
}
.mx_Validation_detail {
position: relative;
font-weight: normal;
list-style: none;
margin-bottom: 0.5em;
&::before {
content: "";
position: absolute;
width: 14px;
height: 14px;
top: 0;
left: -18px;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
// TODO: Check / cross images
&.mx_Validation_valid {
color: $input-valid-border-color;
&::before {
mask-image: url('$(res)/img/feather-customised/check.svg');
background-color: $input-valid-border-color;
}
}
&.mx_Validation_invalid {
color: $input-invalid-border-color;
&::before {
mask-image: url('$(res)/img/feather-customised/x.svg');
background-color: $input-invalid-border-color;
}
}
}