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