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