]>
Commit | Line | Data |
---|---|---|
31f18b77 FG |
1 | /* |
2 | * Component: Sidebar | |
3 | * ------------------ | |
4 | */ | |
5 | //Main Sidebar | |
6 | // ``` .left-side has been deprecated as of 2.0.0 in favor of .main-sidebar ``` | |
7 | ||
8 | .main-sidebar, | |
9 | .left-side { | |
10 | position: absolute; | |
11 | top: 0; | |
12 | left: 0; | |
13 | padding-top: 50px; | |
14 | min-height: 100%; | |
15 | width: @sidebar-width; | |
16 | z-index: 810; | |
17 | //Using disposable variable to join statements with a comma | |
18 | @transition-rule: @transition-speed @transition-fn, | |
19 | width @transition-speed @transition-fn; | |
20 | .transition-transform(@transition-rule); | |
21 | @media (max-width: @screen-header-collapse) { | |
22 | padding-top: 100px; | |
23 | } | |
24 | @media (max-width: @screen-xs-max) { | |
25 | .translate(-@sidebar-width, 0); | |
26 | } | |
27 | .sidebar-collapse & { | |
28 | @media (min-width: @screen-sm) { | |
29 | .translate(-@sidebar-width, 0); | |
30 | } | |
31 | } | |
32 | .sidebar-open & { | |
33 | @media (max-width: @screen-xs-max) { | |
34 | .translate(0, 0); | |
35 | } | |
36 | } | |
37 | } | |
38 | ||
39 | .sidebar { | |
40 | padding-bottom: 10px; | |
41 | } | |
42 | ||
43 | // remove border from form | |
44 | .sidebar-form { | |
45 | input:focus { | |
46 | border-color: transparent; | |
47 | } | |
48 | } | |
49 | ||
50 | //Sidebar user panel | |
51 | .user-panel { | |
52 | position: relative; | |
53 | width: 100%; | |
54 | padding: 10px; | |
55 | overflow: hidden; | |
56 | .clearfix(); | |
57 | > .image > img { | |
58 | width: 100%; | |
59 | max-width: 45px; | |
60 | height: auto; | |
61 | } | |
62 | > .info { | |
63 | padding: 5px 5px 5px 15px; | |
64 | line-height: 1; | |
65 | position: absolute; | |
66 | left: 55px; | |
67 | > p { | |
68 | font-weight: 600; | |
69 | margin-bottom: 9px; | |
70 | } | |
71 | > a { | |
72 | text-decoration: none; | |
73 | padding-right: 5px; | |
74 | margin-top: 3px; | |
75 | font-size: 11px; | |
76 | > .fa, | |
77 | > .ion, | |
78 | > .glyphicon { | |
79 | margin-right: 3px; | |
80 | } | |
81 | } | |
82 | } | |
83 | } | |
84 | ||
85 | // Sidebar menu | |
86 | .sidebar-menu { | |
87 | list-style: none; | |
88 | margin: 0; | |
89 | padding: 0; | |
90 | //First Level | |
91 | > li { | |
92 | position: relative; | |
93 | margin: 0; | |
94 | padding: 0; | |
95 | > a { | |
96 | padding: 12px 5px 12px 15px; | |
97 | display: block; | |
98 | > .fa, | |
99 | > .glyphicon, | |
100 | > .ion { | |
101 | width: 20px; | |
102 | } | |
103 | } | |
104 | .label, | |
105 | .badge { | |
106 | margin-right: 5px; | |
107 | } | |
108 | .badge { | |
109 | margin-top: 3px; | |
110 | } | |
111 | } | |
112 | li.header { | |
113 | padding: 10px 25px 10px 15px; | |
114 | font-size: 12px; | |
115 | } | |
116 | li > a > .fa-angle-left, | |
117 | li > a > .pull-right-container > .fa-angle-left { | |
118 | width: auto; | |
119 | height: auto; | |
120 | padding: 0; | |
121 | margin-right: 10px; | |
122 | } | |
123 | li.active { | |
124 | > a > .fa-angle-left, | |
125 | > a > .pull-right-container > .fa-angle-left { | |
126 | .rotate(-90deg); | |
127 | } | |
128 | > .treeview-menu { | |
129 | display: block; | |
130 | } | |
131 | } | |
132 | ||
133 | // Tree view menu | |
134 | .treeview-menu { | |
135 | display: none; | |
136 | list-style: none; | |
137 | padding: 0; | |
138 | margin: 0; | |
139 | padding-left: 5px; | |
140 | .treeview-menu { | |
141 | padding-left: 20px; | |
142 | } | |
143 | > li { | |
144 | margin: 0; | |
145 | > a { | |
146 | padding: 5px 5px 5px 15px; | |
147 | display: block; | |
148 | font-size: 14px; | |
149 | > .fa, | |
150 | > .glyphicon, | |
151 | > .ion { | |
152 | width: 20px; | |
153 | } | |
154 | > .pull-right-container > .fa-angle-left, | |
155 | > .pull-right-container > .fa-angle-down, | |
156 | > .fa-angle-left, | |
157 | > .fa-angle-down { | |
158 | width: auto; | |
159 | } | |
160 | } | |
161 | } | |
162 | } | |
163 | } |