xref: /template/sprintdoc/css/area_nav-breadcrumb.less (revision d62df8bdbf5da94fe902027cc76c3cff132840d1) 
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: (@margin-small + .2) 1.8rem @margin-small;
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        span.home {
24            a {
25                .fontello();
26                .hide-text-show-before();
27                .icon-home();
28
29                min-height: 1.8em;
30                width: auto;
31                box-sizing: border-box;
32                border: solid 1px transparent;
33                border-radius: 2px;
34                vertical-align: middle;
35                text-decoration: none;
36                margin-top: -.2em;
37                transition: @transition border-color;
38
39                &:before {
40                    font-size: 1rem;
41                    margin-top: .17rem;
42                }
43
44                &:hover,
45                &:focus,
46                &:active {
47                    border-color: @color-link;
48                }
49            }
50        }
51
52        bdi {
53            padding: .1em .1em 0;
54        }
55    }
56
57
58/* + + + + +  icon list  + + + + + */
59    .page-attributes {
60        list-style: none;
61        float: right;
62        display: inline-block;
63        max-width: 30%;
64        margin: -.2em 0 0;
65        padding: 0;
66
67        > li {
68            .btn-usertools-wrapper(); // uniform li
69            .btn-usertools-num();
70
71            float: left;
72
73            > strong,
74            > a {
75                display: block;
76                width: auto;
77                min-height: 2em;
78                border: 1px solid @color-border;
79                border-radius: @border-radius;
80                color: @color-nav;
81                text-align: center;
82                margin: 0;
83            }
84
85            .prefix {
86                .btn-prefix ();
87                .icon-clipboard();
88            }
89
90/* check !!! */
91            &.do_none {
92                position: relative;
93
94                strong {
95                    background-color: @color-site-bg;
96                }
97
98                .num {
99                    background-color: @color-border;
100                    color: @color-nav;
101                }
102            }
103/* end check !!! */
104
105            &.plugin__qc {
106                display: inline-block;
107                overflow: visible;
108            }
109        } // li
110
111        a {
112            transition: @transition color, @transition background-color, @transition border-color;
113
114            &[aria-expanded="false"] + #plugin__qc__wrapper {
115                display: none;
116            }
117
118            &:hover,
119            &:active,
120            &:focus {
121                background-color: @button_color;
122                border-color: @button_background;
123                color: @button_background;
124
125                .prefix {
126                    color: @button_background;
127                }
128            }
129        }
130
131        #plugin__qc__wrapper {
132            position: absolute;
133            right: 0;
134            width: auto;
135            border: 0 none;
136            background: @color-site-bg;
137
138            &[aria-hidden="false"] {
139                margin-top: .5rem;
140            }
141        }
142
143        #plugin__qc__icon {
144            display: none;
145        }
146
147        #plugin__qc__link {
148            position: relative;
149
150            .prefix {
151                .icon-emo-happy();
152
153                width: 100%;
154                font-size: .9rem;
155
156                &::before {
157                    width: 100%;
158                    margin: .1em 0 0;
159                }
160            }
161        }
162    }
163}
164
165
166/* + + + + +  ?  + + + + + */
167.mode_admin {
168
169}
170