/* * Copyright (C) 2013 Apple Inc. All rights reserved. * * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions * are met: * 1. Redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer. * 2. Redistributions in binary form must reproduce the above copyright * notice, this list of conditions and the following disclaimer in the * documentation and/or other materials provided with the distribution. * * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS'' * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF * THE POSSIBILITY OF SUCH DAMAGE. */ .scope-bar { padding: 0 3px; overflow: hidden; } .scope-bar > li { display: inline-block; margin: 0 2px; padding: 1px 8px 3px; font-size: 11px; line-height: 11px; color: hsl(0, 0%, 18%); background-color: transparent; border: 1px solid transparent; border-radius: 3px; text-align: center; } .scope-bar > li.multiple { position: relative; } .scope-bar > li.multiple > select { display: none; opacity: 0; /* Positioned so the text in the menu aligns with the content text. */ position: absolute; top: -5px; left: -4px; right: 0; bottom: 0; } .scope-bar > li.multiple.selected > select { display: block; } .scope-bar > li.multiple > .arrows { width: 5px; height: 12px; display: inline-block; vertical-align: -2px; margin-left: 6px; margin-top: -1px; margin-bottom: -1px; } .scope-bar > li.multiple:matches(.selected, :hover, :active) > .arrows { color: white; } .scope-bar > li:matches(.selected, :active) { transition-duration: 75ms; } .scope-bar > li:hover { color: white; background-color: hsla(212, 92%, 54%, 0.5); } .scope-bar > li.selected { color: white; background-color: hsl(212, 92%, 54%); } .scope-bar > li:active { color: white; background-color: hsla(212, 92%, 54%, 0.55); } .scope-bar > li.selected:active { background-color: hsl(218, 85%, 52%); }