@oslokommune/punkt-css 7.1.0 → 7.1.5

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 (12) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/css/components/inputwrapper.css +45 -13
  3. package/dist/css/components/inputwrapper.min.css +1 -1
  4. package/dist/css/components/textinput.css +39 -107
  5. package/dist/css/components/textinput.min.css +1 -1
  6. package/dist/css/pkt-components.css +84 -120
  7. package/dist/css/pkt-components.min.css +1 -1
  8. package/dist/css/pkt.css +84 -120
  9. package/dist/css/pkt.min.css +1 -1
  10. package/dist/scss/components/_inputwrapper.scss +54 -19
  11. package/dist/scss/components/_textinput.scss +49 -127
  12. package/package.json +2 -2
package/dist/scss/components/_inputwrapper.scss CHANGED
@@ -111,30 +111,65 @@
111
111
  }
112
112
 
113
113
  .pkt-textinput__input:hover,
114
- .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,
115
- .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,
116
- .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix,
117
- .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,
118
- .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
114
+ .pkt-textinput__container:hover .pkt-textinput__input,
115
+ .pkt-textinput__container:hover .pkt-textinput__input-prefix,
116
+ .pkt-textinput__container:hover .pkt-textinput__input-suffix,
117
+ .pkt-textinput__container:hover .pkt-textinput__input-icon {
119
118
  border-color: var(--color-red);
120
119
  }
121
120
 
122
121
  .pkt-textinput__input:focus-within,
123
- .pkt-textinput__input-prefix-wrapper:focus-within
124
- .pkt-textinput__input-icon,
125
- .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input,
126
- .pkt-textinput__input-prefix-wrapper:focus-within
127
- .pkt-textinput__input-prefix,
128
- .pkt-textinput__input-prefix-wrapper:focus-within
129
- .pkt-textinput__input-icon,
130
- .pkt-textinput__input-suffix-wrapper:focus-within
131
- .pkt-textinput__input-icon,
132
- .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input,
133
- .pkt-textinput__input-suffix-wrapper:focus-within
134
- .pkt-textinput__input-suffix,
135
- .pkt-textinput__input-suffix-wrapper:focus-within
136
- .pkt-textinput__input-icon {
122
+ .pkt-textinput__container:focus-within .pkt-textinput__input,
123
+ .pkt-textinput__container:focus-within .pkt-textinput__input-prefix,
124
+ .pkt-textinput__container:focus-within .pkt-textinput__input-suffix,
125
+ .pkt-textinput__container:focus-within .pkt-textinput__input-icon {
137
126
  border-color: var(--color-red);
138
127
  }
139
128
  }
129
+
130
+ &--disabled {
131
+ color: var(--color-disabled);
132
+ cursor: inherit;
133
+
134
+ .pkt-textinput__input,
135
+ .pkt-textinput__input-prefix,
136
+ .pkt-textinput__input-suffix,
137
+ .pkt-textinput__input-icon {
138
+ border-color: var(--color-disabled);
139
+ background-color: var(--color-disabled-light);
140
+ }
141
+
142
+ .pkt-textinput__container:hover .pkt-textinput__input,
143
+ .pkt-textinput__container:hover .pkt-textinput__input-prefix,
144
+ .pkt-textinput__container:hover .pkt-textinput__input-suffix,
145
+ .pkt-textinput__container:hover .pkt-textinput__input-icon {
146
+ border-color: var(--color-disabled);
147
+ }
148
+
149
+ .pkt-textinput__input:hover {
150
+ border-color: var(--color-disabled);
151
+ box-shadow: none;
152
+ }
153
+
154
+ .pkt-textinput__input:focus {
155
+ border-color: var(--color-disabled);
156
+ box-shadow: none;
157
+ outline: none;
158
+ }
159
+
160
+ .pkt-textinput__container:active .pkt-textinput__input {
161
+ border-right: none;
162
+ box-shadow: none;
163
+ outline: none;
164
+ }
165
+ }
166
+ // Dark mode
167
+ @at-root [data-mode='dark'] {
168
+ .pkt-textinput__input-prefix,
169
+ .pkt-textinput__input-suffix,
170
+ .pkt-textinput__input-icon {
171
+ background-color: var(--color-white);
172
+ color: var(--color-blue-dark);
173
+ }
174
+ }
140
175
  }
