1/**
2 * This file provides the design styles for the breadcrumb
3 */
4
5.breadcrumbs {
6    position: relative;
7    min-height: @page-header_height;
8    box-sizing: border-box;
9    background-color: @ini_background;
10    border-bottom: 1px solid @ini_border_light;
11    padding: 1rem 1.8rem .2rem;
12
13    @media @screen_max-md {
14        background-color: @ini_background_page_header;
15    }
16
17    @media @screen_max-xs {
18        padding-left: @margin-small;
19        padding-right: .75rem;
20    }
21
22    @media @screen_xs-lg {
23        background-color: @ini_background;
24    }
25
26    > p {
27        font-size: @font-size-small;
28        margin: 0;
29
30        @media @screen_max-xs{
31            width: 1px;
32            position: relative;
33            overflow: hidden;
34            height: 1.6rem;
35        }
36
37        * {
38            font-size: @font-size-small;
39        }
40
41        .bchead {
42            .sr-only();
43        }
44
45        span.home {
46            margin-left: -.2rem; // reverse spacing in home icon --> content text and home icon aligned
47
48            .wide-content & {
49                margin-left: .4rem; //toggle link has position absolute, hover on home icon needs more space than left padding of breadcrumb
50            }
51
52            a {
53                .fontello();
54                .hide-text-show-before();
55                .icon-home();
56
57                min-height: 1.8em;
58                min-width: 1.9em;
59                width: auto;
60                box-sizing: border-box;
61                border: solid 1px transparent;
62                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
63                vertical-align: middle;
64                text-decoration: none;
65                margin-top: -.2em;
66                transition: @transition border-color;
67
68                &:before {
69                    font-size: @font-size-default + (@font-scale-factor * 2);
70                    margin-top: .17rem;
71                }
72
73                &:hover,
74                &:focus,
75                &:active {
76                    border-color: @ini_existing;
77                }
78            }
79        }
80
81        bdi {
82            padding: .1em .1em 0;
83        }
84    }
85}
86