xref: /template/sprintdoc/css/base_structure.less (revision 035726f00022f3bde397b2e87087d13b10a7a32f) 
1/**
2 * This file provides styles for the general layout structure.
3 *
4 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
5 */
6
7
8/* Col Grid */
9.make-grid(xs);
10
11@media screen{
12    .container{
13        margin: 0 @margin-big;
14    }
15}
16
17@media @screen_min-xxs {
18    .container{
19        //border: 1px solid deeppink;
20    }
21}
22
23@media @screen_min-xs {
24    .container{
25        //border: 1px solid orangered;
26    }
27}
28
29@media @screen_min-sm {
30    .container{
31        //border: 1px solid green;
32    }
33    .make-grid(sm);
34}
35
36@media @screen_min-md {
37    .container{
38        //border: 1px solid blue;
39    }
40    .make-grid(md);
41}
42
43@media @screen_min-lg {
44    .container{
45        //border: 1px solid blue;
46    }
47    .make-grid(lg);
48}
49
50@media @screen_min-xlg {
51    html{
52        font-size: 130%;
53    }
54    .container{
55        //border: 1px solid red;
56    }
57}
58
59@media @screen_min-xxlg {
60    html{
61        font-size: 145%;
62    }
63    .container{
64        //border: 1px solid red;
65    }
66}
67
68
69
70@media @screen_min-md {
71
72    // z-indeces
73    .nav-direct p{
74        z-index: 1000;
75    }
76    .top-header{
77        z-index: 900;
78    }
79    .tools .row > .col-xs-12{
80        z-index: 1;
81    }
82    .header .row > .col-xs-12{
83        z-index: 2;
84    }
85    .content  .row > .col-xs-12{
86        z-index: 3;
87    }
88
89    .top-header{
90        position: absolute;
91        top: 0;
92        left: 0;
93        width: 100%;
94    }
95
96    .header, .tools{
97        .row{
98            position: relative;
99            > .col-xs-12{
100                width: 23%;
101                box-sizing: border-box;
102            }
103        }
104    }
105
106    .header{
107        .row > .col-xs-12{
108            position: relative;
109            height: 150px;
110            min-height: 6rem;
111        }
112    }
113
114    .tools{
115        .row > .col-xs-12{
116            position: absolute;
117            background: pink;
118        }
119    }
120
121    .content{
122        .row > .col-xs-12{
123            width: 100%;
124            background-color: #fff;
125        }
126    }
127    .showSidebar{
128        .content{
129            .row > .col-xs-12{
130                width: 73%;
131                position: relative;
132                float: right;
133            }
134        }
135    }
136
137    .claim{
138        .logo{
139            position: absolute;
140            bottom: 1em;
141            overflow: visible;
142        }
143
144        .logo img{
145            height: 60px;
146            width: auto;
147        }
148    }
149
150    .showSidebar{
151        .claim{
152            .logo{
153                position: absolute;
154                bottom: 0;
155                height: 1px;
156                overflow: visible;
157            }
158            .logo img{
159                max-width: 100%;
160                height: auto;
161            }
162        }
163    }
164
165    .main-sidebar{
166        &.search{
167            > img{
168                width: 100%;
169                height: auto;
170            }
171        }
172    }
173}
174
175