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