core/source/_patterns/00-base/_init.scss at 4893cb8f0cfd9e36876325ed0b0d25e48807e469 · db-ui/core · 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
@use "@db-ui/base/build/scss/variables" as *;

// Box sizing
html {
	box-sizing: border-box;
}

*,
::before,
::after {
	box-sizing: inherit;
}

// Media
img,
embed,
iframe,
object,
video {
	height: auto;
	max-width: 100%;
}

// Iframe
iframe {
	border: 0;
}

// * Individual styles
// Navigation lists
nav,
[role="navigation"] {
	ol,
	ul {
		list-style: none;

		margin: 0;
		padding: 0;
	}
}

// General styles (TODO: most likely move those to DB UI Base)
:root {
	--db-focus-outline-offset: 1px;
	--db-focus-outline-color: #0087b9;

	--db-disabled-text-opacity: 0.5;
}

// Focus styles
:is(a, button, input, textarea, summary) {
	--db-focus-outline-size: max(2px, 0.08em);
	transition: outline 0.06s;

	&:focus-visible {
		outline: var(--db-focus-outline-size)
			var(--db-focus-outline-style, solid)
			var(--db-focus-outline-color, currentColor);
		outline-offset: var(
			--db-focus-outline-offset,
			var(--db-focus-outline-size)
		);
	}
}

// List style / https://marketingportal.extranet.deutschebahn.com/de/brandguide/typografie-1#8e0be060-c2f5-42a1-abbc-6b050845d73c~paragraph--image_link
:where(ul) {
	list-style-type: "\2022"+ "   ";

	li::marker {
		color: $db-colors-primary-enabled;
	}
}