@db-ux/core-components 4.4.0 → 4.4.1-footer-28739e3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/footer/footer.css +157 -0
- package/build/components/footer/footer.scss +135 -0
- package/build/styles/absolute.css +1 -1
- package/build/styles/index.css +1 -1
- package/build/styles/index.scss +1 -0
- package/build/styles/relative.css +1 -1
- package/build/styles/rollup.css +1 -1
- package/build/styles/webpack.css +1 -1
- package/package.json +3 -3
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
|
|
2
|
+
/* Use fixed spacings for all kind of distances (margin, padding, ...) */
|
|
3
|
+
/* The primary use-case for responsive spacings are
|
|
4
|
+
paddings/gaps in an application e.g. the <main> should have a responsive padding. */
|
|
5
|
+
/* Elevation */
|
|
6
|
+
/* Border */
|
|
7
|
+
/* Opacity */
|
|
8
|
+
/* Transitions */
|
|
9
|
+
/* Screen sizes */
|
|
10
|
+
/* Container sizes */
|
|
11
|
+
/* Variants for adaptive components like input, select, notification, ... */
|
|
12
|
+
@layer variables {}
|
|
13
|
+
|
|
14
|
+
@layer variables {}
|
|
15
|
+
|
|
16
|
+
@layer variables {}
|
|
17
|
+
|
|
18
|
+
@layer variables {}
|
|
19
|
+
|
|
20
|
+
@layer variables {}
|
|
21
|
+
|
|
22
|
+
@layer variables {}
|
|
23
|
+
|
|
24
|
+
@layer variables {}
|
|
25
|
+
|
|
26
|
+
@layer variables {}
|
|
27
|
+
|
|
28
|
+
@layer variables {}
|
|
29
|
+
|
|
30
|
+
@layer variables {}
|
|
31
|
+
|
|
32
|
+
@layer variables {}
|
|
33
|
+
|
|
34
|
+
@layer variables {}
|
|
35
|
+
|
|
36
|
+
@layer variables {}
|
|
37
|
+
|
|
38
|
+
@layer variables {}
|
|
39
|
+
|
|
40
|
+
@layer variables {}
|
|
41
|
+
|
|
42
|
+
@layer variables {}
|
|
43
|
+
|
|
44
|
+
@layer variables {}
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* @mixin screen-min-max
|
|
48
|
+
* @param $data an object like (min:"sm", max:"lg") or (min: "sm")
|
|
49
|
+
*/
|
|
50
|
+
.db-footer {
|
|
51
|
+
background-color: var(--db-adaptive-bg-basic-level-1-default);
|
|
52
|
+
flex-direction: column;
|
|
53
|
+
}
|
|
54
|
+
.db-footer:not([hidden]) {
|
|
55
|
+
display: flex;
|
|
56
|
+
}
|
|
57
|
+
.db-footer[data-width=small] .db-footer-content-container {
|
|
58
|
+
margin-inline: auto;
|
|
59
|
+
max-inline-size: 48em;
|
|
60
|
+
}
|
|
61
|
+
.db-footer[data-width=medium] .db-footer-content-container {
|
|
62
|
+
margin-inline: auto;
|
|
63
|
+
max-inline-size: 64em;
|
|
64
|
+
}
|
|
65
|
+
.db-footer[data-width=large] .db-footer-content-container {
|
|
66
|
+
margin-inline: auto;
|
|
67
|
+
max-inline-size: 90em;
|
|
68
|
+
}
|
|
69
|
+
.db-footer .db-footer-main {
|
|
70
|
+
border-block-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
|
|
71
|
+
min-block-size: var(--db-sizing-lg);
|
|
72
|
+
padding-block: var(--db-spacing-fixed-md);
|
|
73
|
+
padding-inline: var(--db-spacing-fixed-lg);
|
|
74
|
+
align-items: center;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
}
|
|
77
|
+
.db-footer .db-footer-main:not([hidden]) {
|
|
78
|
+
display: flex;
|
|
79
|
+
}
|
|
80
|
+
.db-footer .db-footer-main .db-footer-content-container {
|
|
81
|
+
flex: 1 0 0;
|
|
82
|
+
align-items: center;
|
|
83
|
+
justify-content: center;
|
|
84
|
+
min-block-size: 1px;
|
|
85
|
+
min-inline-size: 1px;
|
|
86
|
+
}
|
|
87
|
+
.db-footer .db-footer-main .db-footer-content-container:not([hidden]) {
|
|
88
|
+
display: flex;
|
|
89
|
+
}
|
|
90
|
+
.db-footer .db-footer-main .db-footer-content-container .db-footer-main-inner {
|
|
91
|
+
flex: 1 0 0;
|
|
92
|
+
flex-direction: row;
|
|
93
|
+
align-items: center;
|
|
94
|
+
align-self: stretch;
|
|
95
|
+
}
|
|
96
|
+
.db-footer .db-footer-main .db-footer-content-container .db-footer-main-inner:not([hidden]) {
|
|
97
|
+
display: flex;
|
|
98
|
+
}
|
|
99
|
+
.db-footer .db-footer-main .db-footer-content-container .db-footer-main-inner > * {
|
|
100
|
+
flex: 1 0 0;
|
|
101
|
+
flex-direction: column;
|
|
102
|
+
align-items: center;
|
|
103
|
+
justify-content: center;
|
|
104
|
+
block-size: 100%;
|
|
105
|
+
min-block-size: 1px;
|
|
106
|
+
min-inline-size: 1px;
|
|
107
|
+
}
|
|
108
|
+
.db-footer .db-footer-main .db-footer-content-container .db-footer-main-inner > *:not([hidden]) {
|
|
109
|
+
display: flex;
|
|
110
|
+
}
|
|
111
|
+
.db-footer .db-footer-meta {
|
|
112
|
+
background-color: var(--db-adaptive-bg-basic-level-2-default);
|
|
113
|
+
border-block-start: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
|
|
114
|
+
min-block-size: var(--db-sizing-md);
|
|
115
|
+
padding-block: var(--db-spacing-fixed-xs);
|
|
116
|
+
padding-inline: var(--db-spacing-fixed-lg);
|
|
117
|
+
align-items: center;
|
|
118
|
+
justify-content: center;
|
|
119
|
+
}
|
|
120
|
+
.db-footer .db-footer-meta:not([hidden]) {
|
|
121
|
+
display: flex;
|
|
122
|
+
}
|
|
123
|
+
.db-footer .db-footer-meta .db-footer-content-container {
|
|
124
|
+
flex: 1 0 0;
|
|
125
|
+
gap: var(--db-spacing-fixed-sm);
|
|
126
|
+
align-items: center;
|
|
127
|
+
min-block-size: 1px;
|
|
128
|
+
min-inline-size: 1px;
|
|
129
|
+
}
|
|
130
|
+
.db-footer .db-footer-meta .db-footer-content-container:not([hidden]) {
|
|
131
|
+
display: flex;
|
|
132
|
+
}
|
|
133
|
+
.db-footer .db-footer-meta .db-footer-content-container > *:not(.db-footer-copyright) {
|
|
134
|
+
flex: 1 0 0;
|
|
135
|
+
}
|
|
136
|
+
.db-footer .db-footer-meta .db-footer-content-container > *:not(.db-footer-copyright):not([hidden]) {
|
|
137
|
+
display: flex;
|
|
138
|
+
}
|
|
139
|
+
.db-footer .db-footer-meta .db-footer-content-container .db-footer-meta-inner {
|
|
140
|
+
gap: var(--db-spacing-fixed-sm);
|
|
141
|
+
align-items: center;
|
|
142
|
+
flex: 1 0 0;
|
|
143
|
+
}
|
|
144
|
+
.db-footer .db-footer-meta .db-footer-content-container .db-footer-meta-inner:not([hidden]) {
|
|
145
|
+
display: flex;
|
|
146
|
+
}
|
|
147
|
+
.db-footer .db-footer-meta .db-footer-content-container .db-footer-meta-inner > *:not(.db-footer-copyright) {
|
|
148
|
+
flex: 1 0 0;
|
|
149
|
+
}
|
|
150
|
+
.db-footer .db-footer-meta .db-footer-content-container .db-footer-meta-inner > *:not(.db-footer-copyright):not([hidden]) {
|
|
151
|
+
display: flex;
|
|
152
|
+
}
|
|
153
|
+
.db-footer .db-footer-meta .db-footer-copyright {
|
|
154
|
+
font: var(--db-type-body-sm);
|
|
155
|
+
color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
|
|
156
|
+
white-space: nowrap;
|
|
157
|
+
}
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
@use "@db-ux/core-foundations/build/styles/variables";
|
|
2
|
+
@use "@db-ux/core-foundations/build/styles/screen-sizes";
|
|
3
|
+
@use "@db-ux/core-foundations/build/styles/helpers";
|
|
4
|
+
@use "@db-ux/core-foundations/build/styles/colors";
|
|
5
|
+
|
|
6
|
+
.db-footer {
|
|
7
|
+
background-color: colors.$db-adaptive-bg-basic-level-1-default;
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
@include helpers.display(flex);
|
|
11
|
+
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
|
|
14
|
+
&[data-width="small"] {
|
|
15
|
+
.db-footer-content-container {
|
|
16
|
+
margin-inline: auto;
|
|
17
|
+
max-inline-size: screen-sizes.$db-breakpoint-sm;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&[data-width="medium"] {
|
|
22
|
+
.db-footer-content-container {
|
|
23
|
+
margin-inline: auto;
|
|
24
|
+
max-inline-size: screen-sizes.$db-breakpoint-md;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&[data-width="large"] {
|
|
29
|
+
.db-footer-content-container {
|
|
30
|
+
margin-inline: auto;
|
|
31
|
+
max-inline-size: screen-sizes.$db-breakpoint-lg;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.db-footer-main {
|
|
36
|
+
border-block-start: variables.$db-border-width-3xs solid
|
|
37
|
+
colors.$db-adaptive-on-bg-basic-emphasis-60-default;
|
|
38
|
+
min-block-size: variables.$db-sizing-lg;
|
|
39
|
+
|
|
40
|
+
// Use design token directly to satisfy spacing lint rules
|
|
41
|
+
padding-block: variables.$db-spacing-fixed-md;
|
|
42
|
+
padding-inline: variables.$db-spacing-fixed-lg;
|
|
43
|
+
|
|
44
|
+
@include helpers.display(flex);
|
|
45
|
+
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: center;
|
|
48
|
+
|
|
49
|
+
.db-footer-content-container {
|
|
50
|
+
@include helpers.display(flex);
|
|
51
|
+
|
|
52
|
+
flex: 1 0 0;
|
|
53
|
+
align-items: center;
|
|
54
|
+
justify-content: center;
|
|
55
|
+
min-block-size: 1px;
|
|
56
|
+
min-inline-size: 1px;
|
|
57
|
+
|
|
58
|
+
.db-footer-main-inner {
|
|
59
|
+
@include helpers.display(flex);
|
|
60
|
+
|
|
61
|
+
flex: 1 0 0;
|
|
62
|
+
flex-direction: row;
|
|
63
|
+
align-items: center;
|
|
64
|
+
align-self: stretch;
|
|
65
|
+
|
|
66
|
+
> * {
|
|
67
|
+
@include helpers.display(flex);
|
|
68
|
+
|
|
69
|
+
flex: 1 0 0;
|
|
70
|
+
flex-direction: column;
|
|
71
|
+
align-items: center;
|
|
72
|
+
justify-content: center;
|
|
73
|
+
block-size: 100%;
|
|
74
|
+
min-block-size: 1px;
|
|
75
|
+
min-inline-size: 1px;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.db-footer-meta {
|
|
82
|
+
background-color: colors.$db-adaptive-bg-basic-level-2-default;
|
|
83
|
+
border-block-start: variables.$db-border-width-3xs solid
|
|
84
|
+
colors.$db-adaptive-on-bg-basic-emphasis-60-default;
|
|
85
|
+
|
|
86
|
+
// Ensure visible height per design
|
|
87
|
+
min-block-size: variables.$db-sizing-md;
|
|
88
|
+
|
|
89
|
+
// Use design token directly to satisfy spacing lint rules
|
|
90
|
+
padding-block: variables.$db-spacing-fixed-xs;
|
|
91
|
+
padding-inline: variables.$db-spacing-fixed-lg;
|
|
92
|
+
|
|
93
|
+
@include helpers.display(flex);
|
|
94
|
+
|
|
95
|
+
align-items: center;
|
|
96
|
+
justify-content: center;
|
|
97
|
+
|
|
98
|
+
.db-footer-content-container {
|
|
99
|
+
@include helpers.display(flex);
|
|
100
|
+
|
|
101
|
+
flex: 1 0 0;
|
|
102
|
+
gap: variables.$db-spacing-fixed-sm;
|
|
103
|
+
align-items: center;
|
|
104
|
+
min-block-size: 1px;
|
|
105
|
+
min-inline-size: 1px;
|
|
106
|
+
|
|
107
|
+
> *:not(.db-footer-copyright) {
|
|
108
|
+
@include helpers.display(flex);
|
|
109
|
+
|
|
110
|
+
flex: 1 0 0;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// Inner wrapper to align copyright + meta slot horizontally
|
|
114
|
+
.db-footer-meta-inner {
|
|
115
|
+
@include helpers.display(flex);
|
|
116
|
+
|
|
117
|
+
gap: variables.$db-spacing-fixed-sm;
|
|
118
|
+
align-items: center;
|
|
119
|
+
flex: 1 0 0;
|
|
120
|
+
|
|
121
|
+
> *:not(.db-footer-copyright) {
|
|
122
|
+
@include helpers.display(flex);
|
|
123
|
+
|
|
124
|
+
flex: 1 0 0;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.db-footer-copyright {
|
|
130
|
+
font: var(--db-type-body-sm);
|
|
131
|
+
color: colors.$db-adaptive-on-bg-basic-emphasis-100-default;
|
|
132
|
+
white-space: nowrap;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|