gui-elements/src/components/Application/_toolbar.scss at d9e4e4ba0fa7c927eac32b6eb72c0794529eab01 · 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
71
72
73
74
75
76
77
/*
    ATTENTION:
    Currently it does not work to set the carbon vars before the include of
    the library component because the include reset the vars again to the
    default values. For this reason we need to overwrite colors again in our
    own rule patches.
*/

@use "sass:color";

/// Header-panel background
$shell-panel-bg-01: $shell-header-bg-01 !default;

/// Panel item hover background
$shell-panel-bg-02: eccgui-color-mix($shell-header-bg-01, black 10%) !default;

/// Panel item focus and active background
$shell-panel-bg-03: eccgui-color-mix($shell-header-bg-01, black 5%) !default;

/// Panel item link selected background
$shell-panel-bg-04: eccgui-color-mix($shell-header-bg-01, white 5%) !default;

/// Panel border
$shell-panel-border: $shell-panel-bg-03 !default;

/// Header panel text
$shell-panel-text-01: $shell-header-text-01 !default;

/// Header panel secondary text
$shell-panel-text-02: $eccgui-color-applicationheader-text !default;

/// Header panel focus border
$shell-panel-focus: $shell-header-focus !default;

@import "~@carbon/react/scss/components/ui-shell/header-panel/index";

// tweack original layout

.#{$prefix}--header-panel {
    top: mini-units(8);
    padding: $eccgui-size-block-whitespace;
    color: $shell-panel-text-01;
    background-color: $shell-panel-bg-01;
}

.#{$prefix}--header-panel--expanded {
    border-right-color: $shell-panel-border;
    border-left-color: $shell-panel-border;
}

.#{$eccgui}-application__toolbar__panel-backdrop--onleave,
.#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
    position: fixed;
    inset: mini-units(8) 0 0;
}

.#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
    top: 0;
}

// add rules for own class identifiers

.#{$eccgui}-application__toolbar {
    flex-grow: 0;
    flex-basis: auto;

    .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content {
        // for some reason the original calculation still moves out the tooltip
        transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(100% + var(--cds-popover-offset, 0rem)));
    }
}

.#{$eccgui}-application__toolbar__section {
    display: flex;
    align-items: center;
    padding: 0 mini-units(1);
}