Refactor locale panel styles

app/assets/stylesheets/application.scss

@@ -80,6 +80,7 @@
 "components/container",
 "components/entry",
 "components/jumbotron",
+"components/locales",
 "components/notifications",
 "components/profile",
 "components/question",

app/assets/stylesheets/base.css.scss

@@ -1,5 +1,4 @@
 /* all custom SCSS should go into here */
 
-@import "scss/flags";
 @import "scss/answerbox";
 @import "scss/comments";

app/assets/stylesheets/components/_locales.scss

@@ -1,16 +1,15 @@
 .locales {
   text-align: center;
 
-  #locales-panel {
+  &__panel {
     position: relative;
     display:  none;
     padding:  5px;
 
     ul {
-      border-top:      1px solid #aaa;
       margin:          0;
       padding:         0;
-      padding-top:     5px;
+      padding-top:     map-get($spacers, 3);
       width:           100%;
       list-style:      none;
       display:         inline-flex;
@@ -18,9 +17,9 @@
       flex-wrap:       wrap;
       align-items:     center;
       justify-content: center;
+      
       li {
-        margin:     5px 10px;
-        margin-top: 0;
+        margin:     0 5px 10px 5px;
         flex:       0 0 auto;
 
         * {

app/views/shared/_locales.haml

@@ -4,7 +4,7 @@
       %a{href: '#', id: 'locale-switch'}
         %i.fa.fa-globe
         = t('views.locale.languages')
-    #locales-panel
+    #locales-panel.locales__panel
       %ul
         - APP_LOCALES.each do |key, value|
           %li