@arbeidstilsynet/design-css 0.8.2 → 0.9.1
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/README.md +1 -1
- package/dist/digdir/avatar-stack.css +1 -1
- package/dist/digdir/badge.css +1 -1
- package/dist/digdir/base.css +1 -1
- package/dist/digdir/breadcrumbs.css +1 -1
- package/dist/digdir/button.css +1 -1
- package/dist/digdir/card.css +1 -1
- package/dist/digdir/combobox.css +1 -1
- package/dist/digdir/details.css +1 -1
- package/dist/digdir/dialog.css +1 -1
- package/dist/digdir/dropdown.css +1 -1
- package/dist/digdir/error-summary.css +1 -1
- package/dist/digdir/field.css +2 -2
- package/dist/digdir/fieldset.css +1 -1
- package/dist/digdir/input.css +1 -1
- package/dist/digdir/link.css +1 -1
- package/dist/digdir/pagination.css +1 -1
- package/dist/digdir/popover.css +1 -1
- package/dist/digdir/spinner.css +1 -1
- package/dist/digdir/suggestion.css +1 -1
- package/dist/digdir/table.css +1 -1
- package/dist/digdir/tabs.css +1 -1
- package/dist/digdir/tag.css +1 -1
- package/dist/digdir/toggle-group.css +1 -1
- package/dist/digdir/togglegroup.css +1 -1
- package/dist/digdir/tooltip.css +1 -1
- package/dist/digdir/validation-message.css +1 -1
- package/dist/src/button.css +70 -0
- package/dist/src/filepicker.css +0 -1
- package/dist/src/index.css +104 -33
- package/package.json +6 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
.ds-validation-message{--dsc-validation-message-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.74 2.47a.75.75 0 0 1 .53-.22h7.46a.75.75 0 0 1 .53.22l5.27 5.27c.14.14.22.33.22.53v7.46a.75.75 0 0 1-.22.53l-5.27 5.27a.75.75 0 0 1-.53.22H8.27a.75.75 0 0 1-.53-.22l-5.27-5.27a.75.75 0 0 1-.22-.53V8.27a.75.75 0 0 1 .22-.53zm1.29 5.5a.75.75 0 0 0-1.06 1.06L10.94 12l-2.97 2.97a.75.75 0 1 0 1.06 1.06L12 13.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L13.06 12l2.97-2.97a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");--dsc-validation-message-icon-size:var(--ds-size-7);--dsc-validation-message-spacing:var(--ds-size-2);--dsc-validation-message-color:var(--ds-color-danger-text-subtle);color:var(--dsc-validation-message-color);
|
|
1
|
+
:where(.ds-validation-message){margin:0}.ds-validation-message{--dsc-validation-message-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.74 2.47a.75.75 0 0 1 .53-.22h7.46a.75.75 0 0 1 .53.22l5.27 5.27c.14.14.22.33.22.53v7.46a.75.75 0 0 1-.22.53l-5.27 5.27a.75.75 0 0 1-.53.22H8.27a.75.75 0 0 1-.53-.22l-5.27-5.27a.75.75 0 0 1-.22-.53V8.27a.75.75 0 0 1 .22-.53zm1.29 5.5a.75.75 0 0 0-1.06 1.06L10.94 12l-2.97 2.97a.75.75 0 1 0 1.06 1.06L12 13.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L13.06 12l2.97-2.97a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");--dsc-validation-message-icon-size:var(--ds-size-7);--dsc-validation-message-spacing:var(--ds-size-2);--dsc-validation-message-color:var(--ds-color-danger-text-subtle);color:var(--dsc-validation-message-color);padding-inline-start:calc(var(--dsc-validation-message-icon-size) + var(--dsc-validation-message-spacing));position:relative;-webkit-print-color-adjust:exact;print-color-adjust:exact}.ds-validation-message:before{background:currentcolor;content:"";height:var(--dsc-validation-message-icon-size);margin-inline:calc((var(--dsc-validation-message-icon-size) + var(--dsc-validation-message-spacing))*-1);-webkit-mask:var(--dsc-validation-message-icon-url) center /contain no-repeat;mask:var(--dsc-validation-message-icon-url) center /contain no-repeat;position:absolute;translate:0 calc((1lh - var(--dsc-validation-message-icon-size))/2);width:var(--dsc-validation-message-icon-size)}@media (forced-colors:active){.ds-validation-message:before{background:CanvasText}}.ds-validation-message[data-color=success]{--dsc-validation-message-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 21.75a9.75 9.75 0 1 0 0-19.5 9.75 9.75 0 0 0 0 19.5m4.95-12.47a.81.81 0 0 0-1.24-1.05l-5.39 6.36-2.62-2.62a.81.81 0 0 0-1.15 1.15l3.25 3.25a.81.81 0 0 0 1.2-.05z'/%3E%3C/svg%3E");--dsc-validation-message-color:var(--ds-color-success-text-subtle)}.ds-validation-message[data-color=warning]{--dsc-validation-message-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25a.75.75 0 0 1 .66.39l9.52 17.25a.75.75 0 0 1-.65 1.11H2.47a.75.75 0 0 1-.65-1.11l9.52-17.25a.75.75 0 0 1 .66-.39m0 6.5a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0v-4a.75.75 0 0 1 .75-.75m-1 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0'/%3E%3C/svg%3E");--dsc-validation-message-color:var(--ds-color-warning-text-subtle)}.ds-validation-message[data-color=info]{--dsc-validation-message-icon-url:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E");--dsc-validation-message-color:var(--ds-color-info-text-subtle)}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/** Overrides the default button styles for the different variants. */
|
|
2
|
+
|
|
3
|
+
.ds-button[data-variant="secondary"] {
|
|
4
|
+
/** Text **/
|
|
5
|
+
--dsc-button-color: var(--ds-color-text-default);
|
|
6
|
+
--dsc-button-color--hover: var(--ds-color-text-default);
|
|
7
|
+
|
|
8
|
+
/** Background ("Fill") */
|
|
9
|
+
--dsc-button-background: transparent;
|
|
10
|
+
--dsc-button-background--active: var(--ds-color-surface-tinted);
|
|
11
|
+
--dsc-button-background--hover: var(--ds-color-surface-tinted);
|
|
12
|
+
|
|
13
|
+
/** Border ("Stroke") */
|
|
14
|
+
--dsc-button-border-color: var(--ds-color-text-default);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.ds-button[data-variant="secondary"][data-color="neutral"] {
|
|
18
|
+
/** Background ("Fill") */
|
|
19
|
+
--dsc-button-background--active: var(--ds-color-background-tinted);
|
|
20
|
+
--dsc-button-background--hover: var(--ds-color-background-tinted);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.ds-button[data-variant="secondary"][data-color="danger"] {
|
|
24
|
+
/** Background ("Fill") */
|
|
25
|
+
--dsc-button-background--active: var(--ds-color-surface-active);
|
|
26
|
+
--dsc-button-background--hover: var(--ds-color-surface-hover);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.ds-button[data-variant="tertiary"]:not(
|
|
30
|
+
/* Don't apply when inside Pagination.
|
|
31
|
+
Pagination currently has mixed docs of either setting data-variant="primary" on Pagination.Button
|
|
32
|
+
or keeping it as tertiary (returned from usePagination). If this is changed upstream we can simplify this selector.
|
|
33
|
+
*/
|
|
34
|
+
.ds-pagination .ds-button[data-variant="tertiary"]
|
|
35
|
+
) {
|
|
36
|
+
/** Text **/
|
|
37
|
+
--dsc-button-color: var(--ds-color-text-default);
|
|
38
|
+
--dsc-button-color--hover: var(--ds-color-text-default);
|
|
39
|
+
|
|
40
|
+
/** Background ("Fill") */
|
|
41
|
+
--dsc-button-background: transparent;
|
|
42
|
+
--dsc-button-background--active: transparent;
|
|
43
|
+
--dsc-button-background--hover: transparent;
|
|
44
|
+
|
|
45
|
+
/** Border ("Stroke") */
|
|
46
|
+
--dsc-button-border-color: transparent;
|
|
47
|
+
|
|
48
|
+
text-decoration: none;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.ds-button[data-variant="tertiary"]:not(.ds-pagination .ds-button[data-variant="tertiary"]):hover:not([disabled]),.ds-button[data-variant="tertiary"]:not(.ds-pagination .ds-button[data-variant="tertiary"]):active:not([disabled]) {
|
|
52
|
+
-webkit-text-decoration: underline 2px;
|
|
53
|
+
text-decoration: underline 2px;
|
|
54
|
+
text-underline-offset: 6px; /** Hack to prevent us from having to create our own button component just to support underline on hover. */
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.ds-button {
|
|
58
|
+
padding: var(--ds-size-2) var(--ds-size-4);
|
|
59
|
+
width: -moz-fit-content;
|
|
60
|
+
width: fit-content;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.ds-button[data-icon="true"] {
|
|
64
|
+
padding: var(--ds-size-2);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.ds-button[data-icon="true"] > * {
|
|
68
|
+
width: 1.5rem;
|
|
69
|
+
height: 1.5rem;
|
|
70
|
+
}
|