xref: /template/sprintdoc/css/area_nav-breadcrumb.less (revision 9a1f716d9add2efaab5b5074aef928b4f07816d5) 
1/**
2 * This file provides the design styles for the direct / menu jump links.
3 *
4 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
5 */
6
7.breadcrumbs {
8    padding: 2rem 2rem 1rem;
9    border-bottom: 1px solid @color-border;
10
11    > p {
12        font-size: .83rem;
13        margin: 0;
14
15        * {
16            font-size: .83rem;
17        }
18
19        .bchead {
20            .sr-only();
21        }
22
23        a {
24            &:hover,
25            &:focus,
26            &:active {
27                color: @color-nav;
28            }
29        }
30
31        span.home {
32            a {
33                .fontello();
34                .hide-text-show-before();
35                .icon-home();
36
37                height: 1em;
38                width: auto;
39                text-decoration: none;
40                transition: @transition color;
41
42                &:before {
43                    font-size: 1rem;
44                    margin-top: .17rem;
45                }
46
47                &:hover,
48                &:focus,
49                &:active {
50                    color: @color-link-hover;
51                }
52            }
53        }
54    }
55
56    .page-attributes {
57        float: right;
58        display: inline-block;
59        list-style: none;
60        margin: 0;
61        padding: 0;
62        max-width: 30%;
63
64        > li {
65            .btn-usertools-wrapper(); // uniform li
66            .btn-usertools-num();
67
68            float: left;
69
70            &.do_none {
71                &:not([class*="plugin__qc"]) {
72                    background-color: @color-site-bg;
73                }
74
75                .num {
76                    background-color: @color-border;
77                    color: @color-nav;
78                }
79            }
80
81            &.plugin__qc {
82                display: inline-block;
83                overflow: visible;
84            }
85
86            .prefix {
87                .fontello();
88                .hide-text-show-before();
89
90                height: auto;
91                width: 100%;
92                color: @color-nav;
93                text-align: center;
94                transition: @transition color;
95
96                &::before {
97                    width: 100%;
98                    margin: .35em 0 0;
99                }
100            }
101        } // li
102
103        a {
104            display: block;
105            width: auto;
106            min-height: 2em;
107            margin: 0;
108            border: 1px solid @color-border;
109            border-radius: @border-radius;
110            color: @color-nav;
111            transition: @transition color, @transition border-color;
112
113            &[aria-expanded="false"] + #plugin__qc__wrapper {
114                display: none;
115            }
116
117            &:hover,
118            &:active,
119            &:focus {
120                border-color: @button_color;
121                color: @button_color;
122
123                .prefix {
124                    color: @button_color;
125                }
126            }
127        }
128
129        #plugin__qc__wrapper {
130            position: absolute;
131            right: 0;
132            width: auto;
133            border: 0 none;
134            background: @color-site-bg;
135
136            &[aria-hidden="false"] {
137                margin-top: .7rem;
138            }
139        }
140
141        #plugin__qc__icon {
142            display: none;
143        }
144
145        #plugin__qc__link {
146            font-size: .8rem;
147            position: relative;
148
149            .prefix {
150                .icon-emo-happy();
151
152                font-size: inherit;
153            }
154        }
155    }
156}
157