ttrss/lib/flat-ttrss/dijit/Menu.styl

191 lines
4.9 KiB
Stylus
Raw Normal View History

2018-12-04 19:24:31 +00:00
/* Menu
There are three areas of styling for the Menu:
1. The menu
There are three types of menus:
i) Context Menu
ii) Drop down Menu
iii) Navigation Menu
All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border
.dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect
.dijitMenuTable - for padding - also affects Select widget
2. The menu bar
.dijitMenuBar - for border, margins, padding, background-color of the menu bar
.dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem)
3. Menu items - items in the menu.
.dijitMenuItem - for color
.dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected
.dijitMenuItemActive - for background-color of an active (mousedown) menu item
td.dijitMenuItemIconCell - for padding around a menu item's icon
td.dijitMenuItemLabel - for padding around a menu item's label
.dijitMenuSeparatorTop - for border, top border, of the separator
.dijitMenuSeparatorBottom - for bottom margin of the separator
Styles specific to ComboBox and FilteringSelect widgets:
.dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu
.dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu
*/
@import 'dijit_variables';
.{$theme-name} {
/* ----- Menu (Common) ----- */
.dijitMenu {
background: $menu-background-color;
border: 1px solid $menu-border-color;
border-radius: $menu-border-radius;
margin: 0;
box-shadow: $popup-box-shadow;
}
.dijitMenuTable,
.dijitComboBoxMenu {
padding: $menu-padding 0;
}
.dijitComboBoxMenu {
margin-left:0;
background-image: none;
}
.dijitMenuTable {
/* this prevents jiggling upon hover of a menu item */
border-collapse: separate;
border-spacing: 0 0;
}
/* ---- MenuItem ---- */
.dijitMenuItem,
.dijitMenuItem td {
line-height: $line-height;
padding: $menu-item-padding;
white-space: nowrap;
}
// hover
.dijitMenuItemHover td,
.dijitMenuItemHover {
color: $menu-item-hovered-text-color;
background-color: $menu-item-hovered-background-color;
}
// active
.dijitMenuItemActive td,
.dijitMenuItemActive {
color: $menu-item-active-text-color;
background-color: $menu-item-active-background-color;
}
// selected
.dijitMenuItemSelected td,
.dijitMenuItemSelected {
color: $menu-item-selected-text-color;
background-color: $menu-item-selected-background-color;
}
// disabled
.dijitMenuItemDisabled {
color: $menu-item-disabled-text-color;
}
.dijitMenuItemDisabled.dijitMenuItemSelected td,
.dijitMenuItemDisabled.dijitMenuItemSelected {
color: $menu-item-disabled-hovered-text-color;
background: $menu-item-disabled-hovered-background-color;
}
/* ---- MenuItemSeparator ---- */
.dijitMenuSeparatorTop {
height: auto
margin-top: 1px; /* prevents spacing above/below separator */
border-bottom: 1px solid $menu-item-separator-top-color;
}
.dijitMenuSeparatorBottom {
height: auto;
margin-bottom:1px;
border-top: 1px solid $menu-item-separator-bottom-color;
}
/* ---- MenuItem icons ---- */
td.dijitMenuItemIconCell {
padding: $menu-item-icon-padding;
margin: 0 0 0 $menu-item-icon-margin;
text-align: center;
}
// popup menu icon
.dijitMenuExpand {
_icon-core-style();
&:before {
content: $menu-item-icon;
}
}
// checked icon
.dijitCheckedMenuItemIconChar {
display: none;
}
.dijitMenuPreviousButton, .dijitMenuNextButton {
font-style: italic;
}
/* ----- Menu Bar ----- */
.dijitMenuBar {
margin: 0;
padding: 0;
background-color: $menubar-background-color;
.dijitMenuItem {
padding: $menubar-item-padding;
margin: 0;
}
// hover
.dijitMenuItemHover {
color: $menubar-item-hover-color;
background-color: $menubar-item-hover-background-color;
}
// active
.dijitMenuItemActive {
color: $menubar-item-active-color;
background-color: $menubar-item-active-background-color;
}
// selected
.dijitMenuItemSelected,
.dijitMenuItemHover.dijitMenuItemSelected,
.dijitMenuItemActive.dijitMenuItemSelected {
color: $menubar-item-selected-text-color;
background-color: $menubar-item-selected-background-color;
}
// disabled
.dijitMenuItemDisabled.dijitMenuItemSelected,
.dijitMenuItemDisabled.dijitMenuItemSelected {
color: $menu-item-disabled-hovered-text-color;
background: $menu-item-disabled-hovered-background-color;
}
}
/* ---- MenuBar Dropdown ---- */
.dijitMenuPopup {
border-top-left-radius: 0;
border-top-right-radius: 0;
.dijitMenu {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.dijitMenuItem,
.dijitMenuItem td {
padding: $menubar-popup-item-padding;
}
}
}