numix-gtk-theme/gtk-3.20/scss/widgets/_menu.scss

322 lines
8.9 KiB
SCSS
Raw Normal View History

2016-04-09 04:30:09 +00:00
@import "entry";
/*********
! Menubar
**********/
@include exports("menubar") {
menubar, .menubar {
2016-04-09 04:30:09 +00:00
-GtkWidget-window-dragging: true;
padding: 0;
2016-04-09 04:30:09 +00:00
border: 0;
background-color: $menubar_bg_color;
background-image: none;
//box-shadow: inset 0 -1px shade($menubar_bg_color, .9);
2016-04-09 04:30:09 +00:00
color: $menubar_fg_color;
> menuitem {
min-height: 16px;
padding: ($spacing - 1px) ($spacing - 1px) * 2;
2016-04-09 04:30:09 +00:00
border: 1px solid transparent;
background-color: transparent;
background-image: none;
color: $menubar_fg_color;
2016-04-09 04:30:09 +00:00
&:hover {
border-color: mix($menubar_bg_color, $menubar_fg_color, .21);
background-color: mix($menubar_bg_color, $menubar_fg_color, .21);
2016-04-09 04:30:09 +00:00
background-image: none;
color: shade($menubar_fg_color, 1.08);
2016-04-09 04:30:09 +00:00
}
*:hover { color: shade($menubar_fg_color, 1.08); }
2016-04-09 04:30:09 +00:00
}
}
}
/******
! Menu
*******/
@include exports("menu") {
menu, .menu {
padding: 0;
2016-04-09 04:30:09 +00:00
border-radius: 0;
border: 0;
background-color: $menu_bg_color;
color: $menu_fg_color;
.csd & { border: 0; } // axes borders in a composited env
2016-04-09 04:30:09 +00:00
&:selected { background-color: $selected_bg_color; }
2016-04-09 04:30:09 +00:00
2016-04-10 13:09:20 +00:00
// A little hack to get some extra space above/below menuitem separators
separator,
.csd & separator {
background-color: shade($menu_bg_color, ($contrast + .1));
margin: ($spacing - 2px) 0;
}
2016-04-09 04:30:09 +00:00
// Firefox workaround
.separator,
.csd & .separator { color: shade($menu_bg_color, ($contrast + .1)); }
menuitem {
min-height: 16px;
min-width: 40px;
padding: $spacing - 1px;
2016-04-09 04:30:09 +00:00
border-radius: 0;
&:active, &:hover {
border: 0;
background-color: $selected_bg_color;
background-image: none;
color: $selected_fg_color;
}
*:active, *:hover { color: $selected_fg_color; }
&:disabled, *:disabled { color: mix($menu_fg_color, $menu_bg_color, .5); }
// submenu indicators
arrow {
min-height: 16px;
min-width: 16px;
2016-04-09 04:30:09 +00:00
&:dir(ltr) {
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
margin-left: 10px;
}
&:dir(rtl) {
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
margin-right: 10px;
}
2016-04-09 04:30:09 +00:00
}
&.button, &.button.flat {
&, &:focus, &:active, &:disabled, &:active:disabled {
background-color: transparent;
background-image: none;
border: 0;
box-shadow: none;
color: currentColor;
}
2016-04-09 04:30:09 +00:00
&:hover, &:focus:hover, &:active:hover, &:selected {
background-image: none;
background-color: $selected_bg_color;
color: $selected_fg_color;
}
}
calendar {
color: $menu_fg_color;
&.header {
border-bottom: 1px solid shade($menu_bg_color, ($contrast + .1));
border-radius: 0;
&:backdrop { border-color: shade($menu_bg_color, ($contrast + .1)); }
}
&.button {
@extend %undecorated_button;
color: alpha($menu_fg_color, .55);
&:hover {
@extend %undecorated_button;
color: $menu_fg_color;
}
}
&:indeterminate,
&:indeterminate:backdrop { color: mix($menu_fg_color, $menu_bg_color, .5); }
}
2016-04-09 04:30:09 +00:00
}
// overflow arrows
> arrow {
//@include button(undecorated);
min-height: 16px;
min-width: 16px;
padding: $spacing;
background-color: $menu_bg_color;
border-radius: 0;
&.top {
margin-top: -6px;
border-bottom: 1px solid mix($fg_color, $base_color, .1);
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2016-04-09 04:30:09 +00:00
}
&.bottom {
margin-bottom: -6px;
border-top: 1px solid mix($fg_color, $base_color, .1);
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2016-04-09 04:30:09 +00:00
}
&:hover { background-color: mix($fg_color, $base_color, .1); }
&:backdrop { background-color: $backdrop_menu_color; }
2016-04-09 04:30:09 +00:00
&:disabled {
color: transparent;
2016-04-09 04:30:09 +00:00
background-color: transparent;
border-color: transparent;
2016-04-09 04:30:09 +00:00
}
}
}
2016-04-09 04:30:09 +00:00
2016-04-23 02:11:06 +00:00
.context-menu { font: initial; }
menuitem {
accelerator {
2016-04-09 04:30:09 +00:00
color: alpha($menu_fg_color, .6);
&:hover { color: alpha($selected_fg_color, .8); }
&:disabled { color: alpha(mix($menu_fg_color, $menu_bg_color, .5), .4); }
}
check, radio {
min-height: 16px;
min-width: 16px;
&:dir(ltr) { margin-right: 7px; }
&:dir(rtl) { margin-left: 7px; }
}
window decoration {
box-shadow: 0 2px 3px alpha($black, .2);
}
2016-04-09 04:30:09 +00:00
entry { @include entry($menu_bg_color, $menu_fg_color); }
}
}
/*********
! Popover
**********/
@include exports("popover") {
2016-04-23 02:15:05 +00:00
popover.background {
2016-04-09 04:30:09 +00:00
margin: 10px;
padding: $spacing;
border-radius: $roundness;
background-clip: border-box;
background-color: $menu_bg_color;
background-image: none;
color: $menu_fg_color;
box-shadow: 0 3px 6px alpha($black, .16);
2016-04-23 02:15:05 +00:00
.csd &, & {
@include border($menu_bg_color);
border-width: 1px;
border-style: solid;
2016-04-09 04:30:09 +00:00
}
&:backdrop { box-shadow: none; }
.osd & {
box-shadow: 0 2px 7px 3px alpha($black, .5);
> toolbar button {
border-radius: 0;
border-width: 0;
background-color: transparent;
background-image: none;
}
}
treeview.view {
&:hover, &:selected, &:selected:focus, &:backdrop:selected, &:backdrop:selected:focus { border-top-color: $selected_bg_color; }
&, &:backdrop { border-top-color: shade($menu_bg_color, ($contrast + .4)); }
}
2016-04-09 04:30:09 +00:00
view, .view, list {
&:hover {
background-image: none;
background-color: $selected_bg_color;
color: $selected_fg_color;
}
&, &:backdrop {
background-color: shade($menu_bg_color, ($contrast + .5));
background-image: none;
color: $menu_fg_color;
border-color: border_normal($menu_bg_color);
}
2016-04-09 04:30:09 +00:00
}
list row {
2016-04-09 04:30:09 +00:00
&, & .button {
background-color: transparent;
background-image: none;
color: $menu_fg_color;
&:focus, &:hover, &:active {
background-image: none;
background-color: $selected_bg_color;
color: $selected_fg_color;
}
}
}
2016-05-10 06:41:20 +00:00
.frame {
2016-04-09 04:30:09 +00:00
border-color: border_normal($menu_bg_color);
border-radius: $roundness;
}
entry { @include entry($menu_bg_color, $menu_fg_color); }
button { @include button($menu_bg_color, $menu_fg_color); }
2016-04-23 02:15:05 +00:00
> list, > .view, > toolbar {
border-style: none;
background-color: transparent;
}
2016-04-09 04:30:09 +00:00
}
modelbutton {
padding: $spacing ($spacing + 2px);
border: none;
transition: 150ms ease;
outline-color: transparent;
&, &:backdrop, &.flat, &.flat:backdrop {
//@extend %undecorated_button;
&:hover { background-color: $selected_bg_color; color: $selected_fg_color }
&:active, &:selected { &, arrow { @extend %selected_items; } }
&:checked { color: $fg_color; }
// FIXME: temporary workaround
check:last-child,
radio:last-child { margin-left: 8px; }
check:first-child,
radio:first-child { margin-right: 8px; }
&.flat arrow {
&.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
&.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
}
}
&.flat {
&, &:hover {
transition: none;
}
}
2016-04-09 04:30:09 +00:00
}
}