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
@include b(portlet-layout) {
@include set-component-css-var('portlet-layout', $portlet-layout);
width: 100%;
height: 100%;
background-color: getCssVar('portlet-layout','bg-color');
// 标题样式
@include e(caption){
max-width: getCssVar('portlet-layout','caption-max-width');
@include e(caption-text){
font-size: getCssVar('portlet-layout','caption-font-size');
font-weight: getCssVar('portlet-layout','caption-font-weight');
color: getCssVar('portlet-layout','caption-color');
vertical-align: middle;
}
}
// 无头部时的样式
@include when(no-header) {
>.#{bem(portlet-layout-content)}{
height: 100%;
}
}
}
// 头部样式
@include b(portlet-layout-header) {
@include flex(row, space-between, center);
height: getCssVar('portlet-layout','header-height');
padding: getCssVar('portlet-layout','header-padding');
margin: getCssVar('portlet-layout','header-margin');
background-color: getCssVar('portlet-layout','header-bg-color');
border-bottom: getCssVar('portlet-layout','header-border-bottom');
}
// 内容区样式
@include b(portlet-layout-content) {
height: calc(100% - getCssVar('portlet-layout','header-height'));
padding: getCssVar('portlet-layout','content-padding');
margin: getCssVar('portlet-layout','content-margin');
background-color: getCssVar('portlet-layout','content-bg-color');
}