xref: /template/sprintdoc/css/base_structure.less (revision 28eb39b298672870716b7ead6b88a05c04d24cf2) 
1/**
2 * This file provides styles for the general layout structure.
3 *
4 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
5 */
6
7
8/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
9/* Col Grid */
10/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
11
12.make-grid(xs);
13
14@media screen {
15    .container {
16        margin: 0 @margin-big;
17    }
18}
19
20@media @screen_min-xxs {
21}
22
23@media @screen_min-xs {
24    html {
25        font-size: 114%; //16px
26    }
27}
28
29@media @screen_min-sm {
30    .make-grid(sm);
31    html {
32        font-size: 100%; //16px
33    }
34}
35
36@media @screen_min-md {
37    .make-grid(md);
38    html {
39        font-size: 81.25%; //13px
40    }
41}
42
43@media @screen_min-lg {
44    .make-grid(lg);
45    html {
46        font-size: 87.5%; //14px
47    }
48}
49
50@media @screen_min-xlg {
51    html {
52        font-size: 93.75%; //15px
53    }
54}
55
56@media @screen_min-xxlg {
57    html {
58        font-size: 106.25%; //17px
59    }
60}
61
62/* + + + + +  z-indeces  + + + + + */
63@media @screen_min-md {
64    .nav-direct p {
65        z-index: 1000;
66    }
67
68    .top-header {
69        z-index: 900;
70    }
71
72    .tools .row > .col-xs-12 {
73        z-index: 1;
74    }
75
76    .header .row > .col-xs-12 {
77        z-index: 2;
78    }
79
80    .content .row > .col-xs-12 {
81        z-index: 3;
82    }
83
84    .top-header {
85        position: absolute;
86        top: 0;
87        left: 0;
88        width: 100%;
89    }
90
91    .header,
92    .tools {
93        .row {
94            position: relative;
95
96            > .col-xs-12 {
97                width: 23%;
98                box-sizing: border-box;
99            }
100        }
101    }
102
103    .header {
104        .row > .col-xs-12 {
105            position: relative;
106            height: 150px;
107            min-height: 6rem;
108        }
109    }
110
111    .tools {
112        .row > .col-xs-12 {
113            position: absolute;
114        }
115    }
116
117    .content {
118        .row > .col-xs-12 {
119            position: relative;
120            width: 100%;
121            background-color: #fff;
122        }
123    }
124
125    .claim {
126        .logo {
127            /*position: absolute;
128            bottom: 1em;
129            overflow: visible;*/
130
131            img {
132                height: 60px;
133                width: auto;
134                border-style: solid;
135                border-color: transparent;
136                border-width: 0 2px;
137            }
138
139            a:hover,
140            a:focus,
141            a:active {
142                img {
143                    border-width: 0;
144                }
145            }
146        }
147    }
148
149    .showSidebar {
150        .content {
151            .row > .col-xs-12 {
152                width: 73%;
153                float: right;
154            }
155        }
156
157
158
159        .claim {
160            .logo {
161                /*position: absolute;
162                bottom: 0;
163                height: 1px;
164                width: 100%; // fo IE
165                overflow: visible;*/
166            }
167
168            .logo img {
169                /*max-width: 100%;
170                height: auto;*/
171            }
172        }
173    }
174
175    .wide-content{
176        .logo{
177            /*visibility: hidden;*/
178        }
179        .content {
180            .row > .col-xs-12{
181                width: auto;
182                float: none;
183            }
184        }
185        &.showSidebar{
186            .content {
187                .row > .col-xs-12 {
188                    margin-left: @margin-big;
189                }
190            }
191        }
192
193    }
194
195    .main-sidebar {
196        &.search {
197            > img {
198                width: 100%;
199                height: auto;
200            }
201        }
202    }
203}
204
205@media @screen_max-md {
206    .container {
207        margin: 0 1.25rem;
208    }
209
210    #dokuwiki__usertools {
211        margin-top: 0;
212        max-width: 75%;
213        position: absolute;
214        top: 0;
215        margin-right: 0;
216        right: 1.25rem;
217    }
218
219    .content {
220        position: relative;
221
222        #dokuwiki__pagetools {
223            top: 0;
224        }
225
226        .row > .col-xs-12 #dokuwiki__content::before {
227            display: none;
228        }
229    }
230
231    #dokuwiki__header {
232        .logo {
233            /*width: 200px;
234            max-width: 33%;
235            margin: .8rem 0;*/
236        }
237    }
238
239    .tools {
240        .main-sidebar {
241            display: none;
242        }
243    }
244}
245
246@media @screen_max-md{
247    .claim{
248        min-height: 3rem;
249    }
250}
251