@carbon/styles 1.12.0-rc.1 → 1.12.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/css/styles.css +129 -9
- package/css/styles.min.css +1 -1
- package/package.json +4 -4
- package/scss/components/_index.scss +1 -0
- package/scss/components/fluid-text-input/_fluid-text-input.scss +125 -0
- package/scss/components/fluid-text-input/_index.scss +11 -0
- package/scss/components/text-input/_text-input.scss +27 -11
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/styles",
|
|
3
3
|
"description": "Styles for the Carbon Design System",
|
|
4
|
-
"version": "1.12.0
|
|
4
|
+
"version": "1.12.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
"@carbon/grid": "^11.5.0",
|
|
38
38
|
"@carbon/layout": "^11.5.0",
|
|
39
39
|
"@carbon/motion": "^11.3.0",
|
|
40
|
-
"@carbon/themes": "^11.
|
|
41
|
-
"@carbon/type": "^11.
|
|
40
|
+
"@carbon/themes": "^11.8.0",
|
|
41
|
+
"@carbon/type": "^11.8.0",
|
|
42
42
|
"@ibm/plex": "6.0.0-next.6"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"scss/**/*.css",
|
|
60
60
|
"css/**/*.css"
|
|
61
61
|
],
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "e3e4c8ce2fba7e4510764c70205b8cb57ccba8e1"
|
|
63
63
|
}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright IBM Corp. 2018, 2018
|
|
3
|
+
//
|
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
|
6
|
+
//
|
|
7
|
+
|
|
8
|
+
//-----------------------------
|
|
9
|
+
// Fluid Text Input
|
|
10
|
+
//-----------------------------
|
|
11
|
+
@use '../../config' as *;
|
|
12
|
+
@use '../../motion' as *;
|
|
13
|
+
@use '../../spacing' as *;
|
|
14
|
+
@use '../../theme' as *;
|
|
15
|
+
@use '../../utilities/convert' as *;
|
|
16
|
+
@use '../../utilities/focus-outline' as *;
|
|
17
|
+
@use '../text-input';
|
|
18
|
+
|
|
19
|
+
@mixin fluid-text-input {
|
|
20
|
+
.#{$prefix}--text-input--fluid.#{$prefix}--text-input-wrapper {
|
|
21
|
+
position: relative;
|
|
22
|
+
height: 100%;
|
|
23
|
+
background: $field;
|
|
24
|
+
transition: background-color $duration-fast-01 motion(standard, productive),
|
|
25
|
+
outline $duration-fast-01 motion(standard, productive);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.#{$prefix}--text-input--fluid .#{$prefix}--label {
|
|
29
|
+
position: absolute;
|
|
30
|
+
z-index: 1;
|
|
31
|
+
top: rem(13px);
|
|
32
|
+
left: $spacing-05;
|
|
33
|
+
display: flex;
|
|
34
|
+
height: rem(16px);
|
|
35
|
+
align-items: center;
|
|
36
|
+
margin: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.#{$prefix}--text-input--fluid .#{$prefix}--form__helper-text {
|
|
40
|
+
display: none;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.#{$prefix}--text-input--fluid .#{$prefix}--text-input {
|
|
44
|
+
min-height: rem(64px);
|
|
45
|
+
padding: rem(32px) $spacing-05 rem(13px);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.#{$prefix}--text-input__divider,
|
|
49
|
+
.#{$prefix}--text-input--fluid .#{$prefix}--text-input__divider {
|
|
50
|
+
display: none;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.#{$prefix}--text-input--fluid
|
|
54
|
+
.#{$prefix}--text-input__field-wrapper[data-invalid],
|
|
55
|
+
.#{$prefix}--text-input--fluid
|
|
56
|
+
.#{$prefix}--text-input__field-wrapper--warning {
|
|
57
|
+
display: block;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.#{$prefix}--text-input--fluid input[data-invalid] {
|
|
61
|
+
outline: none;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.#{$prefix}--text-input--fluid .#{$prefix}--form-requirement {
|
|
65
|
+
padding: $spacing-03 rem(40px) $spacing-03 $spacing-05;
|
|
66
|
+
margin: 0;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.#{$prefix}--text-input--fluid .#{$prefix}--text-input--invalid,
|
|
70
|
+
.#{$prefix}--text-input--fluid .#{$prefix}--text-input--warning {
|
|
71
|
+
border-bottom: none;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.#{$prefix}--text-input--fluid
|
|
75
|
+
.#{$prefix}--text-input--invalid
|
|
76
|
+
+ .#{$prefix}--text-input__divider,
|
|
77
|
+
.#{$prefix}--text-input--fluid
|
|
78
|
+
.#{$prefix}--text-input--warning
|
|
79
|
+
+ .#{$prefix}--text-input__divider {
|
|
80
|
+
display: block;
|
|
81
|
+
border-style: solid;
|
|
82
|
+
border-color: $border-subtle;
|
|
83
|
+
border-bottom: none;
|
|
84
|
+
margin: 0 1rem;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.#{$prefix}--text-input--fluid .#{$prefix}--text-input__invalid-icon {
|
|
88
|
+
top: rem(80px);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.#{$prefix}--text-input--fluid
|
|
92
|
+
.#{$prefix}--text-input__field-wrapper[data-invalid]
|
|
93
|
+
> .#{$prefix}--text-input--invalid,
|
|
94
|
+
.#{$prefix}--text-input--fluid
|
|
95
|
+
.#{$prefix}--text-input__field-wrapper--warning
|
|
96
|
+
> .#{$prefix}--text-input--warning {
|
|
97
|
+
outline: none;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.#{$prefix}--text-input--fluid
|
|
101
|
+
.#{$prefix}--text-input__field-wrapper--warning {
|
|
102
|
+
border-bottom: 1px solid $border-strong;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.#{$prefix}--text-input--fluid
|
|
106
|
+
.#{$prefix}--text-input__field-wrapper[data-invalid]:not(:focus) {
|
|
107
|
+
@include focus-outline('invalid');
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.#{$prefix}--text-input--fluid
|
|
111
|
+
.#{$prefix}--text-input__field-wrapper[data-invalid]:focus-within,
|
|
112
|
+
.#{$prefix}--text-input--fluid
|
|
113
|
+
.#{$prefix}--text-input__field-wrapper--warning:focus-within {
|
|
114
|
+
@include focus-outline('outline');
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.#{$prefix}--text-input--fluid
|
|
118
|
+
.#{$prefix}--text-input__field-wrapper[data-invalid]
|
|
119
|
+
> .#{$prefix}--text-input--invalid:focus,
|
|
120
|
+
.#{$prefix}--text-input--fluid
|
|
121
|
+
.#{$prefix}--text-input__field-wrapper--warning
|
|
122
|
+
> .#{$prefix}--text-input--warning:focus {
|
|
123
|
+
outline: none;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright IBM Corp. 2018, 2018
|
|
3
|
+
//
|
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
|
6
|
+
//
|
|
7
|
+
|
|
8
|
+
@forward 'fluid-text-input';
|
|
9
|
+
@use 'fluid-text-input';
|
|
10
|
+
|
|
11
|
+
@include fluid-text-input.fluid-text-input;
|
|
@@ -248,6 +248,8 @@
|
|
|
248
248
|
@include skeleton;
|
|
249
249
|
}
|
|
250
250
|
|
|
251
|
+
// Deprecated -- Styles have been moved to `fluid-text-input.scss`
|
|
252
|
+
// V12 - Remove this block
|
|
251
253
|
//-----------------------------
|
|
252
254
|
// Fluid Text Input
|
|
253
255
|
//-----------------------------
|
|
@@ -263,6 +265,9 @@
|
|
|
263
265
|
z-index: 1;
|
|
264
266
|
top: rem(13px);
|
|
265
267
|
left: $spacing-05;
|
|
268
|
+
display: flex;
|
|
269
|
+
height: rem(16px);
|
|
270
|
+
align-items: center;
|
|
266
271
|
margin: 0;
|
|
267
272
|
}
|
|
268
273
|
|
|
@@ -281,7 +286,7 @@
|
|
|
281
286
|
}
|
|
282
287
|
|
|
283
288
|
.#{$prefix}--form--fluid .#{$prefix}--text-input--invalid,
|
|
284
|
-
.#{$prefix}--form--fluid .#{$prefix}--text-input--
|
|
289
|
+
.#{$prefix}--form--fluid .#{$prefix}--text-input--warning {
|
|
285
290
|
border-bottom: none;
|
|
286
291
|
}
|
|
287
292
|
|
|
@@ -289,7 +294,7 @@
|
|
|
289
294
|
.#{$prefix}--text-input--invalid
|
|
290
295
|
+ .#{$prefix}--text-input__divider,
|
|
291
296
|
.#{$prefix}--form--fluid
|
|
292
|
-
.#{$prefix}--text-input--
|
|
297
|
+
.#{$prefix}--text-input--warning
|
|
293
298
|
+ .#{$prefix}--text-input__divider {
|
|
294
299
|
display: block;
|
|
295
300
|
border-style: solid;
|
|
@@ -302,15 +307,17 @@
|
|
|
302
307
|
top: rem(80px);
|
|
303
308
|
}
|
|
304
309
|
|
|
305
|
-
// V11: Possibly deprecate
|
|
306
|
-
.#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper--light {
|
|
307
|
-
background: $field-02;
|
|
308
|
-
}
|
|
309
|
-
|
|
310
310
|
.#{$prefix}--form--fluid
|
|
311
311
|
.#{$prefix}--text-input__field-wrapper[data-invalid]
|
|
312
|
-
> .#{$prefix}--text-input--invalid
|
|
313
|
-
|
|
312
|
+
> .#{$prefix}--text-input--invalid,
|
|
313
|
+
.#{$prefix}--form--fluid
|
|
314
|
+
.#{$prefix}--text-input__field-wrapper--warning
|
|
315
|
+
> .#{$prefix}--text-input--warning {
|
|
316
|
+
outline: none;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.#{$prefix}--form--fluid .#{$prefix}--text-input__field-wrapper--warning {
|
|
320
|
+
border-bottom: 1px solid $border-strong;
|
|
314
321
|
}
|
|
315
322
|
|
|
316
323
|
.#{$prefix}--form--fluid
|
|
@@ -319,11 +326,20 @@
|
|
|
319
326
|
}
|
|
320
327
|
|
|
321
328
|
.#{$prefix}--form--fluid
|
|
322
|
-
.#{$prefix}--text-input__field-wrapper[data-invalid]
|
|
323
|
-
|
|
329
|
+
.#{$prefix}--text-input__field-wrapper[data-invalid]:focus-within,
|
|
330
|
+
.#{$prefix}--form--fluid
|
|
331
|
+
.#{$prefix}--text-input__field-wrapper--warning:focus-within {
|
|
324
332
|
@include focus-outline('outline');
|
|
325
333
|
}
|
|
326
334
|
|
|
335
|
+
.#{$prefix}--form--fluid
|
|
336
|
+
.#{$prefix}--text-input__field-wrapper[data-invalid]
|
|
337
|
+
> .#{$prefix}--text-input--invalid:focus,
|
|
338
|
+
.#{$prefix}--form--fluid
|
|
339
|
+
.#{$prefix}--text-input__field-wrapper--warning
|
|
340
|
+
> .#{$prefix}--text-input--warning:focus {
|
|
341
|
+
outline: none;
|
|
342
|
+
}
|
|
327
343
|
//-----------------------------
|
|
328
344
|
// Inline Text Input
|
|
329
345
|
//-----------------------------
|