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