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