Browse Source

fixed sidebar nav icon with text-sm

REJack 5 years ago
parent
commit
f9a40e3b46

+ 105 - 6
build/scss/_main-sidebar.scss

@@ -151,6 +151,24 @@
     .nav-treeview {
       transition: padding $transition-speed $transition-fn;
       padding-left: 1rem;
+
+      .text-sm & {
+        padding-left: .5rem;
+      }
+    }
+
+    &.nav-legacy {
+      .nav-treeview {      
+        .nav-treeview {
+          padding-left: 2rem;
+          margin-left: -1rem;
+
+          .text-sm & {          
+            padding-left: 1rem;
+            margin-left: -.5rem;
+          }
+        }
+      }
     }
   }
 
@@ -632,15 +650,19 @@
     > .nav-link {
       border-radius: 0;
       margin-bottom: 0;
-    }
-  }
 
-  &.nav-sidebar > .nav-item {
-    > .nav-link {
       > .nav-icon {
         margin-left: .55rem;
+
+        .text-sm & {
+          margin-left: .75rem;
+        }
       }
+    }
+  }
 
+  &.nav-sidebar > .nav-item {
+    > .nav-link {
       &.active {
         background: inherit;
         border-left: 3px solid transparent;
@@ -648,6 +670,20 @@
 
         > .nav-icon {
           margin-left: calc(.55rem - 3px);
+          
+          .text-sm & {
+            margin-left: calc(.75rem - 3px);
+          }
+        }
+      }
+    }
+  }
+
+  .text-sm &.nav-sidebar.nav-flat .nav-treeview {
+    .nav-item {
+      > .nav-link {
+        > .nav-icon {
+          margin-left: calc(.75rem - 3px);
         }
       }
     }
@@ -658,6 +694,35 @@
     > .nav-item .nav-link {
       .nav-icon {
         @include transition(margin-left $transition-fn $transition-speed);
+        margin-left: .75rem;
+      }
+    }
+  }
+
+  .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
+  .sidebar-mini.sidebar-collapse .main-sidebar:hover &.nav-child-indent,
+  .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &.nav-child-indent,
+  .sidebar-mini-md.sidebar-collapse .main-sidebar:hover &.nav-child-indent {
+    .nav-treeview {
+      padding-left: 1rem;
+
+      .nav-treeview {
+        padding-left: 2rem;
+        margin-left: -1rem;
+      }
+    }
+  }
+
+  .sidebar-mini.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
+  .sidebar-mini.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent,
+  .sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar.sidebar-focused &.nav-child-indent,
+  .sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar:hover &.nav-child-indent {
+    .nav-treeview {
+      padding-left: .5rem;
+
+      .nav-treeview {
+        padding-left: 1rem;
+        margin-left: -.5rem;
       }
     }
   }
@@ -670,11 +735,36 @@
       }
 
       &.active {
-        > .nav-icon {
+        > .nav-icon{
           margin-left: .36rem;
         }
       }
     }
+
+    &.nav-child-indent {   
+      .nav-treeview {
+        .nav-treeview {
+          padding-left: 0;
+          margin-left: 0;
+        }
+      }
+      }
+    }
+
+
+  .sidebar-mini.sidebar-collapse.text-sm &,
+  .sidebar-mini-md.sidebar-collapse.text-sm &, {
+    > .nav-item > .nav-link {
+      .nav-icon {
+        margin-left: .75rem;
+      }
+
+      &.active {
+        > .nav-icon{
+          margin-left: calc(.75rem - 3px);
+        }
+      }
+    }
   }
 
   [class*='sidebar-dark'] & {
@@ -737,7 +827,9 @@
   }
 
   .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &,
-  .sidebar-mini.sidebar-collapse .main-sidebar:hover & {
+  .sidebar-mini.sidebar-collapse .main-sidebar:hover &,
+  .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &,
+  .sidebar-mini-md.sidebar-collapse .main-sidebar:hover & {
     .menu-open > .nav-treeview {
       max-height: min-content;
       opacity: 1;
@@ -762,6 +854,13 @@
   .nav-link > p > .right {
     top: .465rem;
   }
+
+  .text-sm & {
+    .nav-link > .right,
+    .nav-link > p > .right {
+      top: .7rem;
+    }
+  }
 }
 
 // Sidebar Form Control

+ 0 - 24
build/scss/_sidebar-mini.scss

@@ -111,30 +111,6 @@
     .nav-sidebar > .nav-item .nav-icon {
       margin-right: 0;
     }
-
-    .nav-flat {
-      .nav-icon {
-        margin-left: .5rem;
-      }
-
-      .nav-treeview {
-        .nav-icon {
-          margin-left: .3rem;
-        }
-      }
-    }
-
-    .nav-flat.nav-compact {
-      .nav-icon {
-        margin-left: 1.05rem;
-      }
-
-      .nav-treeview {
-        .nav-icon {
-          margin-left: .85rem;
-        }
-      }
-    }
   }
 }
 

