@danske/sapphire-css 28.2.0 → 28.3.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.
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
.sapphire-tag-group {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-wrap: wrap;
|
|
4
|
+
gap: var(--sapphire-tag-size-spacing-gap);
|
|
5
|
+
outline: none;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.sapphire-tag-group__note {
|
|
9
|
+
font-size: var(--sapphire-tag-size-font-note);
|
|
10
|
+
color: var(--sapphire-tag-color-note);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.sapphire-tag__gridcell {
|
|
14
|
+
display: inline-flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
gap: var(--sapphire-tag-size-spacing-with-icon);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.sapphire-tag {
|
|
20
|
+
/* sizing */
|
|
21
|
+
display: inline-flex;
|
|
22
|
+
flex-direction: row;
|
|
23
|
+
height: var(--sapphire-tag-size-height);
|
|
24
|
+
padding: 0 var(--sapphire-tag-size-spacing-horizontal);
|
|
25
|
+
gap: var(--sapphire-tag-size-spacing-with-icon);
|
|
26
|
+
justify-content: center;
|
|
27
|
+
align-items: center;
|
|
28
|
+
white-space: nowrap;
|
|
29
|
+
border-radius: var(--sapphire-tag-size-radius);
|
|
30
|
+
cursor: default;
|
|
31
|
+
|
|
32
|
+
/* typography */
|
|
33
|
+
font-size: var(--sapphire-tag-size-font-tag);
|
|
34
|
+
font-family: var(--sapphire-tag-font-name);
|
|
35
|
+
font-weight: var(--sapphire-tag-font-weight);
|
|
36
|
+
font-style: normal;
|
|
37
|
+
|
|
38
|
+
/* color default */
|
|
39
|
+
background-color: var(--sapphire-tag-color-background-primary-default);
|
|
40
|
+
color: var(--sapphire-tag-color-content-default);
|
|
41
|
+
outline: none;
|
|
42
|
+
|
|
43
|
+
/* transition */
|
|
44
|
+
transition-property: opacity, background-color, color;
|
|
45
|
+
transition-duration: var(--sapphire-tag-time-transition);
|
|
46
|
+
transition-timing-function: ease-in-out;
|
|
47
|
+
|
|
48
|
+
/* The below is meant to address a font rendering quirk in OSX where the text
|
|
49
|
+
* looks bolder than intended due to subpixel rendering. This quirk generally
|
|
50
|
+
* occurs for bold fonts on dark backgrounds but depending on the font, it
|
|
51
|
+
* can happen in other contexts as well.
|
|
52
|
+
*
|
|
53
|
+
* These do not do anything except in webkit browsers & firefox on OSX.
|
|
54
|
+
*
|
|
55
|
+
* For more details see:
|
|
56
|
+
* - https://azuredevops/Main/WCCJ/_git/sapphire/pullRequest/212710?path=%2Fpackages%2Fcss%2Fcomponents%2Fbutton%2Fbutton.module.css&discussionId=1507702&_a=files
|
|
57
|
+
* - https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/
|
|
58
|
+
*/
|
|
59
|
+
-webkit-font-smoothing: antialiased;
|
|
60
|
+
-moz-osx-font-smoothing: grayscale;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* ## Tag states */
|
|
64
|
+
.sapphire-tag:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
|
|
65
|
+
.sapphire-tag:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
|
|
66
|
+
background-color: var(--sapphire-tag-color-background-primary-hover);
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
}
|
|
69
|
+
.sapphire-tag.is-focus,
|
|
70
|
+
.sapphire-tag:not(.js-focus):focus-visible {
|
|
71
|
+
background-color: var(--sapphire-tag-color-background-primary-focus);
|
|
72
|
+
outline: var(--sapphire-tag-size-focus-ring-border) solid
|
|
73
|
+
var(--sapphire-tag-color-focus-ring);
|
|
74
|
+
}
|
|
75
|
+
.sapphire-tag.is-active {
|
|
76
|
+
background-color: var(--sapphire-tag-color-background-primary-active);
|
|
77
|
+
cursor: pointer;
|
|
78
|
+
}
|
|
79
|
+
.sapphire-tag:disabled,
|
|
80
|
+
.sapphire-tag.is-disabled {
|
|
81
|
+
opacity: var(--sapphire-tag-opacity-disabled);
|
|
82
|
+
cursor: not-allowed;
|
|
83
|
+
pointer-events: none;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Adjusts sizing when button or icon is present */
|
|
87
|
+
.sapphire-tag:has(.sapphire-tag__button) {
|
|
88
|
+
padding-right: var(--sapphire-tag-size-spacing-with-icon);
|
|
89
|
+
}
|
|
90
|
+
.sapphire-tag:has(.sapphire-tag__icon--error) {
|
|
91
|
+
padding-left: var(--sapphire-tag-size-spacing-with-icon);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/**
|
|
95
|
+
* Icon
|
|
96
|
+
*/
|
|
97
|
+
.sapphire-tag__icon {
|
|
98
|
+
display: flex;
|
|
99
|
+
flex-direction: column;
|
|
100
|
+
justify-content: center;
|
|
101
|
+
align-items: center;
|
|
102
|
+
height: var(--sapphire-tag-size-icon);
|
|
103
|
+
width: var(--sapphire-tag-size-icon);
|
|
104
|
+
}
|
|
105
|
+
.sapphire-tag--error .sapphire-tag__icon--error {
|
|
106
|
+
color: var(--sapphire-tag-color-error);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Button
|
|
111
|
+
*/
|
|
112
|
+
.sapphire-tag__button {
|
|
113
|
+
box-sizing: border-box;
|
|
114
|
+
display: inline-flex;
|
|
115
|
+
align-items: center;
|
|
116
|
+
justify-content: center;
|
|
117
|
+
vertical-align: middle;
|
|
118
|
+
white-space: nowrap;
|
|
119
|
+
height: var(--sapphire-tag-size-icon);
|
|
120
|
+
width: var(--sapphire-tag-size-icon);
|
|
121
|
+
border: none;
|
|
122
|
+
|
|
123
|
+
/* transition */
|
|
124
|
+
transition-property: color;
|
|
125
|
+
transition-duration: var(--sapphire-tag-time-transition);
|
|
126
|
+
transition-timing-function: ease-in-out;
|
|
127
|
+
cursor: pointer;
|
|
128
|
+
|
|
129
|
+
/* style */
|
|
130
|
+
background-color: transparent;
|
|
131
|
+
color: var(--sapphire-tag-color-button);
|
|
132
|
+
}
|
|
133
|
+
.sapphire-tag__button:focus {
|
|
134
|
+
outline: none;
|
|
135
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
declare const styles: {
|
|
2
|
+
readonly "sapphire-tag-group": string;
|
|
3
|
+
readonly "sapphire-tag-group__note": string;
|
|
4
|
+
readonly "sapphire-tag__gridcell": string;
|
|
5
|
+
readonly "sapphire-tag": string;
|
|
6
|
+
readonly "is-disabled": string;
|
|
7
|
+
readonly "is-active": string;
|
|
8
|
+
readonly "js-hover": string;
|
|
9
|
+
readonly "is-hover": string;
|
|
10
|
+
readonly "is-focus": string;
|
|
11
|
+
readonly "js-focus": string;
|
|
12
|
+
readonly "sapphire-tag__button": string;
|
|
13
|
+
readonly "sapphire-tag__icon--error": string;
|
|
14
|
+
readonly "sapphire-tag__icon": string;
|
|
15
|
+
readonly "sapphire-tag--error": string;
|
|
16
|
+
};
|
|
17
|
+
export = styles;
|
|
18
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@danske/sapphire-css",
|
|
3
|
-
"version": "28.
|
|
3
|
+
"version": "28.3.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": "^37.
|
|
69
|
+
"@danske/sapphire-design-tokens": "^37.3.0"
|
|
70
70
|
},
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "898067929452d335a664e4d5fb5287775d1dbbd0"
|
|
72
72
|
}
|