From f5756a72bd6bbefea79dccb685d9e8de5e2c55b7 Mon Sep 17 00:00:00 2001
From: Arpad Csanyi <csarpad@gmail.com>
Date: Sat, 26 Mar 2016 00:45:56 +0100
Subject: [PATCH] Restructure scss file to make use of basic language features.

---
 css/style.css   |  38 ++++++--------
 sass/style.scss | 131 +++++++++++++++++++++++++++---------------------
 2 files changed, 89 insertions(+), 80 deletions(-)

diff --git a/css/style.css b/css/style.css
index 5e732eeb..b7664320 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,8 +1,7 @@
-h1 {
-  margin-bottom: 3rem; }
-
 .popover {
   padding: 0; }
+  .popover.bottom > .arrow:after {
+    border-bottom-color: #f7f7f7; }
 
 .popover-content {
   padding: 10px 24px; }
@@ -18,9 +17,6 @@ h1 {
   position: relative;
   top: 1px; }
 
-.popover.bottom > .arrow:after {
-  border-bottom-color: #f7f7f7; }
-
 .popover-actions {
   padding: 8px 14px;
   margin: 0;
@@ -69,31 +65,29 @@ h1 {
 .select2-item {
   position: relative;
   font-size: 1.5rem; }
-
-.select2-item.keymap-name--wrapper {
-  padding-left: 50px; }
-
-.select2-item .layout-segment-code {
-  height: 2rem;
-  position: absolute;
-  left: 0;
-  top: 50%;
-  margin-top: -1rem; }
+  .select2-item.keymap-name--wrapper {
+    padding-left: 50px; }
+  .select2-item .layout-segment-code {
+    height: 2rem;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    margin-top: -1rem; }
 
 .preview-wrapper img {
   max-width: 100%; }
 
 .global-key-setup.disabled {
   opacity: 0; }
+  .global-key-setup.disabled .setting-label {
+    color: #999; }
 
-.global-key-setup.disabled .setting-label,
 .setting-label.disabled {
   color: #999; }
 
 .global-key-setup--wrapper {
   position: relative; }
-
-.global-key-setup--wrapper .disabled-state--text {
-  position: absolute;
-  top: 50%;
-  margin-top: -4rem; }
+  .global-key-setup--wrapper .disabled-state--text {
+    position: absolute;
+    top: 50%;
+    margin-top: -4rem; }
diff --git a/sass/style.scss b/sass/style.scss
index a46aae4c..ab11649d 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -1,31 +1,35 @@
-h1 {
-  margin-bottom: 3rem;
-}
-
 .popover {
   padding: 0;
+
+  &.bottom {
+    > .arrow {
+      &:after {
+        border-bottom-color: #f7f7f7;
+      }
+    }
+  }
 }
 
 .popover-content {
   padding: 10px 24px;
 }
 
-.popover-title.menu-tabs {
-  padding: .5rem .5rem 0;
-  display: block;
-}
+.popover-title {
+  &.menu-tabs {
+    padding: .5rem .5rem 0;
+    display: block;
+  }
 
-.popover-title.menu-button-group {
-  display: none;
-}
+  &.menu-button-group {
+    display: none;
+  }
 
-.popover-title.menu-tabs .nav-tabs {
-  position: relative;
-  top: 1px;
-}
-
-.popover.bottom > .arrow:after {
-  border-bottom-color: #f7f7f7;
+  &.menu-tabs {
+    .nav-tabs {
+      position: relative;
+      top: 1px;
+    }
+  }
 }
 
 .popover-actions {
@@ -61,61 +65,72 @@ h1 {
   margin-top: 10px;
 }
 
-.key-editor--none__description p {
-  padding: 2rem 0;
-  margin: 0;
-  text-align: center;
-  font-style: italic;
-  color: #999;
-}
+.key-editor--none__description {
+  p {
+    padding: 2rem 0;
+    margin: 0;
+    text-align: center;
+    font-style: italic;
+    color: #999;
+  }
 
-.key-editor--none__description .icon {
-  font-size: 5rem;
-  color: #feefef;
-  position: absolute;
-  z-index: 0;
-  left: 50%;
-  margin-left: -2.5rem;
-  top: 50%;
-  margin-top: -2.5rem;
+  .icon {
+    font-size: 5rem;
+    color: #feefef;
+    position: absolute;
+    z-index: 0;
+    left: 50%;
+    margin-left: -2.5rem;
+    top: 50%;
+    margin-top: -2.5rem;
+  }
 }
 
 .select2-item {
   position: relative;
   font-size: 1.5rem;
+
+  &.keymap-name--wrapper {
+    padding-left: 50px;
+  }
+
+  .layout-segment-code {
+    height: 2rem;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    margin-top: -1rem;
+  }
 }
 
-.select2-item.keymap-name--wrapper {
-  padding-left: 50px;
+.preview-wrapper {
+  img {
+    max-width: 100%;
+  }
 }
 
-.select2-item .layout-segment-code {
-  height: 2rem;
-  position: absolute;
-  left: 0;
-  top: 50%;
-  margin-top: -1rem;
+.global-key-setup {
+  &.disabled {
+    opacity: 0;
+
+    .setting-label {
+      color: #999;
+    }
+  }
 }
 
-.preview-wrapper img {
-  max-width: 100%;
-}
-
-.global-key-setup.disabled {
-  opacity: 0;
-}
-
-.global-key-setup.disabled .setting-label,
-.setting-label.disabled {
-  color: #999;
+.setting-label {
+  &.disabled {
+    color: #999;
+  }
 }
 
 .global-key-setup--wrapper {
   position: relative;
-}
 
-.global-key-setup--wrapper .disabled-state--text {
-  position: absolute;
-  top: 50%;
-  margin-top: -4rem;
+  .disabled-state--text {
+    position: absolute;
+    top: 50%;
+    margin-top: -4rem;
+  }
 }