Andreas Hocevar
149 lines
3.8 KiB
CSS
149 lines
3.8 KiB
CSS
/*
|
|
* Copyright 2009 The Closure Library Authors. All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by the Apache License, Version 2.0.
|
|
* See the COPYING file for details.
|
|
*/
|
|
|
|
/*
|
|
* Standard styling for menus created by goog.ui.MenuItemRenderer.
|
|
*
|
|
* @author attila@google.com (Attila Bodis)
|
|
*/
|
|
|
|
|
|
/**
|
|
* State: resting.
|
|
*
|
|
* NOTE(mleibman,chrishenry):
|
|
* The RTL support in Closure is provided via two mechanisms -- "rtl" CSS
|
|
* classes and BiDi flipping done by the CSS compiler. Closure supports RTL
|
|
* with or without the use of the CSS compiler. In order for them not
|
|
* to conflict with each other, the "rtl" CSS classes need to have the @noflip
|
|
* annotation. The non-rtl counterparts should ideally have them as well, but,
|
|
* since .goog-menuitem existed without .goog-menuitem-rtl for so long before
|
|
* being added, there is a risk of people having templates where they are not
|
|
* rendering the .goog-menuitem-rtl class when in RTL and instead rely solely
|
|
* on the BiDi flipping by the CSS compiler. That's why we're not adding the
|
|
* @noflip to .goog-menuitem.
|
|
*/
|
|
.goog-menuitem {
|
|
color: #000;
|
|
font: normal 13px Arial, sans-serif;
|
|
list-style: none;
|
|
margin: 0;
|
|
/* 28px on the left for icon or checkbox; 7em on the right for shortcut. */
|
|
padding: 4px 7em 4px 28px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* BiDi override for the resting state. */
|
|
/* @noflip */
|
|
.goog-menuitem.goog-menuitem-rtl {
|
|
/* Flip left/right padding for BiDi. */
|
|
padding-left: 7em;
|
|
padding-right: 28px;
|
|
}
|
|
|
|
/* If a menu doesn't have checkable items or items with icons, remove padding. */
|
|
.goog-menu-nocheckbox .goog-menuitem,
|
|
.goog-menu-noicon .goog-menuitem {
|
|
padding-left: 12px;
|
|
}
|
|
|
|
/*
|
|
* If a menu doesn't have items with shortcuts, leave just enough room for
|
|
* submenu arrows, if they are rendered.
|
|
*/
|
|
.goog-menu-noaccel .goog-menuitem {
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.goog-menuitem-content {
|
|
color: #000;
|
|
font: normal 13px Arial, sans-serif;
|
|
}
|
|
|
|
/* State: disabled. */
|
|
.goog-menuitem-disabled .goog-menuitem-accel,
|
|
.goog-menuitem-disabled .goog-menuitem-content {
|
|
color: #ccc !important;
|
|
}
|
|
.goog-menuitem-disabled .goog-menuitem-icon {
|
|
opacity: 0.3;
|
|
-moz-opacity: 0.3;
|
|
filter: alpha(opacity=30);
|
|
}
|
|
|
|
/* State: hover. */
|
|
.goog-menuitem-highlight,
|
|
.goog-menuitem-hover {
|
|
background-color: #d6e9f8;
|
|
/* Use an explicit top and bottom border so that the selection is visible
|
|
* in high contrast mode. */
|
|
border-color: #d6e9f8;
|
|
border-style: dotted;
|
|
border-width: 1px 0;
|
|
padding-bottom: 3px;
|
|
padding-top: 3px;
|
|
}
|
|
|
|
/* State: selected/checked. */
|
|
.goog-menuitem-checkbox,
|
|
.goog-menuitem-icon {
|
|
background-repeat: no-repeat;
|
|
height: 16px;
|
|
left: 6px;
|
|
position: absolute;
|
|
right: auto;
|
|
vertical-align: middle;
|
|
width: 16px;
|
|
}
|
|
|
|
/* BiDi override for the selected/checked state. */
|
|
/* @noflip */
|
|
.goog-menuitem-rtl .goog-menuitem-checkbox,
|
|
.goog-menuitem-rtl .goog-menuitem-icon {
|
|
/* Flip left/right positioning. */
|
|
left: auto;
|
|
right: 6px;
|
|
}
|
|
|
|
.goog-option-selected .goog-menuitem-checkbox,
|
|
.goog-option-selected .goog-menuitem-icon {
|
|
/* Client apps may override the URL at which they serve the sprite. */
|
|
background: url(//ssl.gstatic.com/editor/editortoolbar.png) no-repeat -512px 0;
|
|
}
|
|
|
|
/* Keyboard shortcut ("accelerator") style. */
|
|
.goog-menuitem-accel {
|
|
color: #999;
|
|
/* Keyboard shortcuts are untranslated; always left-to-right. */
|
|
/* @noflip */ direction: ltr;
|
|
left: auto;
|
|
padding: 0 6px;
|
|
position: absolute;
|
|
right: 0;
|
|
text-align: right;
|
|
}
|
|
|
|
/* BiDi override for shortcut style. */
|
|
/* @noflip */
|
|
.goog-menuitem-rtl .goog-menuitem-accel {
|
|
/* Flip left/right positioning and text alignment. */
|
|
left: 0;
|
|
right: auto;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Mnemonic styles. */
|
|
.goog-menuitem-mnemonic-hint {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.goog-menuitem-mnemonic-separator {
|
|
color: #999;
|
|
font-size: 12px;
|
|
padding-left: 4px;
|
|
}
|