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