tabs

scripts/tags/lib/tabs.js

@@ -28,7 +28,7 @@ module.exports = ctx => function(args, content) {
     }
   });
 
-  args = ctx.args.map(args, ['active', 'center'], ['tabName']);
+  args = ctx.args.map(args, ['active', 'align'], ['tabName']);
   const tabName = args.tabName;
   const tabActive = Number(args.active) || 0;
 
@@ -52,8 +52,8 @@ module.exports = ctx => function(args, content) {
   tabContent = `<div class="tab-content">${tabContent}</div>`;
 
   el += '<div class="tag-plugin tabs"';
-  if (args.center === 'true') {
-    el += ' center="true"';
+  if (args.align !== undefined) {
+    el += ' align="' + args.align + '"';
   }
   el += 'id="' + tabName.toLowerCase().split(' ').join('-') + '"';
   el += '">';

source/css/_layout/tag-plugins/tabs.styl

@@ -4,13 +4,16 @@
   margin-bottom: 1rem
   display: flex
   flex-direction: column
-  &[center]
+  align-items: flex-start
+  &[align=center]
     align-items: center
+  &[align=right]
+    align-items: flex-end
 
 .tag-plugin.tabs
   ul.nav-tabs
     display: flex
-    align-self: center
+    // align-self: center
     overflow: scroll visible
     scrollbar(0, 0)
     max-width: 100%
@@ -64,6 +67,7 @@
 
   .tab-content
     max-width: 100%
+    text-align: justify
     .tab-pane
       &:not(.active)
         display: none