@miljodirektoratet/md-css 6.23.2 → 6.25.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/package.json
CHANGED
|
@@ -4,6 +4,20 @@
|
|
|
4
4
|
color: var(--md-color-text-primary);
|
|
5
5
|
font-family: var(--md-typography-family-body);
|
|
6
6
|
transition: all 0.2s linear;
|
|
7
|
+
interpolate-size: allow-keywords;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
/* Content slide animation */
|
|
11
|
+
.md-accordion-item::details-content {
|
|
12
|
+
height: 0;
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
transition:
|
|
15
|
+
height 0.3s ease-in-out,
|
|
16
|
+
content-visibility 0.3s ease-in-out allow-discrete;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.md-accordion-item[open]::details-content {
|
|
20
|
+
height: auto;
|
|
7
21
|
}
|
|
8
22
|
|
|
9
23
|
.md-accordion-item.md-accordion-item--rounded {
|
|
@@ -74,6 +88,10 @@
|
|
|
74
88
|
color: var(--md-color-text-primary);
|
|
75
89
|
width: var(--md-size-24);
|
|
76
90
|
height: var(--md-size-24);
|
|
91
|
+
transition: transform 0.2s ease-in-out;
|
|
92
|
+
}
|
|
93
|
+
.md-accordion-item[open] > .md-accordion-item__header .md-accordion-item__header-icon {
|
|
94
|
+
transform: rotate(180deg);
|
|
77
95
|
}
|
|
78
96
|
.md-accordion-item > .md-accordion-item__header .md-accordion-item__header-icon__open {
|
|
79
97
|
display: block;
|
package/src/index.css
CHANGED
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
@import './loadingSpinner/loadingSpinner.css';
|
|
27
27
|
@import './messages/alertMessage.css';
|
|
28
28
|
@import './modal/modal.css';
|
|
29
|
+
@import './pagination/pagination.css';
|
|
29
30
|
@import './skipToMainContent/skipToMainContent.css';
|
|
30
31
|
@import './stepper/stepper.css';
|
|
31
32
|
@import './tabs/tabs.css';
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
# Structure
|
|
2
|
+
|
|
3
|
+
To use the `Pagination` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
|
|
4
|
+
|
|
5
|
+
Class names and elements in brackets [] are optional-/togglable-/decorator- or state dependant classes.
|
|
6
|
+
|
|
7
|
+
See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<div class="md-pagination [md-pagination--compact]">
|
|
11
|
+
<button class="md-pagination__nav" aria-label="Forrige">
|
|
12
|
+
<span class="md-pagination__nav-icon">{chevronBackwardIcon}</span>
|
|
13
|
+
<span class="md-pagination__nav-label">Forrige</span>
|
|
14
|
+
</button>
|
|
15
|
+
|
|
16
|
+
<div class="md-pagination__pages">
|
|
17
|
+
<div class="md-pagination__pages-desktop">
|
|
18
|
+
<button class="md-pagination__page">1</button>
|
|
19
|
+
<span class="md-pagination__page md-pagination__page--active" aria-current="page">2</span>
|
|
20
|
+
<button class="md-pagination__page">3</button>
|
|
21
|
+
<span class="md-pagination__ellipsis">...</span>
|
|
22
|
+
<button class="md-pagination__page">10</button>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<div class="md-pagination__pages-compact [md-pagination__pages-compact--force]">
|
|
26
|
+
<button class="md-pagination__page">1</button>
|
|
27
|
+
<span class="md-pagination__page md-pagination__page--active" aria-current="page">2</span>
|
|
28
|
+
<button class="md-pagination__page">3</button>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<button class="md-pagination__nav" aria-label="Neste">
|
|
33
|
+
<span class="md-pagination__nav-label">Neste</span>
|
|
34
|
+
<span class="md-pagination__nav-icon">{chevronForwardIcon}</span>
|
|
35
|
+
</button>
|
|
36
|
+
</div>
|
|
37
|
+
```
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
.md-pagination {
|
|
2
|
+
display: flex;
|
|
3
|
+
align-items: center;
|
|
4
|
+
justify-content: center;
|
|
5
|
+
gap: var(--md-size-8);
|
|
6
|
+
font-family: var(--md-typography-family-body);
|
|
7
|
+
font-size: var(--md-typography-size-16);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.md-pagination__nav {
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
gap: var(--md-size-4);
|
|
14
|
+
padding: var(--md-size-8) var(--md-size-12);
|
|
15
|
+
color: var(--md-color-cta-primary-default);
|
|
16
|
+
background-color: transparent;
|
|
17
|
+
border: none;
|
|
18
|
+
border-radius: var(--md-radius-md);
|
|
19
|
+
cursor: pointer;
|
|
20
|
+
transition: background-color 200ms ease-in-out;
|
|
21
|
+
text-decoration: none;
|
|
22
|
+
font-family: inherit;
|
|
23
|
+
font-size: inherit;
|
|
24
|
+
line-height: 1.5;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.md-pagination__nav:hover:not(:disabled):not([aria-disabled='true']) {
|
|
28
|
+
background-color: var(--md-color-cta-secondary-hover);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.md-pagination__nav:focus-visible {
|
|
32
|
+
outline: var(--md-size-2) solid var(--md-color-cta-primary-focus);
|
|
33
|
+
outline-offset: var(--md-size-2);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.md-pagination__nav:disabled,
|
|
37
|
+
.md-pagination__nav[aria-disabled='true'] {
|
|
38
|
+
color: var(--md-color-text-disabled);
|
|
39
|
+
cursor: not-allowed;
|
|
40
|
+
pointer-events: none;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.md-pagination__nav-icon {
|
|
44
|
+
display: flex;
|
|
45
|
+
align-items: center;
|
|
46
|
+
width: var(--md-size-20);
|
|
47
|
+
height: var(--md-size-20);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.md-pagination__nav-label {
|
|
51
|
+
display: inline;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.md-pagination__pages {
|
|
55
|
+
display: flex;
|
|
56
|
+
align-items: center;
|
|
57
|
+
gap: var(--md-size-4);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.md-pagination__page {
|
|
61
|
+
display: flex;
|
|
62
|
+
align-items: center;
|
|
63
|
+
justify-content: center;
|
|
64
|
+
min-width: var(--md-size-40);
|
|
65
|
+
height: var(--md-size-40);
|
|
66
|
+
padding: 0 var(--md-size-12);
|
|
67
|
+
color: var(--md-color-cta-primary-default);
|
|
68
|
+
background-color: transparent;
|
|
69
|
+
border: none;
|
|
70
|
+
border-radius: var(--md-radius-md);
|
|
71
|
+
cursor: pointer;
|
|
72
|
+
transition: background-color 200ms ease-in-out;
|
|
73
|
+
text-decoration: none;
|
|
74
|
+
font-family: inherit;
|
|
75
|
+
font-size: inherit;
|
|
76
|
+
line-height: 1;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.md-pagination__page:hover:not(:disabled):not(.md-pagination__page--active) {
|
|
80
|
+
background-color: var(--md-color-cta-secondary-hover);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.md-pagination__page:focus-visible {
|
|
84
|
+
outline: var(--md-size-2) solid var(--md-color-cta-primary-focus);
|
|
85
|
+
outline-offset: var(--md-size-2);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.md-pagination__page--active {
|
|
89
|
+
background-color: var(--md-color-cta-primary-default);
|
|
90
|
+
color: var(--md-color-text-inverted);
|
|
91
|
+
cursor: default;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.md-pagination__page--active:focus-visible {
|
|
95
|
+
outline: var(--md-size-2) solid var(--md-color-text-inverted);
|
|
96
|
+
outline-offset: -4px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.md-pagination__ellipsis {
|
|
100
|
+
display: flex;
|
|
101
|
+
align-items: center;
|
|
102
|
+
justify-content: center;
|
|
103
|
+
min-width: var(--md-size-40);
|
|
104
|
+
height: var(--md-size-40);
|
|
105
|
+
color: var(--md-color-cta-primary-default);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.md-pagination__pages-desktop {
|
|
109
|
+
display: flex;
|
|
110
|
+
align-items: center;
|
|
111
|
+
gap: var(--md-size-4);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.md-pagination__pages-compact {
|
|
115
|
+
display: none;
|
|
116
|
+
align-items: center;
|
|
117
|
+
gap: var(--md-size-4);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.md-pagination__pages-compact--force {
|
|
121
|
+
display: flex;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.md-pagination--compact .md-pagination__pages-desktop {
|
|
125
|
+
display: none;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.md-pagination--compact .md-pagination__pages-compact {
|
|
129
|
+
display: flex;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.md-pagination--compact .md-pagination__nav-label {
|
|
133
|
+
display: none;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
@media (max-width: 600px) {
|
|
137
|
+
.md-pagination__nav-label {
|
|
138
|
+
display: none;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.md-pagination__pages-desktop {
|
|
142
|
+
display: none;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.md-pagination__pages-compact {
|
|
146
|
+
display: flex;
|
|
147
|
+
}
|
|
148
|
+
}
|