xref: /template/sprintdoc/css/area_nav-breadcrumb.less (revision 53ed3c48f468cd83bbaf17061e045872f6434c63) 
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: @noopentasks-background; // fix
129                    color: @noopentasks-color; // fix
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            background-color: #FFF;
143            transition: @transition color, @transition background-color, @transition border-color;
144
145            &[aria-expanded="false"] + #plugin__qc__wrapper {
146                display: none;
147            }
148
149            &:hover,
150            &:active,
151            &:focus {
152                background-color: @color-nav-hover-bg;
153                border-color: @color-nav-hover;
154                color: @color-nav-hover;
155
156                .prefix {
157                    color: inherit;
158                }
159            }
160        }
161
162        #plugin__qc__wrapper {
163            position: absolute;
164            right: 0;
165            width: auto;
166            border: 0 none;
167            background: @background_page-header;
168            background: -webkit-linear-gradient(top, @background_page-header, @color-content-bg);
169            background: linear-gradient(top, @background_page-header, @color-content-bg);
170            box-shadow: @box-shadow-bottom;
171            z-index: 2000;
172
173            #plugin__qc__out{
174                h1 {
175                    font-size: @font-size-head3;
176                }
177
178                h2 {
179                    margin-top: 1.6em;
180                    font-size: @font-size-head5;
181                }
182                > h1,
183                > h2,
184                > p,
185                > dl,
186                > div {
187                    padding-left: 1rem;
188                    margin-left: 0;
189                }
190
191                > div p {
192                    padding-left: 0;
193                    margin-left: 0;
194                }
195            }
196
197            &[aria-hidden="false"] {
198                margin-top: .5rem;
199            }
200        }
201
202        #plugin__qc__icon {
203            display: none;
204        }
205
206        #plugin__qc__link {
207            position: relative;
208
209            .prefix {
210                .icon-emo-happy();
211
212                width: 100%;
213                font-size: @font-size-default;
214
215                &::before {
216                    width: 100%;
217                    margin: 0;
218                }
219            }
220        }
221    }
222}
223
224
225/* + + + + +  ?  + + + + + */
226.mode_admin {
227
228}
229