mirror of
https://github.com/slint-ui/slint.git
synced 2025-08-04 18:58:36 +00:00
menu: adjusted for material style (#7731)
This commit is contained in:
parent
aa2f35f82a
commit
5019ff7df4
2 changed files with 27 additions and 26 deletions
|
@ -13,37 +13,38 @@ export component MenuBarItem {
|
|||
min-height: base.min-height;
|
||||
|
||||
base := MenuBarItemBase {
|
||||
padding-left: 11px;
|
||||
padding-right: 11px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 6px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
default-foreground: MaterialPalette.foreground;
|
||||
hover-foreground: MaterialPalette.accent-foreground;
|
||||
pressed-foreground: MaterialPalette.accent-foreground;
|
||||
hover-background: MaterialPalette.accent-background;
|
||||
pressed-background: MaterialPalette.accent-background;
|
||||
hover-foreground: MaterialPalette.foreground;
|
||||
pressed-foreground: MaterialPalette.foreground;
|
||||
hover-background: MaterialPalette.surface-container-highest;
|
||||
pressed-background: MaterialPalette.surface-container-highest;
|
||||
font-size: MaterialFontSettings.body-large.font-size;
|
||||
font-weight: MaterialFontSettings.body-large.font-weight;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
export component MenuBar inherits MenuBarBase {
|
||||
padding: 9px;
|
||||
spacing: 10px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
spacing: 8px;
|
||||
min-layout-height: 40px;
|
||||
}
|
||||
|
||||
export component MenuFrame inherits MenuFrameBase {
|
||||
background: MaterialPalette.background;
|
||||
border-radius: 7px;
|
||||
background: MaterialPalette.surface-container;
|
||||
border-radius: 4px;
|
||||
border-width: 1px;
|
||||
border-color: MaterialPalette.border;
|
||||
drop-shadow-color: MaterialPalette.shadow;
|
||||
drop-shadow-offset-y: 8px;
|
||||
drop-shadow-blur: 16px;
|
||||
padding: 1px;
|
||||
layout-min-width: 280px;
|
||||
drop-shadow-offset-y: 2px;
|
||||
drop-shadow-blur: 6px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
layout-min-width: 200px;
|
||||
}
|
||||
|
||||
export component MenuItem {
|
||||
|
@ -57,20 +58,19 @@ export component MenuItem {
|
|||
min-height: max(40px, base.min-height);
|
||||
|
||||
HorizontalLayout {
|
||||
padding: 5px;
|
||||
|
||||
base := MenuItemBase {
|
||||
default-foreground: MaterialPalette.foreground;
|
||||
current-foreground: MaterialPalette.accent-foreground;
|
||||
current-background: MaterialPalette.accent-background;
|
||||
current-foreground: MaterialPalette.foreground;
|
||||
current-background: MaterialPalette.surface-container-highest;
|
||||
font-size: MaterialFontSettings.body-large.font-size;
|
||||
font-weight: MaterialFontSettings.body-large.font-weight;
|
||||
border-radius: 4px;
|
||||
padding-left: 11px;
|
||||
padding-right: 11px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
spacing: 8px;
|
||||
sub-menu-icon: @image-url("_arrow_forward.svg");
|
||||
icon-size: 12px;
|
||||
icon-size: MaterialFontSettings.body-large.font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -47,10 +47,11 @@ export global MaterialPalette {
|
|||
out property <brush> control-background-tint: !root.dark-color-scheme ? #6750A4 : #D0BCFF;
|
||||
out property <brush> accent-container: !root.dark-color-scheme ? #4F378B : #4F378B;
|
||||
out property <brush> accent-ripple: !root.dark-color-scheme ? #D0BCFF : #6750A4;
|
||||
out property <brush> shadow: #000000;
|
||||
out property <brush> shadow: #000000.with_alpha(0.3);
|
||||
out property <brush> border-variant: !root.dark-color-scheme ? #C4C7C5 : #444746;
|
||||
out property <brush> foreground-alt: !root.dark-color-scheme ? #1C1B1F : #E6E1E5;
|
||||
out property <brush> secondary-ripple: !root.dark-color-scheme ? #fffc : #000000;
|
||||
out property <brush> surface-container: !root.dark-color-scheme ? #F3EDF7 : #211F26;
|
||||
out property <brush> surface-container-high: !root.dark-color-scheme ? #ECE6F0 : #2B2930;
|
||||
out property <brush> surface-container-highest: !root.dark-color-scheme ? #E6E0E9 : #36343B;
|
||||
out property <brush> tertiary-container: !root.dark-color-scheme ? #FFD8E4 : #633B48;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue