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