1/* 2 * Copyright (C) 2013 Apple Inc. All rights reserved. 3 * 4 * Redistribution and use in source and binary forms, with or without 5 * modification, are permitted provided that the following conditions 6 * are met: 7 * 1. Redistributions of source code must retain the above copyright 8 * notice, this list of conditions and the following disclaimer. 9 * 2. Redistributions in binary form must reproduce the above copyright 10 * notice, this list of conditions and the following disclaimer in the 11 * documentation and/or other materials provided with the distribution. 12 * 13 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS'' 14 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, 15 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 16 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS 17 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR 18 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF 19 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 20 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN 21 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) 22 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF 23 * THE POSSIBILITY OF SUCH DAMAGE. 24 */ 25 26.hierarchical-path-component { 27 display: -webkit-flex; 28 position: relative; 29 height: 20px; 30 min-width: 32px; 31} 32 33.hierarchical-path-component.show-selector-arrows { 34 min-width: 44px; 35} 36 37.hierarchical-path-component.collapsed { 38 min-width: 24px; 39} 40 41.hierarchical-path-component.collapsed > .icon { 42 display: none; 43} 44 45.hierarchical-path-component.collapsed > .title { 46 margin-left: 3px; 47} 48 49.hierarchical-path-component.collapsed > select { 50 display: none; 51} 52 53.hierarchical-path-component > .icon { 54 vertical-align: top; 55 margin: 2px 3px 2px 4px; 56 width: 16px; 57 height: 16px; 58} 59 60.hierarchical-path-component > .selector-arrows { 61 vertical-align: top; 62 margin: 2px 3px 2px 4px; 63 width: 5px; 64 height: 16px; 65 opacity: 0.6; 66 content: url(../Images/UpDownArrows.svg); 67} 68 69body.mac-platform.legacy .hierarchical-path-component > .selector-arrows { 70 content: url(../Images/Legacy/UpDownArrows.svg); 71} 72 73.hierarchical-path-component > .title { 74 display: -webkit-flex; 75 -webkit-flex: 1; 76 77 vertical-align: top; 78 79 text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0; 80 line-height: 20px; 81 height: 20px; 82 83 min-width: 0; 84 max-width: 400px; 85} 86 87.hierarchical-path-component > .title > .content { 88 min-width: 0; 89 width: 100%; 90 overflow: hidden; 91 text-overflow: ellipsis; 92 white-space: nowrap; 93} 94 95.hierarchical-path-component > select { 96 opacity: 0; 97 98 /* Positioned so the text in the menu aligns with the text in .title. */ 99 position: absolute; 100 top: -1px; 101 left: 10px; 102 right: 0; 103 bottom: 0; 104} 105 106.hierarchical-path:not(.always-show-last-path-component-separator) > .hierarchical-path-component:last-child > .separator { 107 visibility: hidden; 108} 109 110.hierarchical-path-component > .separator { 111 display: inline-block; 112 vertical-align: top; 113 114 background-image: url(../Images/HierarchicalNavigationItemChevron.svg); 115 background-repeat: no-repeat; 116 background-position-y: center; 117 118 opacity: 0.75; 119 120 width: 7px; 121 height: 20px; 122 123 margin-left: 2px; 124} 125 126.hierarchical-path-component.text-only { 127 padding-left: 5px; 128 padding-right: 1px; 129} 130 131.hierarchical-path-component.text-only > select { 132 /* Positions so the text in the menu aligns with the text in .title for text only path components. */ 133 left: -8px; 134} 135