Skip to content

Commit 0137225

Browse files
LidiyaGeorgievaLidiyaGeorgieva
authored
feat(ui5-card): implement SAP Horizon theme family (#4974)
related to: #5006 * feat(ui5-card): implement Horizon * merge fixed * hash files fixed * sample fixed * - ststus div creation edited - tags cahnged from ui5-text to span * casing fixed * test page formatted unused css variable deleted and other * header padding for Horizon fixed * header focus is now 1px closer to the border (gap is removed) * space around focus reverted for Contrast themes * Update hash.txt * Update hash.txt
1 parent bc30cd7 commit 0137225

File tree

20 files changed

+247
-65
lines changed

20 files changed

+247
-65
lines changed

‎packages/base/hash.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
aVRWTf+UgTH0B3Ku2yzm8n7SQMQ=
1+
aVRWTf+UgTH0B3Ku2yzm8n7SQMQ=

‎packages/main/src/CardHeader.hbs

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,25 +18,29 @@
1818
{{/if}}
1919

2020
<div class="ui5-card-header-text">
21-
{{#if titleText}}
22-
<div id="{{_id}}-title" class="ui5-card-header-title" part="title">{{titleText}}</div>
23-
{{/if}}
21+
<div class="ui5-card-header-first-line">
22+
{{#if titleText}}
23+
<div id="{{_id}}-title" class="ui5-card-header-title" part="title">{{titleText}}</div>
24+
{{/if}}
25+
26+
{{#if status}}
27+
<div class="ui5-card-header-status">
28+
<span id="{{_id}}-status" part="status" dir="auto">{{status}}</span>
29+
</div>
30+
{{/if}}
31+
32+
</div>
2433

2534
{{#if subtitleText}}
2635
<div id="{{_id}}-subtitle" class="ui5-card-header-subtitle" part="subtitle">{{subtitleText}}</div>
2736
{{/if}}
2837
</div>
2938

30-
<div class="ui5-card-header-action">
31-
{{#if hasAction}}
39+
{{#if hasAction}}
40+
<div class="ui5-card-header-action">
3241
<slot name="action"></slot>
33-
{{else}}
34-
<span
35-
id="{{_id}}-status"
36-
part="status"
37-
class="ui5-card-header-status"
38-
dir="auto"
39-
>{{status}}</span>
40-
{{/if}}
42+
</div>
43+
{{/if}}
44+
4145
</div>
42-
</div>
46+
</div>

‎packages/main/src/CardHeader.js

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,6 @@ const metadata = {
3636

3737
/**
3838
* Defines an action, displayed in the right most part of the header.
39-
* <br><br>
40-
* <b>Note:</b> If set, the <code>status</code> text will not be displayed,
41-
* you can either have <code>action</code>, or <code>status</code>.
4239
* @type {HTMLElement[]}
4340
* @slot
4441
* @public
@@ -71,9 +68,6 @@ const metadata = {
7168

7269
/**
7370
* Defines the status text.
74-
* <br><br>
75-
* <b>Note:</b> If the <code>action</code> slot is set, the <code>status</code> will not be displayed,
76-
* you can either have <code>action</code>, or <code>status</code>.
7771
* @type {string}
7872
* @defaultvalue ""
7973
* @public

‎packages/main/src/themes/Card.css

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
background: var(--sapTile_Background);
1313
box-shadow: var(--_ui5_card_box_shadow);
1414
border-radius: var(--_ui5_card_border-radius);
15-
border: 1px solid var(--_ui5_card_border_color);
15+
border: var(--_ui5_card_border);
1616
overflow: hidden;
1717
font-family: "72override", var(--sapFontFamily);
1818
font-size: var(--sapFontSize);
@@ -23,6 +23,10 @@
2323
box-shadow: var(--_ui5_card_hover_box_shadow);
2424
}
2525

26+
.ui5-card-root:active {
27+
box-shadow: var(--_ui5_card_box_shadow);
28+
}
29+
2630
/* Card with no content */
2731
.ui5-card-root.ui5-card--nocontent {
2832
height: auto;
@@ -36,7 +40,6 @@
3640
--_ui5_card_header_focus_bottom_radius: var(--_ui5_card_header_focus_radius);
3741
}
3842

39-
.ui5-card-root .ui5-card-header-root {
40-
display: block;
41-
border-bottom: 1px solid var(--_ui5_card_header_border_color);
43+
.ui5-card-root .ui5-card-header-root {
44+
border-bottom: var(--_ui5_card_header_border);
4245
}

‎packages/main/src/themes/CardHeader.css

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
position: relative;
55
display: flex;
66
align-items: center;
7-
padding: var(--_ui5_card_content_padding);
7+
padding: var(--_ui5_card_header_padding);
88
outline: none;
99
}
1010

@@ -43,6 +43,16 @@
4343
pointer-events: none;
4444
}
4545

46+
.ui5-card-header-first-line {
47+
display: flex;
48+
flex-flow: row;
49+
justify-content: space-between;
50+
}
51+
52+
.ui5-card-header-status {
53+
flex: none;
54+
}
55+
4656
.ui5-card-header .ui5-card-header-avatar {
4757
height: 3rem;
4858
width: 3rem;
@@ -51,6 +61,7 @@
5161
justify-content: center;
5262
margin-right: .75rem;
5363
pointer-events: none;
64+
align-self: flex-start;
5465
}
5566

5667
::slotted([ui5-icon]) {
@@ -71,11 +82,11 @@
7182
font-size: var(--sapFontSmallSize);
7283
color: var(--sapTile_TextColor);
7384
text-align: left;
74-
line-height: 1.125rem;
75-
margin-left: auto;
7685
text-overflow: ellipsis;
7786
overflow: hidden;
7887
white-space: nowrap;
88+
vertical-align: middle;
89+
margin-left: 1rem;
7990
}
8091

8192
.ui5-card-header .ui5-card-header-text .ui5-card-header-title {
@@ -84,14 +95,15 @@
8495
font-weight: var(--_ui5_card_header_title_font_weight);
8596
color: var(--sapTile_TitleTextColor);
8697
max-height: 3.5rem;
98+
align-self: flex-end;
8799
}
88100

89101
.ui5-card-header .ui5-card-header-text .ui5-card-header-subtitle {
90102
font-family: "72override", var(--sapFontFamily);
91103
font-size: var(--sapFontSize);
92104
font-weight: normal;
93105
color: var(--sapTile_TextColor);
94-
margin-top: .5rem;
106+
margin-top: var(--_ui5_card_header_subtitle_margin_top);
95107
max-height: 2.1rem;
96108
}
97109

@@ -108,10 +120,14 @@
108120
max-width: 100%;
109121
}
110122

123+
.ui5-card-header .ui5-card-header-text .ui5-card-header-title {
124+
-webkit-line-clamp: 3;
125+
}
111126

112127
.ui5-card-header-action {
113128
display: flex;
114129
padding-left: 1rem;
130+
align-self: flex-start;
115131
}
116132

117133
[dir="rtl"].ui5-card-header .ui5-card-header-avatar {

‎packages/main/src/themes/base/Card-parameters.css

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
:root {
22
--_ui5_card_box_shadow: var(--sapContent_Shadow0);
33
--_ui5_card_hover_box_shadow: var(--_ui5_card_box_shadow);
4-
--_ui5_card_border_color: var(--sapTile_BorderColor);
4+
--_ui5_card_border: 1px solid var(--sapTile_BorderColor);
55
--_ui5_card_border-radius: var(--sapElement_BorderCornerRadius);
6-
--_ui5_card_content_padding: 1rem;
6+
--_ui5_card_header_padding: 1rem;
77
--_ui5_card_header_hover_bg: var(--sapList_Hover_Background);
88
--_ui5_card_header_active_bg: var(--_ui5_card_header_hover_bg);
9+
--_ui5_card_header_border: 1px solid var(--_ui5_card_header_border_color);
910
--_ui5_card_header_border_color: var(--sapTile_SeparatorColor);
1011
--_ui5_card_header_focus_border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
1112
--_ui5_card_header_focus_radius: 0px;
@@ -14,4 +15,5 @@
1415
--_ui5_card_header_title_font_family: "72override", var(--sapFontFamily);
1516
--_ui5_card_header_title_font_size: var(--sapFontHeader5Size);
1617
--_ui5_card_header_title_font_weight: normal;
17-
}
18+
--_ui5_card_header_subtitle_margin_top: .25rem;
19+
}

‎packages/main/src/themes/sap_belize/Card-parameters.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "../base/Card-parameters.css";
2+
3+
:root {
4+
--_ui5_card_header_subtitle_margin_top: .5rem;
5+
}

‎packages/main/src/themes/sap_belize/parameters-bundle.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
@import "./Dialog-parameters.css";
1010
@import "../base/CalendarHeader-parameters.css";
1111
@import "./Carousel-parameters.css";
12-
@import "../base/Card-parameters.css";
12+
@import "./Card-parameters.css";
1313
@import "../base/CheckBox-parameters.css";
1414
@import "../base/ColorPalette-parameters.css";
1515
@import "../base/ColorPicker-parameters.css";

‎packages/main/src/themes/sap_belize_hcb/Card-parameters.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@
33
:root {
44
--_ui5_card_box_shadow: none;
55
--_ui5_card_header_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
6-
}
6+
--_ui5_card_header_subtitle_margin_top: .5rem;
7+
}

‎packages/main/src/themes/sap_belize_hcw/Card-parameters.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@
33
:root {
44
--_ui5_card_box_shadow: none;
55
--_ui5_card_header_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
6-
}
6+
--_ui5_card_header_subtitle_margin_top: .5rem;
7+
}

0 commit comments

Comments
 (0)