@sb1/ffe-datepicker 100.5.2 → 100.6.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.
Files changed (2) hide show
  1. package/css/datepicker.css +25 -52
  2. package/package.json +5 -5
package/css/datepicker.css CHANGED
@@ -1,21 +1,17 @@
1
1
  .ffe-datepicker {
2
2
  position: relative;
3
3
  height: 2.8125rem;
4
+ display: -ms-grid;
4
5
  display: grid;
5
- grid-template-columns: 1fr auto;
6
+ -ms-grid-columns: 1fr auto;
7
+ grid-template-columns: 1fr auto;
6
8
  background-color: var(--ffe-color-surface-primary-default);
7
- width: -webkit-fit-content;
8
- width: -moz-fit-content;
9
9
  width: fit-content;
10
10
  border: var(--ffe-g-border-width) solid var(--ffe-color-border-primary-default);
11
11
  border-radius: var(--ffe-g-border-radius);
12
12
  outline-offset: var(--ffe-g-outline-offset);
13
13
  outline: var(--ffe-g-outline-width) solid transparent;
14
- -webkit-transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), outline var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
15
- transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), outline var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
16
- -o-transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), outline var(--ffe-transition-duration) var(--ffe-ease);
17
14
  transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), outline var(--ffe-transition-duration) var(--ffe-ease);
18
- transition: color var(--ffe-transition-duration) var(--ffe-ease), border var(--ffe-transition-duration) var(--ffe-ease), box-shadow var(--ffe-transition-duration) var(--ffe-ease), background-color var(--ffe-transition-duration) var(--ffe-ease), outline var(--ffe-transition-duration) var(--ffe-ease), -webkit-box-shadow var(--ffe-transition-duration) var(--ffe-ease);
19
15
  }
20
16
  .ffe-datepicker--full-width {
21
17
  width: 100%;
@@ -23,8 +19,7 @@
23
19
  @media (hover: hover) and (pointer: fine) {
24
20
  .ffe-datepicker:hover {
25
21
  border-color: var(--ffe-color-border-primary-default-hover);
26
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
27
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
22
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-primary-default-hover);
28
23
  }
29
24
  }
30
25
  .ffe-datepicker__button {
@@ -34,8 +29,6 @@
34
29
  grid-row: 1 / -1;
35
30
  outline: none;
36
31
  border-radius: 0 var(--ffe-g-border-radius) var(--ffe-g-border-radius) 0;
37
- -webkit-transition: all var(--ffe-transition-duration) var(--ffe-ease);
38
- -o-transition: all var(--ffe-transition-duration) var(--ffe-ease);
39
32
  transition: all var(--ffe-transition-duration) var(--ffe-ease);
40
33
  width: 56px;
41
34
  cursor: pointer;
@@ -46,8 +39,7 @@
46
39
  }
47
40
  .ffe-datepicker:focus-within,
48
41
  .ffe-datepicker:has(.ffe-datepicker__button:focus) .ffe-input-field:hover {
49
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-component-form-input-border-active);
50
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-component-form-input-border-active);
42
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-component-form-input-border-active);
51
43
  border-color: var(--ffe-color-component-form-input-border-active);
52
44
  }
53
45
  @media (pointer: fine) {
@@ -58,8 +50,6 @@
58
50
  .ffe-datepicker__icon.ffe-icons {
59
51
  vertical-align: middle;
60
52
  color: var(--ffe-color-foreground-default);
61
- -webkit-transition: color var(--ffe-transition-duration) var(--ffe-ease);
62
- -o-transition: color var(--ffe-transition-duration) var(--ffe-ease);
63
53
  transition: color var(--ffe-transition-duration) var(--ffe-ease);
64
54
  }
65
55
  @media (hover: hover) and (pointer: fine) {
@@ -68,12 +58,10 @@
68
58
  }
69
59
  }
70
60
  .ffe-datepicker .ffe-dateinput {
71
- display: -webkit-box;
72
61
  display: -ms-flexbox;
73
62
  display: flex;
74
- -webkit-box-align: center;
75
- -ms-flex-align: center;
76
- align-items: center;
63
+ -ms-flex-align: center;
64
+ align-items: center;
77
65
  height: 2.7495rem;
78
66
  border: none;
79
67
  padding: var(--ffe-spacing-2xs) var(--ffe-spacing-sm);
@@ -106,15 +94,13 @@
106
94
  }
107
95
  .ffe-datepicker--invalid {
108
96
  border: var(--ffe-g-border-width) solid var(--ffe-color-border-feedback-critical);
109
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
110
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
97
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
111
98
  background-color: var(--ffe-color-surface-feedback-critical);
112
99
  }
113
100
  @media (hover: hover) and (pointer: fine) {
114
101
  .ffe-datepicker--invalid:hover {
115
102
  border: var(--ffe-g-border-width) solid var(--ffe-color-border-feedback-critical);
116
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
117
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
103
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
118
104
  background-color: var(--ffe-color-surface-primary-default);
119
105
  }
120
106
  .ffe-datepicker--invalid:focus-within:hover {
@@ -122,8 +108,7 @@
122
108
  }
123
109
  }
