[313] | 1 | //some breadcrumbs variables |
---|
| 2 | @breadcrumb-bg:#F5F5F5; |
---|
| 3 | @breadcrumb-border:#E5E5E5; |
---|
| 4 | @breadcrumb-text-color:#555; |
---|
| 5 | @breadcrumb-link-color:#4C8FBD; |
---|
| 6 | |
---|
| 7 | @breadcrumb-separator:"\f105";//font awesome icon |
---|
| 8 | |
---|
| 9 | |
---|
| 10 | |
---|
| 11 | /* breadcrumbs and searchbox */ |
---|
| 12 | .breadcrumbs { |
---|
| 13 | position:relative; |
---|
| 14 | |
---|
| 15 | border-bottom:1px solid @breadcrumb-border; |
---|
| 16 | background-color:@breadcrumb-bg; |
---|
| 17 | |
---|
| 18 | min-height:@breadcrumb-height; |
---|
| 19 | line-height:(@breadcrumb-height - 1); |
---|
| 20 | |
---|
| 21 | padding:0 12px 0 0; |
---|
| 22 | |
---|
| 23 | display:block; |
---|
| 24 | |
---|
| 25 | &.fixed , &.breadcrumbs-fixed{ |
---|
| 26 | position:fixed; |
---|
| 27 | right:0; |
---|
| 28 | left:(@sidebar-width); |
---|
| 29 | top:@navbar-mh; |
---|
| 30 | z-index:@zindex-navbar-fixed - 2; |
---|
| 31 | } |
---|
| 32 | } |
---|
| 33 | |
---|
| 34 | |
---|
| 35 | .breadcrumb { |
---|
| 36 | background-color: transparent; |
---|
| 37 | display: inline-block; |
---|
| 38 | line-height: 24px; |
---|
| 39 | |
---|
| 40 | margin: 0 22px 0 12px; |
---|
| 41 | padding: 0; |
---|
| 42 | |
---|
| 43 | font-size:13px; |
---|
| 44 | color:#333; |
---|
| 45 | |
---|
| 46 | border-radius:0; |
---|
| 47 | > li { |
---|
| 48 | & , &.active { |
---|
| 49 | color:@breadcrumb-text-color; |
---|
| 50 | } |
---|
| 51 | |
---|
| 52 | > a { |
---|
| 53 | display:inline-block; |
---|
| 54 | padding:0 4px; |
---|
| 55 | color:@breadcrumb-link-color; |
---|
| 56 | } |
---|
| 57 | |
---|
| 58 | + li:before { |
---|
| 59 | font-family:FontAwesome; |
---|
| 60 | font-size:14px; |
---|
| 61 | content:@breadcrumb-separator; |
---|
| 62 | color:@breadcrumb-arrow-color; |
---|
| 63 | |
---|
| 64 | margin-right: 2px; |
---|
| 65 | padding: 0 5px 0 2px; |
---|
| 66 | position:relative; |
---|
| 67 | top: 1px; |
---|
| 68 | } |
---|
| 69 | } |
---|
| 70 | |
---|
| 71 | |
---|
| 72 | .home-icon { |
---|
| 73 | margin-left:4px; margin-right:2px; |
---|
| 74 | font-size:20px; |
---|
| 75 | position:relative; top:2px; |
---|
| 76 | } |
---|
| 77 | |
---|
| 78 | } |
---|
| 79 | |
---|
| 80 | |
---|
| 81 | @media only screen and (max-width: @screen-sm-max) { |
---|
| 82 | .breadcrumb { |
---|
| 83 | margin-left:90px; |
---|
| 84 | } |
---|
| 85 | .breadcrumbs.fixed , .breadcrumbs.breadcrumbs-fixed{ |
---|
| 86 | position: relative !important; |
---|
| 87 | left: auto !important; right: auto !important; |
---|
| 88 | top: auto !important; |
---|
| 89 | z-index:auto !important; |
---|
| 90 | } |
---|
| 91 | body.breadcrumbs-fixed .ace-settings-container { |
---|
| 92 | top:50px; |
---|
| 93 | } |
---|
| 94 | } |
---|
| 95 | |
---|
| 96 | |
---|
| 97 | @media only screen and (max-width: @screen-xs) { |
---|
| 98 | .breadcrumb > li > a { |
---|
| 99 | padding:0 1px; |
---|
| 100 | } |
---|
| 101 | } |
---|
| 102 | |
---|
| 103 | @media only screen and (max-width: @screen-tiny) { |
---|
| 104 | .breadcrumb { |
---|
| 105 | margin-left:36px; |
---|
| 106 | } |
---|
| 107 | } |
---|
| 108 | |
---|
| 109 | |
---|
| 110 | |
---|
| 111 | .container.main-container { |
---|
| 112 | .breadcrumbs.breadcrumbs-fixed { |
---|
| 113 | left: auto !important; |
---|
| 114 | right: auto !important; |
---|
| 115 | } |
---|
| 116 | |
---|
| 117 | @media (min-width: @screen-tablet) { |
---|
| 118 | .breadcrumbs.breadcrumbs-fixed { |
---|
| 119 | width: @container-tablet - @sidebar-width; |
---|
| 120 | } |
---|
| 121 | .menu-min + .main-content .breadcrumbs.breadcrumbs-fixed { |
---|
| 122 | width: @container-tablet - @sidebar-min-width; |
---|
| 123 | } |
---|
| 124 | } |
---|
| 125 | @media (min-width: @screen-desktop) { |
---|
| 126 | .breadcrumbs.breadcrumbs-fixed { |
---|
| 127 | width: @container-desktop - @sidebar-width; |
---|
| 128 | } |
---|
| 129 | .menu-min + .main-content .breadcrumbs.breadcrumbs-fixed { |
---|
| 130 | width: @container-desktop - @sidebar-min-width; |
---|
| 131 | } |
---|
| 132 | } |
---|
| 133 | @media (min-width: @screen-lg-desktop) { |
---|
| 134 | .breadcrumbs.breadcrumbs-fixed { |
---|
| 135 | width: @container-lg-desktop - @sidebar-width; |
---|
| 136 | } |
---|
| 137 | .menu-min + .main-content .breadcrumbs.breadcrumbs-fixed { |
---|
| 138 | width: @container-lg-desktop - @sidebar-min-width; |
---|
| 139 | } |
---|
| 140 | } |
---|
| 141 | |
---|
| 142 | } |
---|
| 143 | |
---|
| 144 | |
---|