xref: /template/sprintdoc/css/area_nav-breadcrumb.less (revision 28eb39b298672870716b7ead6b88a05c04d24cf2) 
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: 1.6rem 1.8rem .2rem;
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: -.6em 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                h2{
156                    margin-top: 1.6em;
157                    font-size: @font-size-head5;
158                }
159                > h1, > h2, > p, >dl, >div{
160                    padding-left: 1rem;
161                    margin-left: 0;
162                }
163                > div p{
164                    padding-left: 0;
165                    margin-left: 0;
166                }
167            }
168
169            &[aria-hidden="false"] {
170                margin-top: .5rem;
171            }
172        }
173
174        #plugin__qc__icon {
175            display: none;
176        }
177
178        #plugin__qc__link {
179            position: relative;
180
181            .prefix {
182                .icon-emo-happy();
183
184                width: 100%;
185                font-size: @font-size-default;
186
187                &::before {
188                    width: 100%;
189                    margin: .1em 0 0;
190                }
191            }
192        }
193    }
194}
195
196
197/* + + + + +  ?  + + + + + */
198.mode_admin {
199
200}
201