-
Notifications
You must be signed in to change notification settings - Fork 75
/
panel.scss
137 lines (114 loc) · 2.28 KB
/
panel.scss
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
/**
* CSS Custom Properties
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-panel-footer-padding: Specifies the padding of the component's footer.
*/
:host {
@extend %component-host;
@apply relative flex w-full h-full flex-auto overflow-hidden;
--calcite-min-header-height: calc(var(--calcite-icon-size) * 3);
--calcite-panel-footer-padding: theme("spacing.2");
}
@include disabled();
@import "../../assets/styles/header";
.container {
@apply bg-background m-0 flex w-full flex-auto flex-col items-stretch p-0;
transition: max-block-size var(--calcite-animation-timing), inline-size var(--calcite-animation-timing);
}
.container[hidden] {
@apply hidden;
}
.header {
@apply bg-foreground-1 flex flex-col
z-header;
}
.header-container {
@apply flex flex-row w-full
items-stretch
justify-start;
flex: 0 0 auto;
}
.action-bar-container {
@apply w-full;
}
.top-separator {
border-block-start: 1px solid var(--calcite-ui-border-3);
}
.bottom-separator {
border-block-end: 1px solid var(--calcite-ui-border-3);
}
.action-bar-container ::slotted(calcite-action-bar) {
@apply w-full;
}
.header-content {
@apply flex
flex-col
overflow-hidden
px-3
py-3.5;
margin-inline-end: auto;
.heading,
.description {
@apply block
break-words
p-0;
}
.heading {
@apply text-0h mx-0 mt-0 mb-1 font-medium;
&:only-child {
@apply mb-0;
}
}
.description {
@apply text-color-2 text-n1h;
}
}
.back-button {
@apply border-color-3
border-0
border-solid;
border-inline-end-width: theme("borderWidth.DEFAULT");
}
.header-actions {
@apply flex
flex-row
flex-nowrap
items-stretch;
}
.header-actions--end {
margin-inline-start: theme("margin.auto");
}
.content-wrapper {
@apply overflow-auto h-full;
}
.content-container {
@apply bg-background
flex
flex-auto
flex-col
flex-nowrap
items-stretch;
}
.footer {
@apply bg-foreground-1
flex
w-full
justify-evenly;
flex: 0 0 auto;
padding: var(--calcite-panel-footer-padding);
border-block-start: 1px solid var(--calcite-ui-border-3);
}
.fab-container {
@apply sticky
bottom-0
my-0
mx-auto
block
p-2
z-sticky;
inset-inline: 0;
inline-size: fit-content;
}
@include base-component();