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