[erp5_web_renderjs_ui] Factorize erp5 css code

bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt

@@ -813,8 +813,38 @@ div[data-gadget-scope='editor_panel'] {
   min-width: @sub-line-min-width-desktop;
 }
 
-div[data-gadget-scope='header'] .ui-header {
+.renderTabletSubLink() {
+  padding-top: @half-margin-size;
+  padding-bottom: @half-margin-size;
+  white-space: nowrap;
+  overflow: hidden;
+  &::before {
+    font-size: 1.2em;
+    display: block;
+  }
+}
+
+.renderTabletSubListElement() {
+  flex: 1;
+  // XXX TODO Hardcoded color
+  border-left: 1px solid rgba(0, 0, 0, 0.55);
+  &:first-child {
+    border-left: none;
+  }
+
+  a {
+    display: block;
+  }
+}
+
+.renderTabletNotALinkTitle() {
+  padding-left: @headertitlespanleftmiddlepadding;
+  &::before {
+    margin-right:@headertitlespanleftlargemargin;
+  }
+}
 
+div[data-gadget-scope='header'] .ui-header {
   position: fixed;
   z-index: 1000;
   text-align: center;
@@ -938,10 +968,7 @@ div[data-gadget-scope='header'] .ui-header {
       }
 
       @media @tablet {
-         padding-left: @headertitlespanleftmiddlepadding;
-         &::before {
-           margin-right:@headertitlespanleftlargemargin;
-         }
+        .renderTabletNotALinkTitle();
       }
 
       @media @smartphone {
@@ -999,28 +1026,12 @@ div[data-gadget-scope='header'] .ui-header {
 
     li {
       @media @tablet, @smartphone {
-        flex: 1;
-        // XXX TODO Hardcoded color
-        border-left: 1px solid rgba(0, 0, 0, 0.55);
-        &:first-child {
-          border-left: none;
-        }
-
-        a {
-          display: block;
-        }
+        .renderTabletSubListElement();
       }
 
       @media @tablet {
         a {
-          padding-top: @half-margin-size;
-          padding-bottom: @half-margin-size;
-          white-space: nowrap;
-          overflow: hidden;
-          &::before {
-            font-size: 1.2em;
-            display: block;
-          }
+          .renderTabletSubLink();
         }
       }
 
@@ -1053,13 +1064,9 @@ div[data-gadget-scope='header'] .ui-header {
           }
         }
       }
-
     }
-
   }
-
 }
-
 /**********************************************
 * Gadget: main
 **********************************************/