apache-ignite

1
// Licensed to the Apache Software Foundation (ASF) under one or more
2
// contributor license agreements.  See the NOTICE file distributed with
3
// this work for additional information regarding copyright ownership.
4
// The ASF licenses this file to You under the Apache License, Version 2.0
5
// (the "License"); you may not use this file except in compliance with
6
// the License.  You may obtain a copy of the License at
7
//
8
//     http://www.apache.org/licenses/LICENSE-2.0
9
//
10
// Unless required by applicable law or agreed to in writing, software
11
// distributed under the License is distributed on an "AS IS" BASIS,
12
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
// See the License for the specific language governing permissions and
14
// limitations under the License.
15
header {
16

17
    min-height: var(--header-height);
18
    background: white;
19
    display: grid;
20
    grid-template-columns: auto auto 1fr auto auto auto;
21
    grid-template-areas: 'left-toggle home nav search gh gg';
22
    grid-template-rows: 40px;
23
    flex-direction: row;
24
    align-items: center;
25
    justify-content: flex-start;
26
    padding: 12px 20px;
27
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);
28
    z-index: 1;
29

30
    a:hover, button:hover {
31
        opacity: 0.85;
32
    }
33

34
    li:hover .dropdown, a:focus + .dropdown {
35
        display: block;
36
    }
37

38
    .dropdown-arrow {
39
        margin-left: 5px;
40
        margin-bottom: 3px;
41

42
        width: 8px;
43
        height: 4px;
44
    }
45

46
    .dropdown {
47
        display: none;
48
        position: fixed;
49
        top: calc(var(--header-height) - 12px);
50
        width: max-content;
51
        background: white;
52
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12);
53
        border-radius: 4px;
54
        padding-top: 10px;
55
        padding-bottom: 12px;
56
        z-index: 2;
57

58
        li {
59
            display: flex;
60
        }
61

62
        a {
63
            color: grey !important;
64
            font-size: 16px;
65
            padding-top: 5px;
66
            padding-bottom: 4px;
67
            &:hover {
68
                color: var(--gg-orange) !important;
69
            }
70
        }
71
    }
72

73
    .menu {
74
        border: none;
75
        background: none;
76
        width: 40px;
77
        height: 40px;
78
        margin-right: 12px;
79
        cursor: pointer;
80
        grid-area: left-toggle;
81

82
        img {
83
            width: 18px;
84
            height: 12px;
85
        }
86
    }
87

88
    .search-toggle, .top-nav-toggle, .github, .search-close {
89
        background: none;
90
        border: none;
91
        padding: 0;
92
        width: 36px;
93
        height: 36px;
94
        display: inline-flex;
95
        align-items: center;
96
        justify-content: center;
97
        color: var(--gg-dark-gray);
98
        font-size: 26px;
99
    }
100
    .search-toggle {
101
        grid-area: search;
102
    }
103
    .top-nav-toggle {
104
        grid-area: top-toggle;
105
    }
106

107
    .home {
108
        
109
        grid-area: home;
110
        margin-right: auto;
111
        img {
112
            height: 36px;
113
        }
114
    }
115
	
116

117
    .search {
118
        margin-left: auto;
119
        margin-right: 20px;
120
        grid-area: search;
121

122
        input[type='search'] {
123
            color: var(--gg-dark-gray);
124
            
125
            background: rgba(255, 255, 255, 0.8);
126
            border: 1px solid #cccccc;
127
            padding: 10px 15px;
128
            font-family: inherit;
129
            max-width: 148px;
130
            height: 37px;
131
            font-size: 14px;
132
            -webkit-appearance: unset;
133
            appearance: unset;
134

135
            &[disabled] {
136
                opacity: 0.5;
137
                cursor: not-allowed;
138
            }
139
        }
140

141
    }
142

143

144
    
145
         
146

147
    &>nav {
148
        grid-area: nav;
149
        font-size: 18px;
150
        display: flex;
151
        flex-direction: row;
152
        margin: 0 20px;
153

154
        li {
155
            list-style: none;
156
            margin-right: 0.5em;
157
            display: flex;
158
        }
159

160
        a {
161
            padding: 9px 14px;
162
            color: var(--gg-dark-gray) !important;
163
            text-decoration: none;
164
            white-space: nowrap;
165

166
            &.active {
167
                border-radius: 3px;
168
                background-color: #f0f0f0;
169
            }
170
        }
171
    }
172

173
    .github {
174
        grid-area: gh;
175
    }
176

177

178
    .search-close {
179
        margin-right: 10px;
180
    }
181

182

