xref: /template/sprintdoc/css/area_nav-breadcrumb.less (revision 3554750745055d770bc152162c46711324e4186f) 
1/**
2 * This file provides the design styles for the breadcrumb
3 *
4 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
5 */
6
7
8.breadcrumbs {
9    position: relative;
10    min-height: @page-header_height;
11    box-sizing: border-box;
12    background-color: @ini_background_content;
13    border-bottom: 1px solid @ini_border_light;
14    padding: 1rem 1.8rem .2rem;
15
16    @media @screen_max-md {
17        background-color: @ini_background_page_header;
18    }
19
20    @media @screen_max-xs {
21        padding-left: @margin-small;
22        padding-right: .75rem;
23    }
24
25    @media @screen_xs-lg {
26        background-color: @ini_background_content;
27    }
28
29    > p {
30        font-size: @font-size-small;
31        margin: 0;
32
33        @media @screen_max-xs{
34            width: 1px;
35            position: relative;
36            overflow: hidden;
37            height: 1.6rem;
38        }
39
40        * {
41            font-size: @font-size-small;
42        }
43
44        .bchead {
45            .sr-only();
46        }
47
48        span.home {
49            margin-left: -.2rem; // reverse spacing in home icon --> content text and home icon aligned
50
51            .wide-content & {
52                margin-left: .4rem; //toggle link has position absolute, hover on home icon needs more space than left padding of breadcrumb
53            }
54
55            a {
56                .fontello();
57                .hide-text-show-before();
58                .icon-home();
59
60                min-height: 1.8em;
61                min-width: 1.9em;
62                width: auto;
63                box-sizing: border-box;
64                border: solid 1px transparent;
65                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
66                vertical-align: middle;
67                text-decoration: none;
68                margin-top: -.2em;
69                transition: @transition border-color;
70
71                &:before {
72                    font-size: @font-size-default + (@font-scale-factor * 2);
73                    margin-top: .17rem;
74                }
75
76                &:hover,
77                &:focus,
78                &:active {
79                    border-color: @ini_existing;
80                }
81            }
82        }
83
84        bdi {
85            padding: .1em .1em 0;
86        }
87    }
88
89
90/* + + + + +  icon list  + + + + + */
91    .page-attributes {
92        list-style: none;
93        float: right;
94        display: inline-block;
95        max-width: 30%;
96        margin: -.45em 0 0;
97        padding: 0;
98
99        @media @screen_max-xs{
100            max-width: 90%;
101        }
102
103        > li {
104            .btn-usertools-wrapper(); // uniform li
105            .btn-usertools-num();
106
107            float: left;
108
109            > strong,
110            > a {
111                display: block;
112                width: auto;
113                min-height: @toggle-size;
114                border: 1px solid @wikiicons-border;
115                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
116                text-align: center;
117                margin: 0;
118            }
119
120            .prefix {
121                .btn-prefix ();
122                .icon-clipboard();
123
124                display: block;
125                font-size: 1.2rem;
126                line-height: 1;
127            }
128        } // li
129
130        a {
131            .btn-hover();
132
133            &[aria-expanded="false"] + #plugin__qc__wrapper {
134                display: none;
135            }
136        }
137    }
138}
139