Administrator
2022-09-14 58d006e05dcf2a20d0ec5367dd03d66a61db6849
提交 | 用户 | 时间
58d006 1 //multiple sidebar
A 2
3 .main-content-inner {
4   float: left;
5   width: 100%;
6 }
7
8 .main-content .sidebar {
9  &:before {
10    top: 150px;
11  }
12 }
13
14
15
16 @media only screen and (min-width: @grid-float-breakpoint) {
17  body.mob-safari {
18     .sidebar.h-sidebar + .main-content .sidebar.sidebar-fixed:not(.h-sidebar) {
19         top: @navbar-min-height + 17 + 69;
20     }
21     .sidebar.h-sidebar.no-gap + .main-content .sidebar.sidebar-fixed:not(.h-sidebar) {
22         top: @navbar-min-height + 69;
23     }
24     .sidebar.h-sidebar.menu-min + .main-content .sidebar.sidebar-fixed:not(.h-sidebar) {
25         top: @navbar-min-height + 17 + 44;
26     }
27     .sidebar.h-sidebar.menu-min.no-gap + .main-content .sidebar.sidebar-fixed:not(.h-sidebar) {
28         top: @navbar-min-height + 44;
29     }
30  }
31 }
32
33
34 .enable_horizontal_menu_multiple() when (@enable-horizontal-menu = true) {
35  @media only screen and (min-width: @grid-float-breakpoint) {
36      .h-navbar.navbar-fixed-top + .main-container .sidebar:not(.h-sidebar) {
37         &:before {
38             top: 150px;
39         }
40         
41         .nav-list {
42             padding-top: 3px;
43         }
44         .sidebar-shortcuts ~ .nav-list, .sidebar-shortcuts ~ .nav-wrap-up .nav-list {
45             padding-top: 0;
46         }
47         .sidebar-shortcuts {
48             padding-top: 3px;
49             min-height: 43px;
50         }
51         
52         &.menu-min .sidebar-shortcuts-large {
53             line-height: 40px;
54         }
55      }
56  
57      
58      .h-navbar.navbar-fixed-top + .main-container .main-content .sidebar {
59         &:not(.h-sidebar) .nav-list {
60             padding-top: 0;
61         }
62         
63         &.sidebar-fixed {
64             z-index: @zindex-sidebar-fixed - 1;
65         }
66      }
67      
68
69     .main-content .h-sidebar {
70         padding-top: 1px;
71         margin-top: 0;
72
73         &:before {
74             display: none;
75         }
76         + .page-content {
77             margin-left: auto;
78         }
79         
80         &.sidebar-fixed {
81             left: @sidebar-width;
82             + .page-content {
83                 margin-top: 74px;
84             }
85             &.menu-min + .page-content {
86                 margin-top: 49px;
87             }
88         }
89         
90         &.menu-min .nav-list > li > a {
91             padding: 8px 12px 7px;//for better sidebar1 & sidebar2 alignnment?
92         }
93     }
94
95     .sidebar.compact + .main-content .h-sidebar.sidebar-fixed {
96         left: @sidebar-compact-width;
97     }
98     .sidebar.menu-min + .main-content .h-sidebar.sidebar-fixed {
99         left: @sidebar-min-width;
100     }
101     
102     .navbar.navbar-fixed-top + .main-container .main-content .h-sidebar.sidebar-fixed {
103         padding-top: 3px;
104     }
105  }//@media
106
107
108
109  .enable_container_multiple_menu() when(@enable-container = true) {
110     .container.main-container {
111      
112        .sidebar + .main-content .h-sidebar.sidebar-fixed {
113             left: auto;
114             right: auto;
115         }
116     
117      
118      @media (min-width: max(@screen-sm-min , @grid-float-breakpoint, @screen-compact-menu)) {
119         .sidebar.compact + .main-content .h-sidebar.sidebar-fixed {
120             width: @container-sm - @sidebar-compact-width;
121         }
122      }
123      @media (min-width: max(@screen-sm-min , @grid-float-breakpoint)) {
124         .main-content .h-sidebar.sidebar-fixed {
125             width: @container-sm;
126         }
127         .sidebar + .main-content .h-sidebar.sidebar-fixed {
128             width: @container-sm - @sidebar-width;
129         }
130         .sidebar.menu-min + .main-content .h-sidebar.sidebar-fixed {
131             width: @container-sm - @sidebar-min-width;
132         }
133      }
134      
135      
136      @media (min-width: max(@screen-compact-menu, @screen-md-min)) {
137       .sidebar.compact + .main-content .h-sidebar.sidebar-fixed {
138         width: @container-md - @sidebar-compact-width;
139       }
140      }
141      @media (min-width: @screen-md-min) {
142         .main-content .h-sidebar.sidebar-fixed {
143             width: @container-md;
144         }
145         .sidebar + .main-content .h-sidebar.sidebar-fixed {
146             width: @container-md - @sidebar-width;
147         }
148         .sidebar.menu-min + .main-content .h-sidebar.sidebar-fixed {
149             width: @container-md - @sidebar-min-width;
150         }
151      }
152      
153      
154      @media (min-width: max(@screen-compact-menu, @screen-lg-min)) {
155         .sidebar.compact + .main-content .h-sidebar.sidebar-fixed {
156             width: @container-lg - @sidebar-compact-width;
157         }
158      }
159      @media (min-width: @screen-lg-min) {
160         .main-content .h-sidebar.sidebar-fixed {
161             width: @container-lg;
162         }
163         .sidebar + .main-content .h-sidebar.sidebar-fixed {
164             width: @container-lg - @sidebar-width;
165         }
166         .sidebar.menu-min + .main-content .h-sidebar.sidebar-fixed {
167             width: @container-lg - @sidebar-min-width;
168         }
169      }
170     }
171
172  }
173  .enable_container_multiple_menu();
174
175 }
176 .enable_horizontal_menu_multiple();
177
178
179
180
181 @media only screen and (max-width: @grid-float-breakpoint-max) {
182  .main-container .main-content .sidebar {
183     &.sidebar-fixed {
184         z-index: @zindex-sidebar-fixed - 1;
185     }
186  }
187  
188   .navbar-fixed-top + .main-container .main-content .sidebar {
189     position: fixed;
190     z-index: @zindex-sidebar-fixed - 1;
191   }
192 }