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