webcomponents-react/packages/main/src/components/ObjectPageSection/ObjectPageSection.module.css at 1527553a4697b01fdc1599862b54a9256d9cff65 · UI5/webcomponents-react · 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
.section {
  box-sizing: border-box;
  background: var(--sapBackgroundColor);

  &:first-of-type {
    margin-block-start: 1px;
  }
  margin-block-end: 1rem;
}

.section [data-component-name='ObjectPageSubSection']:not(:first-child) {
  padding-block-start: 1rem;
}

.section:focus {
  outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
  outline-offset: calc(-1 * var(--sapContent_FocusWidth));
}

.outlineSpacerDiv {
  height: 2px;
}

.headerContainer {
  padding-block: 0.5rem;
  color: var(--sapGroup_TitleTextColor);
  font-family: var(--sapFontFamily);
}

.titleContainer {
  border-block-start: var(--_ui5wcr_ObjectPage_SectionBorderTop);
  box-sizing: border-box;
  height: 2.25rem;
}

.sticky {
  position: sticky;
  background: var(--sapBackgroundColor);
  /*-1 -> subpixel rounding errors */
  inset-block-start: calc(var(--_ui5wcr_ObjectPage_header_height) - 1px);
  z-index: 3;
}

.title {
  height: 2.25rem;
  line-height: 2.25rem;
  color: var(--sapGroup_TitleTextColor);
  font-size: var(--sapFontHeader4Size);
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--_ui5wcr_ObjectPage_SectionTitleFontFamily);
  text-decoration: var(--_ui5wcr_ObjectPage_SectionTitleTextDecoration);
}

.uppercase {
  text-transform: uppercase;
}

.wrap {
  .titleContainer {
    height: unset;
  }
  .title {
    white-space: normal;
    height: unset;
    line-height: normal;
  }
}

.sectionContent {
  white-space: normal;
  height: 100%;
}

.sectionContentInner {
  padding-block-start: 1rem;
  font-family: var(--sapFontFamily);
  height: 100%;
  box-sizing: border-box;
}

@container (max-width: 599px) {
  .section {
    padding-inline: 1rem;
  }
}

@container (min-width: 600px) and (max-width: 1439px) {
  .section {
    padding-inline: 2rem;
  }
}

@container (min-width: 1440px) {
  .section {
    padding-inline: 3rem;
  }
}