manuel/converter
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge branch '5-style-the-error-message' into 'develop'

Browse source 
Added simple styling to the error message and the corresponding select element.

Closes #5

See merge request !15
This commit is contained in:
Manuel Friedli 2017-03-15 01:16:27 +01:00
commit f3b5a7580a
2 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/app/app.component.css
View file

@ -11,7 +11,7 @@
.arrow_box { .arrow_box {
position: relative; position: relative;
background: #fff; background: #fff;
border: 1px solid #ddd; border: 1px solid #aaa;
} }
.arrow_box:focus { .arrow_box:focus {
@ -41,8 +41,8 @@
} }
.arrow_box:before { .arrow_box:before {
border-color: rgba(221, 221, 221, 0); border-color: rgba(170, 170, 170, 0);
border-top-color: #ddd; border-top-color: #aaa;
border-width: calc(1em + 1px); border-width: calc(1em + 1px);
margin-left: calc(-1em - 1px); margin-left: calc(-1em - 1px);
} }
@ -100,6 +100,19 @@
/* font-family: "ABeeZee", sans-serif;*/ /* font-family: "ABeeZee", sans-serif;*/
} }
.errormessage { .selectwrapper.error > .arrow_box {
/* font-family: "ABeeZee", sans-serif;*/ border-color: red;
}
.selectwrapper.error > .arrow_box:before {
border-top-color: red;
}
.selectwrapper.error select {
color: red;
}
.errormessage {
color: red;
text-align: center;
} }

2
src/app/app.component.html
View file

@ -3,7 +3,7 @@
<textarea class="textinput" (keyup)="update(step)" placeholder="Please enter your input ..." <textarea class="textinput" (keyup)="update(step)" placeholder="Please enter your input ..."
[(ngModel)]="step.content">{{step.content}}</textarea> [(ngModel)]="step.content">{{step.content}}</textarea>
</div> </div>
<div class="selectwrapper"> <div [ngClass]="{selectwrapper: true, error: step.error}">
<div class="arrow_box"> <div class="arrow_box">
<select class="select" (change)="convert(step, $event)"> <select class="select" (change)="convert(step, $event)">
<option id="undefined">Select conversion ...</option> <option id="undefined">Select conversion ...</option>