Work on the region selector

app/assets/stylesheets/form.sass

@@ -90,7 +90,7 @@ input, textarea, select, a.button, .actions > button, div.tagsinput, .ui-autocom
   label
     color: #258
     cursor: pointer
-    padding: 0.8em 0
+    padding: 0.5em
     display: inline-block
     &:hover
       color: #222

app/assets/stylesheets/region.sass

@@ -33,22 +33,47 @@ header nav
     &:hover ul
       box-shadow: 0 4px 4px gray
 
-.radios
+// .field.region .radios
-  .radios
+//   display: inline-block
+//   text-align: left
+//   background-color: white
+//   label
+//     width: 100%
+//     display: none
+//   &:hover > .region > label
+//     display: block
+//     z-index: 1000
+//   input:checked + label
+//     display: inline
+//   .region:hover .radios
+//     z-index: 1000
+//     position: absolute
+//     box-shadow: 0 4px 4px gray
+//     margin-left: 10em
+.field.region
+  display: block
+  text-align: left
+  & > label
+    display: inline-block
+  .radios
+    z-index: 1000
     display: inline-block
-    text-align: left
     background-color: white
+    .radios
+      display: inline
     label
       display: none
-      padding: 0.2em
+      min-width: 100%
-    input:checked + label
+  &:hover > .radios, label:hover + .radios, .radios:hover
-      display: inline
-  .region:hover .radios
-    z-index: 1000
     position: absolute
-    box-shadow: 0 4px 4px gray
+    box-shadow: 0 0 0.1em black
-    label
+    & > .region > label, & > label
-      display: block !important
+      display: inline-block
+    .radios
+      position: absolute
+      min-width: 12em
+  input:checked + label
+    display: inline-block
 
 // Override for the missing quebec flag!
 .flag-icon-ca-qc

app/views/regions/_selector_region.haml

@@ -1,19 +1,22 @@
 - if selector_region.regions.present? || selector_region.url.blank?
-  %span.region{ title: selector_region.code }
+  .region{ title: selector_region.code }
     = f.radio_button :region_id, selector_region.id
     = f.label "region_id_#{selector_region.id}" do
       - if selector_region.code.present?
         = flag_icon selector_region.code.downcase
-        = t selector_region.code, scope: :countries, default: selector_region.name
+        %span.name
+          = t selector_region.code, scope: :countries,
+            default: selector_region.name
       - else
         %em.fa.fa-map
-        = t selector_region, scope: :countries, default: selector_region
+        %span.name
+          = t selector_region, scope: :countries, default: selector_region
       - if selector_region.regions.present?
-        %small
+        %em.fa.fa-chevron-right
-          %em.fa.fa-chevron-right
     - if selector_region.regions.present?
       .radios
         = f.collection_radio_buttons :region_id,
-          Region.where(region: selector_region), :id, :name, include_hidden: false do |b|
+          Region.where(region: selector_region), :id, :name,
+          include_hidden: false do |b|
           = b.radio_button
           = b.label { t(b.text, scope: :countries, default: b.text) }