+ 82 - 22
dist/css/adminlte.css

@@ -11754,6 +11754,20 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
   padding-left: 1rem;
 }
 
+.text-sm .nav-sidebar.nav-child-indent .nav-treeview {
+  padding-left: .5rem;
+}
+
+.nav-sidebar.nav-child-indent.nav-legacy .nav-treeview .nav-treeview {
+  padding-left: 2rem;
+  margin-left: -1rem;
+}
+
+.text-sm .nav-sidebar.nav-child-indent.nav-legacy .nav-treeview .nav-treeview {
+  padding-left: 1rem;
+  margin-left: -.5rem;
+}
+
 .nav-sidebar .nav-header {
   font-size: .9rem;
   padding: 0.5rem;
@@ -12396,10 +12410,14 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
   margin-bottom: 0;
 }
 
-.nav-legacy.nav-sidebar > .nav-item > .nav-link > .nav-icon {
+.nav-legacy.nav-sidebar .nav-item > .nav-link > .nav-icon {
   margin-left: .55rem;
 }
 
+.text-sm .nav-legacy.nav-sidebar .nav-item > .nav-link > .nav-icon {
+  margin-left: .75rem;
+}
+
 .nav-legacy.nav-sidebar > .nav-item > .nav-link.active {
   background: inherit;
   border-left: 3px solid transparent;
@@ -12410,9 +12428,18 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
   margin-left: calc(.55rem - 3px);
 }
 
+.text-sm .nav-legacy.nav-sidebar > .nav-item > .nav-link.active > .nav-icon {
+  margin-left: calc(.75rem - 3px);
+}
+
+.text-sm .nav-legacy.nav-sidebar.nav-flat .nav-treeview .nav-item > .nav-link > .nav-icon {
+  margin-left: calc(.75rem - 3px);
+}
+
 .sidebar-mini .nav-legacy > .nav-item .nav-link .nav-icon,
 .sidebar-mini-md .nav-legacy > .nav-item .nav-link .nav-icon {
   transition: margin-left ease-in-out 0.3s;
+  margin-left: .75rem;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -12422,6 +12449,36 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
   }
 }
 
+.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-legacy.nav-child-indent .nav-treeview,
+.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-legacy.nav-child-indent .nav-treeview,
+.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .nav-legacy.nav-child-indent .nav-treeview,
+.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .nav-legacy.nav-child-indent .nav-treeview {
+  padding-left: 1rem;
+}
+
+.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-legacy.nav-child-indent .nav-treeview .nav-treeview,
+.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-legacy.nav-child-indent .nav-treeview .nav-treeview,
+.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .nav-legacy.nav-child-indent .nav-treeview .nav-treeview,
+.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .nav-legacy.nav-child-indent .nav-treeview .nav-treeview {
+  padding-left: 2rem;
+  margin-left: -1rem;
+}
+
+.sidebar-mini.sidebar-collapse.text-sm .main-sidebar.sidebar-focused .nav-legacy.nav-child-indent .nav-treeview,
+.sidebar-mini.sidebar-collapse.text-sm .main-sidebar:hover .nav-legacy.nav-child-indent .nav-treeview,
+.sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar.sidebar-focused .nav-legacy.nav-child-indent .nav-treeview,
+.sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar:hover .nav-legacy.nav-child-indent .nav-treeview {
+  padding-left: .5rem;
+}
+
+.sidebar-mini.sidebar-collapse.text-sm .main-sidebar.sidebar-focused .nav-legacy.nav-child-indent .nav-treeview .nav-treeview,
+.sidebar-mini.sidebar-collapse.text-sm .main-sidebar:hover .nav-legacy.nav-child-indent .nav-treeview .nav-treeview,
+.sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar.sidebar-focused .nav-legacy.nav-child-indent .nav-treeview .nav-treeview,
+.sidebar-mini-md.sidebar-collapse.text-sm .main-sidebar:hover .nav-legacy.nav-child-indent .nav-treeview .nav-treeview {
+  padding-left: 1rem;
+  margin-left: -.5rem;
+}
+
 .sidebar-mini.sidebar-collapse .nav-legacy > .nav-item > .nav-link .nav-icon,
 .sidebar-mini-md.sidebar-collapse .nav-legacy > .nav-item > .nav-link .nav-icon {
   margin-left: .55rem;
@@ -12432,6 +12489,22 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
   margin-left: .36rem;
 }
 
