set max count to 20

src/js/macros.js

@@ -314,7 +314,7 @@ module.exports = {
     },
     addNewMacros: async function () {
       const length = this.config.macros.length;
-      if (length >= 30) {
+      if (length >= 20) {
         this.maxLimitReached = true;
         return;
       }

src/pug/templates/macros.pug

@@ -38,10 +38,10 @@ script#macros-template(type="text/x-template")
             |  Yes
 
     message(:show.sync="maxLimitReached")
-        h3(slot="header") Delete Selected Macros?
-        p(slot="body")
+        div(slot="body")
+            p You have reached the maximum macros limit
         div(slot="footer")
-          button.pure-button.button-secondary(@click="maxLimitReached = false") OK
+          button.pure-button.button-submit(@click="maxLimitReached = false") OK
 
     h1 Macros Configuration
     .flex-row-container
@@ -49,7 +49,7 @@ script#macros-template(type="text/x-template")
         button.blue-button(title="Add a Macros", @click="addNewMacros", style="margin-left:5px") New Macros
         // button.blue-button(title="Delete a Macros", @click="deleteSelected=true", style="margin-left:5px",:disabled="!macrosLength") Delete Selected
 
-    .macros-tabs
+    .tabs
         input#tab1(type="radio", name="tabs",checked="", @click="tab = '1'")
         label(for="tab1",style="height:50px;width:100px") Macros 1
 

src/stylus/style.styl

@@ -662,73 +662,9 @@ span.unit
     width 440px
     margin-bottom 1rem
 
-  .macros-tabs
+  .tabs
     margin-top 5px
-    width 860px
-    clear both
-
-    > input
-      display none
-
-    > label
-      display inline-block
-      width 6em
-      font-weight bold
-      cursor pointer
-      text-decoration none
-      text-align center
-      background #f6f6f6
-      border-top-left-radius 5px
-      border-top-right-radius 5px
-      border-top 2px solid #f6f6f6
-      border-left 1px solid #f6f6f6
-      border-right 1px solid #f6f6f6
-      margin-right 2px
-
-    > section
-      display none
-      clear both
-
-    > #tab1:checked ~ #content1,
-    > #tab2:checked ~ #content2,
-    > #tab3:checked ~ #content3,
-    > #tab4:checked ~ #content4,
-    > #tab5:checked ~ #content5,
-    > #tab6:checked ~ #content6,
-    > #tab7:checked ~ #content7,
-    > #tab8:checked ~ #content8,
-    > #tab9:checked ~ #content9,
-    > #tab10:checked ~ #content10,
-    > #tab11:checked ~ #content11,
-    > #tab12:checked ~ #content12,
-    > #tab13:checked ~ #content13,
-    > #tab14:checked ~ #content14,
-    > #tab15:checked ~ #content15,
-    > #tab16:checked ~ #content16,
-    > #tab17:checked ~ #content17,
-    > #tab18:checked ~ #content18,
-    > #tab19:checked ~ #content19,
-    > #tab21:checked ~ #content21,
-    > #tab22:checked ~ #content22,
-    > #tab23:checked ~ #content23,
-    > #tab24:checked ~ #content24,
-    > #tab25:checked ~ #content25,
-    > #tab26:checked ~ #content26,
-    > #tab27:checked ~ #content27,
-    > #tab28:checked ~ #content28,
-    > #tab29:checked ~ #content29,
-    > #tab30:checked ~ #content30,
-      display block
-
-    [id^="tab"]:checked + label
-      background #fff
-      border-top 2px solid #ddd
-      border-left 1px solid #ddd
-      border-right 1px solid #ddd
-      border-bottom 1px solid #fff
-      margin-bottom -1px
-
-
+    width 850px
 
   .macros-view
     padding 30px
@@ -992,7 +928,18 @@ tt.save
   > #tab6:checked ~ #content6,
   > #tab7:checked ~ #content7,
   > #tab8:checked ~ #content8,
-  > #tab9:checked ~ #content9
+  > #tab9:checked ~ #content9,
+  > #tab10:checked ~ #content10,
+  > #tab11:checked ~ #content11,
+  > #tab12:checked ~ #content12,
+  > #tab13:checked ~ #content13,
+  > #tab14:checked ~ #content14,
+  > #tab15:checked ~ #content15,
+  > #tab16:checked ~ #content16,
+  > #tab17:checked ~ #content17,
+  > #tab18:checked ~ #content18,
+  > #tab19:checked ~ #content19,
+  > #tab20:checked ~ #content20,
     display block
 
   [id^="tab"]:checked + label