183
    @media (max-width: 900px) {
184
        grid-template-columns: auto auto 1fr auto auto auto;
185
        grid-template-areas: 
186
            'left-toggle home spacer top-toggle search gh gg'
187
            'nav         nav  nav    nav        nav    nav nav';
188

189
        nav {
190
            justify-content: center;
191
            margin: 20px 0 10px;
192
        }
193

194
        & > nav > li {
195
            position: relative;
196
        }
197

198
        .dropdown {
199
            
200
            top: calc(var(--header-height) + 25px);
201
        }
202
    }
203

204
    @media (max-width: 600px) {
205
        .search {
206
            margin-right: 5px;
207
            input[type='search'] {
208
                max-width: 110px;
209
            }
210
        }
211
    }
212

213
    &:not(.narrow-header) {
214
        .search-toggle, .top-nav-toggle, .search-close {
215
            display: none;
216
        }
217
    }
218
    &.narrow-header {
219
        a.home {
220
            top: 0;
221
        }
222
        &:not(.show-nav) {
223
            nav {
224
                display: none;
225
            }
226
        }
227
        &.show-search {
228
            .search-toggle, .home, .top-nav-toggle, .github, .menu {
229
                display: none;
230
            }
231
            .search {
232
                grid-column-start: home;
233
                grid-column-end: github;
234
                width: 100%;
235
                display: flex;
236

237
                input {
238
                    max-width: initial;
239
                    width: 100%;
240
                }
241
            }
242
        }
243
        &:not(.show-search) {
244
            .search {
245
                display: none;
246
            }
247
        }
248
        nav {
249
            flex-direction: column;
250
            justify-content: stretch;
251

252
            li {
253
                display: flex;
254
            }
255

256
            a {
257
                width: 100%;
258
            }
259
        }
260
    }
261
}
262
.swiftype-widget {
263

264
    .autocomplete {
265
        background-color: white;
266
        display: block;
267
        list-style-type: none;
268
        margin: 0;
269
        padding: 0;
270
        box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.37);
271
        position: absolute;
272
        border-radius: 3px;
273
        text-align: left;
274
        right: 75px !important;
275
        min-width: 350px;
276

277
        ul {
278

279
            background-color: white;
280
            display: block;
281
            list-style-type: none;
282
            margin: 0;
283
            padding: 0;
284
            border-radius: 3px;
285
            text-align: left;
286
            max-height: 70vh;
287
            overflow: auto;
288

289
            li {
290
                border-top: 1px solid #e5e5e5;
291
                border-bottom: 1px solid #fff;
292
                cursor: pointer;
293
                padding: 10px 8px;
294
                font-size: 13px;
295
                list-style-type: none;
296
                background-image: none;
297
                margin: 0;
298
              }
299

300
            li.active {
301
                border-top: 1px solid #cccccc;
302
                border-bottom: 1px solid #cccccc;
303
                background-color: #f0f0f0;
304
            }
305
            
306
            p {
307
                font-size: 13px;
308
                line-height: 16px;
309
                margin: 0;
310
                padding: 0;
311

312
                &.url {
313
                    font-size: 11px;
314
                    color: #999;
315
                }
316
            }
317
            
318
            a {
319
                font-size: 15px;
320
            }
321
            em {
322
                font-weight: bold
323
            }
324
        }
325
    }   
326
}
327
section.hero {
328
    background-image: url(../images/dev-internal-bg.jpg);
329
    background-position: center;
330
    background-position-x: left;
331
    background-repeat: no-repeat;
332
    background-size: cover;
333
    display: grid;
334
    grid-template-columns: 1fr auto;
335
    grid-template-areas: 'title versions';
336
    grid-template-rows: 60px;
337
    align-items: center;
338
    padding: 5px 30px;
339
    flex: unset;
340
    
341
    
342
    .title {
343
        color: #f3f3f3;
344
        text-transform: uppercase;
345
        font-size: 22px;
346
    }
347

348
    select {
349
        list-style: none;
350
        
351
        line-height: 28px;
352
        border-radius: 3px;
353
    
354
        
355
        color: #333333;
356
        line-height: 24px;
357
        padding: 5px 10px;
358
        white-space: nowrap;
359
        font-size: 14px;
360
        background:  #f0f0f0 url("/assets/images/arrow-down.svg") no-repeat center right 5px;
361
    }
362
}
363

364
@media (max-width: 450px) {
365
    section.hero {
366
        grid-template-rows: auto;
367
        padding: 15px;
368
    
369
        .title {
370
            font-size: 18px;
371
        }
372
    }
373

374
}
375