-
Notifications
You must be signed in to change notification settings - Fork 0
/
theming.html
131 lines (126 loc) · 6.67 KB
/
theming.html
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
<!doctype html>
<html>
<head>
<title>Cross-Origin Theming</title>
<link id="cssVariablesSapThemeParameter" rel="stylesheet"/>
<style id="cssVariablesPostMessage"></style>
<style>
:root {
--dsElement_ResponsivePadding: .5rem;
--dsShell_ResponsivePadding: 1rem;
}
@media (min-width: 600px) {
:root {
--dsElement_ResponsivePadding: 2rem;
--dsShell_ResponsivePadding: 2rem;
}
}
@media (min-width: 1440px) {
:root {
--dsElement_ResponsivePadding: 3rem;
--dsShell_ResponsivePadding: 3rem;
}
}
.dsPage {
margin: 0;
padding: 0 var(--dsElement_ResponsivePadding);
background: var(--sapBackgroundColor);
font-family: var(--sapFontFamily);
}
.dsButton {
--background: var(--sapButton_Background);
--borderColor: var(--sapButton_BorderColor);
--textColor: var(--sapButton_TextColor);
appearance: none;
cursor: pointer;
margin: calc(.5 * (var(--sapElement_LineHeight) - var(--sapElement_Height))) 0;
padding: 0 .75rem;
line-height: var(--sapElement_Height);
border: var(--sapButton_BorderWidth) solid var(--borderColor);
border-radius: var(--sapButton_BorderCornerRadius);
background-color: var(--background);
color: var(--textColor);
font-size: var(--sapFontSize);
}
.dsButton:hover {
--borderColor: var(--sapButton_Hover_BorderColor);
--background: var(--sapButton_Hover_Background);
--textColor: var(--sapButton_Hover_TextColor);
}
.dsButton:active {
--borderColor: var(--sapButton_Active_BorderColor);
--background: var(--sapButton_Active_Background);
--textColor: var(--sapButton_Active_TextColor);
}
.dsButton--emphasized {
--background: var(--sapButton_Emphasized_Background);
--borderColor: var(--sapButton_Emphasized_BorderColor);
--textColor: var(--sapButton_Emphasized_TextColor);
}
.dsButton--emphasized:hover {
--background: var(--sapButton_Emphasized_Hover_Background);
--borderColor: var(--sapButton_Emphasized_Hover_BorderColor);
--textColor: var(--sapButton_Emphasized_Hover_TextColor);
}
.dsButton--emphasized:active {
--background: var(--sapButton_Emphasized_Active_Background);
--borderColor: var(--sapButton_Emphasized_Active_BorderColor);
--textColor: var(--sapButton_Emphasized_Active_TextColor);
}
.dsShell {
display: flex;
flex-direction: row;
align-items: center;
height: 3.25rem;
margin: 0 calc(-1 * var(--dsElement_ResponsivePadding)) 1rem;
padding: 0 var(--dsShell_ResponsivePadding);
background-color: var(--sapShellColor);
box-shadow: var(--sapShell_Shadow);
font-size: var(--sapFontHeader5Size);
font-weight: bold;
}
.dsCompanyLogo {
width: 3.75rem;
height: 1.875rem;
margin-right: .25rem;
/*background-image: var(--sapCompanyLogo);*/
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>
<body class="dsPage">
<nav class="dsShell">
<div class="dsCompanyLogo background-image--sapCompanyLogo"></div>
The Shell
</nav>
<button class="dsButton">A Button</button>
<button class="dsButton dsButton--emphasized">An Emphasized Button</button>
<script>
// parse sap-theme parameter and load css_variables.css
const [
themeId,
themeRoot = 'https://unpkg.com/@sap-theming/theming-base-content/content'
] = (new URLSearchParams(location.search).get('sap-theme') || 'sap_horizon').split('@');
const cssVariablesSapThemeParameter = document.getElementById('cssVariablesSapThemeParameter');
cssVariablesSapThemeParameter.href = `${themeRoot}/Base/baseLib/${themeId}/css_variables.css`;
// optional: overwrite sapCompanyLogo
function overwriteSapCompanyLogo() {
document.body.style.removeProperty('--sapCompanyLogo');
const sapCompanyLogo = getComputedStyle(document.body).getPropertyValue('--sapCompanyLogo');
if (sapCompanyLogo === 'none') {
document.body.style.setProperty('--sapCompanyLogo', "url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%20412.38%20204%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%2C.cls-2%7Bfill-rule%3Aevenodd%3B%7D.cls-1%7Bfill%3Aurl(%23linear-gradient)%3B%7D.cls-2%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3ClinearGradient%20id%3D%22linear-gradient%22%20x1%3D%22206.19%22%20x2%3D%22206.19%22%20y2%3D%22204%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%2300b8f1%22%2F%3E%3Cstop%20offset%3D%220.02%22%20stop-color%3D%22%2301b6f0%22%2F%3E%3Cstop%20offset%3D%220.31%22%20stop-color%3D%22%230d90d9%22%2F%3E%3Cstop%20offset%3D%220.58%22%20stop-color%3D%22%231775c8%22%2F%3E%3Cstop%20offset%3D%220.82%22%20stop-color%3D%22%231c65bf%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231e5fbb%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Ctitle%3ESAP_grad_R_scrn_Zeichenfl%C3%A4che%201%3C%2Ftitle%3E%3Cpolyline%20class%3D%22cls-1%22%20points%3D%220%20204%20208.41%20204%20412.38%200%200%200%200%20204%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M244.73%2C38.36l-40.6%2C0v96.52L168.67%2C38.33H133.51l-30.27%2C80.72C100%2C98.7%2C79%2C91.67%2C62.4%2C86.4%2C51.46%2C82.89%2C39.85%2C77.72%2C40%2C72c.09-4.68%2C6.23-9%2C18.38-8.38%2C8.17.43%2C15.37%2C1.09%2C29.71%2C8l14.1-24.55C89.06%2C40.42%2C71%2C36.21%2C56.17%2C36.19h-.09c-17.28%2C0-31.68%2C5.6-40.6%2C14.83A34.23%2C34.23%2C0%2C0%2C0%2C5.77%2C74.7C5.54%2C87.15%2C10.11%2C96%2C19.71%2C103c8.1%2C5.94%2C18.46%2C9.79%2C27.6%2C12.62%2C11.27%2C3.49%2C20.47%2C6.53%2C20.36%2C13A9.57%2C9.57%2C0%2C0%2C1%2C65%2C135c-2.81%2C2.9-7.13%2C4-13.09%2C4.1-11.49.24-20-1.56-33.61-9.59L5.77%2C154.42a93.77%2C93.77%2C0%2C0%2C0%2C46%2C12.22l2.11%2C0c14.24-.25%2C25.74-4.31%2C34.92-11.71.53-.41%2C1-.84%2C1.49-1.28L86.17%2C164.5H123l6.19-18.82a67.46%2C67.46%2C0%2C0%2C0%2C21.68%2C3.43%2C68.33%2C68.33%2C0%2C0%2C0%2C21.16-3.25l6%2C18.64h60.14v-39h13.11c31.71%2C0%2C50.46-16.15%2C50.46-43.2C301.74%2C52.19%2C283.52%2C38.36%2C244.73%2C38.36ZM150.91%2C121a36.93%2C36.93%2C0%2C0%2C1-13-2.28l12.87-40.59H151l12.65%2C40.71A38.5%2C38.5%2C0%2C0%2C1%2C150.91%2C121Zm96.2-23.33h-8.94V64.91h8.94c11.93%2C0%2C21.44%2C4%2C21.44%2C16.14%2C0%2C12.6-9.51%2C16.57-21.44%2C16.57%22%2F%3E%3C%2Fsvg%3E')");
}
}
cssVariablesSapThemeParameter.addEventListener('load', overwriteSapCompanyLogo);
// optional: react on theming-ui:theme-changed postMessage
window.addEventListener('message', ({data}) => {
if (data.type === 'theming-ui:theme-changed') {
document.getElementById('cssVariablesPostMessage').textContent = data.cssVariables;
overwriteSapCompanyLogo();
}
});
</script>
</body>
</html>