@transfermarkt/global-styles 1.7.8 → 1.8.0
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/bun.lock +1060 -0
- package/config/stylelint/index.js +1 -1
- package/package.json +1 -1
- package/scss/index.scss +1 -0
- package/scss/mixins/_icon.scss +23 -0
- package/scss/mixins/_index.scss +1 -0
- package/scss/utils/components/_index.scss +1 -0
- package/scss/utils/components/buttons/_index.scss +1 -0
- package/scss/utils/components/buttons/buttons.scss +79 -0
- package/scss/utils/index.scss +1 -0
- package/scss/variables/_colors.scss +8 -0
- package/bun.lockb +0 -0
package/package.json
CHANGED
package/scss/index.scss
CHANGED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
@mixin tm-icon($name, $position) {
|
|
2
|
+
@if $position == 'left' {
|
|
3
|
+
&::after {
|
|
4
|
+
background: url('https://tmsi.akamaized.net/tm-svg-icons/arrow/right.svg');
|
|
5
|
+
bottom: 0;
|
|
6
|
+
color: white;
|
|
7
|
+
content: '';
|
|
8
|
+
fill: white;
|
|
9
|
+
filter: invert(100%)
|
|
10
|
+
sepia(100%)
|
|
11
|
+
saturate(1%)
|
|
12
|
+
hue-rotate(207deg)
|
|
13
|
+
brightness(102%)
|
|
14
|
+
contrast(102%);
|
|
15
|
+
height: 20px;
|
|
16
|
+
margin: auto;
|
|
17
|
+
position: absolute;
|
|
18
|
+
right: 20px;
|
|
19
|
+
top: 0;
|
|
20
|
+
width: 20px;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
package/scss/mixins/_index.scss
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@forward 'buttons';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@forward 'buttons';
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
@use '../../../functions/rem-calc' as *;
|
|
2
|
+
@use '../../../functions/tm-color' as *;
|
|
3
|
+
@use '../../../functions/tm-font' as *;
|
|
4
|
+
@use '../../../mixins/icon' as *;
|
|
5
|
+
|
|
6
|
+
.tm-btn {
|
|
7
|
+
background-color: tm-color('dark-blue-new');
|
|
8
|
+
border: none;
|
|
9
|
+
border-radius: 8px;
|
|
10
|
+
color: tm-color('white');
|
|
11
|
+
cursor: pointer;
|
|
12
|
+
display: inline-flex;
|
|
13
|
+
font-family: tm-font('septenary');
|
|
14
|
+
font-size: rem-calc(16);
|
|
15
|
+
font-variation-settings: 'wght' 600;
|
|
16
|
+
font-weight: normal;
|
|
17
|
+
line-height: rem-calc(24);
|
|
18
|
+
margin: rem-calc(10);
|
|
19
|
+
place-content: center;
|
|
20
|
+
position: relative;
|
|
21
|
+
text-decoration: none;
|
|
22
|
+
|
|
23
|
+
@include tm-icon('test', 'left');
|
|
24
|
+
|
|
25
|
+
&__icon {
|
|
26
|
+
&--small {
|
|
27
|
+
@include tm-icon('test', 'left');
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&__primary {
|
|
32
|
+
&--large {
|
|
33
|
+
padding: rem-calc(8) rem-calc(40);
|
|
34
|
+
text-transform: uppercase;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&--medium {
|
|
38
|
+
font-size: rem-calc(14);
|
|
39
|
+
line-height: rem-calc(20);
|
|
40
|
+
padding: rem-calc(8) rem-calc(16);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&--small {
|
|
44
|
+
font-size: rem-calc(12);
|
|
45
|
+
line-height: rem-calc(14);
|
|
46
|
+
padding: rem-calc(8) rem-calc(12);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&:hover {
|
|
50
|
+
background-color: tm-color('light-blue-new');
|
|
51
|
+
text-decoration: none;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&--disabled {
|
|
55
|
+
background-color: tm-color('gainsboro-new');
|
|
56
|
+
color: tm-color('grey-new');
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&--warning {
|
|
60
|
+
background-color: tm-color('warning-light-new');
|
|
61
|
+
color: tm-color('warning-new');
|
|
62
|
+
|
|
63
|
+
&:hover {
|
|
64
|
+
background-color: tm-color('warning-new');
|
|
65
|
+
color: tm-color('warning-light-new');
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&--success {
|
|
70
|
+
background-color: tm-color('success-light-new');
|
|
71
|
+
color: tm-color('success-new');
|
|
72
|
+
|
|
73
|
+
&:hover {
|
|
74
|
+
background-color: tm-color('success-new');
|
|
75
|
+
color: tm-color('success-light-new');
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@forward 'components';
|
|
@@ -10,11 +10,13 @@ $tm-colors: (
|
|
|
10
10
|
'cobalt': #00449e,
|
|
11
11
|
'cyan': #5ca6ff,
|
|
12
12
|
'dark-blue': #1a3151,
|
|
13
|
+
'dark-blue-new': #0087ff,
|
|
13
14
|
'denim': #374457,
|
|
14
15
|
'foggy-sky': #d2e3ed,
|
|
15
16
|
'kashmir-blue': #596a81,
|
|
16
17
|
'lighest-sky-blue': #bdd9ef,
|
|
17
18
|
'light-blue': #1d75a3,
|
|
19
|
+
'light-blue-new': #069bff,
|
|
18
20
|
'light-midnight': #16273e,
|
|
19
21
|
'lightest-blue': #00aded,
|
|
20
22
|
'medium-blue': #314f77,
|
|
@@ -40,6 +42,8 @@ $tm-colors: (
|
|
|
40
42
|
'forest-green': #35652f,
|
|
41
43
|
// old name -> $wahretabelleDark
|
|
42
44
|
'green': #749f18,
|
|
45
|
+
'success-new': #1d6e4f,
|
|
46
|
+
'success-light-new': #dffcf1,
|
|
43
47
|
'lightest-green': #e3ecd1,
|
|
44
48
|
'limeade': #55a826,
|
|
45
49
|
'olivine': #a5c169,
|
|
@@ -59,7 +63,9 @@ $tm-colors: (
|
|
|
59
63
|
'dark-whisper': #e6e6e6,
|
|
60
64
|
'dim-grey': #6c6c6c,
|
|
61
65
|
'gainsboro': #e5e6e7,
|
|
66
|
+
'gainsboro-new': #e5e8eb,
|
|
62
67
|
'grey': #ddd,
|
|
68
|
+
'grey-new': #99a3b2,
|
|
63
69
|
'grey-blue': #8b8f9b,
|
|
64
70
|
'gun-powder': #585859,
|
|
65
71
|
// $$flaggenrahmen
|
|
@@ -92,6 +98,8 @@ $tm-colors: (
|
|
|
92
98
|
'utah-crimson-red': #d2003c,
|
|
93
99
|
'raspberry-ripple': #c8102e,
|
|
94
100
|
'pure-red': #f00,
|
|
101
|
+
'warning-new': #c90c0c,
|
|
102
|
+
'warning-light-new': #ffedea,
|
|
95
103
|
'pale-chestnut': #e6a8ae,
|
|
96
104
|
// yellows
|
|
97
105
|
'yellow': #efa93b,
|
package/bun.lockb
DELETED
|
Binary file
|