[TASK] Adjust collapse page tree button
[Packages/TYPO3.CMS.git] / typo3 / sysext / t3skin / Resources / Private / Styles / TYPO3 / _element_docheader.less
1 //
2 // DocHeader
3 //
4
5 @docheader-text: rgb(45, 45, 45);
6 @docheader-bg: linear-gradient(to bottom, rgb(235, 235, 235) 0%, rgb(205, 205, 205) 100%);
7 @docheader-border: rgb(195, 195, 195);
8
9 #typo3-docheader {
10 background-color: @docheader-bg;
11 background: @docheader-bg;
12
13 img,
14 input {
15 cursor: pointer;
16 }
17
18 .t3-icon {
19 margin-bottom: 3px;
20 }
21
22 .left {
23 float: left;
24
25 //
26 // Extra margin 6px added to it-icon margin, doubled spacing = 12px
27 //
28 .buttongroup {
29 .pull-left;
30 margin-right: 6px;
31 .c-inputButton {
32 color: inherit;
33 }
34 }
35
36 select {
37 margin-right: 12px;
38 }
39 .t3-icon {
40 margin-right: 6px;
41 }
42
43 }
44
45 .right {
46 .pull-right;
47
48 .t3-icon {
49 margin-left: 6px;
50 }
51 }
52
53
54 .typo3-docheader-functions {
55 color: @docheader-text;
56 border-bottom: 1px solid @docheader-border;
57 height: 27px;
58 line-height: 27px;
59 padding: 0 24px;
60 overflow: hidden;
61
62 a {
63 color: @docheader-text;
64
65 &:hover {
66 color: #000;
67 }
68 }
69
70 //
71 // overwrite defaults from normalize.css
72 //
73 select {
74 color: @docheader-text;
75 }
76 }
77
78 .typo3-docheader-buttons {
79 color: @docheader-text;
80 border-bottom: 1px solid @docheader-border;
81 height: 22px;
82 padding: 3px 24px;
83 overflow: hidden;
84
85 a {
86 color: @docheader-text;
87
88 &:hover {
89 color: #000;
90 }
91 }
92 }
93 }
94
95 //
96 // ExtJS Viewport
97 //
98
99 //
100 // Collapsed tree frame is not invisible, but 5px wide.
101 // If no tree frame is in use, an empty container is shown instead
102 //
103
104 #typo3-navigationContainer-xsplit,
105 #typo3-navigationContainer-xcollapsed,
106 #typo3-navigationDummy {
107 background: @body-bg url(../../Images/docheader-split-background.png) left top repeat-x;
108 }
109
110
111 // override the ExtJS collapse page tree button
112 // -------------------------
113
114 @module-menu-border-color-lighter: #F5F5F5;
115 @module-menu-border-color-light: #C3C3C3;
116
117 #typo3-navigationContainer-xcollapsed {
118 width: 24px!important;
119 &:before {
120 content: "";
121 position: absolute;
122 top: 0;
123 width: 8px;
124 height: 100%;
125 background-color: lighten(@module-menu-bg,25%);
126 border-right: 1px solid lighten(@module-menu-border-color,20%);
127 border-left: 1px solid @module-menu-border-color;
128 .box-shadow(3px 0 0 rgba(0,0,0,0.15));
129 }
130 }
131
132 // center collapse button vertical
133 .x-panel-body {
134 .x-layout-cmini-west .x-layout-mini,
135 .x-layout-split-west .x-layout-mini {
136 top: 50%;
137 margin-top: -40px;
138 }
139 }
140
141
142 // styling for the page tree collapse button
143 // this class will be extended from ExtJS CSS Class setup (ExtJS close and open html setup)
144 .typo3-btn-collapse-page-tree {
145 height: 80px;
146 width: 14px;
147 border-top-right-radius: 3px;
148 border-bottom-right-radius: 3px;
149 background: none;
150 border: 1px solid @module-menu-border-color-light;
151 border-left: 1px solid @module-menu-border-color-lighter;
152 display: block;
153 font-size: 0;
154 .opacity(1);
155 &:after {
156 font-family: 'FontAwesome';
157 content: "\f0d9";
158 position: absolute;
159 top: 50%;
160 display: block;
161 width: 100%;
162 margin-top: -1px;
163 color: #000;
164 font-size: 12px;
165 vertical-align: middle;
166 text-align: center;
167 }
168 }
169
170 // close page tree button
171 .x-layout-split-west .x-layout-mini {
172 &:extend(.typo3-btn-collapse-page-tree all);
173 margin-left: -2px;
174 background-color: @module-menu-border-color-lighter;
175 &:hover {
176 background-color: darken(@module-menu-border-color-lighter,5%);
177 }
178 }
179
180 // open page tree button
181 .x-layout-cmini-west .x-layout-mini {
182 &:extend(.typo3-btn-collapse-page-tree all);
183 background-color: lighten(@module-menu-bg, 25%);
184 margin-left: 7px;
185 border: 1px solid lighten(@module-menu-border-color, 20%);
186 border-left: 0;
187
188 &:hover {
189 .opacity(1);
190 background-color: lighten(@module-menu-bg,30%);
191 }
192 &:after {
193 margin-top: -9px;
194 color: #fff;
195 content: "\f0da";
196 }
197 }
198
199
200
201 //
202 // ExtJS theme for PageTree
203 //
204 #typo3-pagetree-topPanelItems {
205 background-color: @docheader-bg;
206 background: @docheader-bg;
207
208 #typo3-pagetree-topPanel {
209 // Functions
210 .x-panel-tbar {
211 color: @docheader-text;
212 border-bottom: 1px solid @docheader-border;
213 a {
214 color: @docheader-text;
215 &:hover {
216 color: #000;
217 }
218 }
219 }
220
221 // Buttons
222 .x-panel-body {
223 color: @docheader-text;
224 border-bottom: 1px solid @docheader-border;
225 .typo3-pagetree-topPanel-button {
226 margin-top: 0;
227 }
228 a {
229 color: @docheader-text;
230 &:hover {
231 color: #000;
232 }
233 }
234 }
235 }
236
237 }