Add common LStabs CSS classes to handle tabs content

Based on stuff provided by LSaccessRightsMatrixView.

src/css/default/LSaccessRightsMatrixView.css

@@ -125,50 +125,6 @@ span.LSaccessRightsMatrixView_inherit {
   opacity: 0.3;
 }
 
-/*
- * Tabs
- */
-ul.LSaccessRightsMatrixView_tabs {
-  list-style-type:    none;
-  padding:            0;
-  margin:             1em;
-  margin-bottom:      0;
-  display:            flex;
-  flex-wrap:          nowrap;
-  overflow:           auto;
-}
-
-ul.LSaccessRightsMatrixView_tabs li a {
-  text-decoration:    none;
-  color:              #fff;
-}
-
-ul.LSaccessRightsMatrixView_tabs li {
-  text-decoration:    none;
-  color:              #fff;
-  background-color:   #52BCE5;
-  border-radius:      3px 3px 0px 0px;
-  padding:            4px;
-  display:            inline;
-  margin-right:       0.3rem;
-}
-
-ul.LSaccessRightsMatrixView_tabs li.LSaccessRightsMatrixView_active_tab {
-  color:              #fff;
-  background-color:   #0072B8;
-}
-
-div.LSaccessRightsMatrixView_tab_content {
-  border:             1px solid #0072B8;
-  margin:             1em;
-  padding:            0.5em;
-  margin-top:         0;
-}
-
-div.LSaccessRightsMatrixView_tab_content h2 {
-  margin: 0;
-}
-
 /*
  * Legend
  */
@@ -198,15 +154,6 @@ div.LSaccessRightsMatrixView_tab_content h2 {
 
 
 @media (max-width: 1024px) {
-  div.LSaccessRightsMatrixView_tab_content {
-    margin: 0;
-  }
-
-  ul.LSaccessRightsMatrixView_tabs {
-    margin: 0;
-    margin-top: 0.3rem;
-  }
-
   #LSaccessRightsMatrixView table thead th:first-of-type, #LSaccessRightsMatrixView table tbody th {
     max-width: 25vw;
   }

src/css/default/base.css

@@ -384,6 +384,55 @@ input[type='submit'].LSview_search, button {
   margin-left:        1.2rem;
 }
 
+/*
+ * Tabs
+ */
+ul.LStabs {
+  list-style-type:    none;
+  padding:            0;
+  margin:             1em;
+  margin-bottom:      0;
+  display:            flex;
+  flex-wrap:          nowrap;
+  overflow:           auto;
+}
+
+ul.LStabs li a {
+  text-decoration:    none;
+  color:              #fff;
+}
+
+ul.LStabs li {
+  text-decoration:    none;
+  color:              #fff;
+  background-color:   #52BCE5;
+  border-radius:      3px 3px 0px 0px;
+  padding:            4px;
+  display:            inline;
+  margin-right:       0.3rem;
+}
+
+ul.LStabs li.LStabs_active {
+  color:              #fff;
+  background-color:   #0072B8;
+}
+
+div.LStabs_content {
+  border:             1px solid #0072B8;
+  margin:             1em;
+  padding:            0.5em;
+  margin-top:         0;
+  display:            none;
+}
+
+div.LStabs_content_active {
+  display:            block;
+}
+
+div.LStabs_content h2 {
+  margin: 0;
+}
+
 /*
  *********************
  * Error page
@@ -483,6 +532,18 @@ input[type='submit'].LSview_search, button {
     margin-right: 1vw;
   }
 
+  /*
+   * LStabs
+   */
+  div.LStabs_content {
+    margin: 0;
+  }
+
+  ul.LStabs {
+    margin: 0;
+    margin-top: 0.3rem;
+  }
+
   /*
    * Manage menu toggle
    */

src/css/light-blue.css

@@ -253,7 +253,7 @@ td.LSobject-list, tr.LSobject-list, table.LStable tbody td, table.LStable th {
 	}
 }
 