124
110
  .ffe-datepicker--invalid:focus-within {
125
- -webkit-box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
126
- box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
111
+ box-shadow: var(--ffe-g-border-focus-box-shadow) var(--ffe-color-border-feedback-critical);
127
112
  border: var(--ffe-g-border-width) solid var(--ffe-color-border-feedback-critical);
128
113
  }
129
114
  .ffe-datepicker--invalid .ffe-dateinput,
@@ -139,12 +124,9 @@
139
124
  }
140
125
  .ffe-calendar--datepicker {
141
126
  position: absolute;
142
- -webkit-transform: translateY(var(--ffe-spacing-xs));
143
- transform: translateY(var(--ffe-spacing-xs));
127
+ transform: translateY(var(--ffe-spacing-xs));
144
128
  left: 0;
145
129
  z-index: 9999;
146
- width: -webkit-fit-content;
147
- width: -moz-fit-content;
148
130
  width: fit-content;
149
131
  }
150
132
  .ffe-calendar--datepicker--above {
@@ -160,15 +142,12 @@
160
142
  margin-bottom: var(--ffe-spacing-xs);
161
143
  }
162
144
  .ffe-calendar__header-inner-wrapper {
163
- display: -webkit-box;
164
145
  display: -ms-flexbox;
165
146
  display: flex;
166
- -webkit-box-pack: justify;
167
- -ms-flex-pack: justify;
168
- justify-content: space-between;
169
- -webkit-box-align: center;
170
- -ms-flex-align: center;
171
- align-items: center;
147
+ -ms-flex-pack: justify;
148
+ justify-content: space-between;
149
+ -ms-flex-align: center;
150
+ align-items: center;
172
151
  }
173
152
  .ffe-calendar__month,
174
153
  .ffe-calendar__title {
@@ -186,6 +165,7 @@
186
165
  cursor: pointer;
187
166
  outline: none;
188
167
  border-radius: 4px;
168
+ display: -ms-grid;
189
169
  display: grid;
190
170
  place-items: center;
191
171
  padding: 4px;
@@ -199,8 +179,7 @@
199
179
  color: var(--ffe-color-foreground-emphasis);
200
180
  }
201
181
  .ffe-calendar__icon-next {
202
- -webkit-transform: rotate(180deg);
203
- transform: rotate(180deg);
182
+ transform: rotate(180deg);
204
183
  }
205
184
  .ffe-calendar__accessible-text {
206
185
  position: absolute !important;
@@ -235,18 +214,15 @@
235
214
  padding-bottom: var(--ffe-spacing-sm);
236
215
  }
237
216
  .ffe-calendar tr {
238
- display: -webkit-box;
239
217
  display: -ms-flexbox;
240
218
  display: flex;
241
- -webkit-box-pack: justify;
242
- -ms-flex-pack: justify;
243
- justify-content: space-between;
219
+ -ms-flex-pack: justify;
220
+ justify-content: space-between;
244
221
  }
245
222
  .ffe-calendar td,
246
223
  .ffe-calendar th {
247
- -webkit-box-flex: 1;
248
- -ms-flex: 1;
249
- flex: 1;
224
+ -ms-flex: 1;
225
+ flex: 1;
250
226
  text-align: center;
251
227
  }
252
228
  .ffe-calendar__day {
@@ -317,15 +293,12 @@
317
293
  }
318
294
  }
319
295
  .ffe-calendar__dropdown-container {
320
- display: -webkit-box;
321
296
  display: -ms-flexbox;
322
297
  display: flex;
323
- -webkit-box-align: center;
324
- -ms-flex-align: center;
325
- align-items: center;
326
- -webkit-box-pack: center;
327
- -ms-flex-pack: center;
328
- justify-content: center;
298
+ -ms-flex-align: center;
299
+ align-items: center;
300
+ -ms-flex-pack: center;
301
+ justify-content: center;
329
302
  gap: var(--ffe-spacing-sm);
330
303
  padding: var(--ffe-spacing-2xs) 0;
331
304
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sb1/ffe-datepicker",
3
- "version": "100.5.2",
3
+ "version": "100.6.1",
4
4
  "description": "FFE Datepicker",
5
5
  "license": "MIT",
6
6
  "author": "SpareBank 1",
@@ -20,14 +20,14 @@
20
20
  "build": "lessc less/datepicker.less css/datepicker.css --autoprefix"
21
21
  },
22
22
  "dependencies": {
23
- "@sb1/ffe-core": "^100.5.2",
24
- "@sb1/ffe-form": "^100.5.2"
23
+ "@sb1/ffe-core": "^100.6.1",
24
+ "@sb1/ffe-form": "^100.6.1"
25
25
  },
26
26
  "devDependencies": {
27
- "@sb1/ffe-buildtool": "^100.5.2"
27
+ "@sb1/ffe-buildtool": "^100.6.1"
28
28
  },
29
29
  "publishConfig": {
30
30
  "access": "public"
31
31
  },
32
- "gitHead": "a5f4873cd292e0c01f7c1e11e6a74b77140333bf"
32
+ "gitHead": "f579e35bc4c3f99219ab53a3572e60311e2f5077"
33
33
  }