xref: /template/sprintdoc/css/base_structure.less (revision 646345133d72c121c484c6161208fb384f2f2bef) 
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    .container {
22        //border: 1px solid deeppink;
23    }
24}
25
26@media @screen_min-xs {
27    .container {
28        //border: 1px solid orangered;
29    }
30}
31
32@media @screen_min-sm {
33    .container {
34        //border: 1px solid green;
35    }
36
37    .make-grid(sm);
38}
39
40@media @screen_min-md {
41    .container {
42        //border: 1px solid blue;
43    }
44
45    .make-grid(md);
46}
47
48@media @screen_min-lg {
49    .container {
50        //border: 1px solid blue;
51    }
52
53    .make-grid(lg);
54}
55
56@media @screen_min-xlg {
57    html {
58        font-size: 120%;
59    }
60
61    .container {
62        //border: 1px solid red;
63    }
64}
65
66@media @screen_min-xxlg {
67    html {
68        //font-size: 135%;
69    }
70
71    .container {
72        //border: 1px solid red;
73    }
74}
75
76@media @screen_min-md {
77
78    // z-indeces
79    .nav-direct p {
80        z-index: 1000;
81    }
82
83    .top-header {
84        z-index: 900;
85    }
86
87    .tools .row > .col-xs-12 {
88        z-index: 1;
89    }
90
91    .header .row > .col-xs-12 {
92        z-index: 2;
93    }
94
95    .content .row > .col-xs-12 {
96        z-index: 3;
97    }
98
99    .top-header {
100        position: absolute;
101        top: 0;
102        left: 0;
103        width: 100%;
104    }
105
106    .header, .tools {
107        .row {
108            position: relative;
109            > .col-xs-12 {
110                width: 23%;
111                box-sizing: border-box;
112            }
113        }
114    }
115
116    .header {
117        .row > .col-xs-12 {
118            position: relative;
119            height: 150px;
120            min-height: 6rem;
121        }
122    }
123
124    .tools {
125        .row > .col-xs-12 {
126            position: absolute;
127        }
128    }
129
130    .content {
131        .row > .col-xs-12 {
132            width: 100%;
133            position: relative;
134            background-color: #fff;
135        }
136    }
137
138    .showSidebar {
139        .content {
140            .row > .col-xs-12 {
141                width: 73%;
142                float: right;
143            }
144        }
145    }
146
147    .claim {
148        .logo {
149            position: absolute;
150            bottom: 1em;
151            overflow: visible;
152        }
153
154        .logo img {
155            height: 60px;
156            width: auto;
157            border-style: solid;
158            border-color: transparent;
159            border-width: 0 3px;
160        }
161        .logo {
162            a:hover, a:focus, a:active{
163                img {
164                    border: 0 none;
165                }
166            }
167        }
168    }
169
170    .showSidebar {
171        .claim {
172            .logo {
173                position: absolute;
174                bottom: 0;
175                height: 1px;
176                width: 100%; // fo IE
177                overflow: visible;
178            }
179            .logo img {
180                max-width: 100%;
181                height: auto;
182            }
183        }
184    }
185
186    .main-sidebar {
187        &.search {
188            > img {
189                width: 100%;
190                height: auto;
191            }
192        }
193    }
194}
195
196