+.sidebar-mini.sidebar-collapse .nav-legacy.nav-child-indent .nav-treeview .nav-treeview,
+.sidebar-mini-md.sidebar-collapse .nav-legacy.nav-child-indent .nav-treeview .nav-treeview {
+  padding-left: 0;
+  margin-left: 0;
+}
+
+.sidebar-mini.sidebar-collapse.text-sm .nav-legacy > .nav-item > .nav-link .nav-icon,
+.sidebar-mini-md.sidebar-collapse.text-sm .nav-legacy > .nav-item > .nav-link .nav-icon {
+  margin-left: .75rem;
+}
+
+.sidebar-mini.sidebar-collapse.text-sm .nav-legacy > .nav-item > .nav-link.active > .nav-icon,
+.sidebar-mini-md.sidebar-collapse.text-sm .nav-legacy > .nav-item > .nav-link.active > .nav-icon {
+  margin-left: calc(.75rem - 3px);
+}
+
 [class*='sidebar-dark'] .nav-legacy.nav-sidebar > .nav-item .nav-treeview,
 [class*='sidebar-dark'] .nav-legacy.nav-sidebar > .nav-item > .nav-treeview {
   background: rgba(255, 255, 255, 0.05);
@@ -12473,7 +12546,9 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
 }
 
 .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-collapse-hide-child .menu-open > .nav-treeview,
-.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-collapse-hide-child .menu-open > .nav-treeview {
+.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-collapse-hide-child .menu-open > .nav-treeview,
+.sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused .nav-collapse-hide-child .menu-open > .nav-treeview,
+.sidebar-mini-md.sidebar-collapse .main-sidebar:hover .nav-collapse-hide-child .menu-open > .nav-treeview {
   max-height: -webkit-min-content;
   max-height: -moz-min-content;
   max-height: min-content;
@@ -12496,6 +12571,11 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
   top: .465rem;
 }
 
+.text-sm .nav-compact .nav-link > .right,
+.text-sm .nav-compact .nav-link > p > .right {
+  top: .7rem;
+}
+
 [class*='sidebar-dark'] .form-control-sidebar,
 [class*='sidebar-dark'] .btn-sidebar {
   background: #3f474e;
@@ -12836,26 +12916,6 @@ body.sidebar-collapse:not(.sidebar-mini-md):not(.sidebar-mini) .main-header::bef
   margin-right: 0;
 }
 
-.sidebar-collapse .sidebar-no-expand.main-sidebar.sidebar-focused .nav-flat .nav-icon,
-.sidebar-collapse .sidebar-no-expand.main-sidebar:hover .nav-flat .nav-icon {
-  margin-left: .5rem;
-}
-
-.sidebar-collapse .sidebar-no-expand.main-sidebar.sidebar-focused .nav-flat .nav-treeview .nav-icon,
-.sidebar-collapse .sidebar-no-expand.main-sidebar:hover .nav-flat .nav-treeview .nav-icon {
-  margin-left: .3rem;
-}
-
-.sidebar-collapse .sidebar-no-expand.main-sidebar.sidebar-focused .nav-flat.nav-compact .nav-icon,
-.sidebar-collapse .sidebar-no-expand.main-sidebar:hover .nav-flat.nav-compact .nav-icon {
-  margin-left: 1.05rem;
-}
-
-.sidebar-collapse .sidebar-no-expand.main-sidebar.sidebar-focused .nav-flat.nav-compact .nav-treeview .nav-icon,
-.sidebar-collapse .sidebar-no-expand.main-sidebar:hover .nav-flat.nav-compact .nav-treeview .nav-icon {
-  margin-left: .85rem;
-}
-
 .nav-sidebar {
   position: relative;
 }

File diff suppressed because it is too large
+ 0 - 0
dist/css/adminlte.css.map


File diff suppressed because it is too large
+ 0 - 0
dist/css/adminlte.min.css


File diff suppressed because it is too large
+ 0 - 0
dist/css/adminlte.min.css.map


Some files were not shown because too many files changed in this diff