xref: /template/sprintdoc/css/base_structure.less (revision c04d41f357c6815aa5a0ec2e8ff55d25b236964b) 
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            background: pink;
128        }
129    }
130
131    .content {
132        .row > .col-xs-12 {
133            width: 100%;
134            background-color: #fff;
135        }
136    }
137
138    .showSidebar {
139        .content {
140            .row > .col-xs-12 {
141                width: 73%;
142                position: relative;
143                float: right;
144            }
145        }
146    }
147
148    .claim {
149        .logo {
150            position: absolute;
151            bottom: 1em;
152            overflow: visible;
153        }
154
155        .logo img {
156            height: 60px;
157            width: auto;
158        }
159    }
160
161    .showSidebar {
162        .claim {
163            .logo {
164                position: absolute;
165                bottom: 0;
166                height: 1px;
167                width: 100%; // fo IE
168                overflow: visible;
169            }
170            .logo img {
171                max-width: 100%;
172                height: auto;
173            }
174        }
175    }
176
177    .main-sidebar {
178        &.search {
179            > img {
180                width: 100%;
181                height: auto;
182            }
183        }
184    }
185}
186
187