xref: /template/sprintdoc/css/area_nav-breadcrumb.less (revision ed6fc9e542700e6895baddbff69081f577b470a3) 
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
67            float: left;
68
69            &.plugin__qc {
70                display: inline-block;
71                overflow: visible;
72            }
73
74            &.do_none {
75                background-color: @color-site-bg;
76            }
77
78
79            .btn-usertools-num ();
80
81
82            .prefix {
83                .fontello();
84                .hide-text-show-before();
85
86                height: auto;
87                width: 100%;
88                color: @color-nav;
89                text-align: center;
90                transition: @transition color;
91
92                &::before {
93                    width: 100%;
94                    margin: .35em 0 0;
95                }
96            }
97        } // li
98
99        a {
100            display: block;
101            width: auto;
102            min-height: 2em;
103            margin: 0;
104            border: 1px solid @color-border;
105            border-radius: @border-radius;
106            color: @color-nav;
107            transition: @transition color, @transition border-color;
108
109            &[aria-expanded="false"] + #plugin__qc__wrapper {
110                display: none;
111            }
112
113            &:hover,
114            &:active,
115            &:focus {
116                border-color: @button_color;
117                color: @button_color;
118
119                .prefix {
120                    color: @button_color;
121                }
122            }
123        }
124
125        #plugin__qc__wrapper {
126            position: absolute;
127            right: 0;
128            width: auto;
129            border: 0 none;
130            background: @color-site-bg;
131
132            &[aria-hidden="false"] {
133                margin-top: .7rem;
134            }
135        }
136
137        #plugin__qc__icon {
138            display: none;
139        }
140
141        #plugin__qc__link {
142            font-size: .8rem;
143            position: relative;
144
145            .prefix {
146                .icon-emo-happy();
147
148                font-size: inherit;
149            }
150        }
151    }
152}
153