forked from adamlaska/circleci-docs
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path_subnav.scss
More file actions
79 lines (66 loc) · 1.65 KB
/
_subnav.scss
File metadata and controls
79 lines (66 loc) · 1.65 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
// The following variables required by shared subnav component.
// Values are copied from circleci.com project.
$border-width: 1px;
$border-width-widest: 4px;
$z-index-subnav: 2;
$gray: #D8D8D8;
$white: #FFFFFF;
$text-color-header: $black-light;
$transition-duration-medium: 400ms;
@import 'shared/components/subnav';
// These tweaks to the shared subnav CSS are necessary to work in the context of this project's layout.
.subnav.component {
padding: 0 15px;
margin-left: -15px;
margin-right: -15px;
width: auto;
background-color: #FAFAFA;
border-bottom: none; // re-implemented on .results-nav so that result item white hover background doesn't show around the left/right edges of the subnav
&.js-fixed {
transition: none;
}
li a {
color: inherit;
}
li:first-child {
margin-left: 0;
}
}
.deep-link-anchor {
&.subnav-offset {
top: -$nav-offset-subnav;
}
}
// Another set of styles specific to this project:
// 1. Override hiding of subnav on mobile
.component.subnav {
@media screen and (max-width: $screen-xs-max) {
display: block;
}
}
#subnav-placeholder {
@media screen and (max-width: $screen-xs-max) {
display: block;
}
}
// 2. Add style for mobile
.component.subnav {
@media screen and (max-width: $screen-xs-max) {
font-size: $font-size-small;
li {
// More top-padding to help separate these from the header drop-shadow
padding-top: 16px;
padding-bottom: 8px;
}
}
}
// 3. Special case for search results container
#hits-target {
#subnav-placeholder {
position: sticky;
top: $nav-height-mobile;
@media (min-width: $screen-md) {
top: $nav-height;
}
}
}