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