Move styles in keypress-tab.component from html to scss.

This commit is contained in:
József Farkas
2016-08-08 21:48:22 +02:00
parent b0b76fe1c2
commit ffce89023c
2 changed files with 28 additions and 7 deletions

View File

@@ -1,12 +1,12 @@
<div class="scancode-options" style="margin-bottom:10px; margin-top:2px">
<b class="setting-label" style="position:relative; top:2px;">Scancode:</b>
<div class="scancode-options">
<b class="setting-label">Scancode:</b>
<select2 #scanCodeSelect [data]="scanCodeGroups" [selectedValue]="scanCode.toString()" (valueChanged)="onScancodeChange($event)"
[templateResult]="scanCodeTemplateResult" [width]="200"></select2>
<capture-keystroke-button></capture-keystroke-button>
</div>
<div class="scancode-options">
<b class="setting-label" style="position:relative; top:-9px; margin-right:4px;">Modifiers:</b>
<div class="btn-toolbar modifiers" style="display:inline-block">
<div class="modifier-options">
<b class="setting-label">Modifiers:</b>
<div class="btn-toolbar modifiers">
<div class="btn-group btn-group-sm modifiers__left">
<button type="button" class="btn btn-default" *ngFor="let modifier of leftModifiers; let index = index" [class.btn-primary]="leftModifierSelects[index]"
(click)="toggleModifier(false, index)">
@@ -22,7 +22,7 @@
</div>
</div>
<div class="long-press-container">
<b class="setting-label" style="position:relative;">Long press action:</b>
<b class="setting-label">Long press action:</b>
<select2 #longPressSelect [data]="longPressGroups" [selectedValue]="selectedLongPressIndex.toString()" (valueChanged)="onLongpressChange($event)"
[width]="140"></select2>
<icon name="question-circle" title="This action happens when the key is being held along with another key."></icon>

View File

@@ -2,11 +2,32 @@
display: flex;
flex-direction: column;
.scancode-options {
margin-bottom: 10px;
margin-top: 2px;
> b {
position: relative;
top: 2px;
}
}
.modifier-options {
> b {
position: relative;
top: -9px;
margin-right: 4px;
}
.btn-toolbar {
display: inline-block;
}
}
.long-press-container {
display: flex;
margin-top: 3rem;
b {
> b {
margin-right: 0.6em;
align-items: center;
display: flex;