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

feature/dark-mode #13

Merged
manuel merged 5 commits from feature/dark-mode into main 2024-01-28 03:10:41 +01:00
Conversation 0 Commits 5 Files changed 11 +21 -24
3 changed files with 21 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit c212afee39 - Show all commits

6
src/app/converter-selector/converter-selector.component.html
View file

@ -1,9 +1,9 @@
<div [ngClass]="{selectwrapper: true, error: step.error}"> <div [ngClass]="{select_wrapper: true, error: step.error}">
<div class="arrow_box"> <div class="arrow_box">
<select class="select" (change)="convert($event)"> <select (change)="convert($event)">
<option id="undefined">Select conversion ...</option> <option id="undefined">Select conversion ...</option>
@for (c of converters; track c.getId()) { @for (c of converters; track c.getId()) {
<option class="option" id="{{c.getId()}}">{{ c.getDisplayname() }}</option> <option id="{{c.getId()}}">{{ c.getDisplayname() }}</option>
} }
</select> </select>
</div> </div>

24
src/app/converter-selector/converter-selector.component.scss
View file

@ -1,4 +1,4 @@
.selectwrapper { .select_wrapper {
margin: 0 0 1em 0; margin: 0 0 1em 0;
padding: 0; padding: 0;
text-align: center; text-align: center;
@ -19,36 +19,36 @@
} }
} }
.select { select {
background-color: #eee; background-color: #eee;
border: none; border: none;
color: #111; color: #111;
font-family: "ABeeZee", sans-serif; font-family: "ABeeZee", sans-serif;
margin: 0; margin: 0;
padding: 0.5em; padding: 0.5em;
transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
&:focus, &:hover { &:focus, &:hover {
background-color: #fff; background-color: #fff;
color: #000; color: #000;
} }
transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
} }
.arrow_box { .arrow_box {
position: relative;
border: 1px solid transparent; border: 1px solid transparent;
position: relative;
transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
&:after, &:before { &:after, &:before {
top: 100%;
left: 50%;
border: solid transparent; border: solid transparent;
content: " "; content: " ";
height: 0; height: 0;
width: 0; left: 50%;
position: absolute;
pointer-events: none; pointer-events: none;
position: absolute;
top: 100%;
transition: background-color ease-in-out 200ms, border ease-in-out 200ms; transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
width: 0;
} }
&:after { &:after {
@ -63,13 +63,11 @@
margin-left: calc(-1em - 1px); margin-left: calc(-1em - 1px);
} }
&:has(>.select:focus, >.select:hover):after { &:has(>select:focus, >select:hover):after {
border-top-color: #fff; border-top-color: #fff;
} }
.selectwrapper > & { .select_wrapper > & {
display: inline-block; display: inline-block;
} }
transition: background-color ease-in-out 200ms, border ease-in-out 200ms;
} }

15
src/app/text-input-field/text-input-field.component.scss
View file

@ -1,22 +1,22 @@
:host { :host {
display: block;
border: none; border: none;
display: block;
margin: 0 0 1em 0; margin: 0 0 1em 0;
padding: 0 1em 0 0; padding: 0 1em 0 0;
position: relative; position: relative;
&:after { &:after {
top: 100%;
left: 50%;
border: 1em solid transparent; border: 1em solid transparent;
border-top-color: #eee; border-top-color: #eee;
content: " "; content: " ";
height: 0; height: 0;
width: 0; left: 50%;
position: absolute;
pointer-events: none;
margin-left: -1em; margin-left: -1em;
pointer-events: none;
position: absolute;
top: 100%;
transition: border-top-color ease-in-out 200ms; transition: border-top-color ease-in-out 200ms;
width: 0;
} }
&:has(>textarea:focus, >textarea:hover):after { &:has(>textarea:focus, >textarea:hover):after {
@ -33,12 +33,11 @@ textarea {
margin: 0; margin: 0;
padding: 0.5em; padding: 0.5em;
resize: vertical; resize: vertical;
transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
width: 100%; width: 100%;
&:focus, &:hover { &:focus, &:hover {
background-color: #fff; background-color: #fff;
color: #000; color: #000;
} }
transition: background-color ease-in-out 200ms, color ease-in-out 200ms;
} }