@danske/sapphire-css 30.0.2 → 31.0.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/components/buttonGroup/buttonGroup.module.css +6 -2
- package/components/buttonGroup/buttonGroup.module.css.d.ts +3 -2
- package/components/iconButton/iconButton.module.css +8 -0
- package/components/pagination/pagination.module.css +18 -8
- package/components/pagination/pagination.module.css.d.ts +4 -3
- package/components/spinner/spinner.module.css +9 -0
- package/components/spinner/spinner.module.css.d.ts +1 -0
- package/package.json +3 -3
|
@@ -38,14 +38,18 @@ Added !important because of Angular implementation, and how the extra attribute
|
|
|
38
38
|
flex-direction: column-reverse;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
.sapphire-button-group--
|
|
41
|
+
.sapphire-button-group--spacing-l {
|
|
42
42
|
gap: var(--sapphire-button-group-size-spacing-l);
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
.sapphire-button-group--
|
|
45
|
+
.sapphire-button-group--spacing-s {
|
|
46
46
|
gap: var(--sapphire-button-group-size-spacing-s);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
+
.sapphire-button-group--spacing-xs {
|
|
50
|
+
gap: var(--sapphire-button-group-size-spacing-xs);
|
|
51
|
+
}
|
|
52
|
+
|
|
49
53
|
.sapphire-button-group--align-center {
|
|
50
54
|
justify-content: center;
|
|
51
55
|
}
|
|
@@ -3,8 +3,9 @@ declare const styles: {
|
|
|
3
3
|
readonly "sapphire-button-group--stretch": string;
|
|
4
4
|
readonly "sapphire-button-group--vertical": string;
|
|
5
5
|
readonly "sapphire-button-group--stretch-auto-vertical": string;
|
|
6
|
-
readonly "sapphire-button-group--
|
|
7
|
-
readonly "sapphire-button-group--
|
|
6
|
+
readonly "sapphire-button-group--spacing-l": string;
|
|
7
|
+
readonly "sapphire-button-group--spacing-s": string;
|
|
8
|
+
readonly "sapphire-button-group--spacing-xs": string;
|
|
8
9
|
readonly "sapphire-button-group--align-center": string;
|
|
9
10
|
readonly "sapphire-button-group--align-right": string;
|
|
10
11
|
readonly "sapphire-button-group--align-left": string;
|
|
@@ -37,6 +37,11 @@
|
|
|
37
37
|
border-width: 0;
|
|
38
38
|
border-color: transparent;
|
|
39
39
|
|
|
40
|
+
/* typography */
|
|
41
|
+
font-family: var(--sapphire-icon-button-font-name);
|
|
42
|
+
font-weight: var(--sapphire-icon-button-font-weight);
|
|
43
|
+
font-size: var(--sapphire-icon-button-size-font-m);
|
|
44
|
+
|
|
40
45
|
/* transition */
|
|
41
46
|
/* we don't want to transition outline-offset */
|
|
42
47
|
transition-property: opacity, background-color, color;
|
|
@@ -490,6 +495,7 @@ a.sapphire-icon-button {
|
|
|
490
495
|
height: var(--sapphire-icon-button-size-height-l);
|
|
491
496
|
width: var(--sapphire-icon-button-size-width-l);
|
|
492
497
|
border-radius: var(--sapphire-icon-button-size-radius-l);
|
|
498
|
+
font-size: var(--sapphire-icon-button-size-font-l);
|
|
493
499
|
}
|
|
494
500
|
|
|
495
501
|
/**
|
|
@@ -499,6 +505,7 @@ a.sapphire-icon-button {
|
|
|
499
505
|
height: var(--sapphire-icon-button-size-height-s);
|
|
500
506
|
width: var(--sapphire-icon-button-size-width-s);
|
|
501
507
|
border-radius: var(--sapphire-icon-button-size-radius-s);
|
|
508
|
+
font-size: var(--sapphire-icon-button-size-font-s);
|
|
502
509
|
}
|
|
503
510
|
|
|
504
511
|
/**
|
|
@@ -508,4 +515,5 @@ a.sapphire-icon-button {
|
|
|
508
515
|
height: var(--sapphire-icon-button-size-height-xs);
|
|
509
516
|
width: var(--sapphire-icon-button-size-width-xs);
|
|
510
517
|
border-radius: var(--sapphire-icon-button-size-radius-xs);
|
|
518
|
+
font-size: var(--sapphire-icon-button-size-font-xs);
|
|
511
519
|
}
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
var(--sapphire-pagination-size-spacing-container-horizontal);
|
|
7
7
|
background-color: var(--sapphire-pagination-color-background);
|
|
8
8
|
font-family: var(--sapphire-pagination-font-name);
|
|
9
|
-
font-size: var(--sapphire-pagination-size-font);
|
|
9
|
+
font-size: var(--sapphire-pagination-size-font-page);
|
|
10
10
|
height: var(--sapphire-pagination-size-height);
|
|
11
11
|
|
|
12
12
|
/* The below is meant to address a font rendering quirk in OSX where the text
|
|
@@ -24,21 +24,31 @@
|
|
|
24
24
|
-moz-osx-font-smoothing: grayscale;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
.sapphire-
|
|
27
|
+
.sapphire-pagination__controls {
|
|
28
28
|
display: flex;
|
|
29
29
|
align-items: center;
|
|
30
30
|
justify-content: flex-end;
|
|
31
31
|
flex-grow: 1;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.sapphire-pagination-text {
|
|
35
|
-
font-weight: var(--sapphire-pagination-font-weight-numeric-text);
|
|
36
32
|
color: var(--sapphire-pagination-color-text);
|
|
37
|
-
|
|
33
|
+
gap: var(--sapphire-pagination-size-spacing-controls-horizontal);
|
|
38
34
|
}
|
|
39
35
|
|
|
40
|
-
.sapphire-
|
|
36
|
+
.sapphire-pagination__text {
|
|
41
37
|
font-weight: var(--sapphire-pagination-font-weight-alphabetic-text);
|
|
42
38
|
padding-left: var(--sapphire-pagination-size-spacing-text-horizontal);
|
|
43
39
|
padding-right: var(--sapphire-pagination-size-spacing-text-horizontal);
|
|
44
40
|
}
|
|
41
|
+
|
|
42
|
+
.sapphire-pagination__text--emphasized {
|
|
43
|
+
font-weight: var(--sapphire-pagination-font-weight-numeric-text);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.sapphire-pagination__ellipsis {
|
|
47
|
+
display: flex;
|
|
48
|
+
justify-content: center;
|
|
49
|
+
align-items: center;
|
|
50
|
+
height: var(--sapphire-pagination-size-ellipsis);
|
|
51
|
+
width: var(--sapphire-pagination-size-ellipsis);
|
|
52
|
+
font-size: var(--sapphire-pagination-size-font-ellipsis);
|
|
53
|
+
font-weight: var(--sapphire-pagination-font-weight-numeric-text);
|
|
54
|
+
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
declare const styles: {
|
|
2
2
|
readonly "sapphire-pagination": string;
|
|
3
|
-
readonly "sapphire-
|
|
4
|
-
readonly "sapphire-
|
|
5
|
-
readonly "sapphire-
|
|
3
|
+
readonly "sapphire-pagination__controls": string;
|
|
4
|
+
readonly "sapphire-pagination__text": string;
|
|
5
|
+
readonly "sapphire-pagination__text--emphasized": string;
|
|
6
|
+
readonly "sapphire-pagination__ellipsis": string;
|
|
6
7
|
};
|
|
7
8
|
export = styles;
|
|
8
9
|
|
|
@@ -29,6 +29,15 @@
|
|
|
29
29
|
fill: var(--sapphire-spinner-color-accent);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
+
.sapphire-spinner--inherit .sapphire-spinner__track {
|
|
33
|
+
fill: currentColor;
|
|
34
|
+
opacity: var(--sapphire-spinner-opacity-half);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.sapphire-spinner--inherit .sapphire-spinner__accent {
|
|
38
|
+
fill: currentColor;
|
|
39
|
+
}
|
|
40
|
+
|
|
32
41
|
/*
|
|
33
42
|
* Sizes
|
|
34
43
|
*/
|
|
@@ -3,6 +3,7 @@ declare const styles: {
|
|
|
3
3
|
readonly "rotate": string;
|
|
4
4
|
readonly "sapphire-spinner__track": string;
|
|
5
5
|
readonly "sapphire-spinner__accent": string;
|
|
6
|
+
readonly "sapphire-spinner--inherit": string;
|
|
6
7
|
readonly "sapphire-spinner--xxxs": string;
|
|
7
8
|
readonly "sapphire-spinner--xxs": string;
|
|
8
9
|
readonly "sapphire-spinner--xs": string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@danske/sapphire-css",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "31.0.0",
|
|
4
4
|
"description": "CSS implementation of the Sapphire Design System from Danske Bank A/S",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"typescript": "~4.6.4"
|
|
67
67
|
},
|
|
68
68
|
"dependencies": {
|
|
69
|
-
"@danske/sapphire-design-tokens": "^
|
|
69
|
+
"@danske/sapphire-design-tokens": "^39.0.0"
|
|
70
70
|
},
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "ac09b3b908a8558628aaab2aabd701c18c3f5a11"
|
|
72
72
|
}
|