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