-li.LSform_layout_active, ul.LSselect_selectable_object_types li, ul.LSaccessRightsMatrixView_tabs li {
+li.LSform_layout_active, ul.LSselect_selectable_object_types li, ul.LStabs li {
 	border-radius: 0px;
 	border: none;
 }
@@ -287,11 +287,11 @@ ul.LSformElement_image_actions {
 
 
 /*  ---- Medium ---- */
-li.LSform_layout_active, tr.LSobject-list:hover, table.LStable tr:hover, table.LStable tr.bis:hover, ul.LSaccessRightsMatrixView_tabs li, ul.LSselect_selectable_object_types li {
+li.LSform_layout_active, tr.LSobject-list:hover, table.LStable tr:hover, table.LStable tr.bis:hover, ul.LStabs li, ul.LSselect_selectable_object_types li {
 	background-color:	var(--medium-color);
 }
 
-div.loginform, div.recoverpasswordform, .loginform input[type='text'], .loginform input[type='password'], .recoverpasswordform input[type='text'], .recoverpasswordform input[type='password'], li.LSview-actions, div.LSform_layout, h1, form.LSglobal_search, div.LSformElement_image {
+div.loginform, div.recoverpasswordform, .loginform input[type='text'], .loginform input[type='password'], .recoverpasswordform input[type='text'], .recoverpasswordform input[type='password'], li.LSview-actions, div.LSform_layout, h1, form.LSglobal_search, div.LSformElement_image, div.LStabs_content {
 	border-color:		var(--medium-color);
 }
 
@@ -328,7 +328,7 @@ tr.LSobject-list-bis, table.LStable tr.bis, .LSform input[type=text], .LSform in
 }
 
 /* ---- Dark ---- */
-li.LSform_layout_current, .LSform input[type=submit], input[type='submit'].LSview_search, button, ul.LSaccessRightsMatrixView_tabs li.LSaccessRightsMatrixView_active_tab, ul.LSselect_selectable_object_types li.current {
+li.LSform_layout_current, .LSform input[type=submit], input[type='submit'].LSview_search, button, ul.LStabs li.LStabs_active, ul.LSselect_selectable_object_types li.current {
 	background-color:	var(--dark-color);
 }
 
@@ -336,7 +336,7 @@ li.menu a, a.menu, h1 {
 	color:				var(--dark-color);
 }
 
-input[type='submit'].LSview_search, input[type='text'].LSview_search, button, div.LSaccessRightsMatrixView_tab_content, ul.LSselect_selectable_object_types {
+input[type='submit'].LSview_search, input[type='text'].LSview_search, button, ul.LSselect_selectable_object_types {
 	border-color:		var(--dark-color);
 }
 

src/templates/default/LSaccessRightsMatrixView.tpl

@@ -2,13 +2,13 @@
 {block name="content"}
 <div id='LSaccessRightsMatrixView'>
   <h1>{$pagetitle}</h1>
-  <ul class="LSaccessRightsMatrixView_tabs">
+  <ul class="LStabs">
   {foreach $LSobjects as $obj => $obj_conf}
-    <li{if $LSobject==$obj} class="LSaccessRightsMatrixView_active_tab"{/if}><a href="addon/LSaccessRightsMatrixView/accessRightsMatrix?LSobject={$obj}">{$obj_conf.label}</a></li>
+    <li{if $LSobject==$obj} class="LStabs_active"{/if}><a href="addon/LSaccessRightsMatrixView/accessRightsMatrix?LSobject={$obj}">{$obj_conf.label}</a></li>
   {/foreach}
   </ul>
 
-  <div class='LSaccessRightsMatrixView_tab_content'>
+  <div class='LStabs_content LStabs_content_active'>
     <h2>{$LSobjects[$LSobject]['label']}</h2>
 
     <table class="table-header-rotated">