package/dist/scss/components/_textinput.scss CHANGED
@@ -49,6 +49,7 @@
49
49
  &:disabled,
50
50
  &:disabled::placeholder,
51
51
  &[readonly] {
52
+ opacity: 1;
52
53
  background-color: var(--color-disabled-light);
53
54
  border-color: var(--color-disabled);
54
55
  cursor: inherit;
@@ -58,46 +59,19 @@
58
59
  border: 2px solid var(--color-disabled);
59
60
  }
60
61
 
61
- &-prefix-wrapper {
62
- display: flex;
63
- align-items: center;
64
- align-self: stretch;
65
-
66
- :not(:first-child) {
67
- border-left: none;
68
- }
69
-
70
- :first-child {
71
- border-right: none;
72
- }
73
-
74
- //states
75
- & input:focus {
76
- box-shadow: none;
77
- }
78
-
79
- &:hover .pkt-textinput__input,
80
- &:hover .pkt-textinput__input-prefix {
81
- border-color: var(--color-hover);
82
- }
83
-
84
- &:focus-within {
85
- outline: 2px solid var(--color-active);
86
- }
87
-
88
- &:focus-within .pkt-textinput__input,
89
- &:focus-within .pkt-textinput__input-prefix {
90
- border-color: var(--color-active);
91
- }
92
- }
93
-
94
- &-prefix {
62
+ &-prefix,
63
+ &-suffix,
64
+ &-icon {
95
65
  @include typography.get-text('pkt-txt-18-light');
96
- align-items: center;
97
66
  display: flex;
67
+ align-items: center;
98
68
  width: auto;
99
69
  height: 3rem;
100
70
  border: 2px solid var(--color-blue-dark);
71
+ flex-shrink: 0;
72
+ }
73
+
74
+ &-prefix {
101
75
  padding: 0.5rem 0rem 0.5rem 1rem;
102
76
 
103
77
  &::after {
@@ -109,54 +83,8 @@
109
83
  }
110
84
  }
111
85
 
112
- &-suffix-wrapper {
113
- display: flex;
114
- align-items: center;
115
- align-self: stretch;
116
-
117
- :not(:first-child) {
118
- border-left: none;
119
- }
120
-
121
- :first-child {
122
- border-right: none;
123
- }
124
-
125
- p {
126
- margin: 0;
127
- }
128
-
129
- //states
130
- & input:focus {
131
- box-shadow: none;
132
- }
133
-
134
- &:hover .pkt-textinput__input,
135
- &:hover .pkt-textinput__input-suffix,
136
- &:hover .pkt-textinput__input-icon {
137
- border-color: var(--color-hover);
138
- }
139
-
140
- &:focus-within {
141
- outline: 2px solid var(--color-active);
142
- }
143
-
144
- &:focus-within .pkt-textinput__input-icon,
145
- &:focus-within .pkt-textinput__input,
146
- &:focus-within .pkt-textinput__input-suffix,
147
- &:focus-within .pkt-textinput__input-icon {
148
- border-color: var(--color-active);
149
- }
150
- }
151
-
152
86
  &-suffix {
153
- @include typography.get-text('pkt-txt-18-light');
154
- display: flex;
155
- align-items: center;
156
- width: auto;
157
- border: 2px solid var(--color-blue-dark);
158
87
  padding: 0.5rem 1rem 0.5rem 0rem;
159
- flex-shrink: 0;
160
88
 
161
89
  svg {
162
90
  width: 1.5rem;
@@ -174,13 +102,8 @@
174
102
  }
175
103
 
176
104
  &-icon {
177
- @include typography.get-text('pkt-txt-18-light');
178
- display: flex;
179
- flex-shrink: 0;
180
105
  padding: 0.5rem 1rem;
181
- align-items: center;
182
106
  align-self: stretch;
183
- border: 2px solid var(--color-blue-dark);
184
107
 
185
108
  & svg {
186
109
  width: 1.5rem;
@@ -188,6 +111,7 @@
188
111
  margin-left: 0.5rem;
189
112
  }
190
113
  }
114
+
191
115
  &--counter-error,
192
116
  &--counter-error:focus {
193
117
  border-color: var(--color-red);
@@ -198,61 +122,59 @@
198
122
  }
199
123
  }
200
124
 
201
- &__counter {
202
- @include typography.get-text('pkt-txt-14-light');
203
- width: 100%;
204
- text-align: right;
205
- &--error {
206
- @include typography.get-text('pkt-txt-14-medium');
207
- color: var(--color-red);
125
+ &__container {
126
+ display: flex;
127
+ align-items: center;
128
+ align-self: stretch;
129
+
130
+ :first-child:not(:only-child) {
131
+ border-right: none;
208
132
  }
209
- }
210
133
 
211
- // Modifiers
212
- @at-root .pkt-inputwrapper--disabled {
213
- color: var(--color-disabled);
214
- cursor: inherit;
134
+ :last-child:not(:only-child) {
135
+ border-left: none;
136
+ }
215
137
 
216
- .pkt-textinput__input,
217
- .pkt-textinput__input-prefix,
218
- .pkt-textinput__input-suffix,
219
- .pkt-textinput__input-icon {
220
- border-color: var(--color-disabled);
221
- background-color: var(--color-disabled-light);
138
+ :not(:first-child):not(:last-child) {
139
+ border-left: none;
140
+ border-right: none;
222
141
  }
223
142
 
224
- .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,
225
- .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,
226
- .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix,
227
- .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,
228
- .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
229
- border-color: var(--color-disabled);
143
+ p {
144
+ margin: 0;
230
145
  }
231
146
 
232
- .pkt-textinput__input:hover {
233
- border-color: var(--color-disabled);
147
+ //states
148
+ & input:focus {
234
149
  box-shadow: none;
235
150
  }
236
151
 
237
- .pkt-textinput__input:focus {
238
- border-color: var(--color-disabled);
239
- box-shadow: none;
240
- outline: none;
152
+ &:hover .pkt-textinput__input,
153
+ &:hover .pkt-textinput__input-prefix,
154
+ &:hover .pkt-textinput__input-suffix,
155
+ &:hover .pkt-textinput__input-icon {
156
+ border-color: var(--color-hover);
241
157
  }
242
158
 
243
- .pkt-textinput__input-suffix-wrapper:active .pkt-textinput__input {
244
- border-right: none;
245
- box-shadow: none;
246
- outline: none;
159
+ &:focus-within {
160
+ outline: 2px solid var(--color-active);
161
+
162
+ .pkt-textinput__input,
163
+ .pkt-textinput__input-prefix,
164
+ .pkt-textinput__input-suffix,
165
+ .pkt-textinput__input-icon {
166
+ border-color: var(--color-active);
167
+ }
247
168
  }
248
169
  }
249
- // Dark mode
250
- @at-root [data-mode='dark'] {
251
- .pkt-textinput__input-prefix,
252
- .pkt-textinput__input-suffix,
253
- .pkt-textinput__input-icon {
254
- background-color: var(--color-white);
255
- color: var(--color-blue-dark);
170
+
171
+ &__counter {
172
+ @include typography.get-text('pkt-txt-14-light');
173
+ width: 100%;
174
+ text-align: right;
175
+ &--error {
176
+ @include typography.get-text('pkt-txt-14-medium');
177
+ color: var(--color-red);
256
178
  }
257
179
  }
258
180
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oslokommune/punkt-css",
3
- "version": "7.1.0",
3
+ "version": "7.1.5",
4
4
  "description": "CSS-rammeverket til Punkt, et designsystem laget av Oslo Origo",
5
5
  "homepage": "https://punkt.oslo.kommune.no",
6
6
  "author": "Team Designsystem, Oslo Origo",
@@ -55,5 +55,5 @@
55
55
  "url": "https://github.com/oslokommune/punkt/issues"
56
56
  },
57
57
  "license": "MIT",
58
- "gitHead": "dcec40e58a429f359225bb12acaa90755c41a4af"
58
+ "gitHead": "cf227293c759b7fc74dd5deba2553838cf63fa7d"
59
59
  }