summaryrefslogtreecommitdiff
path: root/addons/website/static/src/snippets/s_table_of_content/000.scss
blob: 670e1365a9c443b805267b89eeeae33237e846e1 (plain)
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
.s_table_of_content:not([data-vcss]) {
    .s_table_of_content_navbar_wrap {
        &.s_table_of_content_navbar_sticky {
            &.s_table_of_content_horizontal_navbar, &.s_table_of_content_vertical_navbar .s_table_of_content_navbar {
                @include o-position-sticky($top: 0px);
            }
        }
        &:not(.s_table_of_content_navbar_sticky) {
            &, .s_table_of_content_navbar {
                top: 0px !important;
            }
        }
        &.s_table_of_content_vertical_navbar .s_table_of_content_navbar {
            > a.list-group-item-action {
                background: none;
                color: inherit;
                opacity: 0.7;
                font-weight: $font-weight-normal + 100;
                padding-left: 3px;
                transition: padding 0.1s;

                &:before {
                    @include o-position-absolute(10px, auto, 10px, 0);
                    width: 2px;
                    content: "";
                }
                &:hover {
                    opacity: 1;
                }
                &:focus {
                    background: none;
                }
                &.active {
                    background: none;
                    padding-left: 8px;
                    opacity: 1;

                    &:before {
                        background-color: theme-color('primary');
                    }
                }
            }
        }
        &.s_table_of_content_horizontal_navbar {
            z-index: 1;
            padding-top: $navbar-padding-y;
            padding-bottom: $navbar-padding-y;
            margin-bottom: $spacer * 2;

            .s_table_of_content_navbar {
                display: inline;
    
                > a {
                    &.list-group-item-action {
                        width: auto;
                    }
                    &.list-group-item {
                        display: inline-block;
                        margin-bottom: 2px;
                    }
                }
            }
        }
    }
}