From ffce89023c3726bb8b65c8690a97beafd596411a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B3zsef=20Farkas?= <fjozsef001@gmail.com>
Date: Mon, 8 Aug 2016 21:48:22 +0200
Subject: [PATCH] Move styles in keypress-tab.component from html to scss.

---
 .../tab/keypress/keypress-tab.component.html  | 12 +++++-----
 .../tab/keypress/keypress-tab.component.scss  | 23 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/components/popover/tab/keypress/keypress-tab.component.html b/src/components/popover/tab/keypress/keypress-tab.component.html
index c1312bb9..a6afc75e 100644
--- a/src/components/popover/tab/keypress/keypress-tab.component.html
+++ b/src/components/popover/tab/keypress/keypress-tab.component.html
@@ -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>
diff --git a/src/components/popover/tab/keypress/keypress-tab.component.scss b/src/components/popover/tab/keypress/keypress-tab.component.scss
index 36863e60..be1249e0 100644
--- a/src/components/popover/tab/keypress/keypress-tab.component.scss
+++ b/src/components/popover/tab/keypress/keypress-tab.component.scss
@@ -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;