2019-12-18 21:25:03 +00:00
|
|
|
/* Popovers/Menus */
|
|
|
|
|
2022-11-03 15:28:24 +00:00
|
|
|
$menu_bg_color: $bg_color;
|
|
|
|
$menuitem_bg_color: lighten($menu_bg_color, 4%);
|
|
|
|
$menuitem_border_radius: $base_border_radius*1.5;
|
|
|
|
|
|
|
|
$submenu_bg_color: lighten($menu_bg_color, 7%);
|
|
|
|
|
2021-12-28 13:46:54 +00:00
|
|
|
// the popover itself
|
2020-01-21 14:36:36 +00:00
|
|
|
.popup-menu-boxpointer {
|
2022-02-23 17:45:59 +00:00
|
|
|
-arrow-rise: $base_margin+2px; // distance from the panel & screen edge
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// container of the popover menu
|
|
|
|
.popup-menu {
|
2019-12-19 15:38:27 +00:00
|
|
|
min-width: 15em;
|
|
|
|
color: $fg_color;
|
|
|
|
|
2022-02-07 17:37:54 +00:00
|
|
|
//.popup-status-menu-item {font-weight: normal; color: pink;} //dunno what that is
|
2019-12-19 15:38:27 +00:00
|
|
|
&.panel-menu {
|
2021-12-28 13:46:54 +00:00
|
|
|
margin-bottom: 1.75em; // so it doesn't touch the bottom of the screen
|
2019-12-19 15:38:27 +00:00
|
|
|
}
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
2022-02-07 18:22:40 +00:00
|
|
|
// popover content
|
2019-12-18 21:25:03 +00:00
|
|
|
.popup-menu-content {
|
2021-12-28 13:46:54 +00:00
|
|
|
padding: $base_padding;
|
2022-11-03 15:28:24 +00:00
|
|
|
background-color: $bg_color;
|
2022-08-04 14:34:12 +00:00
|
|
|
border-radius: $modal_radius*1.25;
|
2022-11-03 15:28:24 +00:00
|
|
|
border: 1px solid $outer_borders_color;
|
2022-04-26 18:19:41 +00:00
|
|
|
box-shadow: 0 2px 4px 0 $shadow_color;
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// menu items
|
|
|
|
.popup-menu-item {
|
2022-11-03 15:28:24 +00:00
|
|
|
@include menuitem($bg:$menu_bg_color);
|
2019-12-18 21:25:03 +00:00
|
|
|
|
2022-11-03 15:28:24 +00:00
|
|
|
border-radius: $menuitem_border_radius;
|
2021-12-28 13:46:54 +00:00
|
|
|
|
2019-12-19 15:38:27 +00:00
|
|
|
&:checked {
|
2022-11-03 15:28:24 +00:00
|
|
|
border-radius: $menuitem_border_radius $menuitem_border_radius 0 0 !important;
|
2019-12-18 21:25:03 +00:00
|
|
|
|
2022-11-03 15:28:24 +00:00
|
|
|
@if $is_highcontrast {
|
|
|
|
border: 1px solid $hc_inset_color;
|
|
|
|
border-bottom-width:0;
|
|
|
|
}
|
2019-12-19 15:38:27 +00:00
|
|
|
}
|
2019-12-18 21:25:03 +00:00
|
|
|
|
2022-02-23 17:45:59 +00:00
|
|
|
// add margin to switches in menu items
|
|
|
|
.toggle-switch {
|
|
|
|
&:ltr { margin-left: $base_margin;}
|
|
|
|
&:rtl { margin-right: $base_margin;}
|
|
|
|
}
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
2022-02-07 18:22:40 +00:00
|
|
|
|
|
|
|
// all other graphical elements (sliders)
|
2019-12-18 21:25:03 +00:00
|
|
|
.popup-inactive-menu-item {
|
2019-12-19 15:38:27 +00:00
|
|
|
color: $fg_color;
|
2022-02-07 18:22:40 +00:00
|
|
|
&:insensitive { color: $insensitive_fg_color; }
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// symbolic icons in popover
|
|
|
|
.popup-menu-arrow,
|
2022-02-07 17:37:54 +00:00
|
|
|
.popup-menu-icon {
|
2022-02-07 18:22:40 +00:00
|
|
|
icon-size: 16px !important; // for some reason the variable doesn't work here
|
2021-12-28 13:46:54 +00:00
|
|
|
}
|
|
|
|
|
2019-12-18 21:25:03 +00:00
|
|
|
// popover submenus
|
|
|
|
.popup-sub-menu {
|
2022-11-03 15:28:24 +00:00
|
|
|
border-radius: 0 0 $menuitem_border_radius+1px $menuitem_border_radius+1px;
|
|
|
|
margin-bottom: $base_padding;
|
|
|
|
|
|
|
|
@if $is_highcontrast {
|
|
|
|
border: 1px solid $hc_inset_color;
|
|
|
|
}
|
2022-02-02 18:17:42 +00:00
|
|
|
|
2021-12-28 13:46:54 +00:00
|
|
|
.popup-menu-ornament {
|
2023-05-16 23:33:19 +00:00
|
|
|
icon-size: $base_icon_size !important;
|
|
|
|
width: $base_icon_size;
|
2021-12-28 13:46:54 +00:00
|
|
|
}
|
|
|
|
|
2022-02-07 18:22:40 +00:00
|
|
|
// submenu specific styles
|
2021-12-28 13:46:54 +00:00
|
|
|
.popup-menu-item {
|
|
|
|
border-radius: 0;
|
2022-11-03 15:28:24 +00:00
|
|
|
@include menuitem($bg:$submenu_bg_color, $flat:false);
|
|
|
|
border-top-width:0;
|
2021-12-28 13:46:54 +00:00
|
|
|
|
2022-02-02 18:17:42 +00:00
|
|
|
&:last-child {
|
2022-11-03 15:28:24 +00:00
|
|
|
border-radius: 0 0 $menuitem_border_radius $menuitem_border_radius;
|
|
|
|
border-bottom-width:0;
|
2022-02-07 18:22:40 +00:00
|
|
|
}
|
2021-12-28 13:46:54 +00:00
|
|
|
}
|
2022-01-25 14:47:23 +00:00
|
|
|
|
|
|
|
.popup-menu-section {
|
2022-02-07 18:22:40 +00:00
|
|
|
.popup-menu-item:last-child {
|
2022-02-23 17:45:59 +00:00
|
|
|
&:hover,&:focus { border-radius: 0;}
|
2022-02-07 18:22:40 +00:00
|
|
|
}
|
2022-02-02 18:17:42 +00:00
|
|
|
&:last-child .popup-menu-item:last-child {
|
2022-11-03 15:28:24 +00:00
|
|
|
border-radius: 0 0 $menuitem_border_radius $menuitem_border_radius;
|
2022-01-25 14:47:23 +00:00
|
|
|
}
|
|
|
|
}
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// container for radio and check boxes
|
|
|
|
.popup-menu-ornament {
|
2023-05-16 23:33:19 +00:00
|
|
|
icon-size: $base_icon_size !important;
|
|
|
|
width: $base_icon_size;
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// separator
|
|
|
|
.popup-separator-menu-item {
|
2022-11-03 15:28:24 +00:00
|
|
|
border:none !important;
|
2022-01-17 16:44:25 +00:00
|
|
|
|
2020-02-14 12:36:04 +00:00
|
|
|
.popup-separator-menu-item-separator {
|
|
|
|
height: 1px; //not really the whole box
|
2022-01-17 16:44:25 +00:00
|
|
|
background-color: $borders_color;
|
|
|
|
}
|
|
|
|
|
|
|
|
.popup-menu-ornament {
|
|
|
|
width: 0 !important;
|
|
|
|
}
|
|
|
|
|
2022-02-23 17:45:59 +00:00
|
|
|
// separators in submenus
|
2022-01-17 16:44:25 +00:00
|
|
|
.popup-sub-menu & {
|
|
|
|
background-color: transparent;
|
2021-12-28 13:46:54 +00:00
|
|
|
|
2022-02-23 17:45:59 +00:00
|
|
|
// account for ornament
|
|
|
|
&:ltr { margin-right: 2.5em;}
|
|
|
|
&:rtl { margin-left: 2.5em;}
|
|
|
|
|
2022-01-17 16:44:25 +00:00
|
|
|
.popup-separator-menu-item-separator {
|
2022-11-03 15:28:24 +00:00
|
|
|
background-color: $borders_color;
|
2020-02-13 20:45:02 +00:00
|
|
|
}
|
|
|
|
}
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// desktop background menu
|
|
|
|
.background-menu {
|
2022-02-23 17:45:59 +00:00
|
|
|
-boxpointer-gap: 0px;
|
2019-12-19 15:38:27 +00:00
|
|
|
-arrow-rise: 0px; // hide the beak on the menu
|
2019-12-18 21:25:03 +00:00
|
|
|
}
|
|
|
|
|
2022-02-07 18:22:40 +00:00
|
|
|
// right-click (and panel) app menu
|
|
|
|
.app-menu {
|
|
|
|
max-width: 27.25em;
|
|
|
|
|
|
|
|
// this is unneeded at the top-level in this menu, hide it
|
|
|
|
.popup-menu-ornament { width: 0 !important; }
|
|
|
|
|
|
|
|
.popup-inactive-menu-item:first-child {
|
|
|
|
// "Open Windows" label
|
|
|
|
> StLabel {
|
|
|
|
@extend %caption_heading;
|
|
|
|
&:ltr {margin-right: $base_margin*2;}
|
|
|
|
&:rtl {margin-left: $base_margin*2;}
|
2019-12-19 15:38:27 +00:00
|
|
|
}
|
|
|
|
}
|
2020-01-25 02:37:16 +00:00
|
|
|
}
|