xref: /template/sprintdoc/css/area_nav-breadcrumb.less (revision ff975f3577c4e89537ed178054b9e8ada5e083ec) 
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    position: relative;
9    border-bottom: 1px solid @color-border-light;
10    padding: 1rem 1.8rem .2rem;
11    min-height: @page-header_height;
12    box-sizing: border-box;
13
14    > p {
15        font-size: @font-size-small;
16        margin: 0;
17
18        @media @screen_max-xs{
19            width: 1px;
20            position: relative;
21            overflow: hidden;
22            height: 1.6rem;
23        }
24
25        * {
26            font-size: @font-size-small;
27        }
28
29        .bchead {
30            .sr-only();
31        }
32
33        span.home {
34            margin-left: -.2rem; // reverse spacing in home icon --> content text and home icon aligned
35
36            .wide-content & {
37                margin-left: .4rem; //toggle link has position absolute, hover on home icon needs more space than left padding of breadcrumb
38            }
39
40            a {
41                .fontello();
42                .hide-text-show-before();
43                .icon-home();
44
45                min-height: 1.8em;
46                min-width: 1.9em;
47                width: auto;
48                box-sizing: border-box;
49                border: solid 1px transparent;
50                border-radius: @border-radius;
51                vertical-align: middle;
52                text-decoration: none;
53                margin-top: -.2em;
54                transition: @transition border-color;
55
56                &:before {
57                    font-size: @font-size-default + (@font-scale-factor * 2);
58                    margin-top: .17rem;
59                }
60
61                &:hover,
62                &:focus,
63                &:active {
64                    border-color: @color-link;
65                }
66            }
67        }
68
69        bdi {
70            padding: .1em .1em 0;
71        }
72    }
73
74
75/* + + + + +  icon list  + + + + + */
76    .page-attributes {
77        list-style: none;
78        float: right;
79        display: inline-block;
80        max-width: 30%;
81        margin: -.45em 0 0;
82        padding: 0;
83
84        @media @screen_max-xs{
85            max-width: 90%;
86        }
87
88        > li {
89            .btn-usertools-wrapper(); // uniform li
90            .btn-usertools-num();
91
92            float: left;
93
94            > strong,
95            > a {
96                display: block;
97                width: auto;
98                min-height: 2em;
99                border: 1px solid @color-border;
100                border-radius: @border-radius;
101                color: @color-nav;
102                text-align: center;
103                margin: 0;
104            }
105
106            .prefix {
107                .btn-prefix ();
108                .icon-clipboard();
109
110                min-height: 20px;
111                font-size: 1.2rem;
112                line-height: 1;
113            }
114
115/* check !!! */
116            &.do_none {
117                position: relative;
118
119                strong {
120                    background-color: @color-site-bg;
121                }
122
123                .num {
124                    background-color: @color-border;
125                    color: @color-nav;
126                }
127            }
128/* end check !!! */
129
130            &.plugin__qc {
131                display: inline-block;
132                overflow: visible;
133                position: static;
134            }
135        } // li
136
137        a {
138            transition: @transition color, @transition background-color, @transition border-color;
139
140            &[aria-expanded="false"] + #plugin__qc__wrapper {
141                display: none;
142            }
143
144            &:hover,
145            &:active,
146            &:focus {
147                background-color: @button_color;
148                border-color: @button_background;
149                color: @button_background;
150
151                .prefix {
152                    color: @button_background;
153                }
154            }
155        }
156
157        #plugin__qc__wrapper {
158            position: absolute;
159            right: 0;
160            width: auto;
161            border: 0 none;
162            background: @color-site-bg;
163            z-index: 2000;
164
165            #plugin__qc__out{
166                h1 {
167                    font-size: @font-size-head3;
168                }
169
170                h2 {
171                    margin-top: 1.6em;
172                    font-size: @font-size-head5;
173                }
174                > h1,
175                > h2,
176                > p,
177                > dl,
178                > div {
179                    padding-left: 1rem;
180                    margin-left: 0;
181                }
182
183                > div p {
184                    padding-left: 0;
185                    margin-left: 0;
186                }
187            }
188
189            &[aria-hidden="false"] {
190                margin-top: .5rem;
191            }
192        }
193
194        #plugin__qc__icon {
195            display: none;
196        }
197
198        #plugin__qc__link {
199            position: relative;
200
201            .prefix {
202                .icon-emo-happy();
203
204                width: 100%;
205                font-size: @font-size-default;
206
207                &::before {
208                    width: 100%;
209                    margin: 0;
210                }
211            }
212        }
213    }
214}
215
216
217/* + + + + +  ?  + + + + + */
218.mode_admin {
219
220}
221