person menu: add style for submenus

src/Bundle/ChillMainBundle/Resources/public/modules/scratch/custom/config/_variables.scss

@@ -35,6 +35,7 @@ $table-body-td-text-align: left;
 // Tabs
 $tabs-nav-margin-bottom: 0.2em;
 $tabs-nav-bg-color: $yellow;
+$tabs-nav-bg-color-light: lighten($yellow, 10%);
 $tabs-nav-text-color: $blue;
 $tabs-new-border: none;
 $tabs-nav-hover-border: none;

src/Bundle/ChillMainBundle/Resources/public/modules/scratch/modules/_tabs.scss

@@ -26,7 +26,13 @@ $global-bg-color: $yellow;
          color: $tabs-nav-title-text-color;
       }
 
-      > a  {
+      &.sub-menu {
+         padding-left: 20px;
+         > a {
+            background-color: $tabs-nav-bg-color-light;
+         }
+      }
+      > a {
          display: block;
          width: auto;
          padding: $tabs-nav-padding;
@@ -38,11 +44,11 @@ $global-bg-color: $yellow;
          @include border-top-radius($base-border-radius);
          @include border-bottom-radius($base-border-radius);
 
-         &:hover, &:active {  
+         &:hover, &:active {
             border: $tabs-nav-hover-border;
             color: $tabs-nav-hover-text-color;
             text-decoration: none;
          }
       }
    }
-}
+}

src/Bundle/ChillPersonBundle/Resources/views/menu.html.twig

@@ -16,8 +16,8 @@
 #}
 <ul class="tab-nav">
     {% for menu in menus %}
-        <li class="">
+        <li class="{{ menu.extra('class') }}">
             <a href="{{ menu.uri }}" >{{ menu.label|upper }}</a>
         </li>
     {% endfor %}
-</ul>
+</ul>