]> git.proxmox.com Git - ceph.git/blame - ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/build/less/sidebar.less
bump version to 12.2.2-pve1
[ceph.git] / ceph / src / pybind / mgr / dashboard / static / AdminLTE-2.3.7 / build / less / sidebar.less
CommitLineData
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}