gui-elements/src/components/Menu/menu.scss at 75b445dc4729f9854e1f9b744917038ab9f57d98 · eccenca/gui-elements · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
$minimal-button-background-color-hover: eccgui-color-rgba($gray4, 0.3) !default;
$minimal-button-background-color-active: eccgui-color-rgba($gray2, 0.3) !default;
$dark-minimal-button-background-color-hover: eccgui-color-rgba($gray3, 0.15) !default;
$dark-minimal-button-background-color-active: eccgui-color-rgba($gray3, 0.3) !default;

// $half-grid-size: $pt-grid-size * 0.5 !default;
// $menu-item-border-radius: $pt-border-radius - 1 !default;
// $menu-item-line-height-factor: 1.4;
// $menu-item-line-height: round($pt-font-size * $menu-item-line-height-factor);
// $menu-item-line-height-large: round($pt-font-size-large * $menu-item-line-height-factor);
$menu-min-width: 0 !default;

// $menu-item-padding: ($pt-button-height - $pt-icon-size-standard) * 0.5 !default;
// $menu-item-padding-large: ($pt-button-height-large - $pt-icon-size-large) * 0.5 !default;
// $menu-item-padding-vertical: ($pt-button-height - $menu-item-line-height) * 0.5 !default;
// $menu-item-padding-vertical-large: ($pt-button-height-large - $menu-item-line-height-large) * 0.5 !default;
$menu-background-color: transparent !default;

// $dark-menu-background-color: $dark-gray4 !default;
// $menu-item-color-hover: $minimal-button-background-color-hover !default;
// $menu-item-color-active: $minimal-button-background-color-active !default;
// $dark-menu-item-color-hover: $dark-minimal-button-background-color-hover !default;
// $dark-menu-item-color-active: $dark-minimal-button-background-color-active !default;

@import "~@blueprintjs/core/src/components/menu/menu";

.#{$ns}-menu {
    min-width: auto;
    padding: 0;

    .#{$ns}-popover2-content > & {
        min-width: 10em;
        max-width: 20em;
        padding: $eccgui-size-inline-whitespace * 0.5;
    }
}

.#{$ns}-menu-header {
    padding-left: unset;
    margin-right: unset;
    margin-left: unset;
}

span.#{$ns}-menu-item-icon:empty {
    display: none;
}

.#{$prefix}--side-nav--rail {
    .#{$ns}-menu-item {
        max-width: calc(#{2 * $menu-item-padding} + 20px); // padding + normal icon width
        white-space: nowrap;
    }

    .#{$ns}-text-overflow-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        opacity: $eccgui-opacity-invisible;
    }

    &:hover {
        .#{$ns}-menu-item {
            max-width: 100vw; // something similar like `none` in this situation
            transition: max-width $pt-transition-duration ease-in 0.75s;
        }
        .#{$ns}-text-overflow-ellipsis {
            opacity: $eccgui-opacity-regular;
            transition: opacity $pt-transition-duration ease-in 0.75s;
        }
    }
}