update z-index

less/ui.modal.less

@@ -16,7 +16,7 @@
   width: 270px;
   position: fixed;
   display: none;
-  z-index: 1100;
+  z-index: @z-index-modal;
   left: 50%;
   margin-left: -135px;
   margin-top: 0;
@@ -42,7 +42,7 @@
 
   &.am-modal-out {
     opacity: 0;
-    z-index: 1100 - 1;
+    z-index: @z-index-modal - 1;
     .transition-duration(@modal-duration);
     .transform(translate3d(0, 0, 0) scale(0.815));
   }
@@ -184,7 +184,7 @@
   position: fixed;
   left: 0;
   bottom: 0;
-  z-index: 1100;
+  z-index: @z-index-modal;
   width: 100%;
   text-align: center;
   border-radius: @modal-border-radius;
@@ -194,7 +194,7 @@
     .translate3d(0, 0, 0);
   }
   &.am-modal-out {
-    z-index: 1100 - 1;
+    z-index: @z-index-modal - 1;
     .transition(all @modal-actions-duration);
     .transform(translate3d(0, 100%, 0));
   }
@@ -251,7 +251,7 @@
   top: 0;
   width: 100%;
   height: 100%;
-  z-index: 11000;
+  z-index: @z-index-modal;
   background: #fff;
   display: none;
   overflow: hidden;

less/ui.offcanvas.less

@@ -29,7 +29,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: @offcanvas-z-index;
+  z-index: @z-index-offcanvas;
   background: @offcanvas-dimmer-background;
 
   .hook-offcanvas;
@@ -66,7 +66,7 @@
   bottom: 0;
   left: 0;
   .translate3d(-@offcanvas-bar-width, 0, 0);
-  z-index: @offcanvas-z-index + 1;
+  z-index: @z-index-offcanvas + 1;
   width: @offcanvas-bar-width;
   max-width: 100%;
   background: @offcanvas-bar-background;

less/ui.popover.less

@@ -36,7 +36,7 @@
   color: @popover-color;
   border: 1px solid @popover-border;
   display: none;
-  z-index: 1900;
+  z-index: @z-index-popover;
   opacity: 0;
   .transform(none);
   .transition(@popover-duration);

less/ui.progress.less

 @nprogress-bar-color: @global-success;
 
-//TODO: set z-index variable
-
 #nprogress {
   /* Make clicks pass-through */
   pointer-events: none;
@@ -10,7 +8,7 @@
     background: @nprogress-bar-color;
 
     position: fixed;
-    z-index: 1031;
+    z-index: @z-index-nprogress;
     top: 0;
     left: 0;
 
@@ -37,7 +35,7 @@
   .nprogress-spinner {
     display: block;
     position: fixed;
-    z-index: 1031;
+    z-index: @z-index-nprogress;
     top: 15px;
     right: 15px;
   }

less/ui.pureview.less

@@ -5,7 +5,6 @@
 //
 // ========================================================================
 
-@am-pureview-z-index: 1100;
 
 .am-pureview {
   position: fixed;
@@ -15,7 +14,7 @@
   right: 0;
   width: 100%;
   height: 100%;
-  z-index: @am-pureview-z-index;
+  z-index: @z-index-pureview;
   background: rgba(0, 0, 0, 0.95);
   //display: none;
   overflow: hidden;
@@ -79,7 +78,7 @@
 
   .pinch-zoom-container {
     width: 100%;
-    z-index: @am-pureview-z-index + 1;
+    z-index: @z-index-pureview + 1;
   }
 
   .am-pinch-zoom {
@@ -104,7 +103,7 @@
   top: 50%;
   width: 100%;
   margin-top: -18px;
-  z-index: @am-pureview-z-index + 2;
+  z-index: @z-index-pureview + 2;
 
   .am-touch &,
   .am-pureview-only & {
@@ -126,7 +125,7 @@
     cursor: pointer;
     text-align: center;
 
-    z-index: 1010;
+    z-index: @z-index-pureview + 5;
 
     &:before {
       .am-icon-font;
@@ -180,12 +179,13 @@
 
 .am-pureview-actions {
   position: absolute;
-  z-index: @am-pureview-z-index + 10;
+  z-index: @z-index-pureview + 10;
   left: 0;
   right: 0;
   top: 0;
   height: 45px;
   background-color: rgba(0, 0, 0, 0.35);
+
   a {
     position: absolute;
     left: 10px;
@@ -193,7 +193,7 @@
     display: block;
     width: 45px;
     line-height: 45px;
-    text-align: center;
+    text-align: left;
     font-size: 16px;
 
     &:hover {
@@ -211,7 +211,7 @@
 .am-pureview-actions {
   opacity: 0;
   .transition(0.15s);
-  z-index: @am-pureview-z-index + 10;
+  z-index: @z-index-pureview + 10;
 
   .am-pureview-bar-active & {
     opacity: 1;
@@ -224,7 +224,7 @@
   left: 0;
   right: 0;
   text-align: center;
-  z-index: @am-pureview-z-index + 11;
+  z-index: @z-index-pureview + 11;
 
   .am-pureview-bar-active & {
     display: none;

less/ui.tabs.less

@@ -24,14 +24,14 @@
   overflow: hidden;
   border: 1px solid #ddd;
   border-top: none;
-  z-index: 1001;
+  z-index: 100;
   .transition(height 0.3s);
   .hook-tabs-bd();
 
   .am-tab-panel {
     position: absolute;
     top: 0;
-    z-index: 999;
+    z-index: 99;
     float: left;
     width: 100%;
     padding: 10px 10px 15px;
@@ -42,7 +42,7 @@
 
     &.am-active {
       position: relative;
-      z-index: 1000;
+      z-index: 100;
       visibility: visible;
       .translate();
 

less/variables.less

@@ -231,22 +231,20 @@
 
 @global-z-index:		        1000;
 
-@z-index-navbar:            @global-z-index + 20; // THIS IS WIDGET
+@z-index-topbar-fixed:      @global-z-index;
+@z-index-sticky:            @global-z-index + 10;
+@z-index-dropdown:          @global-z-index + 20;
+@z-index-popover:           @global-z-index + 30;
+@z-index-offcanvas:         @global-z-index + 90;
+@z-index-dimmer:            @global-z-index + 100;
+@z-index-modal:             @global-z-index + 110;
+@z-index-pureview:          @global-z-index + 120;
+@z-index-nprogress:         @global-z-index + 1000;
 
-@z-index-dropdown:          @global-z-index;
-@z-index-popover:           @global-z-index + 10;
-@z-index-tooltip:           @global-z-index + 30; // 干掉
-@z-index-navbar-fixed:      @global-z-index + 30;
-@z-index-modal-background:  @global-z-index + 40;
-@z-index-modal:             @global-z-index + 50;
-@z-index-paragraph:         @global-z-index + 60;  // THIS IS WIDGET
-@z-index-figure:            @global-z-index + 60;
-@z-index-sticky:            @global-z-index + 19;
-@z-index-mainnav:           @global-z-index + 30; // 干掉
+@z-index-navbar:            @global-z-index + 10; // THIS IS WIDGET
+@z-index-gotop-fixed:       @global-z-index + 40; // THIS IS WIDGET
+@z-index-menu:              @global-z-index + 50; // THIS IS WIDGET
 
-@z-index-dimmer:            @global-z-index + 20;
-
-@z-index-topbar-fixed:      @global-z-index + 1000;
 
 // ========================================================================
 // Component Common
@@ -1174,8 +1172,6 @@
 @topbar-inverse-brand-hover-color:         @white;
 @topbar-inverse-brand-hover-bg:            transparent;
 
-// fixed z-index
-@topbar-z-index: @global-z-index + 10000;
 
 
 
@@ -1339,7 +1335,6 @@
 // Off-canvas
 // ========================================================================
 
-@offcanvas-z-index:                   (@global-z-index + 30);
 @offcanvas-dimmer-background:         rgba(0,0,0,0.15);
 @offcanvas-bar-width:                 270px;
 @offcanvas-bar-background:            #333;

widget/figure/src/figure.less

@@ -4,33 +4,3 @@
 }
 .hook-am-figure() {}
 
-.am-figure-wrap {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: rgba(0,0,0,0.8);
-  overflow: hidden;
-  z-index: @z-index-figure;
-  opacity: 0;
-  .transition(all 0.2s);
-  -webkit-transform: translateY(-100%);
-  transform: translateY(-100%);
-  img {
-    position: absolute;
-    margin: auto;
-    display: block;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: auto;
-  }
-  &.am-active {
-    opacity: 1;
-    -webkit-transform: translateY(0%);
-    transform: translateY(0%);
-  }
-}
\ No newline at end of file

widget/menu/src/menu.default.less

@@ -71,7 +71,6 @@
     left: 5px;
     right: 5px;
     background-color: @menu-nav-sub-bg;
-    z-index: @z-index-dropdown;
     border-radius: @menu-nav-sub-border-radius;
 
     padding-top: 8px;

widget/menu/src/menu.dropdown1.less

+/**
 /**
   * Menu Theme: dropdown1
   * Author: Minwe (minwe@yunshipei.com)
@@ -43,7 +44,7 @@
     position: absolute;
     left: 0;
     right: 0;
-    z-index: @z-index-dropdown;
+    z-index: @z-index-menu;
 
     a {
       padding: 0.8rem;

widget/menu/src/menu.dropdown2.less

@@ -32,7 +32,7 @@
     right: 0;
     background-color: @menu-nav-top-link-bg;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-    z-index: @z-index-dropdown;
+    z-index: @z-index-menu;
     padding-top: 8px;
     padding-bottom: 8px;
 
@@ -93,7 +93,7 @@
     border-radius: 2px;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
     background-color: @menu-nav-sub-link-bg;
-    z-index: @z-index-dropdown + 5;
+    z-index: @z-index-menu + 5;
 
     a {
       padding: 0;
@@ -129,7 +129,7 @@
     .am-menu-sub {
       left: auto;
       right: auto;
-      z-index: @z-index-dropdown + 1;
+
       & > li {
         float: none;
         width: auto;

widget/menu/src/menu.less

@@ -21,8 +21,13 @@
   }
 }
 
+.am-menu-sub {
+  z-index: @z-index-menu;
+}
+
 .am-menu-toggle {
   display: none;
+
   img {
     height: 16px;
     width: auto;

widget/menu/src/menu.one.less

@@ -69,7 +69,7 @@
 
   .am-menu-nav-sub-wrap {
     position: relative;
-    z-index: @z-index-dropdown;
+    z-index: @z-index-menu;
   }
 
   .am-menu-sub {

widget/menu/src/menu.slide1.less

@@ -104,7 +104,6 @@
     left: 5px;
     right: 5px;
     background-color: @menu-nav-sub-bg;
-    z-index: @z-index-dropdown;
     border-radius: @menu-nav-sub-border-radius;
 
     padding-top: 8px;

widget/menu/src/menu.stack.less

@@ -139,7 +139,6 @@
 
     .am-menu-sub {
       position: absolute;
-      z-index: 1999;
       left: 0;
       right: 0;
       background-color: #ddd;

widget/paragraph/src/paragraph.less

-@paragraph-header-icon-color: @white;
-@paragraph-header-text-color: @white;
-@paragraph-header-bg-color: rgba(129, 129, 129, 0.2);
-@paragraph-bg-color: rgba(0, 0, 0, 0.8);
-
 @paragraph-h-color: @gray-darker;
 
 @paragraph-table-bd-color: @gray-light;
@@ -27,123 +22,38 @@
     max-width: none;
   }
 
-  .am-paragraph-table-container {
-    overflow: hidden;
-    background: @paragraph-table-container-bg-color;
-    max-width: none;
-
-    table {
-      width: 100%;
-      max-width: none;
-      th {
-        background: @paragraph-table-th-bg-color;
-        height: 40px;
-        border: 1px solid @paragraph-table-bd-color;
-        text-align: center;
-      }
-      td {
-        border: 1px solid @paragraph-table-bd-color;
-        text-align: center;
-        vertical-align: middle;
-        background: @paragraph-table-td-bg-color;
-
-        p {
-          text-indent: 0;
-          font-size: 1.4rem;
-        }
-        a {
-          font-size: 1.4rem;
-        }
-      }
-    }
-  }
-
   .hook-am-paragraph;
 }
 
-.hook-am-paragraph() {
-}
-
-.am-paragraph-wrap {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
+.am-paragraph-table-container {
   overflow: hidden;
-  z-index: @z-index-paragraph;
-  opacity: 0;
-  .transition(all 0.2s);
-  -webkit-transform: translateY(-100%);
-  transform: translateY(-100%);
+  background: @paragraph-table-container-bg-color;
+  max-width: none;
 
-  header {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 45px;
+  table {
     width: 100%;
-    line-height: 45px;
-    text-indent: 6px;
-    background: @paragraph-header-bg-color;
-    color: @paragraph-header-text-color;
-    z-index: @z-index-paragraph+1;
-
-    &::before {
-      .am-icon-font;
-      display: inline-block;
-      content: @fa-var-angle-left;
-      color: @paragraph-header-icon-color;
-      font-size: 26px;
-      margin: 9px 5px 0 0;
-      vertical-align: top;
+    max-width: none;
+    th {
+      background: @paragraph-table-th-bg-color;
+      height: 40px;
+      border: 1px solid @paragraph-table-bd-color;
+      text-align: center;
     }
-  }
-
-  img {
-    position: absolute;
-    margin: auto;
-    display: block;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: auto;
-  }
-  &.am-active {
-    opacity: 1;
-    -webkit-transform: translateY(0%);
-    transform: translateY(0%);
-    display: block;
-  }
-
-  .pinch-zoom {
-    background: @paragraph-bg-color !important;
-  }
-
-}
-
-.am-paragraph-zoomable {
-  @figure-icon-color: @gray-light;
-  @figure-icon-hover-color: @gray-lighter;
-
-  position: relative;
-  cursor: pointer;
-  &::after {
-    .am-icon-font;
-    content: @fa-var-search-plus;
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    color: @figure-icon-color;
-    font-size: 1.6rem;
-    .transition(all 0.2s);
-  }
-  &:hover {
-    &::after {
-      color: @figure-icon-hover-color;
+    td {
+      border: 1px solid @paragraph-table-bd-color;
+      text-align: center;
+      vertical-align: middle;
+      background: @paragraph-table-td-bg-color;
+
+      p {
+        text-indent: 0;
+        font-size: 1.4rem;
+      }
+      a {
+        font-size: 1.4rem;
+      }
     }
   }
 }
+
+.hook-am-paragraph() {}