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